使用说明
MCP客户端服务器演示
A. 完整的端到端演示 的 模型上下文协议（MCP） --展示了人工智能聊天应用程序如何通过MCP连接到外部工具、数据和提示模板。
建筑
┌─────────────────────────────────────────────────────────────────────┐
│ FRONTEND (React) │
│ │
│ ┌──────────────────────┐ ┌────────────────────────────────────┐ │
│ │ Chat Panel │ │ MCP Explorer Panel │ │
│ │ │ │ │ │
│ │ User ←→ Claude │ │ Browse & test: │ │
│ │ (with tool use) │ │ • Tools (calculator, weather...) │ │
│ │ │ │ • Resources (server info, notes) │ │
│ │ │ │ • Prompts (summarize, review...) │ │
│ └──────────┬───────────┘ └──────────────┬─────────────────────┘ │
│ │ HTTP │ HTTP │
└─────────────┼───────────────────────────────┼───────────────────────┘
│ │
▼ ▼
┌─────────────────────────────────────────────────────────────────────┐
│ BACKEND (FastAPI) │
│ │
│ REST API endpoints: │
│ POST /api/chat → AI chat with tool use │
│ GET /api/tools → List MCP tools │
│ POST /api/tools/:name → Call a tool directly │
│ GET /api/resources → List MCP resources │
│ GET /api/resources/:uri → Read a resource │
│ GET /api/prompts → List MCP prompts │
│ POST /api/prompts/:name → Render a prompt template │
│ │
│ ┌────────────────────────────────────────────────────────────────┐ │
│ │ MCP CLIENT │ │
│ │ │ │
│ │ • Connects to MCP server via stdio transport │ │
│ │ • Discovers tools, resources, prompts │ │
│ │ • Integrates with Claude API for agentic tool-use loop │ │
│ └───────────────────────┬────────────────────────────────────────┘ │
└──────────────────────────┼──────────────────────────────────────────┘
│ stdio (stdin/stdout)
▼
┌─────────────────────────────────────────────────────────────────────┐
│ MCP SERVER │
│ │
│ TOOLS (functions the LLM can call): │
│ • calculator — add, subtract, multiply, divide │
│ • get_weather — weather for 5 cities │
│ • manage_notes — CRUD operations on notes │
│ • get_datetime — current date/time in various formats │
│ │
│ RESOURCES (data the LLM can read): │
│ • memo://server-info — server description │
│ • memo://available-cities — city weather data (JSON) │
│ • memo://notes/{title} — individual notes │
│ │
│ PROMPTS (reusable templates): │
│ • summarize — summarize text in various styles │
│ • code-review — review code for bugs & improvements │
│ • explain-concept — explain topics at different levels │
└─────────────────────────────────────────────────────────────────────┘
MCP的工作原理（端到端流）
1. User types: "What's the weather in Tokyo?"
│
▼
2. Frontend sends POST /api/chat { message: "..." }
│
▼
3. Backend's MCP Client sends message to Claude API
with MCP tools registered as Anthropic tools
│
▼
4. Claude decides to use the "get_weather" tool
and responds with a tool_use block
│
▼
5. MCP Client calls session.call_tool("get_weather", {city: "Tokyo"})
which sends the request to the MCP Server over stdio
│
▼
6. MCP Server executes the tool handler and returns the result
│
▼
7. MCP Client sends the tool result back to Claude
│
▼
8. Claude generates a natural language response using the tool result
│
▼
9. Response flows back: Claude → MCP Client → FastAPI → Frontend
三个MCP原语
| 图元 | 方向 | 描述 | 示例 |
|---|---|---|---|
| 工具 LLM→ 服务器 | LLM可以调用的功能 | calculator, get_weather |
|
| 资源 | 客户→ 服务器 | 客户端可以读取的数据/内容 | memo://server-info |
| 提示 | 客户→ 服务器 | 带参数的可重用提示模板 | summarize(text, style) |
项目结构
mcp-client-demo/
├── mcp_server/ # MCP Server
│ ├── __init__.py
│ └── server.py # Server with tools, resources, prompts
│
├── mcp_client/ # MCP Client library
│ ├── __init__.py
│ └── client.py # Client with Claude integration
│
├── backend/ # FastAPI backend
│ ├── __init__.py
│ └── app.py # REST API bridging frontend ↔ MCP
│
├── frontend/ # React frontend
│ ├── src/
│ │ ├── components/
│ │ │ ├── ui/ # shadcn/ui components
│ │ │ ├── ChatPanel.jsx
│ │ │ └── ExplorerPanel.jsx
│ │ ├── lib/
│ │ │ ├── api.js # API client
│ │ │ └── utils.js # Utility functions
│ │ ├── App.jsx # Main app layout
│ │ ├── main.jsx # Entry point
│ │ └── index.css # Tailwind + shadcn theme
│ ├── package.json
│ └── vite.config.js
│
├── requirements.txt # Python dependencies
├── Makefile # Easy commands
├── .env.example # Environment template
└── README.md # This file
快速开始
先决条件
- Python 3.11+
- Node.js 18+
- 无烟煤API键 (在这里买一个)
1.安装依赖项
make install
或手动：
# Python
pip install -r requirements.txt
# Frontend
cd frontend && npm install
2.设置API密钥
# Option A: Environment variable
export ANTHROPIC_API_KEY=your-key-here
# Option B: Copy and edit .env
cp .env.example .env
# Edit .env with your key
3.运行应用程序
打开 两个终端:
# Terminal 1 — Backend (starts MCP server automatically)
make backend
# Terminal 2 — Frontend
make frontend
然后打开 http://localhost:5173 在您的浏览器中。
使用指南
聊天面板（左）
聊天面板允许您与Claude互动。Claude可以访问所有MCP工具，并将自动使用它们：
- “伦敦的天气怎么样？” → Uses
get_weather工具 - “计算123*456” → Uses
calculator工具 - “创建一个名为“想法”的笔记，其中包含一些内容” → Uses
manage_notes工具 - “现在几点了？” → Uses
get_datetime工具
工具使用情况在助手消息上显示为徽章。
MCP浏览器（右）
浏览并直接测试所有三个MCP原语：
- “工具”选项卡 --查看所有可用工具，然后单击“尝试”使用演示参数调用它们
- 资源选项卡 --查看所有资源并单击“阅读”以获取其内容
- 提示选项卡 --查看所有提示模板，然后单击“尝试”进行渲染
关键概念演示
- MCP服务器 --如何使用MCP SDK定义工具、资源和提示
- MCP客户端 --如何连接到服务器、发现功能和调用工具
- 标准输入输出传输 --服务器作为子进程运行，通过stdin/stdout进行通信
- LLM集成 --Claude的工具使用能力与MCP工具相结合
- 能动循环 --客户端处理工具_use→ tool_result→ 响应周期
- REST桥 -FastAPI将MCP功能公开为标准REST API
API 参考
| 方法 | 端点 | 描述 |
|---|---|---|
| 职位 | /api/chat |
与Claude聊天（使用工具） |
| 得到 | /api/tools |
列出可用工具 |
| 职位 | /api/tools/:name |
直接调用工具 |
| 得到 | /api/resources |
列出可用资源 |
| 得到 | /api/resources/:uri |
阅读资源 |
| 得到 | /api/prompts |
列出可用提示 |
| 职位 | /api/prompts/:name |
渲染提示模板 |
| 删除 | /api/sessions/:id |
清除聊天会话 |
| 得到 | /api/health |
健康检查 |
文档
要深入了解一切是如何运作的，请参阅 DOCS.md 其中包括：
- 一步一步的端到端流程（发送消息时会发生什么）
- MCP服务器做什么与MCP客户端做什么
- 代理工具使用循环说明
- MCP与RAG——何时使用哪种
- MCP与函数调用——它们之间的关系
- MCP与LangChain/Agent框架
技术栈
| 层 | 技术 |
|---|---|
| 前端 | React 18，顺风CSS，shadcn/ui |
| 后端 | Python、FastAPI、Uvicorn |
| MCP | MCP Python SDK |
| AI | Claude（通过Anthropic API） |
| 传输 | stdio（子进程） |
| 构建 | Vite（前端），制作（编排） |
