MCP初探以及开发一个简单的MCP Server

叫一只猪
334 阅读3分钟

MCP是什么

MCP（Model Context Protocol）Model Context Protocol）是一种轻量级协议，它让我们能够将自己的服务和各种 LLM 客户端（如 Claude、Cursor）交互。简单来说，它就是一个桥梁，可以将其想象成一个 USB-C 端口，让 AI 能够在我们的服务响应结果基础之上进行响应。 官方给出的架构图:

企业微信截图_3df3db66-1f80-4a23-9eea-1725fb2028ce.png 相信大家也见过很多次这张图： image.png 原文里面有一段话讲的很形象

  • 模型上下文协议 (MCP) 是一种标准化协议，用于将 AI 代理连接到各种外部工具和数据源。可以将其想象成一个 USB-C 端口，但适用于 AI 应用。
  • 正如 USB-C 简化了您将不同设备连接到计算机的方式一样，MCP 简化了 AI 模型与您的数据、工具和服务交互的方式。

MCP能干什么

知道了MCP是什么，就来说说MCP到底能干啥。 我们知道AI只知道过去的事情，响应的数据是滞后的，无法获取实时的信息，比如无法获取今天的天气。有了MCP之后，我们可以实现一个获取实时以及未来天气的服务，并且通过MCP接入AI大模型，这样AI就可以根据我们服务返回的实时天气情况进行响应。 借助MCP我们还可以读写本地文件，操作数据库，操作浏览器等做一些AI不能直接操作的事情。附上一些开源的MCP server MCP.so

image.png

开发一个基于TS的MCP-Server

在日常工作中，接口文档是基于的APIDoc，但apidoc每次都只是返回一个空壳结构，对于前端来说又像是无效接口。

image.png 所以开发一个简单的 mock数据的mcp server，提供返回的字段信息让AI帮我们生成有效的mock数据。

初始化

# 创建一个新的项目目录
mkdir mock-mcp
cd mock-mcp

# 初始化一个新的 npm 项目
npm init -y

# 安装依赖
npm install @modelcontextprotocol/sdk zod axios
npm install -D @types/node typescript

# 创建项目文件
mkdir src
touch src/index.ts

修改package.json

使用tsc编译

{
  "name": "mock-mcp",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "type": "module",
  "bin": {
    "mock-mcp": "./build/index.js"
  },
  "scripts": {
    "build": "tsc && chmod 755 build/index.js",
    "watch": "tsc --watch"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@modelcontextprotocol/sdk": "^1.12.0",
    "axios": "^1.9.0",
    "zod": "^3.25.32"
  },
  "files": [
    "build" 
  ],
  "devDependencies": {
    "@types/node": "^22.15.23",
    "typescript": "^5.8.3"
  }
}

新建tsconfig.json

{
    "compilerOptions": {
      "target": "ES2022",
      "module": "Node16",
      "moduleResolution": "Node16",
      "outDir": "./build",
      "rootDir": "./src",
      "strict": true,
      "esModuleInterop": true,
      "skipLibCheck": true,
      "forceConsistentCasingInFileNames": true
    },
    "include": ["src/**/*"],
    "exclude": ["node_modules"]
  }

MCP Server init

 const server = new McpServer({
    name: "MockMcp",
    version: "1.0.0",
  });

  server.tool("request mock server",
    '请求mock data 服务',
    {
        path: z.string(),
        method: z.string(),
        data: z.any()
    },
    async ({path,method,data}) => {
        console.log(`请求mock data 服务: ${method} ,${path} ,${JSON.stringify(data, null, 2)}`);
        const res = await mockServer(path,method,data); 
        return {
            content: [{ type: "text", text: JSON.stringify(res, null, 2) }]
        };
    }
);

MCP Server 启动

MCP 服务器种类

  1. stdio 服务器： 在本地运行的服务器，作为应用程序的子进程，只需确保主程序和子进程在同一台机器上。因为它是本地进程间通信，通常具有较低的延迟和较高的性能，适用于在进行模型开发和测试。
  2. HTTP over SSE 服务器： 远程服务器，基于 HTTP 进行通信通过 URL 进行连接，允许客户端以事件的形式接收数据流。客户端和服务器可以不在同一台机器上，可以跨网络进行通信。

所以我们只需要选择stdio 服务器就好啦

async function main(){
    // Connect Transport
     const transport = new StdioServerTransport();
     await server.connect(transport);
 }


 main().catch(error => {
     console.error(error);
     process.exit(1);
 })

mockServer

import axios from "axios";
export const mockServer = async (path: string,method: string,data: any) => {
    try {
        const _realPath = `https://apidoctest03.lkcoffee.com/luckydocweb/app${path}`;
        
        // 获取请求方法和请求体
        const _method = method.toLowerCase();
        const requestData = {
            method: _method,
            url: _realPath,
            data: data
        };
        // 发送请求
        const response = await axios(requestData);
        console.error('请求mock数据成功:', response);
        // 返回响应
       return response.data;
    } catch (error: any) {
        console.error('请求转发错误:', error.message);
        return null;
    }
}

npm run build

一个简单的mcp server就开发完成了✅

测试

开发mcp server之后，如何测试呢。

官方提供了一个测试工具

image.png

执行 `npx @modelcontextprotocol/inspector node build/index.js`

image.png

打开http://127.0.0.1:6274 ,点击connect

image.png

点击List tools，出现我们的服务

image.png 点击我们的服务之后，输入服务所需要的参数，run tool ! 测试成功！

image.png

从测试的结果来说，这个简单的server返回的就是无效的数据，所以我们就需要借助MCP和AI来获取我们所需要的数据。

使用

打包之后添加到cursor的MCP服务中，在.cursor 目录中创建 mcp.json。添加成功之后就会出现我们的服务

{
    "mcpServers": {
        "mock-mcp": {
            "command": "node",
            "args": [
                "打包之后文件的位置"
            ]
        }
    }
}

image.png

配置之后就可以开始结合AI来生成我们想要的数据啦：

image.png

image.png 完美生成！ 后续可以考虑讲mock到的有效数据自动集成到mock服务中。

avatar
文章
阅读
粉丝