MCP-TS-DEMO

MCP-TS-DEMO TypeScript MCP服务案例Demo项目

<div align="center" style=" width: 100%; height: 50px; display: flex; flex-direction:column; justify-content: center; align-items: center;"> <h1 style="display: inline-block; font-size: 20px; line-height: 20px; font-weight: bold;"> <b>MCP-TS-DEMO</b> </h1> </div>

<p align="middle"> <a href="https://www.npmjs.com/package/@pjqdyd/react-boot" target="_blank"> <img src="https://badgen.net/badge/version/v1.0.0"/> </a> <img src="https://badgen.net/badge/language/typescript/cyan"/> <img src="https://badgen.net/badge/package/npm/blue"/> <img src="https://badgen.net/badge/license/MIT/green"/> <img src="https://badgen.net/badge/contributors/1/blue"/> </p>

介绍

• 基于MCP协议，基于TypeScript语言开发简单实现
• 支持本地Stdio MCP及远程Streamable HTTP MCP服务
• 支持AI Agent，如Claude、Cline、LINGMA灵码等MCP智能工具
• 本项目仅为MCP协议示例项目，可参考项目进行更多开发
• 更多参考官方文档：https://modelcontextprotocol.io
• 项目未来会持续迭代更多示例

项目依赖

@modelcontextprotocol/sdk
express

Install：

// node >= 18
// npm 安装
npm install

// 本地stdio调试启动
npm run start

// 本地http调试启动
npm run start-http

// 构建
npm run build

项目目录

 ├─dist                          构建输出目录
 ├─src                           源码目录
   ├─config                      配置文件
   ├─utils                       工具类
   └─server                      server目录
       ├─stdio.ts                本地Stdio MCP服务
       ├─http.ts                 远程Http MCP服务
       └─http_stateful.ts        远程Http MCP有状态服务
   └─index.ts                    入口文件
 ├─.env                          stdio 环境变量
 ├─.env.http                     http 环境变量
 ├─.env.http.stateful            http 有状态环境变量
 ├─tsconfig.json                 tsconfig文件
 └─package.json                  package.json文件

如何运行

• 本地执行完npm run start-http命令后，就已经构建了本地stdio文件，及启动了http服务 <br/> <img src="./doc/assets/img-start-http.png" alt="start-http" width="750"> <br/>

• 配置AI Agent MCP服务，这里以VSCode LINGMA灵码为例，其他智能工具可参考对应文档进行配置 其中mcp-ts-stdio-server为stdio服务，mcp-ts-http-server为http服务，注意本地路径args要正确

{
  "mcpServers": {
    "mcp-ts-stdio-server": {
      "command": "node",
      "args": [
        "/Users/zcy/pjqdyd/mcp-ts-demo/dist/index.js"
      ],
      "env": {
        "MCP_SERVER_NAME": "mcp-ts-server",
        "MCP_SERVER_VERSION": "1.0.0"
      }
    },
    "mcp-ts-http-server": {
      "type": "streamable_http",
      "url": "http://localhost:3000/mcp"
    }
  }
}

• 配置完成后，AI工具将自动连接MCP服务，并识别出服务提供的工具 <br/> <img src="./doc/assets/img-mcp-config.png" alt="start-http" width="750"> <br/>
• 配置完成，并且AI工具正确连接MCP服务后，即可进行MCP服务工具调用，输入“执行 say hello to 小明” <br/> <img src="./doc/assets/img-say-hello.png" alt="start-http" width="750"> <br/> 运行执行后，AI工具将返回工具调用的结果。

总结

• MCP（模型上下文协议）是一个开源标准，用于将人工智能应用与外部系统连接起来。
• MCP协议是一种用于构建智能工具和AI服务的协议，它允许工具和AI服务之间进行交互，并使用MCP协议进行数据传输。
• 通过MCP，像Claude或ChatGPT这样的AI应用可以连接数据源（如本地文件、数据库）、工具（如搜索引擎、计算器）和工作流程（如专门提示）——使它们能够访问关键信息并执行任务。
• 更多请参考官方文档：https://modelcontextprotocol.io

License

This project is licensed under the MIT license.