MCP学习演示🚀
“模型上下文协议（MCP）的全面学习项目——从初学者到高级”
欢迎来到MCP学习演示！本项目提供了一个实践性的Model Context Protocol（模型上下文协议）入门指南，包含可运行的示例、VS Code集成以及与Claude Desktop的兼容性支持。
 ](https://nodejs.org/) 
🎯 你将学到的内容
- MCP 基础知识理解服务器、客户端以及JSON-RPC协议
- 工具开发为AI交互创建自定义MCP工具
- VS Code 集成在VS Code中调试和开发MCP服务器
- Claude 桌面版安装将MCP服务器连接到AI应用
- 现实世界中的例子计算器、文件管理等功能
🏗️ 项目架构
📦 mcp-learning-demo/
├── 🔧 src/
│ ├── 🖥️ server/ # Basic MCP server (greeting, calculator)
│ ├── 🔌 client/ # MCP client for testing servers
│ ├── 📚 examples/ # Advanced MCP server examples
│ │ └── 🧮 calculator/ # Advanced math tools & conversions
│ └── 💬 chat-interface.ts # Interactive command-line interface
├── 📖 docs/ # Step-by-step learning guides
├── 🎯 demo-files/ # Sample files for tool testing
├── ⚙️ .vscode/ # VS Code debugging & tasks
└── 🔧 dist/ # Compiled JavaScript output🚀 快速入门
先决条件
- Node.js 18+下载）
- VS Code （推荐）支持 TypeScript
- Docker （可选，用于GitHub MCP服务器）
安装与设置
# 1. Clone the repository
git clone https://github.com/misba-digitalai/mcp-learning-demo-1.git
cd mcp-learning-demo-1
# 2. Install dependencies
npm install
# 3. Build the project
npm run build
# 4. Test basic functionality
npm run demo:basic🎮 可用演示版
| 命令 | 描述 | 您将看到的内容 |
|---|---|---|
npm run demo:basic | 客户端连接到基础服务器 | 工具发现，调用计算器 |
npm run demo:calculator | 高级计算器功能 | 数学运算、单位转换、统计功能 |
npm run start:dev | 开发服务器 | 用于测试的实时MCP服务器 |
npm run chat | 交互式聊天界面 | 命令行MCP交互 |
🛠️ MCP 服务器功能
🎯 基础服务器（src/server/）
- 计算器工具基本算术运算
- 问候工具个性化信息生成
- 文件操作演示文件的创建与管理
🧮 高级计算器（src/examples/calculator/)
- 基础数学加、减、乘、除、乘方、开平方
- 单位转换器温度、长度、重量的转换
- 统计平均值、中位数、众数、标准差
🔧 可用工具
// Basic Math Examples
{ operation: "add", a: 25, b: 17 } // → 42
{ operation: "sqrt", a: 16 } // → 4
// Unit Conversions
{ value: 100, from: "celsius", to: "fahrenheit" } // → 212°F
{ value: 5, from: "feet", to: "meters" } // → 1.524m
// Statistics
{ data: [1,2,3,4,5], operation: "mean" } // → 3🔧 VS Code 集成
这个项目包含对VS Code的全面支持：
调试（按F5）
- 断点支持逐步调试MCP服务器
- 变量检查检查MCP协议消息
- 热重载代码更改时自动重启
任务与脚本
- 构建任务：
Ctrl+Shift+P→ “运行任务” → “构建 TypeScript” - 测试任务运行单个演示和测试
- “Lint & Format”可以翻译为“代码检查与格式化”自动化代码质量检测
IntelliSense（智能感知）
- 全面支持TypeScript，包含MCP类型定义
- MCP协议方法的自动补全
- 错误检测与建议
Claude桌面集成
将您的MCP服务器连接到Claude Desktop以实现自然语言交互：
1. 配置Claude桌面版
添加到您的 claude_desktop_config.json:
{
"mcpServers": {
"advanced_calculator": {
"command": "node",
"args": ["/path/to/mcp-learning-demo/dist/examples/calculator/index.js"],
"env": { "NODE_ENV": "production" }
},
"basic_demo": {
"command": "node",
"args": ["/path/to/mcp-learning-demo/dist/server/index.js"],
"env": { "NODE_ENV": "production" }
}
}
}2. 自然语言示例
一旦连接成功，您可以向Claude提问：
- *“计算144的平方根”*
- *“将25摄氏度转换为华氏度”*
- *“求这些数的平均值：10，20，30，40，50”*
- *“15英尺等于多少米？”*
📚 学习路径
🟢 初学者（从这里开始）
- 运行基本演示：
npm run demo:basic - 阅读:
docs/01-getting-started.md - 探索基本服务器代码在
src/server/index.ts
🟡 中级
- 计算器演示：
npm run demo:calculator - 阅读：
docs/02-basic-concepts.md - 调试使用 VS Code 的 F5 键逐步执行代码
- 修改在基础服务器中添加一个新工具
🔴 高级
- 创建自定义服务器构建你自己的MCP工具
- “Claude integration”翻译成中文是“克劳德集成”或“与克劳德的集成”。这里，“integration”指的是将某个系统、功能或服务与“Claude”（假设是一个特定的系统、平台或技术名称）进行整合或融合的过程。具体翻译可能需要根据上下文来调整，以确保准确传达原意连接到Claude桌面版
- 生产设置部署MCP服务器
- 贡献为这个项目添加功能
🧪 测试与开发
运行测试
npm run test # Jest test suite
npm run test:watch # Watch mode for development手动测试
# Test specific tools
node test-calculator.js
node test-custom.js
# Interactive testing
npm run chat代码质量
npm run lint # ESLint analysis
npm run lint:fix # Auto-fix issues
npm run format # Prettier formatting🌟 关键的MCP（可能是指“微服务通信协议”或类似概念，具体需根据上下文确定）概念
🔌 电源插头 协议；规程；议定书通过标准输入/输出的JSON-RPC 2.0
{"jsonrpc": "2.0", "method": "tools/call", "params": {...}}🛠️（扳手） 工具人工智能可以调用的功能
const tool = {
name: "calculator",
description: "Perform arithmetic operations",
inputSchema: { /* JSON Schema */ }
}🖥️ 电脑 服务器为人工智能提供工具和资源
class MCPServer {
async handleRequest(request) { /* ... */ }
}🔌（电源插头） 客户连接到服务器并发送请求
const client = new MCPClient();
await client.callTool("calculator", {a: 5, b: 3});🤝 贡献
我们欢迎投稿！这是一个旨在帮助大家更好地理解MCP的学习项目。
贡献方式
- 🐛 蚜虫或小虫子（表情符号，表示有虫子） 错误报告发现问题了吗？告诉我们！
- 💡 灯泡或灵感的图标（具体含义根据上下文而定，可理解为“灵光一闪”或“想法的火花”等） 功能创意建议新的MCP工具或示例
- 📚 书籍 文档改进指南和说明
- 🔧（扳手，也用作表示修理、技术或工具的符号） 代码添加新服务器、工具或示例
- 🎓 表示“毕业”或“学位”的意思。 教程分享你的MCP（微软认证专业人员）学习经验
开发环境设置
- 为这个仓库创建分支
- 创建一个特性分支：
git checkout -b feature/amazing-tool - 进行你的更改并进行彻底测试
- 提交一个包含清晰说明的拉取请求
📖 资源与参考文献
MCP Resources（公司名，可译为“MCP资源公司”）
开发资源
- 🔷（这个符号本身在中文中没有特定的含义，通常是一个几何形状的符号，类似于菱形或圆角矩形，用于强调或装饰文本。在翻译时，如果它没有上下文中的特殊含义，通常可以保持原样或根据上下文解释其用途。） TypeScript 手册
- 🟢（绿心符号，常用于表示环保、生态、健康等概念，或作为某种状态的指示，如“通过”、“可用”等，具体含义需结合上下文理解）
- 🎯（靶心，表示准确的目标或焦点） VS Code 扩展 API
人工智能集成
- 机器人🤖 Claude 桌面版 - 支持MCP的人工智能助手
- 🔧（扳手） - 基于人工智能的代码助手
📄 许可证
MIT 许可证 - 详见 许可证 详情见下文。
______________________________________________________________________
🎉 接下来是什么？
掌握这个演示后：
- 构建生产工具为实际工作流程创建MCP服务器
- 与人工智能集成连接到Claude、GPT或其他AI系统
- 分享与学习为MCP生态系统做出贡献
- 扩大规模部署MCP服务器以促进团队协作
学习愉快！ 🚀（火箭发射或快速前进的符号，无具体文字含义，可理解为“嗖的一下”或“飞速前进”等意象）
*如果这个仓库帮助你理解了MCP，请给它点个星！*