AI导哈

聊天应用

一个全栈聊天应用，演示了使用流式HTTP传输（SSE）的模型上下文协议（MCP）概念，采用React前端和Python FastAPI后端，并集成OpenRouter作为LLM提供商。

  • by kunjalb2
  • Python
  • 本地部署
  • 更新于
在 GitHub 查看 kunjalb2/open-mcp-assistant

使用说明

MCP聊天应用程序

一个使用流式HTTP传输（SSE）演示模型上下文协议（MCP）概念的全栈聊天应用程序。使用React（前端）和Python FastAPI（后端）构建，OpenRouter作为LLM提供者。

特性

  • MCP实施：基于HTTP的JSON-RPC 2.0，支持SSE流媒体
  • 工具支持：演示使用天气工具调用MCP工具
  • 流媒体响应：来自LLM的实时令牌流
  • 现代用户界面：干净、响应迅速的聊天界面
  • OpenRouter集成：使用具有可配置模型的OpenRouter API

建筑

┌─────────────────┐     HTTP POST      ┌─────────────────────┐
│  React          │ ──────────────────>│   FastAPI Backend   │
│  Frontend       │   (user message)   │   (MCP Server)      │
│                 │<────────────────── │                     │
└─────────────────┘     SSE Stream     └─────────────────────┘
                                │
                    ┌───────────┼───────────┐
                    ▼           ▼           ▼
                ┌───────┐  ┌───────┐  ┌───────────┐
                │  MCP  │  │ Tools │  │   LLM    │
                │ Layer │  │ Layer │  │  Layer   │
                └───────┘  └───────┘  └───────────┘

项目结构

kunjal-mcp/
├── backend/              # Python FastAPI backend
│   ├── app/
│   │   ├── main.py       # FastAPI app entry point
│   │   ├── config.py     # Configuration management
│   │   ├── mcp/          # MCP implementation
│   │   ├── tools/        # Tool implementations
│   │   └── llm/          # LLM client (OpenRouter)
│   └── requirements.txt
├── frontend/             # React + Vite frontend
│   └── src/
│       ├── App.jsx       # Main app component
│       ├── components/   # React components
│       ├── hooks/        # Custom hooks
│       └── api/          # API client
└── README.md

设置

先决条件

后端设置

cd backend

# Create virtual environment
python3 -m venv venv

# Activate virtual environment
source venv/bin/activate  # On Windows: venv\Scripts\activate

# Install dependencies
pip install -r requirements.txt

# Create .env file
cp .env.example .env
# Edit .env and add your OPENROUTER_API_KEY

# Run the server
uvicorn app.main:app --reload

后端将在上运行 http://localhost:8000

前端设置

cd frontend

# Install dependencies
npm install

# Run development server
npm run dev

前端将运行在 http://localhost:5173

环境变量

创建一个 .env 文件在 backend 目录：

# Required: Your OpenRouter API key
OPENROUTER_API_KEY=sk-or-your-key-here

# Optional: Frontend URL for CORS (default: http://localhost:5173)
FRONTEND_URL=http://localhost:5173

# Optional: Server settings
HOST=0.0.0.0
PORT=8000
RELOAD=true

用法

  1. 启动后端和前端服务器
  2. 打开浏览器 http://localhost:5173
  3. 开始聊天！

尝试这些命令

  • “东京的天气怎么样？”-测试工具调用
  • “给我讲个小故事”-测试流媒体响应
  • “比较巴黎和伦敦的天气”-测试多个工具调用

API终点

POST /api/chat

发送聊天消息并接收流媒体响应。

请求：

{
  "message": "What's the weather in Tokyo?",
  "conversation_history": []
}

答复： SSE文本块流

GET /api/tools

列出可用的MCP工具。

答复：

{
  "tools": [
    {
      "name": "get_weather",
      "description": "Get the current weather...",
      "inputSchema": {...}
    }
  ]
}

POST /api/mcp

直接MCP JSON-RPC端点。

支持的方法：

  • tools/list -列出可用工具
  • tools/call -执行工具
  • ping -健康检查

发展

添加新工具

  1. 在中创建新文件 backend/app/tools/:
from app.tools.base import BaseTool

class MyTool(BaseTool):
    @property
    def name(self) -> str:
        return "my_tool"

    @property
    def description(self) -> str:
        return "Description of my tool"

    @property
    def input_schema(self) -> dict:
        return {
            "type": "object",
            "properties": {
                "param": {"type": "string"}
            },
            "required": ["param"]
        }

    async def execute(self, **kwargs):
        return {"result": "Tool executed"}
  1. 在中注册 app/mcp/server.py:
from app.tools.my_tool import MyTool

# In _register_default_tools:
self.register_tool(MyTool())

更改LLM模型

编辑 backend/app/config.py:

DEFAULT_MODEL: str = "anthropic/claude-3-haiku"  # Or any OpenRouter model

许可证

麻省理工学院

相关 MCP