从零开始的 MCP 开发

import { Client } from "@modelcontextprotocol/sdk/client/index.js";

import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
const server = new McpServer({
  name: "我的MCP服务",
  version: "1.0.0"
});

import { Server } from "@modelcontextprotocol/sdk/server/index.js";

import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js";


const transport = new StdioServerTransport();
await server.connect(transport);
import { SSEServerTransport } from "@modelcontextprotocol/sdk/server/sse.js";
import express from "express";


const app = express();


app.get("/sse", async (req, res) => {
  const transport = new SSEServerTransport("/messages", res);
  await server.connect(transport);
});


app.post("/messages", async (req, res) => {
  await transport.handlePostMessage(req, res);
});


app.listen(3000);

这使 LLM 能够了解可用的 MCP 服务器及其功能// src/core/prompts/system.ts
// 通过 generatePrompt 函数构建完整的系统提示，包括 MCP 服务器和工具信息。
// 这使 LLM 能够了解可用的 MCP 服务器及其功能
async function generatePrompt(
    context: vscode.ExtensionContext,
    cwd: string,
    supportsComputerUse: boolean,
    mode: Mode,
    mcpHub?: McpHub,  // MCP 集线器实例，负责管理所有 MCP 服务器连接
    diffStrategy?: DiffStrategy,
    browserViewportSize?: string,
    // ... 其他参数
): Promise<string> {
    // ... 前面的代码
    
    // 异步获取两个部分：模式部分和 MCP 服务器部分
    const [modesSection, mcpServersSection] = await Promise.all([
        getModesSection(context),
        // 仅当当前模式包含 mcp 组时才加载 MCP 服务器部分
        modeConfig.groups.some((groupEntry) => getGroupName(groupEntry) === "mcp")
            ? getMcpServersSection(mcpHub, effectiveDiffStrategy, enableMcpServerCreation)
            : Promise.resolve(""),
    ])


    // 构建完整的系统提示，包括多个部分
    const basePrompt = `${roleDefinition}


${getSharedToolUseSection()}


${getToolDescriptionsForMode(  // 这里会包含 MCP 相关工具的描述
    mode,
    cwd,
    supportsComputerUse,
    effectiveDiffStrategy,
    browserViewportSize,
    mcpHub,
    customModeConfigs,
    experiments,
)}


${getToolUseGuidelinesSection()}


${mcpServersSection}  // 这部分包含所有可用的 MCP 服务器及其工具信息


// ... 其他部分
    `


    return basePrompt
}

// src/core/prompts/sections/mcp-servers.ts
export async function getMcpServersSection(
    mcpHub?: McpHub,
    diffStrategy?: DiffStrategy,
    enableMcpServerCreation?: boolean,
): Promise<string> {
    if (!mcpHub) {
        return ""
    }


    // 构建已连接服务器的信息字符串
    const connectedServers =
        mcpHub.getServers().length > 0
            ? `${mcpHub
                    .getServers()
                    .filter((server) => server.status === "connected")  // 只显示已连接的服务器
                    .map((server) => {
                        // 为每个服务器生成其工具列表信息
                        const tools = server.tools
                            ?.map((tool) => {
                                // 为每个工具包含输入模式（如果有）
                                const schemaStr = tool.inputSchema
                                    ? `    Input Schema:
    ${JSON.stringify(tool.inputSchema, null, 2).split("\n").join("\n    ")}`
                                    : ""


                                return `- ${tool.name}: ${tool.description}\n${schemaStr}`
                            })
                            .join("\n\n")


                        // ... 生成资源模板和直接资源信息 ...
                        
                        // 解析服务器配置以显示命令信息
                        const config = JSON.parse(server.config)


                        // 返回完整的服务器描述，包括工具、资源模板和直接资源
                        return (
                            `## ${server.name} (\`${config.command}${config.args ? ` ${config.args.join(" ")}` : ""}\`)` +
                            (tools ? `\n\n### Available Tools\n${tools}` : "") +
                            (templates ? `\n\n### Resource Templates\n${templates}` : "") +
                            (resources ? `\n\n### Direct Resources\n${resources}` : "")
                        )
                    })
                    .join("\n\n")}`
            : "(No MCP servers currently connected)"  // 如果没有连接服务器，显示此消息


    // ... 返回完整部分，包括 MCP 服务器介绍和创建指南 ...
}

// src/core/prompts/tools/use-mcp-tool.ts
export function getUseMcpToolDescription(args: ToolArgs): string | undefined {
    // 如果没有 MCP 集线器，不需要此工具描述
    if (!args.mcpHub) {
        return undefined
    }
    
    // 返回标准化的工具描述，包括参数说明和使用示例
    return `## use_mcp_tool
Description: Request to use a tool provided by a connected MCP server. Each MCP server can provide multiple tools with different capabilities. Tools have defined input schemas that specify required and optional parameters.
Parameters:
- server_name: (required) The name of the MCP server providing the tool
- tool_name: (required) The name of the tool to execute
- arguments: (required) A JSON object containing the tool's input parameters, following the tool's input schema
Usage:
<use_mcp_tool>
<server_name>server name here</server_name>
<tool_name>tool name here</tool_name>
<arguments>
{
  "param1": "value1",
  "param2": "value2"
}
</arguments>
</use_mcp_tool>


Example: Requesting to use an MCP tool


<use_mcp_tool>
<server_name>weather-server</server_name>
<tool_name>get_forecast</tool_name>
<arguments>
{
  "city": "San Francisco",
  "days": 5
}
</arguments>
</use_mcp_tool>`
}

// src/core/Cline.ts
async presentAssistantMessage() {
    // ... 前面的代码
    
    case "use_mcp_tool": {
        const server_name: string | undefined = block.params.server_name
        const tool_name: string | undefined = block.params.tool_name
        const mcp_arguments: string | undefined = block.params.arguments
        try {
            // 处理部分工具调用 - 这是处理未完成的工具调用的机制
            if (block.partial) {
                const partialMessage = JSON.stringify({
                    type: "use_mcp_tool",
                    serverName: removeClosingTag("server_name", server_name),
                    toolName: removeClosingTag("tool_name", tool_name),
                    arguments: removeClosingTag("arguments", mcp_arguments),
                } satisfies ClineAskUseMcpServer)
                await this.ask("use_mcp_server", partialMessage, block.partial).catch(() => {})
                break
            } else {
                // 验证必要参数是否存在
                if (!server_name) {
                    this.consecutiveMistakeCount++
                    pushToolResult(
                        await this.sayAndCreateMissingParamError("use_mcp_tool", "server_name"),
                    )
                    break
                }
                if (!tool_name) {
                    this.consecutiveMistakeCount++
                    pushToolResult(
                        await this.sayAndCreateMissingParamError("use_mcp_tool", "tool_name"),
                    )
                    break
                }
                
                // 解析 JSON 参数（如果提供）
                let parsedArguments: Record<string, unknown> | undefined
                if (mcp_arguments) {
                    try {
                        parsedArguments = JSON.parse(mcp_arguments)
                    } catch (error) {
                        // 处理 JSON 解析错误
                        this.consecutiveMistakeCount++
                        await this.say(
                            "error",
                            `Roo tried to use ${tool_name} with an invalid JSON argument. Retrying...`,
                        )
                        pushToolResult(
                            formatResponse.toolError(
                                formatResponse.invalidMcpToolArgumentError(server_name, tool_name),
                            ),
                        )
                        break
                    }
                }

// src/core/Cline.ts - 继续上面的代码
await this.say("mcp_server_request_started")
const toolResult = await this.providerRef
    .deref()
    ?.getMcpHub()
    ?.callTool(server_name, tool_name, parsedArguments)
// src/services/mcp/McpHub.ts
async callTool(
    serverName: string,
    toolName: string,
    toolArguments?: Record<string, unknown>,
): Promise<McpToolCallResponse> {
    // 查找对应的服务器连接
    const connection = this.connections.find((conn) => conn.server.name === serverName)
    if (!connection) {
        throw new Error(
            `No connection found for server: ${serverName}. Please make sure to use MCP servers available under 'Connected MCP Servers'.`,
        )
    }
    // 检查服务器是否被禁用
    if (connection.server.disabled) {
        throw new Error(`Server "${serverName}" is disabled and cannot be used`)
    }


    // 从服务器配置中获取超时设置
    let timeout: number
    try {
        const parsedConfig = ServerConfigSchema.parse(JSON.parse(connection.server.config))
        timeout = (parsedConfig.timeout ?? 60) * 1000  // 默认 60 秒
    } catch (error) {
        console.error("Failed to parse server config for timeout:", error)
        // 解析失败时使用默认值
        timeout = 60 * 1000
    }


    // 使用 MCP SDK 的 Client 接口发送请求
    return await connection.client.request(
        {
            method: "tools/call",
            params: {
                name: toolName,
                arguments: toolArguments,
            },
        },
        CallToolResultSchema,  // 用于验证响应的模式
        {
            timeout,  // 应用从配置获取的超时值
        },
    )
}

connection.client.request(
        {
            method: "tools/call",
            params: {
                name: toolName,
                arguments: toolArguments,
            },
        },
        CallToolResultSchema,
        {
            timeout,
        },
    )

class McpPixelatorServer {  
  private server: Server;  
  private zipHandler: ZipHandler;  
  private apiToken: string = "";  
  private apiEndpoint: string = "fake";  
  private userId: string = "MCP_PIXELATOR" + "_" + process.env.USER_ID;  
  private from: string = process.env.FROM || "unknown";  


  constructor() {  
    // 初始化token  
    this.fetchToken()  
      .then((token) => {  
        this.apiToken = token;  
        console.log("Token已更新");  
      })  
      .catch((error) => {  
        console.error("初始化token失败:", error);  
      });  


    // 初始化MCP服务器  
    this.server = new Server(  
      {  
        name: "mcp-pixelator",  
        version: "0.1.0",  
      },  
      {  
        capabilities: {  
          tools: {},  
        },  
      },  
    );  


    this.zipHandler = new ZipHandler();  
    this.setupToolHandlers();  


    // 错误处理  
    this.server.onerror = (error: Error) => console.error("[MCP Error]", error);  
    process.on("SIGINT", async () => {  
      await this.server.close();  
      process.exit(0);  
    });  
  }  
  
  // 其他方法...  
}  

private setupToolHandlers() {  
  // 注册工具列表  
  this.server.setRequestHandler(ListToolsRequestSchema, async () => ({  
    tools: [  
      {  
        name: "process_done_zip_and_generate",  
        description: "读取 Done Zip文件并直接生成 React 代码",  
        inputSchema: {  
          type: "object",  
          properties: {  
            options: {  
              type: "object",  
              properties: {  
                type: {  
                  type: "string",  
                  enum: ["create", "add"],  
                  description: "生成代码的类型：create - 创建新项目，add - 添加到现有项目",  
                  default: "create",  
                },  
                projectPath: {  
                  type: "string",  
                  description: "当 type 为 add 时，需要提供项目路径",  
                },  
              },  
              required: ["type"],  
            },  
          },  
          required: ["options"],  
        },  
      },  
    ],  
  }));  
  
  // 处理工具调用请求  
  this.server.setRequestHandler(CallToolRequestSchema, async (request) => {  
    try {  
      console.log("收到工具调用请求:", {  
        工具名称: request.params.name,  
        参数: request.params.arguments,  
      });  


      if (request.params.name === "process_done_zip_and_generate") {  
        // 处理逻辑...  
      } else {  
        throw new McpError(  
          ErrorCode.MethodNotFound,  
          `未知工具: ${request.params.name}`,  
        );  
      }  
    } catch (error) {  
      // 错误处理...  
    }  
  });  

// 在 CallToolRequestSchema 处理函数中  
if (request.params.name === "process_done_zip_and_generate") {  
  // 获取参数  
  const { options } = request.params.arguments as {  
    options: CodeGenerationOptions;  
  };  


  // 打开文件选择器  
  const zipFilePath = await this.zipHandler.selectFile();  


  console.log(`处理ZIP文件: ${zipFilePath}`);  


  // 读取ZIP文件内容  
  const contents = await this.zipHandler.readZipFile(zipFilePath);  


  // 提取AST数据  
  const astData = this.extractAstData(contents);  


  console.log("已提取AST数据，开始生成代码");  


  // 直接调用API生成代码  
  const result = await this.generateReactCode(astData, options);  


  // 处理结果...  
}  

private extractAstData(contents: ZipContents): AstData {  
  // 首先尝试找到 AST 文件  
  const astFile = contents.files.find(  
    (f: { name: string; type: string }) =>  
      (f.name === "ast.json" ||  
        f.name === "ast.txt" ||  
        f.name.endsWith(".ast")) &&  
      (f.type === "json" || f.type === "text"),  
  );  


  if (!astFile || typeof astFile.content !== "string") {  
    throw new Error("未找到有效的 AST 文件");  
  }  


  try {  
    // 尝试解析 JSON  
    const astContent = JSON.parse(astFile.content);  
    return { ast: astContent };  
  } catch (e) {  
    // 如果解析失败，直接使用原始字符串  
    console.log("AST 文件解析为 JSON 失败，使用原始字符串");  
    return { ast: astFile.content };  
  }  
}