MCP 服务器

Demo MCP Basic

好的，这是 MCP 服务器的 HTTP SSE 演示以及一个客户端： **服务器端 (Python - 使用 Flask):** ```python from flask import Flask, Response, request import time import json app = Flask(__name__) # 模拟 MCP 数据 def generate_mcp_data(): counter = 0 while True: data = { "timestamp": time.time(), "counter": counter, "message": f"MCP Data Update: {counter}" } yield f"data: {json.dumps(data)}\n\n" counter += 1 time.sleep(1) # 每秒更新一次 @app.route('/mcp_stream') def mcp_stream(): return Response(generate_mcp_data(), mimetype="text/event-stream") if __name__ == '__main__': app.run(debug=True, host='0.0.0.0', port=5000) ``` **代码解释:** * **`Flask`:** 使用 Flask 框架创建一个简单的 Web 服务器。 * **`generate_mcp_data()`:** 这是一个生成器函数，它模拟 MCP 数据。 * 它创建一个包含时间戳、计数器和消息的字典。 * 它使用 `yield` 关键字返回一个格式化为 SSE 事件的数据字符串。 `data: {json.dumps(data)}\n\n` 是 SSE 格式的关键。 `data:` 表示数据字段，`\n\n` 表示事件的结束。 * `time.sleep(1)` 模拟数据更新的间隔（这里是每秒一次）。 * **`/mcp_stream` 路由:** * `@app.route('/mcp_stream')` 定义了一个路由，当客户端访问 `/mcp_stream` 时，会调用 `mcp_stream()` 函数。 * `Response(generate_mcp_data(), mimetype="text/event-stream")` 创建一个 HTTP 响应，其中包含 `generate_mcp_data()` 生成的数据流，并将 `mimetype` 设置为 `text/event-stream`。这是告诉客户端这是一个 SSE 流的关键。 * **`app.run(...)`:** 启动 Flask 服务器。 `host='0.0.0.0'` 允许从任何 IP 地址访问服务器。 **客户端 (JavaScript - HTML):** ```html <!DOCTYPE html> <html> <head> <title>MCP SSE Client</title> </head> <body> <h1>MCP Data Stream</h1> <div id="mcp-data"></div> <script> const eventSource = new EventSource('/mcp_stream'); // 替换为你的服务器地址 eventSource.onmessage = (event) => { const data = JSON.parse(event.data); const mcpDataElement = document.getElementById('mcp-data'); mcpDataElement.innerHTML += `<p>${JSON.stringify(data)}</p>`; }; eventSource.onerror = (error) => { console.error("EventSource failed:", error); eventSource.close(); // 关闭连接，防止无限重试 }; </script> </body> </html> ``` **代码解释:** * **`EventSource`:** `new EventSource('/mcp_stream')` 创建一个 `EventSource` 对象，连接到服务器的 `/mcp_stream` 端点。确保将 `/mcp_stream` 替换为你的服务器地址（例如 `http://localhost:5000/mcp_stream`）。 * **`onmessage` 事件处理程序:** * `eventSource.onmessage = (event) => { ... }` 定义了一个事件处理程序，当服务器发送新数据时，该处理程序会被调用。 * `event.data` 包含服务器发送的数据。 * `JSON.parse(event.data)` 将 JSON 字符串解析为 JavaScript 对象。 * `document.getElementById('mcp-data')` 获取 HTML 中 `id` 为 `mcp-data` 的元素。 * `mcpDataElement.innerHTML += `<p>${JSON.stringify(data)}</p>`;` 将接收到的数据添加到 HTML 元素中。 * **`onerror` 事件处理程序:** * `eventSource.onerror = (error) => { ... }` 定义了一个事件处理程序，当发生错误时，该处理程序会被调用。 * `console.error("EventSource failed:", error);` 将错误信息输出到控制台。 * `eventSource.close();` 关闭 `EventSource` 连接，防止客户端无限重试连接。 **如何运行:** 1. **保存文件:** 将 Python 代码保存为 `mcp_server.py`，将 HTML 代码保存为 `mcp_client.html`。 2. **安装 Flask:** 在命令行中运行 `pip install flask`。 3. **运行服务器:** 在命令行中运行 `python mcp_server.py`。 4. **打开客户端:** 在浏览器中打开 `mcp_client.html`。 **预期结果:** 你将在浏览器中看到一个标题为 "MCP Data Stream" 的页面，并且页面会不断更新，显示来自服务器的 MCP 数据。每次服务器发送新数据时，都会在页面上添加一个新的 `<p>` 元素，显示 JSON 格式的数据。 **重要注意事项:** * **CORS (跨域资源共享):** 如果你的客户端和服务器运行在不同的域名或端口上，你可能需要配置 CORS。你可以使用 Flask 的 `flask_cors` 扩展来处理 CORS。例如： ```python from flask import Flask, Response from flask_cors import CORS import time import json app = Flask(__name__) CORS(app) # 允许所有来源的跨域请求 # ... (其余代码不变) ``` 然后运行 `pip install flask_cors`。 * **错误处理:** 在实际应用中，你需要更完善的错误处理机制，例如处理连接错误、数据解析错误等。 * **数据格式:** 根据你的实际需求调整 MCP 数据的格式。 * **服务器地址:** 确保客户端中的 `EventSource` 连接到正确的服务器地址。这个演示提供了一个基本的 MCP 服务器和客户端的框架。你可以根据你的具体需求进行修改和扩展。希望这个例子能帮助你理解如何使用 HTTP SSE 实现 MCP 服务器。

bertrandgressier

开发者工具

访问服务器

README

Demo MCP Basic

本项目演示了使用 模型上下文协议 (MCP) 的基本客户端-服务器交互。MCP 允许 AI 模型（例如通过 AI SDK 访问的模型，如 Google Gemini/Vertex AI）安全地发现和利用由单独的服务器进程提供的外部工具或资源。

在此示例中：

服务器 (src/server/) 充当 MCP 提供者，提供简单的计算工具（加法、减法等）。
客户端 (src/client/) 使用 AI SDK 与 Google AI 模型交互，并连接到 MCP 服务器，使服务器的工具在生成过程中可供 AI 使用。

此设置说明了如何通过让 AI 模型访问托管在 MCP 服务器上的自定义功能来扩展 AI 模型的功能。

前提条件

Node.js (版本 >=23.0.0，如 package.json 中指定)
npm (随 Node.js 一起提供)
一个 Google AI (Gemini) API 密钥。您可以从 Google AI Studio 获取一个。（使用 Gemini 模型时需要）。

设置

克隆存储库：

git clone git@github.com:bertrandgressier/demo-ts-mcp-client-server.git
cd demo-mcp-basic

安装依赖项：
```
npm install
```
创建环境变量文件： 将示例环境变量文件 .env.example 复制到一个名为 .env 的新文件中：
```
cp .env.example .env
```
然后，编辑 .env 文件以添加您的实际 API 密钥和配置。必需和可选变量如下：
```
# Google Studio 模型 (Gemini) 必需
GOOGLE_API_KEY=YOUR_GOOGLE_API_KEY

# Google Vertex AI 模型必需
VERTEX_PROJECT_ID=YOUR_VERTEX_PROJECT_ID

# 可选：如果未设置，则默认为 'us-central1'
# VERTEX_LOCATION=your-vertex-location

# 可选：Vertex AI 服务帐户密钥文件的路径。如果未设置，则默认为根目录中的 'vertex-key.json'。
# VERTEX_KEY_FILE=path/to/your/vertex-key.json
```
将 YOUR_GOOGLE_API_KEY 和 YOUR_VERTEX_PROJECT_ID 替换为您的实际凭据。 如果您使用 Vertex AI 密钥文件，请确保将其正确放置（例如，在根目录中作为 vertex-key.json 或在 VERTEX_KEY_FILE 中提供正确的路径）。
- 重要提示： .gitignore 文件已配置为防止将 .env 和 vertex-key.json 提交到 Git。

可用脚本

构建 TypeScript：
```
npm run build
```
将 TypeScript 代码从 src 编译为 dist 中的 JavaScript。
启动生产服务器：
```
npm run start
# 或明确地
npm run start:server
```
构建项目（如果尚未构建），并从 dist/server/server.js 运行已编译的服务器。
启动生产客户端：
```
npm run start:client
```
从 dist/client/client.js 运行已编译的客户端。
在开发模式下运行服务器：
```
npm run dev:server
```
直接使用 ts-node（或通过 --experimental-transform-types 类似的方式）运行服务器，而无需单独的构建步骤。
在开发模式下运行服务器并进行监视：
```
npm run dev:server:watch
```
使用 nodemon 运行服务器，当检测到 src/server 目录中的更改时自动重新启动它。
在开发模式下运行客户端：
```
npm run dev:client
```
直接使用 ts-node（或类似方式）运行客户端。

示例客户端 (`src/client/client.ts`)

主要示例客户端脚本演示了以下内容：

连接到 MCP 服务器： 建立与本地运行的 MCP 服务器的连接（预期在 http://localhost:3001/sse）。
获取工具： 检索由连接的服务器提供的工具列表。
配置 AI 模型： 使用 AI SDK (generateText) 配置 Google AI 模型（Gemini 通过 API 密钥或 Vertex AI，具体取决于 .env 中设置的环境变量以及可能的 src/models/google-ai-provider.ts）。
执行提示： 发送提示 (6 + 12) 以及系统消息，指示 AI 使用获取的工具来解决计算。
输出结果： 打印 AI 模型在可能使用服务器提供的工具后生成的最终文本响应。

此客户端是一个基本示例，说明应用程序如何与 MCP 服务器交互，以在 AI 生成流程中利用其工具。

项目结构

src/: 包含 TypeScript 源代码。
- client/: MCP 客户端应用程序的代码。
- server/: MCP 服务器应用程序的代码。
- model.ts: 处理 AI 模型初始化和环境变量加载。
dist/: 包含已编译的 JavaScript 代码（在运行 npm run build 之后）。
.env: 存储环境变量（API 密钥等）- 不要提交此文件。
package.json: 项目元数据和依赖项。
tsconfig.json: TypeScript 编译器配置。

Demo MCP Basic

README

Demo MCP Basic

前提条件

设置

可用脚本

示例客户端 (src/client/client.ts)

项目结构

推荐服务器

示例客户端 (`src/client/client.ts`)