@lobehub/chat 1.81.8 → 1.82.0

package/src/features/PluginDevModal/MCPManifestForm.tsx

@@ -0,0 +1,164 @@
+import { LobeChatPluginManifest } from '@lobehub/chat-plugin-sdk';
+import { ActionIcon, FormItem } from '@lobehub/ui';
+import { Form, FormInstance, Input, Radio, Select } from 'antd';
+import { FileCode, RotateCwIcon } from 'lucide-react';
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import ManifestPreviewer from '@/components/ManifestPreviewer';
+import { isDesktop } from '@/const/version';
+import { mcpService } from '@/services/mcp';
+import { useToolStore } from '@/store/tool';
+import { pluginSelectors } from '@/store/tool/selectors';
+import { PluginInstallError } from '@/types/tool/plugin';
+
+interface MCPManifestFormProps {
+  form: FormInstance;
+  isEditMode?: boolean;
+}
+
+const MCPManifestForm = ({ form, isEditMode }: MCPManifestFormProps) => {
+  const { t } = useTranslation('plugin');
+  const mcpType = Form.useWatch(['customParams', 'mcp', 'type'], form);
+  const [manifest, setManifest] = useState<LobeChatPluginManifest>();
+  const pluginIds = useToolStore(pluginSelectors.storeAndInstallPluginsIdList);
+
+  const HTTP_URL_KEY = ['customParams', 'mcp', 'url'];
+  return (
+    <Form form={form} layout={'vertical'}>
+      <Flexbox gap={16}>
+        <Form.Item
+          extra={t('dev.mcp.identifier.desc')}
+          label={t('dev.mcp.identifier.label')}
+          name={'identifier'}
+          rules={[
+            { required: true },
+            {
+              message: t('dev.mcp.identifier.invalid'),
+              pattern: /^[\w-]+$/,
+            },
+            // 编辑模式下，不进行重复校验
+            isEditMode
+              ? {}
+              : {
+                  message: t('dev.meta.identifier.errorDuplicate'),
+                  validator: async () => {
+                    const id = form.getFieldValue('identifier');
+                    if (!id) return true;
+
+                    if (pluginIds.includes(id)) {
+                      throw new Error('Duplicate');
+                    }
+                  },
+                },
+          ]}
+        >
+          <Input placeholder={t('dev.mcp.identifier.placeholder')} />
+        </Form.Item>
+
+        <Form.Item
+          extra={t('dev.mcp.type.desc')}
+          initialValue={'http'}
+          label={t('dev.mcp.type.label')}
+          name={['customParams', 'mcp', 'type']}
+          rules={[{ required: true }]}
+        >
+          <Radio.Group>
+            <Radio value={'http'}>Streamable HTTP</Radio>
+            <Radio disabled={!isDesktop} value={'stdio'}>
+              STDIO
+            </Radio>
+          </Radio.Group>
+        </Form.Item>
+
+        {mcpType === 'http' && (
+          <Form.Item
+            extra={
+              <Flexbox horizontal justify={'space-between'} style={{ marginTop: 8 }}>
+                {t('dev.mcp.url.desc')}
+                {manifest && (
+                  <ManifestPreviewer manifest={manifest}>
+                    <ActionIcon
+                      icon={FileCode}
+                      size={'small'}
+                      title={t('dev.meta.manifest.preview')}
+                    />
+                  </ManifestPreviewer>
+                )}
+              </Flexbox>
+            }
+            hasFeedback
+            label={t('dev.mcp.url.label')}
+            name={HTTP_URL_KEY}
+            rules={[
+              { required: true },
+              { type: 'url' },
+              {
+                validator: async (_, value) => {
+                  if (!value) return true;
+
+                  try {
+                    const data = await mcpService.getStreamableMcpServerManifest(
+                      form.getFieldValue('identifier'),
+                      value,
+                    );
+                    setManifest(data);
+
+                    form.setFieldsValue({ identifier: data.identifier, manifest: data });
+                  } catch (error) {
+                    const err = error as PluginInstallError;
+                    throw t(`error.${err.message}`, { error: err.cause! });
+                  }
+                },
+              },
+            ]}
+          >
+            <Input
+              placeholder="https://mcp.higress.ai/mcp-github/xxxxx"
+              suffix={
+                <ActionIcon
+                  icon={RotateCwIcon}
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    form.validateFields([HTTP_URL_KEY]);
+                  }}
+                  size={'small'}
+                  title={t('dev.meta.manifest.refresh')}
+                />
+              }
+            />
+          </Form.Item>
+        )}
+
+        {mcpType === 'stdio' && (
+          <>
+            <Form.Item
+              extra={t('dev.mcp.command.desc')}
+              label={t('dev.mcp.command.label')}
+              name={['mcp', 'command']}
+              rules={[{ required: true }]}
+            >
+              <Input placeholder={t('dev.mcp.command.placeholder')} />
+            </Form.Item>
+            <Form.Item
+              extra={t('dev.mcp.args.desc')}
+              label={t('dev.mcp.args.label')}
+              name={['mcp', 'args']}
+              tooltip={t('dev.mcp.args.tooltip')}
+            >
+              <Select
+                mode="tags"
+                placeholder={t('dev.mcp.args.placeholder')}
+                tokenSeparators={[',', ' ']}
+              />
+            </Form.Item>
+          </>
+        )}
+        <FormItem name={'manifest'} noStyle />
+      </Flexbox>
+    </Form>
+  );
+};
+
+export default MCPManifestForm;

package/src/features/PluginDevModal/PluginPreview.tsx

@@ -1,9 +1,10 @@
-import { Avatar, Form } from '@lobehub/ui';
+import { Form } from '@lobehub/ui';
 import { Form as AForm, Card, FormInstance } from 'antd';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
+import PluginAvatar from '@/features/PluginStore/PluginItem/PluginAvatar';
 import PluginTag from '@/features/PluginStore/PluginItem/PluginTag';
 import { pluginHelpers } from '@/store/tool';
 import { LobeToolCustomPlugin } from '@/types/tool/plugin';
@@ -15,7 +16,7 @@ const PluginPreview = memo<{ form: FormInstance }>(({ form }) => {
   const meta = plugin?.manifest?.meta;
 
   const items = {
-    avatar: <Avatar avatar={pluginHelpers.getPluginAvatar(meta)} style={{ flex: 'none' }} />,
+    avatar: <PluginAvatar avatar={pluginHelpers.getPluginAvatar(meta)} />,
     desc: pluginHelpers.getPluginDesc(meta) || 'Plugin Description',
     label: (
       <Flexbox align={'center'} gap={8} horizontal>
@@ -27,7 +28,7 @@ const PluginPreview = memo<{ form: FormInstance }>(({ form }) => {
   };
 
   return (
-    <Card bodyStyle={{ padding: '0 16px' }} size={'small'} title={t('dev.preview.card')}>
+    <Card size={'small'} styles={{ body: { padding: '0 16px' } }} title={t('dev.preview.card')}>
       <Form.Item {...items} colon={false} style={{ alignItems: 'center', marginBottom: 0 }} />
     </Card>
   );

package/src/features/PluginDevModal/index.tsx

@@ -1,5 +1,5 @@
-import { Alert, Icon, Modal, Tooltip } from '@lobehub/ui';
-import { App, Button, Form, Popconfirm, Segmented } from 'antd';
+import { Alert, Icon, Modal } from '@lobehub/ui';
+import { App, Button, Form, Popconfirm, Segmented, Tag } from 'antd';
 import { useResponsive } from 'antd-style';
 import { MoveUpRight } from 'lucide-react';
 import { memo, useEffect, useState } from 'react';
@@ -9,6 +9,7 @@ import { Flexbox } from 'react-layout-kit';
 import { WIKI_PLUGIN_GUIDE } from '@/const/url';
 import { LobeToolCustomPlugin } from '@/types/tool/plugin';
 
+import MCPManifestForm from './MCPManifestForm';
 import PluginPreview from './PluginPreview';
 import UrlManifestForm from './UrlManifestForm';
 
@@ -25,7 +26,7 @@ interface DevModalProps {
 const DevModal = memo<DevModalProps>(
   ({ open, mode = 'create', value, onValueChange, onSave, onOpenChange, onDelete }) => {
     const isEditMode = mode === 'edit';
-    const [configMode, setConfigMode] = useState<'url' | 'local'>('url');
+    const [configMode, setConfigMode] = useState<'url' | 'mcp'>('mcp');
     const { t } = useTranslation('plugin');
     const { message } = App.useApp();
     const [submitting, setSubmitting] = useState(false);
@@ -118,49 +119,57 @@ const DevModal = memo<DevModalProps>(
               e.stopPropagation();
             }}
           >
-            <Alert
-              message={
-                <Trans i18nKey={'dev.modalDesc'} ns={'plugin'}>
-                  添加自定义插件后，可用于插件开发验证，也可直接在会话中使用。插件开发文档请参考：
-                  <a
-                    href={WIKI_PLUGIN_GUIDE}
-                    rel="noreferrer"
-                    style={{ paddingInline: 8 }}
-                    target={'_blank'}
-                  >
-                    文档
-                  </a>
-                  <Icon icon={MoveUpRight} />
-                </Trans>
-              }
-              showIcon
-              type={'info'}
-            />
             <Segmented
               block
               onChange={(e) => {
-                setConfigMode(e as any);
+                setConfigMode(e as 'url' | 'mcp');
               }}
               options={[
                 {
-                  label: t('dev.manifest.mode.url'),
-                  value: 'url',
-                },
-                {
-                  disabled: true,
                   label: (
-                    <Tooltip title={t('dev.manifest.mode.local-tooltip')}>
-                      {t('dev.manifest.mode.local')}
-                    </Tooltip>
+                    <Flexbox align={'center'} gap={4} horizontal justify={'center'}>
+                      {t('dev.manifest.mode.mcp')}
+                      <div>
+                        <Tag bordered={false} color={'warning'}>
+                          {t('dev.manifest.mode.mcpExp')}
+                        </Tag>
+                      </div>
+                    </Flexbox>
                   ),
-                  value: 'local',
+                  value: 'mcp',
+                },
+                {
+                  label: t('dev.manifest.mode.url'),
+                  value: 'url',
                 },
               ]}
+              value={configMode}
             />
 
-            {configMode === 'url' ? (
-              <UrlManifestForm form={form} isEditMode={mode === 'edit'} />
-            ) : null}
+            {configMode === 'url' && (
+              <>
+                <Alert
+                  message={
+                    <Trans i18nKey={'dev.modalDesc'} ns={'plugin'}>
+                      添加自定义插件后，可用于插件开发验证，也可直接在会话中使用。插件开发文档请参考：
+                      <a
+                        href={WIKI_PLUGIN_GUIDE}
+                        rel="noreferrer"
+                        style={{ paddingInline: 8 }}
+                        target={'_blank'}
+                      >
+                        文档
+                      </a>
+                      <Icon icon={MoveUpRight} />
+                    </Trans>
+                  }
+                  showIcon
+                  type={'info'}
+                />
+                <UrlManifestForm form={form} isEditMode={mode === 'edit'} />
+              </>
+            )}
+            {configMode === 'mcp' && <MCPManifestForm form={form} />}
             <PluginPreview form={form} />
           </Flexbox>
         </Modal>

package/src/features/PluginStore/AddPluginButton.tsx

@@ -5,6 +5,7 @@ import { forwardRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import DevModal from '@/features/PluginDevModal';
+import { useAgentStore } from '@/store/agent';
 import { useToolStore } from '@/store/tool';
 
 const AddPluginButton = forwardRef<HTMLButtonElement>((props, ref) => {
@@ -15,6 +16,7 @@ const AddPluginButton = forwardRef<HTMLButtonElement>((props, ref) => {
     s.installCustomPlugin,
     s.updateNewCustomPlugin,
   ]);
+  const togglePlugin = useAgentStore((s) => s.togglePlugin);
 
   return (
     <div
@@ -26,7 +28,7 @@ const AddPluginButton = forwardRef<HTMLButtonElement>((props, ref) => {
         onOpenChange={setModal}
         onSave={async (devPlugin) => {
           await installCustomPlugin(devPlugin);
-          // toggleAgentPlugin(devPlugin.identifier);
+          await togglePlugin(devPlugin.identifier);
         }}
         onValueChange={updateNewDevPlugin}
         open={showModal}

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