@lobehub/chat 1.81.9 → 1.82.0

package/src/features/PluginStore/PluginItem/Action.tsx

@@ -6,6 +6,7 @@ import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
 import PluginDetailModal from '@/features/PluginDetailModal';
+import { useAgentStore } from '@/store/agent';
 import { useServerConfigStore } from '@/store/serverConfig';
 import { pluginHelpers, useToolStore } from '@/store/tool';
 import { pluginSelectors, pluginStoreSelectors } from '@/store/tool/selectors';
@@ -31,6 +32,7 @@ const Actions = memo<ActionsProps>(({ identifier, type }) => {
   const { t } = useTranslation('plugin');
   const [open, setOpen] = useState(false);
   const plugin = useToolStore(pluginSelectors.getToolManifestById(identifier));
+  const togglePlugin = useAgentStore((s) => s.togglePlugin);
   const { modal } = App.useApp();
   const [tab, setTab] = useState('info');
   const hasSettings = pluginHelpers.isSettingSchemaNonEmpty(plugin?.settings);
@@ -89,8 +91,9 @@ const Actions = memo<ActionsProps>(({ identifier, type }) => {
         ) : (
           <Button
             loading={installing}
-            onClick={() => {
-              installPlugin(identifier);
+            onClick={async () => {
+              await installPlugin(identifier);
+              await togglePlugin(identifier);
             }}
             size={mobile ? 'small' : undefined}
             type={'primary'}

package/src/features/PluginStore/PluginItem/PluginAvatar.tsx

@@ -0,0 +1,25 @@
+import { MCP } from '@lobehub/icons';
+import { Avatar } from '@lobehub/ui';
+import { CSSProperties, memo } from 'react';
+
+interface PluginAvatarProps {
+  alt?: string;
+  avatar?: string;
+  size?: number;
+  style?: CSSProperties;
+}
+
+const PluginAvatar = memo<PluginAvatarProps>(({ avatar, style, size, alt }) => {
+  return avatar === 'MCP_AVATAR' ? (
+    <MCP.Avatar size={size ? size * 0.8 : 36} />
+  ) : (
+    <Avatar
+      alt={alt}
+      avatar={avatar}
+      size={size}
+      style={{ flex: 'none', overflow: 'hidden', ...style }}
+    />
+  );
+});
+
+export default PluginAvatar;

package/src/features/PluginStore/PluginItem/index.tsx

@@ -1,14 +1,15 @@
-import { Avatar, Tooltip } from '@lobehub/ui';
+import { Tooltip } from '@lobehub/ui';
 import { Typography } from 'antd';
 import { createStyles } from 'antd-style';
 import Link from 'next/link';
 import { memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
-import PluginTag from '@/features/PluginStore/PluginItem/PluginTag';
 import { InstallPluginMeta } from '@/types/tool/plugin';
 
 import Actions from './Action';
+import PluginAvatar from './PluginAvatar';
+import PluginTag from './PluginTag';
 
 const { Paragraph } = Typography;
 
@@ -51,7 +52,7 @@ const PluginItem = memo<InstallPluginMeta>(({ identifier, homepage, author, type
         horizontal
         style={{ overflow: 'hidden', position: 'relative' }}
       >
-        <Avatar avatar={meta.avatar} style={{ flex: 'none', overflow: 'hidden' }} />
+        <PluginAvatar avatar={meta.avatar} />
         <Flexbox flex={1} gap={4} style={{ overflow: 'hidden', position: 'relative' }}>
           <Flexbox align={'center'} gap={8} horizontal>
             <Tooltip title={identifier}>

package/src/features/PluginTag/index.tsx

@@ -1,12 +1,14 @@
 'use client';
 
-import { Avatar, Icon, Tag } from '@lobehub/ui';
+import { Icon, Tag } from '@lobehub/ui';
 import type { MenuProps } from 'antd';
 import { Dropdown } from 'antd';
 import isEqual from 'fast-deep-equal';
 import { LucideToyBrick } from 'lucide-react';
 import { memo } from 'react';
+import { Center } from 'react-layout-kit';
 
+import Avatar from '@/features/PluginStore/PluginItem/PluginAvatar';
 import { featureFlagsSelectors, useServerConfigStore } from '@/store/serverConfig';
 import { pluginHelpers, useToolStore } from '@/store/tool';
 import { toolSelectors } from '@/store/tool/selectors';
@@ -30,7 +32,11 @@ const PluginTag = memo<PluginTagProps>(({ plugins }) => {
     const avatar = isDeprecated ? '♻️' : pluginHelpers.getPluginAvatar(item?.meta);
 
     return {
-      icon: <Avatar avatar={avatar} size={24} style={{ marginLeft: -6, marginRight: 2 }} />,
+      icon: (
+        <Center style={{ minWidth: 24 }}>
+          <Avatar avatar={avatar} size={24} />
+        </Center>
+      ),
       key: id,
       label: (
         <PluginStatus

package/src/{server/modules/MCPClient → libs/mcp}/__tests__/index.test.ts

@@ -36,10 +36,10 @@ describe('MCPClient', () => {
       const result = await mcpClient.listTools();
 
       // Check exact length if no other tools are expected
-      expect(result.tools).toHaveLength(3);
+      expect(result).toHaveLength(3);
 
       // Expect the tools defined in mock-sdk-server.ts
-      expect(result.tools).toMatchSnapshot();
+      expect(result).toMatchSnapshot();
     });
 
     it('should call the "echo" tool via stdio', async () => {

package/src/{server/modules/MCPClient/index.ts → libs/mcp/client.ts}

@@ -4,54 +4,34 @@ import { StreamableHTTPClientTransport } from '@modelcontextprotocol/sdk/client/
 import type { Transport } from '@modelcontextprotocol/sdk/shared/transport.d.ts';
 import debug from 'debug';
 
-const log = debug('lobe-mcp:client');
-
-interface MCPConnectionBase {
-  id: string;
-  name: string;
-  type: 'http' | 'stdio';
-}
+import { MCPClientParams, McpTool } from './types';
 
-interface HttpMCPConnection extends MCPConnectionBase {
-  type: 'http';
-  url: string;
-}
-
-interface StdioMCPConnection extends MCPConnectionBase {
-  args: string[];
-  command: string;
-  type: 'stdio';
-}
-type MCPConnection = HttpMCPConnection | StdioMCPConnection;
+const log = debug('lobe-mcp:client');
 
 export class MCPClient {
   private mcp: Client;
   private transport: Transport;
 
-  constructor(connection: MCPConnection) {
-    log('Creating MCPClient with connection: %O', connection);
+  constructor(params: MCPClientParams) {
+    log('Creating MCPClient with connection: %O', params);
     this.mcp = new Client({ name: 'lobehub-mcp-client', version: '1.0.0' });
 
-    switch (connection.type) {
+    switch (params.type) {
       case 'http': {
-        log('Using HTTP transport with url: %s', connection.url);
-        this.transport = new StreamableHTTPClientTransport(new URL(connection.url));
+        log('Using HTTP transport with url: %s', params.url);
+        this.transport = new StreamableHTTPClientTransport(new URL(params.url));
         break;
       }
       case 'stdio': {
-        log(
-          'Using Stdio transport with command: %s and args: %O',
-          connection.command,
-          connection.args,
-        );
+        log('Using Stdio transport with command: %s and args: %O', params.command, params.args);
         this.transport = new StdioClientTransport({
-          args: connection.args,
-          command: connection.command,
+          args: params.args,
+          command: params.command,
         });
         break;
       }
       default: {
-        const err = new Error(`Unsupported MCP connection type: ${(connection as any).type}`);
+        const err = new Error(`Unsupported MCP connection type: ${(params as any).type}`);
         log('Error creating client: %O', err);
         throw err;
       }
@@ -64,11 +44,27 @@ export class MCPClient {
     log('MCP connection initialized.');
   }
 
+  async disconnect() {
+    log('Disconnecting MCP connection...');
+    // Assuming the mcp client has a disconnect method
+    if (this.mcp && typeof (this.mcp as any).disconnect === 'function') {
+      await (this.mcp as any).disconnect();
+      log('MCP connection disconnected.');
+    } else {
+      log('MCP client does not have a disconnect method or is not initialized.');
+      // Depending on the transport, we might need specific cleanup
+      if (this.transport && typeof (this.transport as any).close === 'function') {
+        (this.transport as any).close();
+        log('Transport closed.');
+      }
+    }
+  }
+
   async listTools() {
     log('Listing tools...');
-    const tools = await this.mcp.listTools();
+    const { tools } = await this.mcp.listTools();
     log('Listed tools: %O', tools);
-    return tools;
+    return tools as McpTool[];
   }
 
   async callTool(toolName: string, args: any) {

package/src/libs/mcp/index.ts

@@ -0,0 +1,2 @@
+export * from './client';
+export * from './types';

package/src/libs/mcp/types.ts

@@ -0,0 +1,27 @@
+interface InputSchema {
+  [k: string]: unknown;
+
+  properties?: unknown | null;
+  type: 'object';
+}
+
+export interface McpTool {
+  description: string;
+  inputSchema: InputSchema;
+  name: string;
+}
+
+interface HttpMCPClientParams {
+  name: string;
+  type: 'http';
+  url: string;
+}
+
+interface StdioMCPParams {
+  args: string[];
+  command: string;
+  name: string;
+  type: 'stdio';
+}
+
+export type MCPClientParams = HttpMCPClientParams | StdioMCPParams;

package/src/locales/default/plugin.ts

@@ -35,9 +35,9 @@ export default {
         label: '标识符',
       },
       mode: {
-        'local': '可视化配置',
-        'local-tooltip': '暂时不支持可视化配置',
-        'url': '在线链接',
+        mcp: 'MCP 插件',
+        mcpExp: '实验性',
+        url: '在线链接',
       },
       name: {
         desc: '插件标题',
@@ -45,6 +45,37 @@ export default {
         placeholder: '搜索引擎',
       },
     },
+    mcp: {
+      args: {
+        desc: '传递给 STDIO 命令的参数列表',
+        label: '命令参数',
+        placeholder: '例如：--port 8080 --debug',
+        tooltip: '输入参数后按回车或使用逗号/空格分隔',
+      },
+      command: {
+        desc: '用于启动 MCP STDIO 插件的可执行文件或脚本',
+        label: '命令',
+        placeholder: '例如：python main.py 或 /path/to/executable',
+      },
+      endpoint: {
+        desc: '输入你的 MCP Streamable HTTP Server 的地址',
+        label: 'MCP Endpoint URL',
+      },
+      identifier: {
+        desc: '为你的 MCP 插件指定一个名称，需要使用英文字符',
+        invalid: '只能输入英文字符、数字 、- 和_ 这两个符号',
+        label: 'MCP 插件名称',
+        placeholder: '例如：my-mcp-plugin',
+      },
+      type: {
+        desc: '选择 MCP 插件的通信方式，网页版只支持 Streamable HTTP',
+        label: 'MCP 插件类型',
+      },
+      url: {
+        desc: '输入你的 MCP HTTP 插件的 Endpoint 地址',
+        label: 'HTTP Endpoint URL',
+      },
+    },
     meta: {
       author: {
         desc: '插件的作者',

package/src/server/routers/tools/index.ts

@@ -1,9 +1,11 @@
 import { publicProcedure, router } from '@/libs/trpc/lambda';
 
+import { mcpRouter } from './mcp';
 import { searchRouter } from './search';
 
 export const toolsRouter = router({
   healthcheck: publicProcedure.query(() => "i'm live!"),
+  mcp: mcpRouter,
   search: searchRouter,
 });
 

package/src/server/routers/tools/mcp.ts

@@ -0,0 +1,79 @@
+import { TRPCError } from '@trpc/server';
+import { z } from 'zod';
+
+import { isDesktop, isServerMode } from '@/const/version';
+import { passwordProcedure } from '@/libs/trpc/edge';
+import { authedProcedure, router } from '@/libs/trpc/lambda';
+import { mcpService } from '@/server/services/mcp';
+
+// Define Zod schemas for MCP Client parameters
+const httpParamsSchema = z.object({
+  name: z.string().min(1),
+  type: z.literal('http'),
+  url: z.string().url(),
+});
+
+const stdioParamsSchema = z.object({
+  args: z.array(z.string()).optional().default([]),
+  command: z.string().min(1),
+  name: z.string().min(1),
+  type: z.literal('stdio'),
+});
+
+// Union schema for MCPClientParams
+const mcpClientParamsSchema = z.union([httpParamsSchema, stdioParamsSchema]);
+
+const checkStdioEnvironment = (params: z.infer<typeof mcpClientParamsSchema>) => {
+  if (params.type === 'stdio' && !isDesktop) {
+    throw new TRPCError({
+      code: 'BAD_REQUEST',
+      message: 'Stdio MCP type is not supported in web environment.',
+    });
+  }
+};
+
+const mcpProcedure = isServerMode ? authedProcedure : passwordProcedure;
+
+export const mcpRouter = router({
+  getStreamableMcpServerManifest: mcpProcedure
+    .input(
+      z.object({
+        identifier: z.string(),
+        url: z.string().url(),
+      }),
+    )
+    .query(async ({ input }) => {
+      return await mcpService.getStreamableMcpServerManifest(input.identifier, input.url);
+    }),
+  /* eslint-disable sort-keys-fix/sort-keys-fix */
+  // --- MCP Interaction ---
+  // listTools now accepts MCPClientParams directly
+  listTools: mcpProcedure
+    .input(mcpClientParamsSchema) // Use the unified schema
+    .query(async ({ input }) => {
+      // Stdio check can be done here or rely on the service/client layer
+      checkStdioEnvironment(input);
+
+      // Pass the validated MCPClientParams to the service
+      return await mcpService.listTools(input);
+    }),
+
+  // callTool now accepts MCPClientParams, toolName, and args
+  callTool: mcpProcedure
+    .input(
+      z.object({
+        params: mcpClientParamsSchema, // Use the unified schema for client params
+        args: z.any(), // Arguments for the tool call
+        toolName: z.string(),
+      }),
+    )
+    .mutation(async ({ input }) => {
+      // Stdio check can be done here or rely on the service/client layer
+      checkStdioEnvironment(input.params);
+
+      // Pass the validated params, toolName, and args to the service
+      const data = await mcpService.callTool(input.params, input.toolName, input.args);
+
+      return JSON.stringify(data);
+    }),
+});

package/src/server/services/mcp/index.ts

@@ -0,0 +1,157 @@
+import { LobeChatPluginApi, LobeChatPluginManifest, PluginSchema } from '@lobehub/chat-plugin-sdk';
+import { TRPCError } from '@trpc/server';
+import debug from 'debug';
+
+import { MCPClient, MCPClientParams } from '@/libs/mcp';
+import { safeParseJSON } from '@/utils/safeParseJSON';
+
+const log = debug('lobe-mcp:service');
+
+// Removed MCPConnection interface as it's no longer needed
+
+class MCPService {
+  // Store instances of the custom MCPClient, keyed by serialized MCPClientParams
+  private clients: Map<string, MCPClient> = new Map();
+
+  constructor() {
+    log('MCPService initialized');
+  }
+
+  // --- MCP Interaction ---
+
+  // listTools now accepts MCPClientParams
+  async listTools(params: MCPClientParams): Promise<LobeChatPluginApi[]> {
+    const client = await this.getClient(params); // Get client using params
+    log(`Listing tools using client for params: %O`, params);
+
+    try {
+      const result = await client.listTools();
+      log(`Tools listed successfully for params: %O, result count: %d`, params, result.length);
+      return result.map<LobeChatPluginApi>((item) => ({
+        // Assuming identifier is the unique name/id
+        description: item.description,
+        name: item.name,
+        parameters: item.inputSchema as PluginSchema,
+      }));
+    } catch (error) {
+      console.error(`Error listing tools for params %O:`, params, error);
+      // Propagate a TRPCError for better handling upstream
+      throw new TRPCError({
+        cause: error,
+        code: 'INTERNAL_SERVER_ERROR',
+        message: `Error listing tools from MCP server: ${(error as Error).message}`,
+      });
+    }
+  }
+
+  // callTool now accepts MCPClientParams, toolName, and args
+  async callTool(params: MCPClientParams, toolName: string, argsStr: any): Promise<any> {
+    const client = await this.getClient(params); // Get client using params
+
+    const args = safeParseJSON(argsStr);
+
+    log(`Calling tool "${toolName}" using client for params: %O with args: %O`, params, args);
+
+    try {
+      // Delegate the call to the MCPClient instance
+      const result = await client.callTool(toolName, args); // Pass args directly
+      log(`Tool "${toolName}" called successfully for params: %O, result: %O`, params, result);
+      const { content, isError } = result;
+      if (!isError) return content;
+
+      return result;
+    } catch (error) {
+      console.error(`Error calling tool "${toolName}" for params %O:`, params, error);
+      // Propagate a TRPCError
+      throw new TRPCError({
+        cause: error,
+        code: 'INTERNAL_SERVER_ERROR',
+        message: `Error calling tool "${toolName}" on MCP server: ${(error as Error).message}`,
+      });
+    }
+  }
+
+  // TODO: Consider adding methods for managing the client lifecycle if needed,
+  // e.g., explicitly closing clients on shutdown or after inactivity,
+  // although for serverless, on-demand creation/retrieval might be sufficient.
+
+  // TODO: Implement methods like listResources, getResource, listPrompts, getPrompt if needed,
+  // following the pattern of accepting MCPClientParams.
+
+  // --- Client Management (Replaces Connection Management) ---
+
+  // Private method to get or initialize a client based on parameters
+  private async getClient(params: MCPClientParams): Promise<MCPClient> {
+    const key = this.serializeParams(params); // Use custom serialization
+    log(`Attempting to get client for key: ${key} (params: %O)`, params);
+
+    if (this.clients.has(key)) {
+      log(`Returning cached client for key: ${key}`);
+      return this.clients.get(key)!;
+    }
+
+    log(`No cached client found for key: ${key}. Initializing new client.`);
+    try {
+      // Ensure stdio is only attempted in desktop/server environments within the client itself
+      // or add a check here if MCPClient doesn't handle it.
+      // Example check (adjust based on where environment check is best handled):
+      // if (params.type === 'stdio' && typeof window !== 'undefined') {
+      //   throw new Error('Stdio MCP type is not supported in browser environment.');
+      // }
+
+      const client = new MCPClient(params);
+      await client.initialize(); // Initialization logic should be within MCPClient
+      this.clients.set(key, client);
+      log(`New client initialized and cached for key: ${key}`);
+      return client;
+    } catch (error) {
+      console.error(`Failed to initialize MCP client for key ${key}:`, error);
+      // Do not cache failed initializations
+      throw new TRPCError({
+        cause: error,
+        code: 'INTERNAL_SERVER_ERROR',
+        message: `Failed to initialize MCP client: ${(error as Error).message}`,
+      });
+    }
+  }
+
+  // Custom serialization function to ensure consistent keys
+  private serializeParams(params: MCPClientParams): string {
+    const sortedKeys = Object.keys(params).sort();
+    const sortedParams: Record<string, any> = {};
+
+    for (const key of sortedKeys) {
+      const value = (params as any)[key];
+      // Sort the 'args' array if it exists
+      if (key === 'args' && Array.isArray(value)) {
+        sortedParams[key] = JSON.stringify(key);
+      } else {
+        sortedParams[key] = value;
+      }
+    }
+
+    return JSON.stringify(sortedParams);
+  }
+
+  async getStreamableMcpServerManifest(
+    identifier: string,
+    url: string,
+  ): Promise<LobeChatPluginManifest> {
+    const tools = await this.listTools({ name: identifier, type: 'http', url }); // Get client using params
+
+    return {
+      api: tools,
+      identifier,
+      meta: {
+        avatar: 'MCP_AVATAR',
+        description: `${identifier} MCP server has ${tools.length} tools, like "${tools[0]?.name}"`,
+        title: identifier,
+      },
+      // TODO: temporary
+      type: 'mcp' as any,
+    };
+  }
+}
+
+// Export a singleton instance
+export const mcpService = new MCPService();

package/src/services/mcp.ts

@@ -0,0 +1,25 @@
+import { toolsClient } from '@/libs/trpc/client';
+import { getToolStoreState } from '@/store/tool';
+import { pluginSelectors } from '@/store/tool/slices/plugin/selectors';
+import { ChatToolPayload } from '@/types/message';
+
+class MCPService {
+  async invokeMcpToolCall(payload: ChatToolPayload, { signal }: { signal?: AbortSignal }) {
+    const s = getToolStoreState();
+    const { identifier, arguments: args, apiName } = payload;
+    const plugin = pluginSelectors.getCustomPluginById(identifier)(s);
+
+    if (!plugin) return;
+
+    return toolsClient.mcp.callTool.mutate(
+      { args, params: { ...plugin.customParams?.mcp, name: identifier } as any, toolName: apiName },
+      { signal },
+    );
+  }
+
+  async getStreamableMcpServerManifest(identifier: string, url: string) {
+    return toolsClient.mcp.getStreamableMcpServerManifest.query({ identifier, url });
+  }
+}
+
+export const mcpService = new MCPService();

package/src/store/chat/slices/plugin/action.ts

@@ -8,6 +8,7 @@ import { StateCreator } from 'zustand/vanilla';
 import { LOADING_FLAT } from '@/const/message';
 import { PLUGIN_SCHEMA_API_MD5_PREFIX, PLUGIN_SCHEMA_SEPARATOR } from '@/const/plugin';
 import { chatService } from '@/services/chat';
+import { mcpService } from '@/services/mcp';
 import { messageService } from '@/services/message';
 import { ChatStore } from '@/store/chat/store';
 import { useToolStore } from '@/store/tool';
@@ -41,6 +42,7 @@ export interface ChatPluginAction {
   invokeBuiltinTool: (id: string, payload: ChatToolPayload) => Promise<void>;
   invokeDefaultTypePlugin: (id: string, payload: any) => Promise<string | undefined>;
   invokeMarkdownTypePlugin: (id: string, payload: ChatToolPayload) => Promise<void>;
+  invokeMCPTypePlugin: (id: string, payload: ChatToolPayload) => Promise<string | undefined>;
 
   invokeStandaloneTypePlugin: (id: string, payload: ChatToolPayload) => Promise<void>;
 
@@ -271,7 +273,7 @@ export const chatPlugin: StateCreator<
       // trigger the plugin call
       const data = await get().internal_invokeDifferentTypePlugin(id, payload);
 
-      if ((payload.type === 'default' || payload.type === 'builtin') && data) {
+      if (data && !['markdown', 'standalone'].includes(payload.type)) {
         shouldCreateMessage = true;
         latestToolId = id;
       }
@@ -328,7 +330,9 @@ export const chatPlugin: StateCreator<
 
     const updateAssistantMessage = async () => {
       if (!assistantMessage) return;
-      await messageService.updateMessage(assistantMessage!.id, { tools: assistantMessage?.tools });
+      await messageService.updateMessage(assistantMessage!.id, {
+        tools: assistantMessage?.tools,
+      });
     };
 
     await Promise.all([
@@ -438,11 +442,51 @@ export const chatPlugin: StateCreator<
         return await get().invokeBuiltinTool(id, payload);
       }
 
+      // @ts-ignore
+      case 'mcp': {
+        return await get().invokeMCPTypePlugin(id, payload);
+      }
+
       default: {
         return await get().invokeDefaultTypePlugin(id, payload);
       }
     }
   },
+  invokeMCPTypePlugin: async (id, payload) => {
+    const { internal_updateMessageContent, refreshMessages, internal_togglePluginApiCalling } =
+      get();
+    let data: string = '';
+
+    try {
+      const abortController = internal_togglePluginApiCalling(
+        true,
+        id,
+        n('fetchPlugin/start') as string,
+      );
+
+      const result = await mcpService.invokeMcpToolCall(payload, {
+        signal: abortController?.signal,
+      });
+      if (!!result) data = result;
+    } catch (error) {
+      console.log(error);
+      const err = error as Error;
+
+      // ignore the aborted request error
+      if (!err.message.includes('The user aborted a request.')) {
+        await messageService.updateMessageError(id, error as any);
+        await refreshMessages();
+      }
+    }
+
+    internal_togglePluginApiCalling(false, id, n('fetchPlugin/end') as string);
+    // 如果报错则结束了
+    if (!data) return;
+
+    await internal_updateMessageContent(id, data);
+
+    return data;
+  },
 
   internal_togglePluginApiCalling: (loading, id, action) => {
     return get().internal_toggleLoadingArrays('pluginApiLoadingIds', loading, id, action);