Support MCP( WIP)

.eslintignore

@@ -1 +1,2 @@
-public/serviceWorker.js
+public/serviceWorker.js
+app/mcp/mcp_config.json

README_CN.md

@@ -6,7 +6,7 @@
 
 <h1 align="center">NextChat</h1>
 
-一键免费部署你的私人 ChatGPT 网页应用，支持 GPT3, GPT4 & Gemini Pro 模型。
+一键免费部署你的私人 ChatGPT 网页应用，支持 Claude, GPT4 & Gemini Pro 模型。
 
 [NextChatAI](https://nextchat.dev/chat?utm_source=readme) / [企业版](#%E4%BC%81%E4%B8%9A%E7%89%88) / [演示 Demo](https://chat-gpt-next-web.vercel.app/) / [反馈 Issues](https://github.com/Yidadaa/ChatGPT-Next-Web/issues) / [加入 Discord](https://discord.gg/zrhvHCr79N)
 

app/mcp/actions.ts

@@ -0,0 +1,77 @@
+"use server";
+
+import { createClient, executeRequest } from "./client";
+import { MCPClientLogger } from "./logger";
+import conf from "./mcp_config.json";
+
+const logger = new MCPClientLogger("MCP Server");
+
+// Use Map to store all clients
+const clientsMap = new Map<string, any>();
+
+// Whether initialized
+let initialized = false;
+
+// Store failed clients
+let errorClients: string[] = [];
+
+// Initialize all configured clients
+export async function initializeMcpClients() {
+  // If already initialized, return
+  if (initialized) {
+    return;
+  }
+
+  logger.info("Starting to initialize MCP clients...");
+
+  // Initialize all clients, key is clientId, value is client config
+  for (const [clientId, config] of Object.entries(conf.mcpServers)) {
+    try {
+      logger.info(`Initializing MCP client: ${clientId}`);
+      const client = await createClient(config, clientId);
+      clientsMap.set(clientId, client);
+      logger.success(`Client ${clientId} initialized`);
+    } catch (error) {
+      errorClients.push(clientId);
+      logger.error(`Failed to initialize client ${clientId}: ${error}`);
+    }
+  }
+
+  initialized = true;
+
+  if (errorClients.length > 0) {
+    logger.warn(`Failed to initialize clients: ${errorClients.join(", ")}`);
+  } else {
+    logger.success("All MCP clients initialized");
+  }
+
+  const availableClients = await getAvailableClients();
+
+  logger.info(`Available clients: ${availableClients.join(",")}`);
+}
+
+// Execute MCP request
+export async function executeMcpAction(clientId: string, request: any) {
+  try {
+    // Find the corresponding client
+    const client = clientsMap.get(clientId);
+    if (!client) {
+      logger.error(`Client ${clientId} not found`);
+      return;
+    }
+
+    logger.info(`Executing MCP request for ${clientId}`);
+    // Execute request and return result
+    return await executeRequest(client, request);
+  } catch (error) {
+    logger.error(`MCP execution error: ${error}`);
+    throw error;
+  }
+}
+
+// Get all available client IDs
+export async function getAvailableClients() {
+  return Array.from(clientsMap.keys()).filter(
+    (clientId) => !errorClients.includes(clientId),
+  );
+}

app/mcp/client.ts

@@ -0,0 +1,84 @@
+import { Client } from "@modelcontextprotocol/sdk/client/index.js";
+import { StdioClientTransport } from "@modelcontextprotocol/sdk/client/stdio.js";
+import { MCPClientLogger } from "./logger";
+import { z } from "zod";
+
+export interface ServerConfig {
+  command: string;
+  args?: string[];
+  env?: Record<string, string>;
+}
+
+const logger = new MCPClientLogger();
+
+export async function createClient(
+  serverConfig: ServerConfig,
+  name: string,
+): Promise<Client> {
+  logger.info(`Creating client for server ${name}`);
+
+  const transport = new StdioClientTransport({
+    command: serverConfig.command,
+    args: serverConfig.args,
+    env: serverConfig.env,
+  });
+  const client = new Client(
+    {
+      name: `nextchat-mcp-client-${name}`,
+      version: "1.0.0",
+    },
+    {
+      capabilities: {
+        // roots: {
+        //   listChanged: true,
+        // },
+      },
+    },
+  );
+  await client.connect(transport);
+  return client;
+}
+
+interface Primitive {
+  type: "resource" | "tool" | "prompt";
+  value: any;
+}
+
+/** List all resources, tools, and prompts */
+export async function listPrimitives(client: Client) {
+  const capabilities = client.getServerCapabilities();
+  const primitives: Primitive[] = [];
+  const promises = [];
+  if (capabilities?.resources) {
+    promises.push(
+      client.listResources().then(({ resources }) => {
+        resources.forEach((item) =>
+          primitives.push({ type: "resource", value: item }),
+        );
+      }),
+    );
+  }
+  if (capabilities?.tools) {
+    promises.push(
+      client.listTools().then(({ tools }) => {
+        tools.forEach((item) => primitives.push({ type: "tool", value: item }));
+      }),
+    );
+  }
+  if (capabilities?.prompts) {
+    promises.push(
+      client.listPrompts().then(({ prompts }) => {
+        prompts.forEach((item) =>
+          primitives.push({ type: "prompt", value: item }),
+        );
+      }),
+    );
+  }
+  await Promise.all(promises);
+  return primitives;
+}
+
+/** Execute a request */
+export async function executeRequest(client: Client, request: any) {
+  return client.request(request, z.any());
+}

app/mcp/example.ts

@@ -0,0 +1,31 @@
+import { createClient, listPrimitives } from "@/app/mcp/client";
+import { MCPClientLogger } from "@/app/mcp/logger";
+import conf from "./mcp_config.json";
+
+const logger = new MCPClientLogger("MCP Server Example", true);
+
+async function main() {
+  logger.info("Connecting to server...");
+
+  const client = await createClient(conf.mcpServers.everything, "everything");
+  const primitives = await listPrimitives(client);
+
+  logger.success(`Connected to server everything`);
+
+  logger.info(
+    `server capabilities: ${Object.keys(
+      client.getServerCapabilities() ?? [],
+    ).join(", ")}`,
+  );
+
+  logger.info("Server supports the following primitives:");
+
+  primitives.forEach((primitive) => {
+    logger.info("\n" + JSON.stringify(primitive, null, 2));
+  });
+}
+
+main().catch((error) => {
+  logger.error(error);
+  process.exit(1);
+});

app/mcp/logger.ts

@@ -0,0 +1,65 @@
+// ANSI color codes for terminal output
+const colors = {
+  reset: "\x1b[0m",
+  bright: "\x1b[1m",
+  dim: "\x1b[2m",
+  green: "\x1b[32m",
+  yellow: "\x1b[33m",
+  red: "\x1b[31m",
+  blue: "\x1b[34m",
+};
+
+export class MCPClientLogger {
+  private readonly prefix: string;
+  private readonly debugMode: boolean;
+
+  constructor(
+    prefix: string = "NextChat MCP Client",
+    debugMode: boolean = false,
+  ) {
+    this.prefix = prefix;
+    this.debugMode = debugMode;
+  }
+
+  info(message: any) {
+    this.print(colors.blue, message);
+  }
+
+  success(message: any) {
+    this.print(colors.green, message);
+  }
+
+  error(message: any) {
+    this.print(colors.red, message);
+  }
+
+  warn(message: any) {
+    this.print(colors.yellow, message);
+  }
+
+  debug(message: any) {
+    if (this.debugMode) {
+      this.print(colors.dim, message);
+    }
+  }
+
+  /**
+   * Format message to string, if message is object, convert to JSON string
+   */
+  private formatMessage(message: any): string {
+    return typeof message === "object"
+      ? JSON.stringify(message, null, 2)
+      : message;
+  }
+
+  /**
+   * Print formatted message to console
+   */
+  private print(color: string, message: any) {
+    const formattedMessage = this.formatMessage(message);
+    const logMessage = `${color}${colors.bright}[${this.prefix}]${colors.reset} ${formattedMessage}`;
+
+    // 只使用 console.log，这样日志会显示在 Tauri 的终端中
+    console.log(logMessage);
+  }
+}

app/mcp/mcp_config.json

@@ -0,0 +1,16 @@
+{
+  "mcpServers": {
+    "filesystem": {
+      "command": "npx",
+      "args": [
+        "-y",
+        "@modelcontextprotocol/server-filesystem",
+        "/Users/kadxy/Desktop"
+      ]
+    },
+    "everything": {
+      "command": "npx",
+      "args": ["-y", "@modelcontextprotocol/server-everything"]
+    }
+  }
+}

app/mcp/utils.ts

@@ -0,0 +1,11 @@
+export function isMcpJson(content: string) {
+  return content.match(/```json:mcp:(\w+)([\s\S]*?)```/);
+}
+
+export function extractMcpJson(content: string) {
+  const match = content.match(/```json:mcp:(\w+)([\s\S]*?)```/);
+  if (match) {
+    return { clientId: match[1], mcp: JSON.parse(match[2]) };
+  }
+  return null;
+}

app/page.tsx

@@ -1,12 +1,13 @@
 import { Analytics } from "@vercel/analytics/react";
-
 import { Home } from "./components/home";
-
 import { getServerSideConfig } from "./config/server";
+import { initializeMcpClients } from "./mcp/actions";
 
 const serverConfig = getServerSideConfig();
 
 export default async function App() {
+  await initializeMcpClients();
+
   return (
     <>
       <Home />

app/store/chat.ts

@@ -29,6 +29,8 @@ import { ModelConfig, ModelType, useAppConfig } from "./config";
 import { useAccessStore } from "./access";
 import { collectModelsWithDefaultModel } from "../utils/model";
 import { createEmptyMask, Mask } from "./mask";
+import { executeMcpAction } from "../mcp/actions";
+import { extractMcpJson, isMcpJson } from "../mcp/utils";
 
 const localStorage = safeLocalStorage();
 
@@ -358,7 +360,11 @@ export const useChatStore = createPersistStore(
           session.messages = session.messages.concat();
           session.lastUpdate = Date.now();
         });
+
         get().updateStat(message, targetSession);
+
+        get().checkMcpJson(message);
+
         get().summarizeSession(false, targetSession);
       },
 
@@ -425,7 +431,7 @@ export const useChatStore = createPersistStore(
               session.messages = session.messages.concat();
             });
           },
-          onFinish(message) {
+          async onFinish(message) {
             botMessage.streaming = false;
             if (message) {
               botMessage.content = message;
@@ -764,6 +770,32 @@ export const useChatStore = createPersistStore(
           lastInput,
         });
       },
+      checkMcpJson(message: ChatMessage) {
+        const content =
+          typeof message.content === "string" ? message.content : "";
+        if (isMcpJson(content)) {
+          try {
+            const mcpRequest = extractMcpJson(content);
+            if (mcpRequest) {
+              console.debug("[MCP Request]", mcpRequest);
+
+              executeMcpAction(mcpRequest.clientId, mcpRequest.mcp)
+                .then((result) => {
+                  console.log("[MCP Response]", result);
+                  // 直接使用onUserInput发送结果
+                  get().onUserInput(
+                    typeof result === "object"
+                      ? JSON.stringify(result)
+                      : String(result),
+                  );
+                })
+                .catch((error) => showToast(String(error)));
+            }
+          } catch (error) {
+            console.error("[MCP Error]", error);
+          }
+        }
+      },
     };
 
     return methods;