### 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](https://github.com/pjqdyd/mcp-ts-demo/blob/main/LICENSE) license.