模型上下文协议演示

一个展示如何使用模型上下文协议(MCP)扩展AI模型功能的客户端-服务器交互示例。

  • by bertrandgressier
  • TypeScript
  • 本地部署
  • 1 星标
  • 更新于
在 GitHub 查看 bertrandgressier/demo-ts-mcp-client-server

使用说明

演示MCP基础

该项目演示了使用 模型上下文协议(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)
  • 谷歌人工智能(Gemini)API密钥。您可以从以下网址获得一个 谷歌人工智能工作室.(使用Gemini型号时需要)。

设置

  1. 克隆存储库:

    git clone git@github.com:bertrandgressier/demo-ts-mcp-client-server.git
    cd demo-mcp-basic
    
  2. 安装依赖项:

    npm install
    
  3. 创建环境文件: 复制示例环境文件 .env.example 到名为的新文件 .env:

    cp .env.example .env
    

    然后,编辑 .env 文件,以添加实际的API密钥和配置。必需和可选变量是:

    # Required for Google Studio Models (Gemini)
    GOOGLE_API_KEY=YOUR_GOOGLE_API_KEY
    
    # Required for Google Vertex AI Models
    VERTEX_PROJECT_ID=YOUR_VERTEX_PROJECT_ID
    
    # Optional: Defaults to 'us-central1' if not set
    # VERTEX_LOCATION=your-vertex-location
    
    # Optional: Path to Vertex AI service account key file. Defaults to 'vertex-key.json' in the root if not set.
    # 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 JavaScript在 dist.

  • 启动生产服务器:

    npm run start
    # or specifically
    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)而不需要单独的构建步骤。

  • 使用Watch在开发模式下运行服务器:

    npm run dev:server:watch
    

    使用运行服务器 nodemon,在检测到更改时自动重新启动它 src/server 目录。

  • 在开发模式下运行客户端:

    npm run dev:client
    

    使用直接运行客户端 ts-node (或类似)。

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

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

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

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

项目结构

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