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 };
}
}

private async generateReactCode(
astData: AstData,
options: CodeGenerationOptions,
): Promise<ApiResponse> {
// 确保有可用的token
if (!this.apiToken) {
try {
this.apiToken = await this.fetchToken();
} catch (error) {
throw new Error("无法获取API Token: " + error);
}
}

console.log("开始生成 React 代码，输入参数:", JSON.stringify(astData));
try {
console.log("发送请求到 API...");
const response = await fetch(this.apiEndpoint, {
method: "POST",
headers: {
Authorization: `Bearer ${this.apiToken}`,
"Content-Type": "application/json",
},
body: JSON.stringify({
inputs: {
from: this.from,
options, // 添加 options 到请求中
},
query: astData.ast,
response_mode: "blocking",
conversation_id: "",
user: this.userId,
}),
});

if (!response.ok) {
throw new Error(
`API 请求失败: ${response.status} ${response.statusText}`,
);
}

const data = (await response.json()) as ApiServerResponse;
console.log("API 响应数据:", JSON.stringify(data, null, 2));
return {
answer: data?.answer || undefined,
error: data?.error || data?.message,
};
} catch (error) {
console.error("请求失败:", error);
throw error;
}
}

// 在 CallToolRequestSchema 处理函数中
const result = await this.generateReactCode(astData, options);

if (result.error) {
return {
content: [
{
type: "text",
text: `处理ZIP并生成代码失败: ${result.error}`,
},
],
isError: true,
};
}

// 返回结果
const responseData = result.answer
? (JSON.parse(result.answer) as ApiResponseData)
: {};
return {
content: [
{
type: "text",
text: `已成功处理ZIP文件并生成React ${
options.type === "create" ? "项目" : "组件"
}代码：\n\n${responseData.text || ""}`,
},
],
};

async run() {  
  const transport = new StdioServerTransport();  
  await this.server.connect(transport);  
  console.error("MCP Pixelator server 正在运行...");  
}  

// 主程序
const server = new McpPixelatorServer();
server.run().catch(console.error);

osascript -e 'choose file with prompt "选择 ZIP 文件" of type {"ZIP"}' 2>/dev/null