Sponsored by Deepsite.site

Multi-Component System with A2A and MCP Server Integration

Created By
BulloRosso7 months ago
An agent playground (without authentication) in a single repo for fastest turn around cycles during experiments.
Content

Multi-Component System with A2A and MCP Server Integration

This project is a scalable, multi-component system built with modern web technologies.

Architecture Overview

The system consists of several decoupled components that work together:

  1. Frontend: React/TypeScript application with Material-UI, built using Vite
  2. Backend API: Python/FastAPI service providing API endpoints
  3. Proxy Server: Node.js proxy that routes requests to the appropriate services
  4. A2A Server: Agent-to-Agent server implementation following the Google A2A protocol
  5. MCP Server: Anthropic Model Context Protocol server providing tools, resources, and prompts

Architecture Diagram

Components

Frontend

  • Modern React application with TypeScript
  • Material-UI for component styling
  • State management with Zustand
  • Responsive dashboard UI
  • Client implementations for both A2A and MCP protocols

Backend API

  • FastAPI (Python) backend
  • Health check endpoints
  • API documentation with Redoc at /api/doc
  • API methods listing at /api/api/v1/methods

Proxy Server

  • Node.js-based reverse proxy
  • Routes requests to appropriate services:
    • Frontend requests → Vite development server
    • API requests → FastAPI backend
    • A2A requests → A2A server
    • MCP/SSE requests → MCP server
  • WebSocket support for real-time communication

A2A Server

  • Implementation of the Google A2A protocol
  • Enables agent-to-agent communication
  • Provides task management and messaging capabilities
  • Supports both direct requests and streaming updates

MCP Server (Python)

  • Python/FastAPI implementation of the Anthropic Model Context Protocol
  • Provides tools, resources, and prompts for agents
  • Supports Server-Sent Events (SSE) for real-time updates
  • Dual path structure (/endpoint and /sse/endpoint)

Server Integrations

A2A Server Integration

The A2A server is integrated with the main application via the proxy server. Requests to the following endpoints are routed to the A2A server:

  • /.well-known/agent.json: Agent information and capabilities
  • /tasks: Task management endpoint for JSON-RPC requests
  • /agent-card/*: All requests to this path (any HTTP method) are routed to the A2A server

See the A2A server documentation for more details on implementation and usage.

MCP Server Integration

The MCP (Anthropic Model Context Protocol) server is integrated with the main application via the proxy server. Requests to the following endpoints are routed to the MCP server:

  • /sse/*: All SSE endpoints (status, tools, resources, prompts)
  • /sse: The SSE event stream endpoint

The MCP server provides:

  • Tools API: Functions that can be called to perform actions
  • Resources API: Static files and data that can be downloaded
  • Prompts API: Templates for generating LLM prompts
  • Server-Sent Events (SSE): Real-time updates and streaming

See the MCP server documentation and MCP client documentation for more details.

Development

Prerequisites

  • Node.js 20+
  • Python 3.11+
  • npm or yarn

Running the Application

The application is divided into multiple services, each running in its own process:

  1. API Backend:

    cd api
    pip install -r requirements.txt
    python main.py
    
  2. Frontend Development Server:

    cd frontend
    npm install
    npm run dev
    
  3. Proxy Server:

    node proxy-server.js
    
  4. A2A Server:

    cd a2a-server
    node simple-server.js  # JavaScript implementation
    # or for TypeScript implementation (if compiled)
    # node dist/main.js
    
  5. MCP Server:

    cd mcp-server
    pip install -r requirements.txt
    python mcp_server.py
    

Running Tests

Integration tests are available for the A2A server:

cd tests
node run-tests.js  # Runs all A2A server tests

API Endpoints

Backend API

  • GET /health: Health check endpoint
  • GET /api/v1/methods: List of available API methods
  • GET /api/doc: API documentation (Redoc)

A2A Server

  • GET /.well-known/agent.json: Agent card information
  • POST /tasks: JSON-RPC endpoint for task operations:
    • tasks/send: Send a message to the agent
    • tasks/sendSubscribe: Send a message with streaming updates
    • tasks/get: Get task information by ID
    • tasks/cancel: Cancel a running task

MCP Server

  • GET /status or GET /sse/status: Server status and available resources
  • GET /tools or GET /sse/tools: List of available tools
  • POST /tools/{name} or POST /sse/tools/{name}: Execute a tool
  • GET /resources or GET /sse/resources: List of available resources
  • GET /resources/{name} or GET /sse/resources/{name}: Get a specific resource
  • GET /prompts or GET /sse/prompts: List of available prompt templates
  • POST /prompts/{name} or POST /sse/prompts/{name}: Generate a prompt
  • GET /sse: Server-Sent Events (SSE) connection for real-time updates
Recommend Servers
TraeBuild with Free GPT-4.1 & Claude 3.7. Fully MCP-Ready.
TimeA Model Context Protocol server that provides time and timezone conversion capabilities. This server enables LLMs to get current time information and perform timezone conversions using IANA timezone names, with automatic system timezone detection.
WindsurfThe new purpose-built IDE to harness magic
CursorThe AI Code Editor
Serper MCP ServerA Serper MCP Server
EdgeOne Pages MCPAn MCP service designed for deploying HTML content to EdgeOne Pages and obtaining an accessible public URL.
AiimagemultistyleA Model Context Protocol (MCP) server for image generation and manipulation using fal.ai's Stable Diffusion model.
MiniMax MCPOfficial MiniMax Model Context Protocol (MCP) server that enables interaction with powerful Text to Speech, image generation and video generation APIs.
MCP AdvisorMCP Advisor & Installation - Use the right MCP server for your needs
Tavily Mcp
Zhipu Web SearchZhipu Web Search MCP Server is a search engine specifically designed for large models. It integrates four search engines, allowing users to flexibly compare and switch between them. Building upon the web crawling and ranking capabilities of traditional search engines, it enhances intent recognition capabilities, returning results more suitable for large model processing (such as webpage titles, URLs, summaries, site names, site icons, etc.). This helps AI applications achieve "dynamic knowledge acquisition" and "precise scenario adaptation" capabilities.
Baidu Map百度地图核心API现已全面兼容MCP协议,是国内首家兼容MCP协议的地图服务商。
ChatWiseThe second fastest AI chatbot™
Playwright McpPlaywright MCP server
DeepChatYour AI Partner on Desktop
Jina AI MCP ToolsA Model Context Protocol (MCP) server that integrates with Jina AI Search Foundation APIs.
Visual Studio Code - Open Source ("Code - OSS")Visual Studio Code
Howtocook Mcp基于Anduin2017 / HowToCook (程序员在家做饭指南)的mcp server,帮你推荐菜谱、规划膳食,解决“今天吃什么“的世纪难题; Based on Anduin2017/HowToCook (Programmer's Guide to Cooking at Home), MCP Server helps you recommend recipes, plan meals, and solve the century old problem of "what to eat today"
Context7Context7 MCP Server -- Up-to-date code documentation for LLMs and AI code editors
BlenderBlenderMCP connects Blender to Claude AI through the Model Context Protocol (MCP), allowing Claude to directly interact with and control Blender. This integration enables prompt assisted 3D modeling, scene creation, and manipulation.
Amap Maps高德地图官方 MCP Server