A2A Protocol + Kaibanjs Demo

This demo showcases the integration of the A2A (Agent-to-Agent) Protocol with Kaibanjs, demonstrating how AI agents can communicate and collaborate using standardized protocols.

Architecture

• Server: Express.js server with A2A Protocol SDK
• Client: React application with Vite build tool and A2A client
• Agents: Kaibanjs multi-agent system with web search and summarization capabilities

Features

• 🤖 A2A Protocol Integration: Full implementation of Agent-to-Agent communication
• 🔍 Web Search: Real-time web search using Tavily API
• 📝 Content Summarization: AI-powered content summarization
• 📊 Real-time Streaming: Live updates of agent workflow logs
• 🎨 Modern UI: Clean React interface built with Vite and Tailwind CSS

Quick Start

Prerequisites

• Node.js 18+
• npm or pnpm
• API keys for OpenAI, and Tavily

Installation

1. Clone and install dependencies:

   npm run install:all

2. Configure environment variables:

   # Copy server environment template
   cp server/env.example server/.env
   
   # Edit server/.env with your API keys:
   # OPENAI_API_KEY=your_key_here
   # TAVILY_API_KEY=your_key_here

3. Start the development servers:

   npm run dev

   This will start:

   • A2A Server on http://localhost:4000
   • React Client on http://localhost:5173

Usage

1. Open http://localhost:5173 in your browser
2. Click "Connect to Server" to establish A2A connection
3. Enter a research query (e.g., "What are the latest developments in AI?")
4. Watch real-time logs as agents collaborate
5. View the final research results

Project Structure

a2a-kaibanjs-demo/
├── server/                 # A2A Protocol Server
│   ├── src/
│   │   ├── index.ts       # Express server setup
│   │   ├── agent-executor.ts  # A2A AgentExecutor implementation
│   │   ├── agent-card.ts      # Agent capabilities definition
│   │   └── kaibanjs-team.ts   # Kaibanjs team configuration
│   └── package.json
├── client/                 # React A2A Client with Vite
│   ├── src/
│   │   ├── components/    # UI components
│   │   ├── stores/        # Zustand state management
│   │   └── App.tsx        # Main application
│   ├── package.json       # Dependencies including Vite
│   └── vite.config.ts     # Vite configuration
└── package.json           # Workspace configuration

How It Works

1. A2A Protocol Communication

• Client connects to server using Agent Card discovery
• Messages sent via A2A Protocol standard
• Real-time streaming of agent status updates

2. Kaibanjs Multi-Agent System

• Scout Agent: Performs web search using Tavily API
• Writer Agent: Creates comprehensive summaries
• Team Coordination: Orchestrates agent collaboration

3. Real-time Updates

• Server streams workflow logs to client
• Client displays live progress updates
• Final results delivered via A2A artifacts

API Endpoints

• GET /.well-known/agent-card.json - Agent capabilities
• POST /message - Send messages to agent
• GET /health - Server health check

Environment Variables

Server (.env)

PORT=4000
BASE_URL=http://localhost:4000
OPENAI_API_KEY=your_openai_key
TAVILY_API_KEY=your_tavily_key

Deployment

Vercel Deployment

1. Build the project:

   npm run build

2. Deploy to Vercel:

   • Server: Deploy server/ as Vercel Functions
   • Client: Deploy client/dist/ as static site (built with Vite)

3. Configure environment variables in Vercel dashboard

Deployment

Vercel Deployment

1. Prepare for deployment:

   # Install dependencies
   npm run install:all
   
   # Build the project
   npm run build

2. Deploy to Vercel:

   # Install Vercel CLI
   npm i -g vercel
   
   # Deploy
   vercel

3. Configure environment variables in Vercel dashboard:

   • OPENAI_API_KEY: Your OpenAI API key
   • TAVILY_API_KEY: Your Tavily API key
   • VITE_SERVER_URL: Your Vercel serverless function URL (auto-generated)

4. Project Structure for Vercel:

   • Server: Deployed as serverless functions in /api/*
   • Client: Deployed as static site (built with Vite)
   • Routes: Automatically configured via vercel.json

Manual Deployment Steps

1. Push to GitHub:

   git add .
   git commit -m "Ready for Vercel deployment"
   git push origin main

2. Connect to Vercel:

   • Go to vercel.com
   • Import your GitHub repository
   • Vercel will auto-detect the configuration

3. Environment Variables:

   • Add all required API keys in Vercel dashboard
   • The VITE_SERVER_URL will be automatically set

Technologies Used

• A2A Protocol: @a2a-js/sdk
• Kaibanjs: Multi-agent orchestration framework
• Express.js: Server framework
• React: Frontend framework
• Vite: Build tool and development server
• Tailwind CSS: Styling
• Zustand: State management
• Tavily: Web search API

Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Test thoroughly
5. Submit a pull request

License

MIT License - see LICENSE file for details