项目结构
前端项目--------->MCP Client----------->MCP Server
server就不过多赘述了,他只是相当于添加了多个的tools
链接前后端
http.createServer创建一个服务器
// ----------------------------------------------------------------
// server.js
import http from "http";
import url from "url";
// ----------------------------------------------------------------
const server = http.createServer(async (req: any, res: any) => {
const parsedUrl = url.parse(req.url, true); // 解析 url(含 query 参数)
const name = parsedUrl.query.name; // ✅ 获取 ?name=xxx 的值
res.setHeader("Access-Control-Allow-Origin", "*"); // 允许跨域
res.setHeader("Content-Type", "application/json; charset=utf-8");
// 简单路由匹配
if (req.method === "GET" && parsedUrl.pathname === "/api/hello") {
console.log("收到请求参数 name =", name);
const ans = await mcpClient.processQuery(name as string);
console.log("AI 回复:", ans);
res.end(JSON.stringify({ message: ans }));
} else {
res.statusCode = 404;
res.end(JSON.stringify({ error: "接口未找到" }));
}
});
// ----------------------------------------------------------------
// 启动服务器
server.listen(3002, () => {
console.log("🚀 本地服务器启动成功:http://127.0.0.1:3002");
});
如何区分多个Server
通过获取配置的server,来进行循环,解构出来所有的tools并且绑定对应的serverName来区分属于哪个Server
const paths = [
{
name: "mcp",
args: "/Users/v-yangziqi1/Desktop/work/mcpserver/mcp/build/index.js",
},
{
name: "mcp1",
args: "/Users/v-yangziqi1/Desktop/work/mcpserver/mcp1/build/index.js",
},
];
// 初始化mcp server连接
async connectToServer(serverScriptPath?: string) {
if (!serverScriptPath) return;
const res = await Promise.all(
paths.map((item, index) => {
this.mcpServer.push(
new Client({ name: "mcp-client-cli-" + item.name, version: "1.0.0" })
);
const mcp = this.mcpServer[index]; // 创建 MCP Client 实例
// 判断文件类型
const state = item.args.endsWith(".py")
? process.platform === "win32"
? "python"
: "python3"
: process.execPath;
// 建立mcp传输层
const transport = new StdioClientTransport({
command: state,
args: [item.args],
});
mcp.connect(transport); // connect 方法用于连接到 MCP Server。
// 获取 MCP Server 上的所有工具名称
return mcp.listTools();
})
);
const nestedArr = res.map(({ tools }, index) => {
return tools.map((item) => ({ ...item, serverName: index })); // serverName是服务器的index所引致
});
const toolsArr = nestedArr.flat();
// console.log("obj", JSON.stringify(toolsArr, null, 2));
// 生成工具数组
this.tools = toolsArr.map((t) => ({
name: t.name, // 工具名称
description: t.description || "", // 工具描述
parameters: t.inputSchema, // 工具参数定义Schema的格式
execute: async (args: any) => {
// 执行工具的逻辑
const result = await this.mcpServer[t.serverName].callTool({
name: t.name,
arguments: args,
});
return result.content as string;
},
}));
console.log(
"已连接 MCP Server,工具:",
this.tools.map((t) => t.name).join(", ")
);
}
完整代码
// mcp-client-cli.ts
import axios from "axios"; // 引入axios用于发送HTTP请求
import readline from "readline/promises"; // 获取用户的输入命令
import dotenv from "dotenv"; // 用于加载环境变量配置文件(.env)
import { Client } from "@modelcontextprotocol/sdk/client/index.js"; // MCP Client 的核心类
import { StdioClientTransport } from "@modelcontextprotocol/sdk/client/stdio.js"; // StdioClientTransport 是 MCP Client 的传输层,
// ----------------------------------------------------------------
// server.js
import http from "http";
import url from "url";
// ----------------------------------------------------------------
dotenv.config();
const QIHOOGPT_KEY = process.env.QIHOOGPT_KEY;
if (!QIHOOGPT_KEY) throw new Error("请在 .env 中配置 QIHOOGPT_KEY");
interface ToolCall {
id: string;
function: {
name: string;
arguments: string;
};
}
interface ToolDefinition {
name: string;
description: string;
parameters: Record<string, any>;
execute: (args: any) => Promise<string>;
}
const paths = [
{
name: "mcp",
args: "/Users/v-yangziqi1/Desktop/work/mcpserver/mcp/build/index.js",
},
{
name: "mcp1",
args: "/Users/v-yangziqi1/Desktop/work/mcpserver/mcp1/build/index.js",
},
];
class MCPClient {
private model = "360gpt-pro";
private tools: ToolDefinition[] = [];
private mcpServer: Client[] = [];
// 初始化mcp server连接
async connectToServer(serverScriptPath?: string) {
if (!serverScriptPath) return;
const res = await Promise.all(
paths.map((item, index) => {
this.mcpServer.push(
new Client({ name: "mcp-client-cli-" + item.name, version: "1.0.0" })
);
const mcp = this.mcpServer[index]; // 创建 MCP Client 实例
// 判断文件类型
const state = item.args.endsWith(".py")
? process.platform === "win32"
? "python"
: "python3"
: process.execPath;
// 建立mcp传输层
const transport = new StdioClientTransport({
command: state,
args: [item.args],
});
mcp.connect(transport); // connect 方法用于连接到 MCP Server。
// 获取 MCP Server 上的所有工具名称
return mcp.listTools();
})
);
const nestedArr = res.map(({ tools }, index) => {
return tools.map((item) => ({ ...item, serverName: index })); // serverName是服务器的index所引致
});
const toolsArr = nestedArr.flat();
// console.log("obj", JSON.stringify(toolsArr, null, 2));
// 生成工具数组
this.tools = toolsArr.map((t) => ({
name: t.name, // 工具名称
description: t.description || "", // 工具描述
parameters: t.inputSchema, // 工具参数定义Schema的格式
execute: async (args: any) => {
// 执行工具的逻辑
const result = await this.mcpServer[t.serverName].callTool({
name: t.name,
arguments: args,
});
return result.content as string;
},
}));
console.log(
"已连接 MCP Server,工具:",
this.tools.map((t) => t.name).join(", ")
);
}
// 将工具定义转换为模型可以理解的格式
private convertTool(tool: ToolDefinition) {
return {
type: "function",
function: {
name: tool.name,
description: tool.description,
parameters: tool.parameters,
},
};
}
// 360模型的方法
private async call360GPT(payload: any) {
const { data } = await axios.post(
"https://api.360.cn/v1/chat/completions",
{ ...payload, stream: false },
{
headers: {
"Content-Type": "application/json",
Authorization: `Bearer ${QIHOOGPT_KEY}`,
},
}
);
return data;
}
// 处理用户查询
// 该方法会将用户的查询发送到360GPT模型,并处理返回的
async processQuery(query: string) {
const messages: any[] = [{ role: "user", content: query }];
// 发送用户消息和mcp server的tools到360GPT模型
const res = await this.call360GPT({
model: this.model, // 模型名称
messages, // 用户消息
tools: this.tools.map((t) => this.convertTool(t)), // 工具列表
tool_choice: "auto", // 自动选择工具
});
const choice = res.choices[0]; // 获取模型返回的第一个选择
const toolCalls = choice.message.tool_calls as ToolCall[] | undefined; // 获取工具调用列表
console.log(choice);
console.log(toolCalls);
// 如果有工具调用,则执行工具
if (toolCalls?.length) {
console.log("工具调用列表:", toolCalls);
for (const call of toolCalls) {
// 在 tools 数组中查找与调用名称匹配的工具
const tool = this.tools.find((t) => t.name === call.function.name);
if (!tool) continue; // 如果没有找到对应的工具,跳过
const args = JSON.parse(call.function.arguments || "{}"); // 解析工具调用的参数
const result = await tool.execute(args); // 执行工具并获取结果
messages.push({ role: "user", content: result }); // 将工具结果添加到消息中
console.log(messages);
// 再次调用360GPT模型,传入更新后的消息进行润色
console.log("🤖 正在思考...");
const final = await this.call360GPT({ model: this.model, messages });
// 如果有工具调用结果,则返回最终的内容
return final.choices[0].message.content;
}
}
return choice.message.content;
}
// 聊天循环方法
async chatLoop() {
// 创建 readline 接口,用于读取用户输入
const rl = readline.createInterface({
input: process.stdin,
output: process.stdout,
});
console.log("输入内容,输入 quit 退出:");
while (true) {
const query = await rl.question("请输入: "); // 提示用户输入查询内容
if (query.toLowerCase() === "quit") break;
console.log("🤖 正在思考...");
const ans = await this.processQuery(query);
console.log("\nAI:", ans, "\n");
}
rl.close();
}
}
(async () => {
const mcpClient = new MCPClient();
const scriptArg = process.argv[2];
// 初始化
if (scriptArg) await mcpClient.connectToServer(scriptArg);
// 服务器监听
// await mcpClient.chatLoop();
// process.exit(0);
// ----------------------------------------------------------------
// server.js
// 创建一个简单的服务器
const server = http.createServer(async (req: any, res: any) => {
const parsedUrl = url.parse(req.url, true); // 解析 url(含 query 参数)
const name = parsedUrl.query.name; // ✅ 获取 ?name=xxx 的值
res.setHeader("Access-Control-Allow-Origin", "*"); // 允许跨域
res.setHeader("Content-Type", "application/json; charset=utf-8");
// 简单路由匹配
if (req.method === "GET" && parsedUrl.pathname === "/api/hello") {
console.log("收到请求参数 name =", name);
const ans = await mcpClient.processQuery(name as string);
console.log("AI 回复:", ans);
res.end(JSON.stringify({ message: ans }));
} else {
res.statusCode = 404;
res.end(JSON.stringify({ error: "接口未找到" }));
}
});
// ----------------------------------------------------------------
// 启动服务器
server.listen(3002, () => {
console.log("🚀 本地服务器启动成功:http://127.0.0.1:3002");
});
})();
验证是否成功
已经获取到两个仓库的参数了
trae的仓库
开始调用
这样就称得上是成功了