@lobehub/chat 1.81.9 → 1.82.0

package/locales/ru-RU/plugin.json

@@ -34,9 +34,40 @@
         "desc": "Уникальный идентификатор плагина",
         "label": "Идентификатор"
       },
+      "mcp": {
+        "args": {
+          "desc": "Список параметров, передаваемых в команду STDIO",
+          "label": "Параметры команды",
+          "placeholder": "Например: --port 8080 --debug",
+          "tooltip": "Нажмите Enter после ввода параметров или используйте запятую/пробел для разделения"
+        },
+        "command": {
+          "desc": "Исполняемый файл или скрипт для запуска MCP STDIO плагина",
+          "label": "Команда",
+          "placeholder": "Например: python main.py или /path/to/executable"
+        },
+        "endpoint": {
+          "desc": "Введите адрес вашего MCP Streamable HTTP сервера",
+          "label": "MCP Endpoint URL"
+        },
+        "identifier": {
+          "desc": "Укажите имя для вашего MCP плагина, необходимо использовать английские символы",
+          "invalid": "Можно вводить только английские буквы, цифры, символы - и _",
+          "label": "Имя MCP плагина",
+          "placeholder": "Например: my-mcp-plugin"
+        },
+        "type": {
+          "desc": "Выберите способ связи для MCP плагина, веб-версия поддерживает только Streamable HTTP",
+          "label": "Тип MCP плагина"
+        },
+        "url": {
+          "desc": "Введите адрес Endpoint вашего MCP HTTP плагина",
+          "label": "HTTP Endpoint URL"
+        }
+      },
       "mode": {
-        "local": "Локальная настройка",
-        "local-tooltip": "Локальная настройка временно недоступна",
+        "mcp": "MCP плагин",
+        "mcpExp": "Экспериментальный",
         "url": "Ссылка онлайн"
       },
       "name": {

package/locales/tr-TR/plugin.json

@@ -34,9 +34,40 @@
         "desc": "Eklenti için benzersiz tanımlayıcı",
         "label": "Tanımlayıcı"
       },
+      "mcp": {
+        "args": {
+          "desc": "STDIO komutuna iletilen parametreler listesi",
+          "label": "Komut Parametreleri",
+          "placeholder": "Örneğin: --port 8080 --debug",
+          "tooltip": "Parametreleri girdikten sonra enter tuşuna basın veya virgül/boşluk ile ayırın"
+        },
+        "command": {
+          "desc": "MCP STDIO eklentisini başlatmak için kullanılacak yürütülebilir dosya veya betik",
+          "label": "Komut",
+          "placeholder": "Örneğin: python main.py veya /path/to/executable"
+        },
+        "endpoint": {
+          "desc": "MCP Streamable HTTP Sunucunuzun adresini girin",
+          "label": "MCP Endpoint URL"
+        },
+        "identifier": {
+          "desc": "MCP eklentinize bir ad verin, İngilizce karakterler kullanmalısınız",
+          "invalid": "Sadece İngilizce karakterler, rakamlar, - ve _ bu iki sembolü girebilirsiniz",
+          "label": "MCP Eklenti Adı",
+          "placeholder": "Örneğin: my-mcp-plugin"
+        },
+        "type": {
+          "desc": "MCP eklentisinin iletişim yöntemini seçin, web sürümü yalnızca Streamable HTTP'yi destekler",
+          "label": "MCP Eklenti Türü"
+        },
+        "url": {
+          "desc": "MCP HTTP eklentinizin Endpoint adresini girin",
+          "label": "HTTP Endpoint URL"
+        }
+      },
       "mode": {
-        "local": "Yapılandırma",
-        "local-tooltip": "Yapılandırma geçici olarak desteklenmiyor",
+        "mcp": "MCP Eklentisi",
+        "mcpExp": "Deneysel",
         "url": "Çevrimiçi Bağlantı"
       },
       "name": {

package/locales/vi-VN/plugin.json

@@ -35,8 +35,8 @@
         "label": "Định danh"
       },
       "mode": {
-        "local": "Cấu hình trực quan",
-        "local-tooltip": "Tạm thời không hỗ trợ cấu hình trực quan",
+        "mcp": "MCP Plugin",
+        "mcpExp": "Thí nghiệm",
         "url": "Liên kết trực tuyến"
       },
       "name": {
@@ -45,6 +45,37 @@
         "placeholder": "Tìm kiếm công cụ tìm kiếm"
       }
     },
+    "mcp": {
+      "args": {
+        "desc": "Danh sách các tham số được truyền cho lệnh STDIO",
+        "label": "Tham số lệnh",
+        "placeholder": "Ví dụ: --port 8080 --debug",
+        "tooltip": "Nhấn Enter sau khi nhập tham số hoặc sử dụng dấu phẩy/khoảng trắng để phân tách"
+      },
+      "command": {
+        "desc": "Tệp thực thi hoặc kịch bản để khởi động plugin MCP STDIO",
+        "label": "Lệnh",
+        "placeholder": "Ví dụ: python main.py hoặc /path/to/executable"
+      },
+      "endpoint": {
+        "desc": "Nhập địa chỉ của máy chủ HTTP Streamable MCP của bạn",
+        "label": "URL Điểm cuối MCP"
+      },
+      "identifier": {
+        "desc": "Chỉ định một tên cho plugin MCP của bạn, cần sử dụng ký tự tiếng Anh",
+        "invalid": "Chỉ có thể nhập ký tự tiếng Anh, số, và hai ký hiệu - và _",
+        "label": "Tên plugin MCP",
+        "placeholder": "Ví dụ: my-mcp-plugin"
+      },
+      "type": {
+        "desc": "Chọn phương thức giao tiếp của plugin MCP, phiên bản web chỉ hỗ trợ Streamable HTTP",
+        "label": "Loại plugin MCP"
+      },
+      "url": {
+        "desc": "Nhập địa chỉ Điểm cuối HTTP của plugin MCP của bạn",
+        "label": "URL Điểm cuối HTTP"
+      }
+    },
     "meta": {
       "author": {
         "desc": "Tác giả của plugin",

package/locales/zh-CN/plugin.json

@@ -35,8 +35,8 @@
         "label": "标识符"
       },
       "mode": {
-        "local": "可视化配置",
-        "local-tooltip": "暂时不支持可视化配置",
+        "mcp": "MCP 插件",
+        "mcpExp": "实验性",
         "url": "在线链接"
       },
       "name": {
@@ -45,6 +45,37 @@
         "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/locales/zh-TW/plugin.json

@@ -34,9 +34,40 @@
         "desc": "外掛的唯一識別碼",
         "label": "識別碼"
       },
+      "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"
+        }
+      },
       "mode": {
-        "local": "視覺設定",
-        "local-tooltip": "目前不支援視覺設定",
+        "mcp": "MCP 插件",
+        "mcpExp": "實驗性",
         "url": "線上連結"
       },
       "name": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "1.81.9",
+  "version": "1.82.0",
   "description": "Lobe Chat - an open-source, high-performance chatbot framework that supports speech synthesis, multimodal, and extensible Function Call plugin system. Supports one-click free deployment of your private ChatGPT/LLM web application.",
   "keywords": [
     "framework",

package/src/components/ManifestPreviewer/index.tsx

@@ -13,7 +13,10 @@ const ManifestPreviewer = memo<PluginManifestPreviewerProps>(
     <Popover
       arrow={false}
       content={
-        <Highlighter language={'json'} style={{ maxHeight: 600, maxWidth: 400 }}>
+        <Highlighter
+          language={'json'}
+          style={{ maxHeight: 600, maxWidth: 400, overflow: 'scroll' }}
+        >
           {JSON.stringify(manifest, null, 2)}
         </Highlighter>
       }

package/src/features/ChatInput/ActionBar/Tools/Dropdown.tsx

@@ -9,6 +9,7 @@ import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
 import PluginStore from '@/features/PluginStore';
+import PluginAvatar from '@/features/PluginStore/PluginItem/PluginAvatar';
 import { useCheckPluginsIsInstalled } from '@/hooks/useCheckPluginsIsInstalled';
 import { useFetchInstalledPlugins } from '@/hooks/useFetchInstalledPlugins';
 import { useWorkspaceModal } from '@/hooks/useWorkspaceModal';
@@ -67,7 +68,7 @@ const DropdownMenu = memo<PropsWithChildren>(({ children }) => {
       children: [
         ...list.map((item) => ({
           icon: item.meta?.avatar ? (
-            <Avatar avatar={pluginHelpers.getPluginAvatar(item.meta)} size={24} />
+            <PluginAvatar avatar={pluginHelpers.getPluginAvatar(item.meta)} size={24} />
           ) : (
             <Icon icon={ToyBrick} size={{ fontSize: 16 }} style={{ padding: 4 }} />
           ),

package/src/features/Conversation/Extras/Usage/index.tsx

@@ -24,7 +24,13 @@ const Usage = memo<UsageProps>(({ model, metadata, provider }) => {
   const { styles } = useStyles();
 
   return (
-    <Flexbox align={'center'} className={styles.container} horizontal justify={'space-between'}>
+    <Flexbox
+      align={'center'}
+      className={styles.container}
+      gap={12}
+      horizontal
+      justify={'space-between'}
+    >
       <Center gap={4} horizontal style={{ fontSize: 12 }}>
         <ModelIcon model={model as string} type={'mono'} />
         {model}

package/src/features/Conversation/Messages/Assistant/Tool/Render/CustomRender.tsx

@@ -75,7 +75,7 @@ const CustomRender = memo<CustomRenderProps>(
     useEffect(() => {
       if (!plugin?.type || loading) return;
 
-      setShowPluginRender(plugin?.type !== 'default');
+      setShowPluginRender(!['default', 'mcp'].includes(plugin?.type));
     }, [plugin?.type, loading]);
 
     if (loading) return <Arguments arguments={requestArgs} shine />;

package/src/features/PluginAvatar/index.tsx

@@ -1,9 +1,10 @@
-import { Avatar, Icon } from '@lobehub/ui';
+import { Icon } from '@lobehub/ui';
 import isEqual from 'fast-deep-equal';
 import { LucideToyBrick } from 'lucide-react';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
+import Avatar from '@/features/PluginStore/PluginItem/PluginAvatar';
 import { pluginHelpers, useToolStore } from '@/store/tool';
 import { toolSelectors } from '@/store/tool/selectors';
 

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}