MCP Demo Application

模型上下文协议（MCP）演示应用程序

全面展示 模型上下文协议（MCP） -一种标准化的协议，使人工智能助手能够与外部工具和数据源进行交互。

🎯 什么是模型上下文协议？

模型上下文协议是一种开放协议，可实现人工智能应用程序和外部数据源之间的无缝集成。它提供：

• 🔧 工具：AI可以执行的函数（例如计算、API调用）
• 📚 资源：AI可以读取的数据源（例如文件、数据库）
• 💬 提示：用于一致交互的预定义提示模板
• 🔒 安全：有明确边界的受控访问

✨ 特性

此演示应用程序展示了：

MCP服务器

• 实施5种不同的工具
• 提供2个数据资源
• 包括提示模板
• 完全TypeScript类型安全

已实施的工具

1. 计算 -进行数学计算
2. get_weather -获取天气信息（模拟）
3. store_note -存储带有标签的笔记
4. retrieve_notes -搜索和检索笔记
5. generateuuid -生成唯一标识符

可用资源

1. 系统信息 -当前系统统计
2. 笔记列表 -所有已存储的笔记

交互式Web界面

• 美观、现代的用户界面
• 实时工具执行
• 资源可视化
• 实时结果显示

🚀 快速开始

先决条件

• Node.js 18+
• npm或纱线

安装

# Clone or navigate to the project directory
cd model-context-protocol

# Install dependencies
npm install

# Build the TypeScript code
npm run build

运行应用程序

选项1：Web界面（推荐）

启动交互式web界面：

npm run web

然后打开浏览器：

http://localhost:3000

web界面提供：

• 所有可用工具的可视化列表
• 交互式表单调用工具
• 实时结果显示
• 资源浏览器

选项2：命令行客户端

运行演示客户端，展示所有功能：

npm run client

这将：

• 连接到MCP服务器
• 列出所有可用的工具和资源
• 执行示例工具调用
• 在终端中显示结果

选项3：仅服务器

只运行MCP服务器（用于与其他客户端集成）：

npm run server

📁 项目结构

model-context-protocol/
├── src/
│   ├── server/
│   │   ├── index.ts       # MCP server implementation
│   │   └── types.ts       # TypeScript type definitions
│   ├── client/
│   │   └── index.ts       # Demo client implementation
│   └── web/
│       ├── server.ts      # Express web server
│       └── public/
│           └── index.html # Web interface
├── dist/                  # Compiled JavaScript (after build)
├── package.json
├── tsconfig.json
└── README.md

🎮 用法示例

使用Web界面

1. 启动web服务器： npm run web
2. 打开 http://localhost:3000 在浏览器中
3. 点击左侧面板中的任何工具以自动填写表格
4. 根据需要修改参数
5. 点击“执行工具”查看结果

工具调用示例

计算表达式

{
  "tool": "calculate",
  "arguments": {
    "expression": "(10 + 5) * 2"
  }
}

结果: 30

获得天气

{
  "tool": "get_weather",
  "arguments": {
    "location": "San Francisco",
    "unit": "celsius"
  }
}

结果：旧金山的天气数据

存储笔记

{
  "tool": "store_note",
  "arguments": {
    "title": "Project Ideas",
    "content": "Build an MCP-powered application",
    "tags": ["ideas", "projects", "mcp"]
  }
}

结果：使用唯一ID存储的笔记

检索笔记

{
  "tool": "retrieve_notes",
  "arguments": {
    "query": "project"
  }
}

结果：所有与“项目”匹配的笔记

生成UUID

{
  "tool": "generate_uuid",
  "arguments": {}
}

结果：一个新的UUID，如 550e8400-e29b-41d4-a716-446655440000

阅读资源

系统信息

URI: mcp://demo/system-info

返回当前系统统计数据，包括操作系统、内存、CPU信息和正常运行时间。

备注列表

URI: mcp://demo/notes-list

返回系统中存储的所有笔记。

🏗️ 运作原理

1.服务器初始化

MCP服务器注册可用的工具和资源：

server.setRequestHandler(ListToolsRequestSchema, async () => ({
  tools: [
    {
      name: "calculate",
      description: "Perform mathematical calculations",
      inputSchema: { /* JSON Schema */ }
    }
  ]
}));

2.客户端连接

客户端通过stdio传输连接到服务器：

const client = new Client({ name: "demo-client", version: "1.0.0" });
const transport = new StdioClientTransport({ command: "node", args: ["server.js"] });
await client.connect(transport);

3.工具发现

客户端发现可用功能：

const tools = await client.request({ method: "tools/list" }, ListToolsResultSchema);

4.工具执行

客户端调用一个带有参数的工具：

const result = await client.request({
  method: "tools/call",
  params: {
    name: "calculate",
    arguments: { expression: "2 + 2" }
  }
}, CallToolResultSchema);

5.资源访问

客户端读取数据资源：

const resource = await client.request({
  method: "resources/read",
  params: { uri: "mcp://demo/system-info" }
}, ReadResourceResultSchema);

🛠️ 发展

构建项目

npm run build

发展模式

npm run dev

这将构建并启动web界面。

项目脚本

• npm run build -将TypeScript编译为JavaScript
• npm run server -运行MCP服务器
• npm run client -运行演示客户端
• npm run web -启动web界面
• npm run dev -构建并运行web界面

🎨 建筑

MCP服务器（src/Server/index.ts）

• 实施MCP协议
• 注册工具和资源
• 处理来自客户端的请求
• 使用Zod模式验证输入
• 返回结构化响应

MCP客户端（src/Client/index.ts）

• 连接到MCP服务器
• 发现可用功能
• 执行工具并读取资源
• 显示结果

Web服务器（src/Web/Server.ts）

• 基于Express的HTTP服务器
• 将请求代理到MCP服务器
• 提供REST API端点
• 提供静态web界面

Web界面（src/Web/public/index.html）

• 现代、灵敏的设计
• 交互式工具执行
• 实时结果显示
• 资源浏览器

🔑 关键MCP概念

工具

AI助手可以执行的功能。每个工具都有：

• 名字：唯一标识符
• 描述：这个工具做什么
• 输入模式：定义必需/可选参数的JSON模式
• 处理器：处理请求的实施

资源

可读取的数据源。每种资源都有：

• 统一资源标识符：唯一标识符（例如。， mcp://demo/system-info)
• 名字：人类可读名称
• 描述：它提供了哪些数据
• MIME 类型：数据格式（例如。， application/json)

提示

预定义的提示模板：

• 可以接受参数
• 提供一致的交互模式
• 帮助构建人工智能对话

🌟 MCP的好处

1. 标准化 -AI工具集成的通用协议
2. 安全 -受控、明确地访问功能
3. 灵活性 -易于添加新工具和资源
4. 可发现性 -AI可以发现可用功能
5. 类型安全 -JSON模式验证的强类型
6. 互操作性 -适用于任何MCP兼容客户端

📚 使用的技术

• TypeScript -类型安全开发
• @模型上下文协议/sdk -官方MCP SDK
• Node.js -运行时环境
• 快速 -Web服务器框架
• 黄道带 -运行时类型验证

🔗 资源

• MCP规范
• MCP TypeScript SDK
• MCP文件

📝 许可证

麻省理工学院

🤝 贡献

这是一个用于学习目的的演示应用程序。请随意：

• 用新工具扩展它
• 添加更多资源
• 优化用户界面
• 添加测试
• 创建文档

💡 后续步骤

要构建自己的MCP服务器：

1. 定义您的工具及其模式
2. 实施工具处理程序
3. 添加数据访问资源
4. 创建提示模板
5. 使用MCP客户端进行测试
6. 部署和集成AI应用程序

______________________________________________________________________

内置于❤️ 展示模型上下文协议的强大功能