merge: merge master into feat/unified_webhook

Resolved conflicts by keeping current branch changes for webhook feature files:
- src/langbot/libs/wecom_ai_bot_api/api.py
- src/langbot/libs/wecom_ai_bot_api/wecombotevent.py
- src/langbot/pkg/api/http/controller/groups/webhooks.py
- src/langbot/pkg/platform/sources/officialaccount.py
- src/langbot/pkg/platform/sources/qqofficial.py
- src/langbot/pkg/platform/sources/wecom.py
- src/langbot/pkg/platform/sources/wecombot.py

Merged master branch changes including:
- Project restructure: moved files from pkg/ and libs/ to src/langbot/
- New features: API key auth, MCP resources, pipeline extensions
- Documentation updates: AGENTS.md, CLAUDE.md, API docs

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

web/package.json

@@ -23,6 +23,7 @@
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
     "@hookform/resolvers": "^5.0.1",
+    "@radix-ui/react-alert-dialog": "^1.1.15",
     "@radix-ui/react-checkbox": "^1.3.1",
     "@radix-ui/react-context-menu": "^2.2.15",
     "@radix-ui/react-dialog": "^1.1.14",

web/src/app/home/bots/components/bot-card/botCard.module.css

@@ -35,7 +35,7 @@
   width: 4rem;
   height: 4rem;
   margin: 0.2rem;
-  /* border-radius: 50%; */
+  border-radius: 8%;
 }
 
 .basicInfoContainer {

web/src/app/home/bots/components/bot-form/BotForm.tsx

@@ -117,7 +117,6 @@ export default function BotForm({
 
   useEffect(() => {
     setBotFormValues();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   // 复制到剪贴板的辅助函数 - 使用页面上的真实input元素
@@ -614,7 +613,7 @@ export default function BotForm({
                 <img
                   src={adapterIconList[form.watch('adapter')]}
                   alt="adapter icon"
-                  className="w-12 h-12"
+                  className="w-12 h-12 rounded-[8%]"
                 />
                 <div className="flex flex-col gap-1">
                   <div className="font-medium">

web/src/app/home/components/api-integration-dialog/ApiIntegrationDialog.tsx

@@ -0,0 +1,678 @@
+'use client';
+
+import * as React from 'react';
+import { useState, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+import { toast } from 'sonner';
+import { Copy, Trash2, Plus } from 'lucide-react';
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+  DialogDescription,
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { Switch } from '@/components/ui/switch';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogPortal,
+  AlertDialogOverlay,
+} from '@/components/ui/alert-dialog';
+import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
+import { backendClient } from '@/app/infra/http';
+
+interface ApiKey {
+  id: number;
+  name: string;
+  key: string;
+  description: string;
+  created_at: string;
+}
+
+interface Webhook {
+  id: number;
+  name: string;
+  url: string;
+  description: string;
+  enabled: boolean;
+  created_at: string;
+}
+
+interface ApiIntegrationDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}
+
+export default function ApiIntegrationDialog({
+  open,
+  onOpenChange,
+}: ApiIntegrationDialogProps) {
+  const { t } = useTranslation();
+  const [activeTab, setActiveTab] = useState('apikeys');
+  const [apiKeys, setApiKeys] = useState<ApiKey[]>([]);
+  const [webhooks, setWebhooks] = useState<Webhook[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [showCreateDialog, setShowCreateDialog] = useState(false);
+  const [newKeyName, setNewKeyName] = useState('');
+  const [newKeyDescription, setNewKeyDescription] = useState('');
+  const [createdKey, setCreatedKey] = useState<ApiKey | null>(null);
+  const [deleteKeyId, setDeleteKeyId] = useState<number | null>(null);
+
+  // Webhook state
+  const [showCreateWebhookDialog, setShowCreateWebhookDialog] = useState(false);
+  const [newWebhookName, setNewWebhookName] = useState('');
+  const [newWebhookUrl, setNewWebhookUrl] = useState('');
+  const [newWebhookDescription, setNewWebhookDescription] = useState('');
+  const [newWebhookEnabled, setNewWebhookEnabled] = useState(true);
+  const [deleteWebhookId, setDeleteWebhookId] = useState<number | null>(null);
+
+  // 清理 body 样式，防止对话框关闭后页面无法交互
+  useEffect(() => {
+    if (!deleteKeyId && !deleteWebhookId) {
+      const cleanup = () => {
+        document.body.style.removeProperty('pointer-events');
+      };
+
+      cleanup();
+      const timer = setTimeout(cleanup, 100);
+      return () => clearTimeout(timer);
+    }
+  }, [deleteKeyId, deleteWebhookId]);
+
+  useEffect(() => {
+    if (open) {
+      loadApiKeys();
+      loadWebhooks();
+    }
+  }, [open]);
+
+  const loadApiKeys = async () => {
+    setLoading(true);
+    try {
+      const response = (await backendClient.get('/api/v1/apikeys')) as {
+        keys: ApiKey[];
+      };
+      setApiKeys(response.keys || []);
+    } catch (error) {
+      toast.error(`Failed to load API keys: ${error}`);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleCreateApiKey = async () => {
+    if (!newKeyName.trim()) {
+      toast.error(t('common.apiKeyNameRequired'));
+      return;
+    }
+
+    try {
+      const response = (await backendClient.post('/api/v1/apikeys', {
+        name: newKeyName,
+        description: newKeyDescription,
+      })) as { key: ApiKey };
+
+      setCreatedKey(response.key);
+      toast.success(t('common.apiKeyCreated'));
+      setNewKeyName('');
+      setNewKeyDescription('');
+      setShowCreateDialog(false);
+      loadApiKeys();
+    } catch (error) {
+      toast.error(`Failed to create API key: ${error}`);
+    }
+  };
+
+  const handleDeleteApiKey = async (keyId: number) => {
+    try {
+      await backendClient.delete(`/api/v1/apikeys/${keyId}`);
+      toast.success(t('common.apiKeyDeleted'));
+      loadApiKeys();
+      setDeleteKeyId(null);
+    } catch (error) {
+      toast.error(`Failed to delete API key: ${error}`);
+    }
+  };
+
+  const handleCopyKey = (key: string) => {
+    navigator.clipboard.writeText(key);
+    toast.success(t('common.apiKeyCopied'));
+  };
+
+  const maskApiKey = (key: string) => {
+    if (key.length <= 8) return key;
+    return `${key.substring(0, 8)}...${key.substring(key.length - 4)}`;
+  };
+
+  // Webhook methods
+  const loadWebhooks = async () => {
+    setLoading(true);
+    try {
+      const response = (await backendClient.get('/api/v1/webhooks')) as {
+        webhooks: Webhook[];
+      };
+      setWebhooks(response.webhooks || []);
+    } catch (error) {
+      toast.error(`Failed to load webhooks: ${error}`);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleCreateWebhook = async () => {
+    if (!newWebhookName.trim()) {
+      toast.error(t('common.webhookNameRequired'));
+      return;
+    }
+    if (!newWebhookUrl.trim()) {
+      toast.error(t('common.webhookUrlRequired'));
+      return;
+    }
+
+    try {
+      await backendClient.post('/api/v1/webhooks', {
+        name: newWebhookName,
+        url: newWebhookUrl,
+        description: newWebhookDescription,
+        enabled: newWebhookEnabled,
+      });
+
+      toast.success(t('common.webhookCreated'));
+      setNewWebhookName('');
+      setNewWebhookUrl('');
+      setNewWebhookDescription('');
+      setNewWebhookEnabled(true);
+      setShowCreateWebhookDialog(false);
+      loadWebhooks();
+    } catch (error) {
+      toast.error(`Failed to create webhook: ${error}`);
+    }
+  };
+
+  const handleDeleteWebhook = async (webhookId: number) => {
+    try {
+      await backendClient.delete(`/api/v1/webhooks/${webhookId}`);
+      toast.success(t('common.webhookDeleted'));
+      loadWebhooks();
+      setDeleteWebhookId(null);
+    } catch (error) {
+      toast.error(`Failed to delete webhook: ${error}`);
+    }
+  };
+
+  const handleToggleWebhook = async (webhook: Webhook) => {
+    try {
+      await backendClient.put(`/api/v1/webhooks/${webhook.id}`, {
+        enabled: !webhook.enabled,
+      });
+      loadWebhooks();
+    } catch (error) {
+      toast.error(`Failed to update webhook: ${error}`);
+    }
+  };
+
+  return (
+    <>
+      <Dialog
+        open={open}
+        onOpenChange={(newOpen) => {
+          // 如果删除确认框是打开的，不允许关闭主对话框
+          if (!newOpen && (deleteKeyId || deleteWebhookId)) {
+            return;
+          }
+          onOpenChange(newOpen);
+        }}
+      >
+        <DialogContent className="sm:max-w-[800px]">
+          <DialogHeader>
+            <DialogTitle>{t('common.manageApiIntegration')}</DialogTitle>
+          </DialogHeader>
+
+          <Tabs
+            value={activeTab}
+            onValueChange={setActiveTab}
+            className="w-full"
+          >
+            <TabsList className="shadow-md py-3 bg-[#f0f0f0] dark:bg-[#2a2a2e]">
+              <TabsTrigger className="px-5 py-4 cursor-pointer" value="apikeys">
+                {t('common.apiKeys')}
+              </TabsTrigger>
+              <TabsTrigger
+                className="px-5 py-4 cursor-pointer"
+                value="webhooks"
+              >
+                {t('common.webhooks')}
+              </TabsTrigger>
+            </TabsList>
+
+            {/* API Keys Tab */}
+            <TabsContent value="apikeys" className="space-y-4">
+              <div className="flex items-start gap-2 text-sm text-muted-foreground">
+                {t('common.apiKeyHint')}
+              </div>
+
+              <div className="flex justify-end">
+                <Button
+                  onClick={() => setShowCreateDialog(true)}
+                  size="sm"
+                  className="gap-2"
+                >
+                  <Plus className="h-4 w-4" />
+                  {t('common.createApiKey')}
+                </Button>
+              </div>
+
+              {loading ? (
+                <div className="text-center py-8 text-muted-foreground">
+                  {t('common.loading')}
+                </div>
+              ) : apiKeys.length === 0 ? (
+                <div className="text-center py-8 text-muted-foreground">
+                  {t('common.noApiKeys')}
+                </div>
+              ) : (
+                <div className="border rounded-md">
+                  <Table>
+                    <TableHeader>
+                      <TableRow>
+                        <TableHead>{t('common.name')}</TableHead>
+                        <TableHead>{t('common.apiKeyValue')}</TableHead>
+                        <TableHead className="w-[100px]">
+                          {t('common.actions')}
+                        </TableHead>
+                      </TableRow>
+                    </TableHeader>
+                    <TableBody>
+                      {apiKeys.map((key) => (
+                        <TableRow key={key.id}>
+                          <TableCell>
+                            <div>
+                              <div className="font-medium">{key.name}</div>
+                              {key.description && (
+                                <div className="text-sm text-muted-foreground">
+                                  {key.description}
+                                </div>
+                              )}
+                            </div>
+                          </TableCell>
+                          <TableCell>
+                            <code className="text-sm bg-muted px-2 py-1 rounded">
+                              {maskApiKey(key.key)}
+                            </code>
+                          </TableCell>
+                          <TableCell>
+                            <div className="flex gap-2">
+                              <Button
+                                variant="ghost"
+                                size="sm"
+                                onClick={() => handleCopyKey(key.key)}
+                                title={t('common.copyApiKey')}
+                              >
+                                <Copy className="h-4 w-4" />
+                              </Button>
+                              <Button
+                                variant="ghost"
+                                size="sm"
+                                onClick={() => setDeleteKeyId(key.id)}
+                                title={t('common.delete')}
+                              >
+                                <Trash2 className="h-4 w-4" />
+                              </Button>
+                            </div>
+                          </TableCell>
+                        </TableRow>
+                      ))}
+                    </TableBody>
+                  </Table>
+                </div>
+              )}
+            </TabsContent>
+
+            {/* Webhooks Tab */}
+            <TabsContent value="webhooks" className="space-y-4">
+              <div className="flex items-start gap-2 text-sm text-muted-foreground">
+                {t('common.webhookHint')}
+              </div>
+
+              <div className="flex justify-end">
+                <Button
+                  onClick={() => setShowCreateWebhookDialog(true)}
+                  size="sm"
+                  className="gap-2"
+                >
+                  <Plus className="h-4 w-4" />
+                  {t('common.createWebhook')}
+                </Button>
+              </div>
+
+              {loading ? (
+                <div className="text-center py-8 text-muted-foreground">
+                  {t('common.loading')}
+                </div>
+              ) : webhooks.length === 0 ? (
+                <div className="text-center py-8 text-muted-foreground">
+                  {t('common.noWebhooks')}
+                </div>
+              ) : (
+                <div className="border rounded-md">
+                  <Table>
+                    <TableHeader>
+                      <TableRow>
+                        <TableHead>{t('common.name')}</TableHead>
+                        <TableHead>{t('common.webhookUrl')}</TableHead>
+                        <TableHead className="w-[80px]">
+                          {t('common.webhookEnabled')}
+                        </TableHead>
+                        <TableHead className="w-[100px]">
+                          {t('common.actions')}
+                        </TableHead>
+                      </TableRow>
+                    </TableHeader>
+                    <TableBody>
+                      {webhooks.map((webhook) => (
+                        <TableRow key={webhook.id}>
+                          <TableCell>
+                            <div>
+                              <div className="font-medium">{webhook.name}</div>
+                              {webhook.description && (
+                                <div className="text-sm text-muted-foreground">
+                                  {webhook.description}
+                                </div>
+                              )}
+                            </div>
+                          </TableCell>
+                          <TableCell>
+                            <code className="text-sm bg-muted px-2 py-1 rounded break-all">
+                              {webhook.url}
+                            </code>
+                          </TableCell>
+                          <TableCell>
+                            <Switch
+                              checked={webhook.enabled}
+                              onCheckedChange={() =>
+                                handleToggleWebhook(webhook)
+                              }
+                            />
+                          </TableCell>
+                          <TableCell>
+                            <Button
+                              variant="ghost"
+                              size="sm"
+                              onClick={() => setDeleteWebhookId(webhook.id)}
+                              title={t('common.delete')}
+                            >
+                              <Trash2 className="h-4 w-4" />
+                            </Button>
+                          </TableCell>
+                        </TableRow>
+                      ))}
+                    </TableBody>
+                  </Table>
+                </div>
+              )}
+            </TabsContent>
+          </Tabs>
+
+          <DialogFooter>
+            <Button variant="outline" onClick={() => onOpenChange(false)}>
+              {t('common.close')}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* Create API Key Dialog */}
+      <Dialog open={showCreateDialog} onOpenChange={setShowCreateDialog}>
+        <DialogContent className="sm:max-w-md">
+          <DialogHeader>
+            <DialogTitle>{t('common.createApiKey')}</DialogTitle>
+          </DialogHeader>
+          <div className="space-y-4">
+            <div>
+              <label className="text-sm font-medium">{t('common.name')}</label>
+              <Input
+                value={newKeyName}
+                onChange={(e) => setNewKeyName(e.target.value)}
+                placeholder={t('common.name')}
+                className="mt-1"
+              />
+            </div>
+            <div>
+              <label className="text-sm font-medium">
+                {t('common.description')}
+              </label>
+              <Input
+                value={newKeyDescription}
+                onChange={(e) => setNewKeyDescription(e.target.value)}
+                placeholder={t('common.description')}
+                className="mt-1"
+              />
+            </div>
+          </div>
+          <DialogFooter>
+            <Button
+              variant="outline"
+              onClick={() => setShowCreateDialog(false)}
+            >
+              {t('common.cancel')}
+            </Button>
+            <Button onClick={handleCreateApiKey}>{t('common.create')}</Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* Show Created Key Dialog */}
+      <Dialog open={!!createdKey} onOpenChange={() => setCreatedKey(null)}>
+        <DialogContent className="sm:max-w-md">
+          <DialogHeader>
+            <DialogTitle>{t('common.apiKeyCreated')}</DialogTitle>
+            <DialogDescription>
+              {t('common.apiKeyCreatedMessage')}
+            </DialogDescription>
+          </DialogHeader>
+          <div className="space-y-4">
+            <div>
+              <label className="text-sm font-medium">
+                {t('common.apiKeyValue')}
+              </label>
+              <div className="flex gap-2 mt-1">
+                <Input value={createdKey?.key || ''} readOnly />
+                <Button
+                  onClick={() => createdKey && handleCopyKey(createdKey.key)}
+                  variant="outline"
+                  size="icon"
+                >
+                  <Copy className="h-4 w-4" />
+                </Button>
+              </div>
+            </div>
+          </div>
+          <DialogFooter>
+            <Button onClick={() => setCreatedKey(null)}>
+              {t('common.close')}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* Create Webhook Dialog */}
+      <Dialog
+        open={showCreateWebhookDialog}
+        onOpenChange={setShowCreateWebhookDialog}
+      >
+        <DialogContent className="sm:max-w-md">
+          <DialogHeader>
+            <DialogTitle>{t('common.createWebhook')}</DialogTitle>
+          </DialogHeader>
+          <div className="space-y-4">
+            <div>
+              <label className="text-sm font-medium">{t('common.name')}</label>
+              <Input
+                value={newWebhookName}
+                onChange={(e) => setNewWebhookName(e.target.value)}
+                placeholder={t('common.webhookName')}
+                className="mt-1"
+              />
+            </div>
+            <div>
+              <label className="text-sm font-medium">
+                {t('common.webhookUrl')}
+              </label>
+              <Input
+                value={newWebhookUrl}
+                onChange={(e) => setNewWebhookUrl(e.target.value)}
+                placeholder="https://example.com/webhook"
+                className="mt-1"
+              />
+            </div>
+            <div>
+              <label className="text-sm font-medium">
+                {t('common.description')}
+              </label>
+              <Input
+                value={newWebhookDescription}
+                onChange={(e) => setNewWebhookDescription(e.target.value)}
+                placeholder={t('common.description')}
+                className="mt-1"
+              />
+            </div>
+            <div className="flex items-center gap-2">
+              <Switch
+                checked={newWebhookEnabled}
+                onCheckedChange={setNewWebhookEnabled}
+              />
+              <label className="text-sm font-medium">
+                {t('common.webhookEnabled')}
+              </label>
+            </div>
+          </div>
+          <DialogFooter>
+            <Button
+              variant="outline"
+              onClick={() => setShowCreateWebhookDialog(false)}
+            >
+              {t('common.cancel')}
+            </Button>
+            <Button onClick={handleCreateWebhook}>{t('common.create')}</Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* Delete API Key Confirmation Dialog */}
+      <Dialog open={!!createdKey} onOpenChange={() => setCreatedKey(null)}>
+        <DialogContent className="sm:max-w-md">
+          <DialogHeader>
+            <DialogTitle>{t('common.apiKeyCreated')}</DialogTitle>
+            <DialogDescription>
+              {t('common.apiKeyCreatedMessage')}
+            </DialogDescription>
+          </DialogHeader>
+          <div className="space-y-4">
+            <div>
+              <label className="text-sm font-medium">
+                {t('common.apiKeyValue')}
+              </label>
+              <div className="flex gap-2 mt-1">
+                <Input value={createdKey?.key || ''} readOnly />
+                <Button
+                  onClick={() => createdKey && handleCopyKey(createdKey.key)}
+                  variant="outline"
+                  size="icon"
+                >
+                  <Copy className="h-4 w-4" />
+                </Button>
+              </div>
+            </div>
+          </div>
+          <DialogFooter>
+            <Button onClick={() => setCreatedKey(null)}>
+              {t('common.close')}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* Delete Confirmation Dialog */}
+      <AlertDialog open={!!deleteKeyId}>
+        <AlertDialogPortal>
+          <AlertDialogOverlay
+            className="z-[60]"
+            onClick={() => setDeleteKeyId(null)}
+          />
+          <AlertDialogPrimitive.Content
+            className="fixed left-[50%] top-[50%] z-[60] grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 sm:rounded-lg"
+            onEscapeKeyDown={() => setDeleteKeyId(null)}
+          >
+            <AlertDialogHeader>
+              <AlertDialogTitle>{t('common.confirmDelete')}</AlertDialogTitle>
+              <AlertDialogDescription>
+                {t('common.apiKeyDeleteConfirm')}
+              </AlertDialogDescription>
+            </AlertDialogHeader>
+            <AlertDialogFooter>
+              <AlertDialogCancel onClick={() => setDeleteKeyId(null)}>
+                {t('common.cancel')}
+              </AlertDialogCancel>
+              <AlertDialogAction
+                onClick={() => deleteKeyId && handleDeleteApiKey(deleteKeyId)}
+              >
+                {t('common.delete')}
+              </AlertDialogAction>
+            </AlertDialogFooter>
+          </AlertDialogPrimitive.Content>
+        </AlertDialogPortal>
+      </AlertDialog>
+
+      {/* Delete Webhook Confirmation Dialog */}
+      <AlertDialog open={!!deleteWebhookId}>
+        <AlertDialogPortal>
+          <AlertDialogOverlay
+            className="z-[60]"
+            onClick={() => setDeleteWebhookId(null)}
+          />
+          <AlertDialogPrimitive.Content
+            className="fixed left-[50%] top-[50%] z-[60] grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 sm:rounded-lg"
+            onEscapeKeyDown={() => setDeleteWebhookId(null)}
+          >
+            <AlertDialogHeader>
+              <AlertDialogTitle>{t('common.confirmDelete')}</AlertDialogTitle>
+              <AlertDialogDescription>
+                {t('common.webhookDeleteConfirm')}
+              </AlertDialogDescription>
+            </AlertDialogHeader>
+            <AlertDialogFooter>
+              <AlertDialogCancel onClick={() => setDeleteWebhookId(null)}>
+                {t('common.cancel')}
+              </AlertDialogCancel>
+              <AlertDialogAction
+                onClick={() =>
+                  deleteWebhookId && handleDeleteWebhook(deleteWebhookId)
+                }
+              >
+                {t('common.delete')}
+              </AlertDialogAction>
+            </AlertDialogFooter>
+          </AlertDialogPrimitive.Content>
+        </AlertDialogPortal>
+      </AlertDialog>
+    </>
+  );
+}

web/src/app/home/components/dynamic-form/DynamicFormComponent.tsx

@@ -11,18 +11,23 @@ import {
   FormMessage,
 } from '@/components/ui/form';
 import DynamicFormItemComponent from '@/app/home/components/dynamic-form/DynamicFormItemComponent';
-import { useEffect } from 'react';
+import { useEffect, useRef } from 'react';
 import { extractI18nObject } from '@/i18n/I18nProvider';
 
 export default function DynamicFormComponent({
   itemConfigList,
   onSubmit,
   initialValues,
+  onFileUploaded,
 }: {
   itemConfigList: IDynamicFormItemSchema[];
   onSubmit?: (val: object) => unknown;
   initialValues?: Record<string, object>;
+  onFileUploaded?: (fileKey: string) => void;
 }) {
+  const isInitialMount = useRef(true);
+  const previousInitialValues = useRef(initialValues);
+
   // 根据 itemConfigList 动态生成 zod schema
   const formSchema = z.object(
     itemConfigList.reduce(
@@ -53,6 +58,12 @@ export default function DynamicFormComponent({
           case 'knowledge-base-selector':
             fieldSchema = z.string();
             break;
+          case 'knowledge-base-multi-selector':
+            fieldSchema = z.array(z.string());
+            break;
+          case 'bot-selector':
+            fieldSchema = z.string();
+            break;
           case 'prompt-editor':
             fieldSchema = z.array(
               z.object({
@@ -97,9 +108,24 @@ export default function DynamicFormComponent({
   });
 
   // 当 initialValues 变化时更新表单值
+  // 但要避免因为内部表单更新触发的 onSubmit 导致的 initialValues 变化而重新设置表单
   useEffect(() => {
     console.log('initialValues', initialValues);
-    if (initialValues) {
+
+    // 首次挂载时，使用 initialValues 初始化表单
+    if (isInitialMount.current) {
+      isInitialMount.current = false;
+      previousInitialValues.current = initialValues;
+      return;
+    }
+
+    // 检查 initialValues 是否真的发生了实质性变化
+    // 使用 JSON.stringify 进行深度比较
+    const hasRealChange =
+      JSON.stringify(previousInitialValues.current) !==
+      JSON.stringify(initialValues);
+
+    if (initialValues && hasRealChange) {
       // 合并默认值和初始值
       const mergedValues = itemConfigList.reduce(
         (acc, item) => {
@@ -112,6 +138,8 @@ export default function DynamicFormComponent({
       Object.entries(mergedValues).forEach(([key, value]) => {
         form.setValue(key as keyof FormValues, value);
       });
+
+      previousInitialValues.current = initialValues;
     }
   }, [initialValues, form, itemConfigList]);
 
@@ -149,7 +177,11 @@ export default function DynamicFormComponent({
                   {config.required && <span className="text-red-500">*</span>}
                 </FormLabel>
                 <FormControl>
-                  <DynamicFormItemComponent config={config} field={field} />
+                  <DynamicFormItemComponent
+                    config={config}
+                    field={field}
+                    onFileUploaded={onFileUploaded}
+                  />
                 </FormControl>
                 {config.description && (
                   <p className="text-sm text-muted-foreground">

web/src/app/home/components/dynamic-form/DynamicFormItemComponent.tsx

@@ -1,6 +1,7 @@
 import {
   DynamicFormItemType,
   IDynamicFormItemSchema,
+  IFileConfig,
 } from '@/app/infra/entities/form/dynamic';
 import { Input } from '@/components/ui/input';
 import {
@@ -16,7 +17,7 @@ import { ControllerRenderProps } from 'react-hook-form';
 import { Button } from '@/components/ui/button';
 import { useEffect, useState } from 'react';
 import { httpClient } from '@/app/infra/http/HttpClient';
-import { LLMModel } from '@/app/infra/entities/api';
+import { LLMModel, Bot } from '@/app/infra/entities/api';
 import { KnowledgeBase } from '@/app/infra/entities/api';
 import { toast } from 'sonner';
 import {
@@ -27,19 +28,65 @@ import {
 import { useTranslation } from 'react-i18next';
 import { extractI18nObject } from '@/i18n/I18nProvider';
 import { Textarea } from '@/components/ui/textarea';
+import { Card, CardContent } from '@/components/ui/card';
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+} from '@/components/ui/dialog';
+import { Checkbox } from '@/components/ui/checkbox';
+import { Plus, X } from 'lucide-react';
 
 export default function DynamicFormItemComponent({
   config,
   field,
+  onFileUploaded,
 }: {
   config: IDynamicFormItemSchema;
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   field: ControllerRenderProps<any, any>;
+  onFileUploaded?: (fileKey: string) => void;
 }) {
   const [llmModels, setLlmModels] = useState<LLMModel[]>([]);
   const [knowledgeBases, setKnowledgeBases] = useState<KnowledgeBase[]>([]);
+  const [bots, setBots] = useState<Bot[]>([]);
+  const [uploading, setUploading] = useState<boolean>(false);
+  const [kbDialogOpen, setKbDialogOpen] = useState(false);
+  const [tempSelectedKBIds, setTempSelectedKBIds] = useState<string[]>([]);
   const { t } = useTranslation();
 
+  const handleFileUpload = async (file: File): Promise<IFileConfig | null> => {
+    const MAX_FILE_SIZE = 10 * 1024 * 1024; // 10MB
+
+    if (file.size > MAX_FILE_SIZE) {
+      toast.error(t('plugins.fileUpload.tooLarge'));
+      return null;
+    }
+
+    try {
+      setUploading(true);
+      const response = await httpClient.uploadPluginConfigFile(file);
+      toast.success(t('plugins.fileUpload.success'));
+
+      // 通知父组件文件已上传
+      onFileUploaded?.(response.file_key);
+
+      return {
+        file_key: response.file_key,
+        mimetype: file.type,
+      };
+    } catch (error) {
+      toast.error(
+        t('plugins.fileUpload.failed') + ': ' + (error as Error).message,
+      );
+      return null;
+    } finally {
+      setUploading(false);
+    }
+  };
+
   useEffect(() => {
     if (config.type === DynamicFormItemType.LLM_MODEL_SELECTOR) {
       httpClient
@@ -48,20 +95,36 @@ export default function DynamicFormItemComponent({
           setLlmModels(resp.models);
         })
         .catch((err) => {
-          toast.error('获取 LLM 模型列表失败：' + err.message);
+          toast.error('Failed to get LLM model list: ' + err.message);
         });
     }
   }, [config.type]);
 
   useEffect(() => {
-    if (config.type === DynamicFormItemType.KNOWLEDGE_BASE_SELECTOR) {
+    if (
+      config.type === DynamicFormItemType.KNOWLEDGE_BASE_SELECTOR ||
+      config.type === DynamicFormItemType.KNOWLEDGE_BASE_MULTI_SELECTOR
+    ) {
       httpClient
         .getKnowledgeBases()
         .then((resp) => {
           setKnowledgeBases(resp.bases);
         })
         .catch((err) => {
-          toast.error('获取知识库列表失败：' + err.message);
+          toast.error('Failed to get knowledge base list: ' + err.message);
+        });
+    }
+  }, [config.type]);
+
+  useEffect(() => {
+    if (config.type === DynamicFormItemType.BOT_SELECTOR) {
+      httpClient
+        .getBots()
+        .then((resp) => {
+          setBots(resp.bots);
+        })
+        .catch((err) => {
+          toast.error('Failed to get bot list: ' + err.message);
         });
     }
   }, [config.type]);
@@ -80,6 +143,9 @@ export default function DynamicFormItemComponent({
     case DynamicFormItemType.STRING:
       return <Input {...field} />;
 
+    case DynamicFormItemType.TEXT:
+      return <Textarea {...field} className="min-h-[120px]" />;
+
     case DynamicFormItemType.BOOLEAN:
       return <Switch checked={field.value} onCheckedChange={field.onChange} />;
 
@@ -174,7 +240,7 @@ export default function DynamicFormItemComponent({
                             model.requester,
                           )}
                           alt="icon"
-                          className="w-8 h-8 rounded-full"
+                          className="w-8 h-8 rounded-[8%]"
                         />
                         <h4 className="font-medium">{model.name}</h4>
                       </div>
@@ -284,6 +350,146 @@ export default function DynamicFormItemComponent({
         </Select>
       );
 
+    case DynamicFormItemType.KNOWLEDGE_BASE_MULTI_SELECTOR:
+      return (
+        <>
+          <div className="space-y-2">
+            {field.value && field.value.length > 0 ? (
+              <div className="space-y-2">
+                {field.value.map((kbId: string) => {
+                  const kb = knowledgeBases.find((base) => base.uuid === kbId);
+                  if (!kb) return null;
+                  return (
+                    <div
+                      key={kbId}
+                      className="flex items-center justify-between rounded-lg border p-3 hover:bg-accent"
+                    >
+                      <div className="flex-1">
+                        <div className="font-medium">{kb.name}</div>
+                        {kb.description && (
+                          <div className="text-sm text-muted-foreground">
+                            {kb.description}
+                          </div>
+                        )}
+                      </div>
+                      <Button
+                        type="button"
+                        variant="ghost"
+                        size="icon"
+                        onClick={() => {
+                          const newValue = field.value.filter(
+                            (id: string) => id !== kbId,
+                          );
+                          field.onChange(newValue);
+                        }}
+                      >
+                        <X className="h-4 w-4" />
+                      </Button>
+                    </div>
+                  );
+                })}
+              </div>
+            ) : (
+              <div className="flex h-32 items-center justify-center rounded-lg border-2 border-dashed border-border">
+                <p className="text-sm text-muted-foreground">
+                  {t('knowledge.noKnowledgeBaseSelected')}
+                </p>
+              </div>
+            )}
+          </div>
+
+          <Button
+            type="button"
+            onClick={() => {
+              setTempSelectedKBIds(field.value || []);
+              setKbDialogOpen(true);
+            }}
+            variant="outline"
+            className="w-full"
+          >
+            <Plus className="mr-2 h-4 w-4" />
+            {t('knowledge.addKnowledgeBase')}
+          </Button>
+
+          {/* Knowledge Base Selection Dialog */}
+          <Dialog open={kbDialogOpen} onOpenChange={setKbDialogOpen}>
+            <DialogContent className="max-w-2xl max-h-[80vh] overflow-hidden flex flex-col">
+              <DialogHeader>
+                <DialogTitle>{t('knowledge.selectKnowledgeBases')}</DialogTitle>
+              </DialogHeader>
+              <div className="flex-1 overflow-y-auto space-y-2 pr-2">
+                {knowledgeBases.map((base) => {
+                  const isSelected = tempSelectedKBIds.includes(
+                    base.uuid ?? '',
+                  );
+                  return (
+                    <div
+                      key={base.uuid}
+                      className="flex items-center gap-3 rounded-lg border p-3 hover:bg-accent cursor-pointer"
+                      onClick={() => {
+                        const kbId = base.uuid ?? '';
+                        setTempSelectedKBIds((prev) =>
+                          prev.includes(kbId)
+                            ? prev.filter((id) => id !== kbId)
+                            : [...prev, kbId],
+                        );
+                      }}
+                    >
+                      <Checkbox
+                        checked={isSelected}
+                        aria-label={`Select ${base.name}`}
+                      />
+                      <div className="flex-1">
+                        <div className="font-medium">{base.name}</div>
+                        {base.description && (
+                          <div className="text-sm text-muted-foreground">
+                            {base.description}
+                          </div>
+                        )}
+                      </div>
+                    </div>
+                  );
+                })}
+              </div>
+              <DialogFooter>
+                <Button
+                  variant="outline"
+                  onClick={() => setKbDialogOpen(false)}
+                >
+                  {t('common.cancel')}
+                </Button>
+                <Button
+                  onClick={() => {
+                    field.onChange(tempSelectedKBIds);
+                    setKbDialogOpen(false);
+                  }}
+                >
+                  {t('common.confirm')}
+                </Button>
+              </DialogFooter>
+            </DialogContent>
+          </Dialog>
+        </>
+      );
+
+    case DynamicFormItemType.BOT_SELECTOR:
+      return (
+        <Select value={field.value} onValueChange={field.onChange}>
+          <SelectTrigger className="bg-[#ffffff] dark:bg-[#2a2a2e]">
+            <SelectValue placeholder={t('bots.selectBot')} />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectGroup>
+              {bots.map((bot) => (
+                <SelectItem key={bot.uuid} value={bot.uuid ?? ''}>
+                  {bot.name}
+                </SelectItem>
+              ))}
+            </SelectGroup>
+          </SelectContent>
+        </Select>
+      );
+
     case DynamicFormItemType.PROMPT_EDITOR:
       return (
         <div className="space-y-2">
@@ -366,6 +572,185 @@ export default function DynamicFormItemComponent({
         </div>
       );
 
+    case DynamicFormItemType.FILE:
+      return (
+        <div className="space-y-2">
+          {field.value && (field.value as IFileConfig).file_key ? (
+            <Card className="py-3 max-w-full overflow-hidden bg-gray-900">
+              <CardContent className="flex items-center gap-3 p-0 px-4 min-w-0">
+                <div className="flex-1 min-w-0 overflow-hidden">
+                  <div
+                    className="text-sm font-medium truncate"
+                    title={(field.value as IFileConfig).file_key}
+                  >
+                    {(field.value as IFileConfig).file_key}
+                  </div>
+                  <div className="text-xs text-muted-foreground truncate">
+                    {(field.value as IFileConfig).mimetype}
+                  </div>
+                </div>
+                <Button
+                  type="button"
+                  variant="ghost"
+                  size="sm"
+                  className="flex-shrink-0 h-8 w-8 p-0"
+                  onClick={(e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    field.onChange(null);
+                  }}
+                  title={t('common.delete')}
+                >
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    viewBox="0 0 24 24"
+                    fill="currentColor"
+                    className="w-4 h-4 text-destructive"
+                  >
+                    <path d="M7 4V2H17V4H22V6H20V21C20 21.5523 19.5523 22 19 22H5C4.44772 22 4 21.5523 4 21V6H2V4H7ZM6 6V20H18V6H6ZM9 9H11V17H9V9ZM13 9H15V17H13V9Z"></path>
+                  </svg>
+                </Button>
+              </CardContent>
+            </Card>
+          ) : (
+            <div className="relative">
+              <input
+                type="file"
+                accept={config.accept}
+                disabled={uploading}
+                onChange={async (e) => {
+                  const file = e.target.files?.[0];
+                  if (file) {
+                    const fileConfig = await handleFileUpload(file);
+                    if (fileConfig) {
+                      field.onChange(fileConfig);
+                    }
+                  }
+                  e.target.value = '';
+                }}
+                className="hidden"
+                id={`file-input-${config.name}`}
+              />
+              <Button
+                type="button"
+                variant="outline"
+                size="sm"
+                disabled={uploading}
+                onClick={() =>
+                  document.getElementById(`file-input-${config.name}`)?.click()
+                }
+              >
+                <svg
+                  className="w-4 h-4 mr-2"
+                  xmlns="http://www.w3.org/2000/svg"
+                  viewBox="0 0 24 24"
+                  fill="currentColor"
+                >
+                  <path d="M11 11V5H13V11H19V13H13V19H11V13H5V11H11Z"></path>
+                </svg>
+                {uploading
+                  ? t('plugins.fileUpload.uploading')
+                  : t('plugins.fileUpload.chooseFile')}
+              </Button>
+            </div>
+          )}
+        </div>
+      );
+
+    case DynamicFormItemType.FILE_ARRAY:
+      return (
+        <div className="space-y-2">
+          {(field.value as IFileConfig[])?.map(
+            (fileConfig: IFileConfig, index: number) => (
+              <Card
+                key={index}
+                className="py-3 max-w-full overflow-hidden bg-gray-900"
+              >
+                <CardContent className="flex items-center gap-3 p-0 px-4 min-w-0">
+                  <div className="flex-1 min-w-0 overflow-hidden">
+                    <div
+                      className="text-sm font-medium truncate"
+                      title={fileConfig.file_key}
+                    >
+                      {fileConfig.file_key}
+                    </div>
+                    <div className="text-xs text-muted-foreground truncate">
+                      {fileConfig.mimetype}
+                    </div>
+                  </div>
+                  <Button
+                    type="button"
+                    variant="ghost"
+                    size="sm"
+                    className="flex-shrink-0 h-8 w-8 p-0"
+                    onClick={(e) => {
+                      e.preventDefault();
+                      e.stopPropagation();
+                      const newValue = (field.value as IFileConfig[]).filter(
+                        (_: IFileConfig, i: number) => i !== index,
+                      );
+                      field.onChange(newValue);
+                    }}
+                    title={t('common.delete')}
+                  >
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      viewBox="0 0 24 24"
+                      fill="currentColor"
+                      className="w-4 h-4 text-destructive"
+                    >
+                      <path d="M7 4V2H17V4H22V6H20V21C20 21.5523 19.5523 22 19 22H5C4.44772 22 4 21.5523 4 21V6H2V4H7ZM6 6V20H18V6H6ZM9 9H11V17H9V9ZM13 9H15V17H13V9Z"></path>
+                    </svg>
+                  </Button>
+                </CardContent>
+              </Card>
+            ),
+          )}
+          <div className="relative">
+            <input
+              type="file"
+              accept={config.accept}
+              disabled={uploading}
+              onChange={async (e) => {
+                const file = e.target.files?.[0];
+                if (file) {
+                  const fileConfig = await handleFileUpload(file);
+                  if (fileConfig) {
+                    field.onChange([...(field.value || []), fileConfig]);
+                  }
+                }
+                e.target.value = '';
+              }}
+              className="hidden"
+              id={`file-array-input-${config.name}`}
+            />
+            <Button
+              type="button"
+              variant="outline"
+              size="sm"
+              disabled={uploading}
+              onClick={() =>
+                document
+                  .getElementById(`file-array-input-${config.name}`)
+                  ?.click()
+              }
+            >
+              <svg
+                className="w-4 h-4 mr-2"
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 24 24"
+                fill="currentColor"
+              >
+                <path d="M11 11V5H13V11H19V13H13V19H11V13H5V11H11Z"></path>
+              </svg>
+              {uploading
+                ? t('plugins.fileUpload.uploading')
+                : t('plugins.fileUpload.addFile')}
+            </Button>
+          </div>
+        </div>
+      );
+
     default:
       return <Input {...field} />;
   }

web/src/app/home/components/home-sidebar/HomeSidebar.tsx

@@ -25,6 +25,7 @@ import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group';
 import { LanguageSelector } from '@/components/ui/language-selector';
 import { Badge } from '@/components/ui/badge';
 import PasswordChangeDialog from '@/app/home/components/password-change-dialog/PasswordChangeDialog';
+import ApiIntegrationDialog from '@/app/home/components/api-integration-dialog/ApiIntegrationDialog';
 
 // TODO 侧边导航栏要加动画
 export default function HomeSidebar({
@@ -45,6 +46,7 @@ export default function HomeSidebar({
   const { t } = useTranslation();
   const [popoverOpen, setPopoverOpen] = useState(false);
   const [passwordChangeOpen, setPasswordChangeOpen] = useState(false);
+  const [apiKeyDialogOpen, setApiKeyDialogOpen] = useState(false);
   const [languageSelectorOpen, setLanguageSelectorOpen] = useState(false);
   const [starCount, setStarCount] = useState<number | null>(null);
 
@@ -65,7 +67,6 @@ export default function HomeSidebar({
         console.error('Failed to fetch GitHub star count:', error);
       });
     return () => console.log('sidebar.unmounted');
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   function handleChildClick(child: SidebarChildVO) {
@@ -189,24 +190,7 @@ export default function HomeSidebar({
 
         <SidebarChild
           onClick={() => {
-            // open docs.langbot.app
-            const language = localStorage.getItem('langbot_language');
-            if (language === 'zh-Hans') {
-              window.open(
-                'https://docs.langbot.app/zh/insight/guide.html',
-                '_blank',
-              );
-            } else if (language === 'zh-Hant') {
-              window.open(
-                'https://docs.langbot.app/zh/insight/guide.html',
-                '_blank',
-              );
-            } else {
-              window.open(
-                'https://docs.langbot.app/en/insight/guide.html',
-                '_blank',
-              );
-            }
+            setApiKeyDialogOpen(true);
           }}
           isSelected={false}
           icon={
@@ -215,10 +199,10 @@ export default function HomeSidebar({
               viewBox="0 0 24 24"
               fill="currentColor"
             >
-              <path d="M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20ZM11 15H13V17H11V15ZM13 13.3551V14H11V12.5C11 11.9477 11.4477 11.5 12 11.5C12.8284 11.5 13.5 10.8284 13.5 10C13.5 9.17157 12.8284 8.5 12 8.5C11.2723 8.5 10.6656 9.01823 10.5288 9.70577L8.56731 9.31346C8.88637 7.70919 10.302 6.5 12 6.5C13.933 6.5 15.5 8.067 15.5 10C15.5 11.5855 14.4457 12.9248 13 13.3551Z"></path>
+              <path d="M10.7577 11.8281L18.6066 3.97919L20.0208 5.3934L18.6066 6.80761L21.0815 9.28249L19.6673 10.6967L17.1924 8.22183L15.7782 9.63604L17.8995 11.7574L16.4853 13.1716L14.364 11.0503L12.1719 13.2423C13.4581 15.1837 13.246 17.8251 11.5355 19.5355C9.58291 21.4882 6.41709 21.4882 4.46447 19.5355C2.51184 17.5829 2.51184 14.4171 4.46447 12.4645C6.17493 10.754 8.81633 10.5419 10.7577 11.8281ZM10.1213 18.1213C11.2929 16.9497 11.2929 15.0503 10.1213 13.8787C8.94975 12.7071 7.05025 12.7071 5.87868 13.8787C4.70711 15.0503 4.70711 16.9497 5.87868 18.1213C7.05025 19.2929 8.94975 19.2929 10.1213 18.1213Z"></path>
             </svg>
           }
-          name={t('common.helpDocs')}
+          name={t('common.apiIntegration')}
         />
 
         <Popover
@@ -284,6 +268,41 @@ export default function HomeSidebar({
 
             <div className="flex flex-col gap-2 w-full">
               <span className="text-sm font-medium">{t('common.account')}</span>
+              <Button
+                variant="ghost"
+                className="w-full justify-start font-normal"
+                onClick={() => {
+                  // open docs.langbot.app
+                  const language = localStorage.getItem('langbot_language');
+                  if (language === 'zh-Hans') {
+                    window.open(
+                      'https://docs.langbot.app/zh/insight/guide.html',
+                      '_blank',
+                    );
+                  } else if (language === 'zh-Hant') {
+                    window.open(
+                      'https://docs.langbot.app/zh/insight/guide.html',
+                      '_blank',
+                    );
+                  } else {
+                    window.open(
+                      'https://docs.langbot.app/en/insight/guide.html',
+                      '_blank',
+                    );
+                  }
+                  setPopoverOpen(false);
+                }}
+              >
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  viewBox="0 0 24 24"
+                  fill="currentColor"
+                  className="w-4 h-4 mr-2"
+                >
+                  <path d="M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20ZM11 15H13V17H11V15ZM13 13.3551V14H11V12.5C11 11.9477 11.4477 11.5 12 11.5C12.8284 11.5 13.5 10.8284 13.5 10C13.5 9.17157 12.8284 8.5 12 8.5C11.2723 8.5 10.6656 9.01823 10.5288 9.70577L8.56731 9.31346C8.88637 7.70919 10.302 6.5 12 6.5C13.933 6.5 15.5 8.067 15.5 10C15.5 11.5855 14.4457 12.9248 13 13.3551Z"></path>
+                </svg>
+                {t('common.helpDocs')}
+              </Button>
               <Button
                 variant="ghost"
                 className="w-full justify-start font-normal"
@@ -327,6 +346,10 @@ export default function HomeSidebar({
         open={passwordChangeOpen}
         onOpenChange={setPasswordChangeOpen}
       />
+      <ApiIntegrationDialog
+        open={apiKeyDialogOpen}
+        onOpenChange={setApiKeyDialogOpen}
+      />
     </div>
   );
 }

web/src/app/home/knowledge/components/kb-docs/FileUploadZone.tsx

@@ -23,6 +23,13 @@ export default function FileUploadZone({
     async (file: File) => {
       if (isUploading) return;
 
+      // Check file size (10MB limit)
+      const MAX_FILE_SIZE = 10 * 1024 * 1024; // 10MB
+      if (file.size > MAX_FILE_SIZE) {
+        toast.error(t('knowledge.documentsTab.fileSizeExceeded'));
+        return;
+      }
+
       setIsUploading(true);
       const toastId = toast.loading(t('knowledge.documentsTab.uploadingFile'));
 
@@ -46,7 +53,7 @@ export default function FileUploadZone({
         setIsUploading(false);
       }
     },
-    [kbId, isUploading, onUploadSuccess, onUploadError],
+    [kbId, isUploading, onUploadSuccess, onUploadError, t],
   );
 
   const handleDragOver = useCallback((e: React.DragEvent) => {

web/src/app/home/knowledge/components/kb-form/KBForm.tsx

@@ -13,7 +13,6 @@ import {
   FormMessage,
   FormDescription,
 } from '@/components/ui/form';
-import { IEmbeddingModelEntity } from './ChooseEntity';
 import { httpClient } from '@/app/infra/http/HttpClient';
 import {
   Select,
@@ -23,8 +22,13 @@ import {
   SelectTrigger,
   SelectValue,
 } from '@/components/ui/select';
-import { KnowledgeBase } from '@/app/infra/entities/api';
+import { KnowledgeBase, EmbeddingModel } from '@/app/infra/entities/api';
 import { toast } from 'sonner';
+import {
+  HoverCard,
+  HoverCardContent,
+  HoverCardTrigger,
+} from '@/components/ui/hover-card';
 
 const getFormSchema = (t: (key: string) => string) =>
   z.object({
@@ -63,9 +67,7 @@ export default function KBForm({
     },
   });
 
-  const [embeddingModelNameList, setEmbeddingModelNameList] = useState<
-    IEmbeddingModelEntity[]
-  >([]);
+  const [embeddingModels, setEmbeddingModels] = useState<EmbeddingModel[]>([]);
 
   useEffect(() => {
     getEmbeddingModelNameList().then(() => {
@@ -97,14 +99,7 @@ export default function KBForm({
 
   const getEmbeddingModelNameList = async () => {
     const resp = await httpClient.getProviderEmbeddingModels();
-    setEmbeddingModelNameList(
-      resp.models.map((item) => {
-        return {
-          label: item.name,
-          value: item.uuid,
-        };
-      }),
-    );
+    setEmbeddingModels(resp.models);
   };
 
   const onSubmit = (data: z.infer<typeof formSchema>) => {
@@ -216,10 +211,87 @@ export default function KBForm({
                         </SelectTrigger>
                         <SelectContent className="fixed z-[1000]">
                           <SelectGroup>
-                            {embeddingModelNameList.map((item) => (
-                              <SelectItem key={item.value} value={item.value}>
-                                {item.label}
-                              </SelectItem>
+                            {embeddingModels.map((model) => (
+                              <HoverCard
+                                key={model.uuid}
+                                openDelay={0}
+                                closeDelay={0}
+                              >
+                                <HoverCardTrigger asChild>
+                                  <SelectItem value={model.uuid}>
+                                    {model.name}
+                                  </SelectItem>
+                                </HoverCardTrigger>
+                                <HoverCardContent
+                                  className="w-80 data-[state=open]:animate-none data-[state=closed]:animate-none"
+                                  align="end"
+                                  side="right"
+                                  sideOffset={10}
+                                >
+                                  <div className="space-y-2">
+                                    <div className="flex items-center gap-2">
+                                      <img
+                                        src={httpClient.getProviderRequesterIconURL(
+                                          model.requester,
+                                        )}
+                                        alt="icon"
+                                        className="w-8 h-8 rounded-[8%]"
+                                      />
+                                      <h4 className="font-medium">
+                                        {model.name}
+                                      </h4>
+                                    </div>
+                                    <p className="text-sm text-muted-foreground">
+                                      {model.description}
+                                    </p>
+                                    {model.requester_config && (
+                                      <div className="flex items-center gap-1 text-xs">
+                                        <svg
+                                          className="w-4 h-4 text-gray-500"
+                                          xmlns="http://www.w3.org/2000/svg"
+                                          viewBox="0 0 24 24"
+                                          fill="currentColor"
+                                        >
+                                          <path d="M13.0607 8.11097L14.4749 9.52518C17.2086 12.2589 17.2086 16.691 14.4749 19.4247L14.1214 19.7782C11.3877 22.5119 6.95555 22.5119 4.22188 19.7782C1.48821 17.0446 1.48821 12.6124 4.22188 9.87874L5.6361 11.293C3.68348 13.2456 3.68348 16.4114 5.6361 18.364C7.58872 20.3166 10.7545 20.3166 12.7072 18.364L13.0607 18.0105C15.0133 16.0578 15.0133 12.892 13.0607 10.9394L11.6465 9.52518L13.0607 8.11097ZM19.7782 14.1214L18.364 12.7072C20.3166 10.7545 20.3166 7.58872 18.364 5.6361C16.4114 3.68348 13.2456 3.68348 11.293 5.6361L10.9394 5.98965C8.98678 7.94227 8.98678 11.1081 10.9394 13.0607L12.3536 14.4749L10.9394 15.8891L9.52518 14.4749C6.79151 11.7413 6.79151 7.30911 9.52518 4.57544L9.87874 4.22188C12.6124 1.48821 17.0446 1.48821 19.7782 4.22188C22.5119 6.95555 22.5119 11.3877 19.7782 14.1214Z"></path>
+                                        </svg>
+                                        <span className="font-semibold">
+                                          Base URL：
+                                        </span>
+                                        {model.requester_config.base_url}
+                                      </div>
+                                    )}
+                                    {model.extra_args &&
+                                      Object.keys(model.extra_args).length >
+                                        0 && (
+                                        <div className="text-xs">
+                                          <div className="font-semibold mb-1">
+                                            {t('models.extraParameters')}
+                                          </div>
+                                          <div className="space-y-1">
+                                            {Object.entries(
+                                              model.extra_args as Record<
+                                                string,
+                                                unknown
+                                              >,
+                                            ).map(([key, value]) => (
+                                              <div
+                                                key={key}
+                                                className="flex items-center gap-1"
+                                              >
+                                                <span className="text-gray-500">
+                                                  {key}：
+                                                </span>
+                                                <span className="break-all">
+                                                  {JSON.stringify(value)}
+                                                </span>
+                                              </div>
+                                            ))}
+                                          </div>
+                                        </div>
+                                      )}
+                                  </div>
+                                </HoverCardContent>
+                              </HoverCard>
                             ))}
                           </SelectGroup>
                         </SelectContent>

web/src/app/home/layout.tsx

@@ -3,7 +3,7 @@
 import styles from './layout.module.css';
 import HomeSidebar from '@/app/home/components/home-sidebar/HomeSidebar';
 import HomeTitleBar from '@/app/home/components/home-titlebar/HomeTitleBar';
-import React, { useState } from 'react';
+import React, { useState, useCallback, useMemo } from 'react';
 import { SidebarChildVO } from '@/app/home/components/home-sidebar/HomeSidebarChild';
 import { I18nObject } from '@/app/infra/entities/common';
 
@@ -18,11 +18,15 @@ export default function HomeLayout({
     en_US: '',
     zh_Hans: '',
   });
-  const onSelectedChangeAction = (child: SidebarChildVO) => {
+
+  const onSelectedChangeAction = useCallback((child: SidebarChildVO) => {
     setTitle(child.name);
     setSubtitle(child.description);
     setHelpLink(child.helpLink);
-  };
+  }, []);
+
+  // Memoize the main content area to prevent re-renders when sidebar state changes
+  const mainContent = useMemo(() => children, [children]);
 
   return (
     <div className={styles.homeLayoutContainer}>
@@ -33,7 +37,7 @@ export default function HomeLayout({
       <div className={styles.main}>
         <HomeTitleBar title={title} subtitle={subtitle} helpLink={helpLink} />
 
-        <main className={styles.mainContent}>{children}</main>
+        <main className={styles.mainContent}>{mainContent}</main>
       </div>
     </div>
   );

web/src/app/home/models/component/ChooseRequesterEntity.ts

@@ -1,4 +1,5 @@
 export interface IChooseRequesterEntity {
   label: string;
   value: string;
+  provider_category?: string;
 }

web/src/app/home/models/component/embedding-card/EmbeddingCard.module.css

@@ -35,7 +35,7 @@
   width: 3.8rem;
   height: 3.8rem;
   margin: 0.2rem;
-  border-radius: 50%;
+  border-radius: 8%;
 }
 
 .basicInfoContainer {

web/src/app/home/models/component/embedding-form/EmbeddingForm.tsx

@@ -34,6 +34,7 @@ import {
   SelectContent,
   SelectGroup,
   SelectItem,
+  SelectLabel,
   SelectTrigger,
   SelectValue,
 } from '@/components/ui/select';
@@ -75,7 +76,7 @@ const getFormSchema = (t: (key: string) => string) =>
       .string()
       .min(1, { message: t('models.modelProviderRequired') }),
     url: z.string().min(1, { message: t('models.requestURLRequired') }),
-    api_key: z.string().min(1, { message: t('models.apiKeyRequired') }),
+    api_key: z.string().optional(),
     extra_args: z.array(getExtraArgSchema(t)).optional(),
   });
 
@@ -101,7 +102,7 @@ export default function EmbeddingForm({
       name: '',
       model_provider: '',
       url: '',
-      api_key: 'sk-xxxxx',
+      api_key: '',
       extra_args: [],
     },
   });
@@ -186,6 +187,7 @@ export default function EmbeddingForm({
         return {
           label: extractI18nObject(item.label),
           value: item.name,
+          provider_category: item.spec.provider_category || 'manufacturer',
         };
       }),
     );
@@ -245,7 +247,7 @@ export default function EmbeddingForm({
         timeout: 120,
       },
       extra_args: extraArgsObj,
-      api_keys: [value.api_key],
+      api_keys: value.api_key ? [value.api_key] : [],
     };
 
     if (editMode) {
@@ -310,6 +312,7 @@ export default function EmbeddingForm({
           extraArgsObj[arg.key] = arg.value;
         }
       });
+    const apiKey = form.getValues('api_key');
     httpClient
       .testEmbeddingModel('_', {
         uuid: '',
@@ -320,7 +323,7 @@ export default function EmbeddingForm({
           base_url: form.getValues('url'),
           timeout: 120,
         },
-        api_keys: [form.getValues('api_key')],
+        api_keys: apiKey ? [apiKey] : [],
         extra_args: extraArgsObj,
       })
       .then((res) => {
@@ -424,11 +427,44 @@ export default function EmbeddingForm({
                       </SelectTrigger>
                       <SelectContent>
                         <SelectGroup>
-                          {requesterNameList.map((item) => (
-                            <SelectItem key={item.value} value={item.value}>
-                              {item.label}
-                            </SelectItem>
-                          ))}
+                          <SelectLabel>
+                            {t('models.modelManufacturer')}
+                          </SelectLabel>
+                          {requesterNameList
+                            .filter(
+                              (item) =>
+                                item.provider_category === 'manufacturer',
+                            )
+                            .map((item) => (
+                              <SelectItem key={item.value} value={item.value}>
+                                {item.label}
+                              </SelectItem>
+                            ))}
+                        </SelectGroup>
+                        <SelectGroup>
+                          <SelectLabel>
+                            {t('models.aggregationPlatform')}
+                          </SelectLabel>
+                          {requesterNameList
+                            .filter((item) => item.provider_category === 'maas')
+                            .map((item) => (
+                              <SelectItem key={item.value} value={item.value}>
+                                {item.label}
+                              </SelectItem>
+                            ))}
+                        </SelectGroup>
+                        <SelectGroup>
+                          <SelectLabel>{t('models.selfDeployed')}</SelectLabel>
+                          {requesterNameList
+                            .filter(
+                              (item) =>
+                                item.provider_category === 'self-hosted',
+                            )
+                            .map((item) => (
+                              <SelectItem key={item.value} value={item.value}>
+                                {item.label}
+                              </SelectItem>
+                            ))}
                         </SelectGroup>
                       </SelectContent>
                     </Select>
@@ -461,10 +497,7 @@ export default function EmbeddingForm({
                 name="api_key"
                 render={({ field }) => (
                   <FormItem>
-                    <FormLabel>
-                      {t('models.apiKey')}
-                      <span className="text-red-500">*</span>
-                    </FormLabel>
+                    <FormLabel>{t('models.apiKey')}</FormLabel>
                     <FormControl>
                       <Input {...field} />
                     </FormControl>

web/src/app/home/models/component/llm-card/LLMCard.module.css

@@ -36,7 +36,7 @@
   width: 3.8rem;
   height: 3.8rem;
   margin: 0.2rem;
-  border-radius: 50%;
+  border-radius: 8%;
 }
 
 .basicInfoContainer {

web/src/app/home/models/component/llm-form/LLMForm.tsx

@@ -34,6 +34,7 @@ import {
   SelectContent,
   SelectGroup,
   SelectItem,
+  SelectLabel,
   SelectTrigger,
   SelectValue,
 } from '@/components/ui/select';
@@ -76,7 +77,7 @@ const getFormSchema = (t: (key: string) => string) =>
       .string()
       .min(1, { message: t('models.modelProviderRequired') }),
     url: z.string().min(1, { message: t('models.requestURLRequired') }),
-    api_key: z.string().min(1, { message: t('models.apiKeyRequired') }),
+    api_key: z.string().optional(),
     abilities: z.array(z.string()),
     extra_args: z.array(getExtraArgSchema(t)).optional(),
   });
@@ -103,7 +104,7 @@ export default function LLMForm({
       name: '',
       model_provider: '',
       url: '',
-      api_key: 'sk-xxxxx',
+      api_key: '',
       abilities: [],
       extra_args: [],
     },
@@ -203,6 +204,7 @@ export default function LLMForm({
         return {
           label: extractI18nObject(item.label),
           value: item.name,
+          provider_category: item.spec.provider_category || 'manufacturer',
         };
       }),
     );
@@ -261,7 +263,7 @@ export default function LLMForm({
         timeout: 120,
       },
       extra_args: extraArgsObj,
-      api_keys: [value.api_key],
+      api_keys: value.api_key ? [value.api_key] : [],
       abilities: value.abilities,
     };
 
@@ -324,6 +326,7 @@ export default function LLMForm({
           extraArgsObj[arg.key] = arg.value;
         }
       });
+    const apiKey = form.getValues('api_key');
     httpClient
       .testLLMModel('_', {
         uuid: '',
@@ -334,7 +337,7 @@ export default function LLMForm({
           base_url: form.getValues('url'),
           timeout: 120,
         },
-        api_keys: [form.getValues('api_key')],
+        api_keys: apiKey ? [apiKey] : [],
         abilities: form.getValues('abilities'),
         extra_args: extraArgsObj,
       })
@@ -439,11 +442,44 @@ export default function LLMForm({
                       </SelectTrigger>
                       <SelectContent>
                         <SelectGroup>
-                          {requesterNameList.map((item) => (
-                            <SelectItem key={item.value} value={item.value}>
-                              {item.label}
-                            </SelectItem>
-                          ))}
+                          <SelectLabel>
+                            {t('models.modelManufacturer')}
+                          </SelectLabel>
+                          {requesterNameList
+                            .filter(
+                              (item) =>
+                                item.provider_category === 'manufacturer',
+                            )
+                            .map((item) => (
+                              <SelectItem key={item.value} value={item.value}>
+                                {item.label}
+                              </SelectItem>
+                            ))}
+                        </SelectGroup>
+                        <SelectGroup>
+                          <SelectLabel>
+                            {t('models.aggregationPlatform')}
+                          </SelectLabel>
+                          {requesterNameList
+                            .filter((item) => item.provider_category === 'maas')
+                            .map((item) => (
+                              <SelectItem key={item.value} value={item.value}>
+                                {item.label}
+                              </SelectItem>
+                            ))}
+                        </SelectGroup>
+                        <SelectGroup>
+                          <SelectLabel>{t('models.selfDeployed')}</SelectLabel>
+                          {requesterNameList
+                            .filter(
+                              (item) =>
+                                item.provider_category === 'self-hosted',
+                            )
+                            .map((item) => (
+                              <SelectItem key={item.value} value={item.value}>
+                                {item.label}
+                              </SelectItem>
+                            ))}
                         </SelectGroup>
                       </SelectContent>
                     </Select>
@@ -478,10 +514,7 @@ export default function LLMForm({
                 name="api_key"
                 render={({ field }) => (
                   <FormItem>
-                    <FormLabel>
-                      {t('models.apiKey')}
-                      <span className="text-red-500">*</span>
-                    </FormLabel>
+                    <FormLabel>{t('models.apiKey')}</FormLabel>
                     <FormControl>
                       <Input {...field} />
                     </FormControl>

web/src/app/home/pipelines/PipelineDetailDialog.tsx

@@ -18,6 +18,7 @@ import {
 } from '@/components/ui/sidebar';
 import PipelineFormComponent from './components/pipeline-form/PipelineFormComponent';
 import DebugDialog from './components/debug-dialog/DebugDialog';
+import PipelineExtension from './components/pipeline-extensions/PipelineExtension';
 
 interface PipelineDialogProps {
   open: boolean;
@@ -31,14 +32,13 @@ interface PipelineDialogProps {
   onCancel: () => void;
 }
 
-type DialogMode = 'config' | 'debug';
+type DialogMode = 'config' | 'debug' | 'extensions';
 
 export default function PipelineDialog({
   open,
   onOpenChange,
   pipelineId: propPipelineId,
   isEditMode = false,
-  isDefaultPipeline = false,
   onFinish,
   onNewPipelineCreated,
   onDeletePipeline,
@@ -81,6 +81,19 @@ export default function PipelineDialog({
         </svg>
       ),
     },
+    {
+      key: 'extensions',
+      label: t('pipelines.extensions.title'),
+      icon: (
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 24 24"
+          fill="currentColor"
+        >
+          <path d="M7 5C7 2.79086 8.79086 1 11 1C13.2091 1 15 2.79086 15 5H18C18.5523 5 19 5.44772 19 6V9C21.2091 9 23 10.7909 23 13C23 15.2091 21.2091 17 19 17V20C19 20.5523 18.5523 21 18 21H4C3.44772 21 3 20.5523 3 20V6C3 5.44772 3.44772 5 4 5H7ZM11 3C9.89543 3 9 3.89543 9 5C9 5.23554 9.0403 5.45952 9.11355 5.66675C9.22172 5.97282 9.17461 6.31235 8.98718 6.57739C8.79974 6.84243 8.49532 7 8.17071 7H5V19H17V15.8293C17 15.5047 17.1576 15.2003 17.4226 15.0128C17.6877 14.8254 18.0272 14.7783 18.3332 14.8865C18.5405 14.9597 18.7645 15 19 15C20.1046 15 21 14.1046 21 13C21 11.8954 20.1046 11 19 11C18.7645 11 18.5405 11.0403 18.3332 11.1135C18.0272 11.2217 17.6877 11.1746 17.4226 10.9872C17.1576 10.7997 17 10.4953 17 10.1707V7H13.8293C13.5047 7 13.2003 6.84243 13.0128 6.57739C12.8254 6.31235 12.7783 5.97282 12.8865 5.66675C12.9597 5.45952 13 5.23555 13 5C13 3.89543 12.1046 3 11 3Z"></path>
+        </svg>
+      ),
+    },
     {
       key: 'debug',
       label: t('pipelines.debugChat'),
@@ -102,6 +115,9 @@ export default function PipelineDialog({
         ? t('pipelines.editPipeline')
         : t('pipelines.createPipeline');
     }
+    if (currentMode === 'extensions') {
+      return t('pipelines.extensions.title');
+    }
     return t('pipelines.debugDialog.title');
   };
 
@@ -116,7 +132,6 @@ export default function PipelineDialog({
             </DialogHeader>
             <div className="flex-1 overflow-y-auto px-6 pb-6">
               <PipelineFormComponent
-                isDefaultPipeline={isDefaultPipeline}
                 onFinish={handleFinish}
                 onNewPipelineCreated={handleNewPipelineCreated}
                 isEditMode={isEditMode}
@@ -175,12 +190,11 @@ export default function PipelineDialog({
               <DialogTitle>{getDialogTitle()}</DialogTitle>
             </DialogHeader>
             <div
-              className="flex-1 auto px-6 pb-4 w-full"
+              className="flex-1 overflow-y-auto px-6 pb-4 w-full"
               style={{ height: 'calc(100% - 4rem)' }}
             >
               {currentMode === 'config' && (
                 <PipelineFormComponent
-                  isDefaultPipeline={isDefaultPipeline}
                   onFinish={handleFinish}
                   onNewPipelineCreated={handleNewPipelineCreated}
                   isEditMode={isEditMode}
@@ -193,6 +207,11 @@ export default function PipelineDialog({
                   }}
                 />
               )}
+
+              {currentMode === 'extensions' && pipelineId && (
+                <PipelineExtension pipelineId={pipelineId} />
+              )}
+
               {currentMode === 'debug' && pipelineId && (
                 <DebugDialog
                   open={true}

web/src/app/home/pipelines/components/pipeline-extensions/PipelineExtension.tsx

@@ -0,0 +1,525 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { backendClient } from '@/app/infra/http';
+import { Button } from '@/components/ui/button';
+import { toast } from 'sonner';
+import { Skeleton } from '@/components/ui/skeleton';
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+} from '@/components/ui/dialog';
+import { Checkbox } from '@/components/ui/checkbox';
+import { Plus, X, Server, Wrench } from 'lucide-react';
+import { Badge } from '@/components/ui/badge';
+import { Plugin } from '@/app/infra/entities/plugin';
+import { MCPServer } from '@/app/infra/entities/api';
+import PluginComponentList from '@/app/home/plugins/components/plugin-installed/PluginComponentList';
+
+export default function PipelineExtension({
+  pipelineId,
+}: {
+  pipelineId: string;
+}) {
+  const { t } = useTranslation();
+  const [loading, setLoading] = useState(true);
+  const [selectedPlugins, setSelectedPlugins] = useState<Plugin[]>([]);
+  const [allPlugins, setAllPlugins] = useState<Plugin[]>([]);
+  const [selectedMCPServers, setSelectedMCPServers] = useState<MCPServer[]>([]);
+  const [allMCPServers, setAllMCPServers] = useState<MCPServer[]>([]);
+  const [pluginDialogOpen, setPluginDialogOpen] = useState(false);
+  const [mcpDialogOpen, setMcpDialogOpen] = useState(false);
+  const [tempSelectedPluginIds, setTempSelectedPluginIds] = useState<string[]>(
+    [],
+  );
+  const [tempSelectedMCPIds, setTempSelectedMCPIds] = useState<string[]>([]);
+
+  useEffect(() => {
+    loadExtensions();
+  }, [pipelineId]);
+
+  const getPluginId = (plugin: Plugin): string => {
+    const author = plugin.manifest.manifest.metadata.author;
+    const name = plugin.manifest.manifest.metadata.name;
+    return `${author}/${name}`;
+  };
+
+  const loadExtensions = async () => {
+    try {
+      setLoading(true);
+      const data = await backendClient.getPipelineExtensions(pipelineId);
+
+      const boundPluginIds = new Set(
+        data.bound_plugins.map((p) => `${p.author}/${p.name}`),
+      );
+
+      const selected = data.available_plugins.filter((plugin) =>
+        boundPluginIds.has(getPluginId(plugin)),
+      );
+
+      setSelectedPlugins(selected);
+      setAllPlugins(data.available_plugins);
+
+      // Load MCP servers
+      const boundMCPServerIds = new Set(data.bound_mcp_servers || []);
+      const selectedMCP = data.available_mcp_servers.filter((server) =>
+        boundMCPServerIds.has(server.uuid || ''),
+      );
+
+      setSelectedMCPServers(selectedMCP);
+      setAllMCPServers(data.available_mcp_servers);
+    } catch (error) {
+      console.error('Failed to load extensions:', error);
+      toast.error(t('pipelines.extensions.loadError'));
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const saveToBackend = async (plugins: Plugin[], mcpServers: MCPServer[]) => {
+    try {
+      const boundPluginsArray = plugins.map((plugin) => {
+        const metadata = plugin.manifest.manifest.metadata;
+        return {
+          author: metadata.author || '',
+          name: metadata.name,
+        };
+      });
+
+      const boundMCPServerIds = mcpServers.map((server) => server.uuid || '');
+
+      await backendClient.updatePipelineExtensions(
+        pipelineId,
+        boundPluginsArray,
+        boundMCPServerIds,
+      );
+      toast.success(t('pipelines.extensions.saveSuccess'));
+    } catch (error) {
+      console.error('Failed to save extensions:', error);
+      toast.error(t('pipelines.extensions.saveError'));
+      // Reload on error to restore correct state
+      loadExtensions();
+    }
+  };
+
+  const handleRemovePlugin = async (pluginId: string) => {
+    const newPlugins = selectedPlugins.filter(
+      (p) => getPluginId(p) !== pluginId,
+    );
+    setSelectedPlugins(newPlugins);
+    await saveToBackend(newPlugins, selectedMCPServers);
+  };
+
+  const handleRemoveMCPServer = async (serverUuid: string) => {
+    const newServers = selectedMCPServers.filter((s) => s.uuid !== serverUuid);
+    setSelectedMCPServers(newServers);
+    await saveToBackend(selectedPlugins, newServers);
+  };
+
+  const handleOpenPluginDialog = () => {
+    setTempSelectedPluginIds(selectedPlugins.map((p) => getPluginId(p)));
+    setPluginDialogOpen(true);
+  };
+
+  const handleOpenMCPDialog = () => {
+    setTempSelectedMCPIds(selectedMCPServers.map((s) => s.uuid || ''));
+    setMcpDialogOpen(true);
+  };
+
+  const handleTogglePlugin = (pluginId: string) => {
+    setTempSelectedPluginIds((prev) =>
+      prev.includes(pluginId)
+        ? prev.filter((id) => id !== pluginId)
+        : [...prev, pluginId],
+    );
+  };
+
+  const handleToggleMCPServer = (serverUuid: string) => {
+    setTempSelectedMCPIds((prev) =>
+      prev.includes(serverUuid)
+        ? prev.filter((id) => id !== serverUuid)
+        : [...prev, serverUuid],
+    );
+  };
+
+  const handleToggleAllPlugins = () => {
+    if (tempSelectedPluginIds.length === allPlugins.length) {
+      // Deselect all
+      setTempSelectedPluginIds([]);
+    } else {
+      // Select all
+      setTempSelectedPluginIds(allPlugins.map((p) => getPluginId(p)));
+    }
+  };
+
+  const handleToggleAllMCPServers = () => {
+    if (tempSelectedMCPIds.length === allMCPServers.length) {
+      // Deselect all
+      setTempSelectedMCPIds([]);
+    } else {
+      // Select all
+      setTempSelectedMCPIds(allMCPServers.map((s) => s.uuid || ''));
+    }
+  };
+
+  const handleConfirmPluginSelection = async () => {
+    const newSelected = allPlugins.filter((p) =>
+      tempSelectedPluginIds.includes(getPluginId(p)),
+    );
+    setSelectedPlugins(newSelected);
+    setPluginDialogOpen(false);
+    await saveToBackend(newSelected, selectedMCPServers);
+  };
+
+  const handleConfirmMCPSelection = async () => {
+    const newSelected = allMCPServers.filter((s) =>
+      tempSelectedMCPIds.includes(s.uuid || ''),
+    );
+    setSelectedMCPServers(newSelected);
+    setMcpDialogOpen(false);
+    await saveToBackend(selectedPlugins, newSelected);
+  };
+
+  if (loading) {
+    return (
+      <div className="space-y-4">
+        <Skeleton className="h-20 w-full" />
+        <Skeleton className="h-20 w-full" />
+        <Skeleton className="h-20 w-full" />
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-6">
+      {/* Plugins Section */}
+      <div className="space-y-3">
+        <h3 className="text-sm font-semibold text-foreground">
+          {t('pipelines.extensions.pluginsTitle')}
+        </h3>
+        <div className="space-y-2">
+          {selectedPlugins.length === 0 ? (
+            <div className="flex h-32 items-center justify-center rounded-lg border-2 border-dashed border-border">
+              <p className="text-sm text-muted-foreground">
+                {t('pipelines.extensions.noPluginsSelected')}
+              </p>
+            </div>
+          ) : (
+            <div className="space-y-2">
+              {selectedPlugins.map((plugin) => {
+                const pluginId = getPluginId(plugin);
+                const metadata = plugin.manifest.manifest.metadata;
+                return (
+                  <div
+                    key={pluginId}
+                    className="flex items-center justify-between rounded-lg border p-3 hover:bg-accent"
+                  >
+                    <div className="flex-1 flex items-center gap-3">
+                      <img
+                        src={backendClient.getPluginIconURL(
+                          metadata.author || '',
+                          metadata.name,
+                        )}
+                        alt={metadata.name}
+                        className="w-10 h-10 rounded-lg border bg-muted object-cover flex-shrink-0"
+                      />
+                      <div className="flex-1">
+                        <div className="font-medium">{metadata.name}</div>
+                        <div className="text-sm text-muted-foreground">
+                          {metadata.author} • v{metadata.version}
+                        </div>
+                        <div className="flex gap-1 mt-1">
+                          <PluginComponentList
+                            components={plugin.components}
+                            showComponentName={true}
+                            showTitle={false}
+                            useBadge={true}
+                            t={t}
+                          />
+                        </div>
+                      </div>
+                      {!plugin.enabled && (
+                        <Badge variant="secondary">
+                          {t('pipelines.extensions.disabled')}
+                        </Badge>
+                      )}
+                    </div>
+                    <Button
+                      variant="ghost"
+                      size="icon"
+                      onClick={() => handleRemovePlugin(pluginId)}
+                    >
+                      <X className="h-4 w-4" />
+                    </Button>
+                  </div>
+                );
+              })}
+            </div>
+          )}
+        </div>
+
+        <Button
+          onClick={handleOpenPluginDialog}
+          variant="outline"
+          className="w-full"
+        >
+          <Plus className="mr-2 h-4 w-4" />
+          {t('pipelines.extensions.addPlugin')}
+        </Button>
+      </div>
+
+      {/* MCP Servers Section */}
+      <div className="space-y-3">
+        <h3 className="text-sm font-semibold text-foreground">
+          {t('pipelines.extensions.mcpServersTitle')}
+        </h3>
+        <div className="space-y-2">
+          {selectedMCPServers.length === 0 ? (
+            <div className="flex h-32 items-center justify-center rounded-lg border-2 border-dashed border-border">
+              <p className="text-sm text-muted-foreground">
+                {t('pipelines.extensions.noMCPServersSelected')}
+              </p>
+            </div>
+          ) : (
+            <div className="space-y-2">
+              {selectedMCPServers.map((server) => (
+                <div
+                  key={server.uuid}
+                  className="flex items-center justify-between rounded-lg border p-3 hover:bg-accent"
+                >
+                  <div className="flex-1 flex items-center gap-3">
+                    <div className="w-10 h-10 rounded-lg border bg-muted flex items-center justify-center flex-shrink-0">
+                      <Server className="h-5 w-5 text-muted-foreground" />
+                    </div>
+                    <div className="flex-1">
+                      <div className="font-medium">{server.name}</div>
+                      <div className="text-sm text-muted-foreground">
+                        {server.mode}
+                      </div>
+                      {server.runtime_info &&
+                        server.runtime_info.status === 'connected' && (
+                          <Badge
+                            variant="outline"
+                            className="flex items-center gap-1 mt-1"
+                          >
+                            <Wrench className="h-3 w-3 text-black dark:text-white" />
+                            <span className="text-xs text-black dark:text-white">
+                              {t('pipelines.extensions.toolCount', {
+                                count: server.runtime_info.tool_count || 0,
+                              })}
+                            </span>
+                          </Badge>
+                        )}
+                    </div>
+                    {!server.enable && (
+                      <Badge variant="secondary">
+                        {t('pipelines.extensions.disabled')}
+                      </Badge>
+                    )}
+                  </div>
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    onClick={() => handleRemoveMCPServer(server.uuid || '')}
+                  >
+                    <X className="h-4 w-4" />
+                  </Button>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+
+        <Button
+          onClick={handleOpenMCPDialog}
+          variant="outline"
+          className="w-full"
+        >
+          <Plus className="mr-2 h-4 w-4" />
+          {t('pipelines.extensions.addMCPServer')}
+        </Button>
+      </div>
+
+      {/* Plugin Selection Dialog */}
+      <Dialog open={pluginDialogOpen} onOpenChange={setPluginDialogOpen}>
+        <DialogContent className="max-w-2xl max-h-[80vh] overflow-hidden flex flex-col">
+          <DialogHeader>
+            <DialogTitle>{t('pipelines.extensions.selectPlugins')}</DialogTitle>
+          </DialogHeader>
+          {allPlugins.length > 0 && (
+            <div
+              className="flex items-center gap-3 px-1 py-2 border-b cursor-pointer"
+              onClick={handleToggleAllPlugins}
+            >
+              <Checkbox
+                checked={
+                  tempSelectedPluginIds.length === allPlugins.length &&
+                  allPlugins.length > 0
+                }
+                onCheckedChange={handleToggleAllPlugins}
+              />
+              <span className="text-sm font-medium">
+                {t('pipelines.extensions.selectAll')}
+              </span>
+            </div>
+          )}
+          <div className="flex-1 overflow-y-auto space-y-2 pr-2">
+            {allPlugins.length === 0 ? (
+              <div className="flex h-full items-center justify-center">
+                <p className="text-sm text-muted-foreground">
+                  {t('pipelines.extensions.noPluginsInstalled')}
+                </p>
+              </div>
+            ) : (
+              allPlugins.map((plugin) => {
+                const pluginId = getPluginId(plugin);
+                const metadata = plugin.manifest.manifest.metadata;
+                const isSelected = tempSelectedPluginIds.includes(pluginId);
+                return (
+                  <div
+                    key={pluginId}
+                    className="flex items-center gap-3 rounded-lg border p-3 hover:bg-accent cursor-pointer"
+                    onClick={() => handleTogglePlugin(pluginId)}
+                  >
+                    <Checkbox checked={isSelected} />
+                    <img
+                      src={backendClient.getPluginIconURL(
+                        metadata.author || '',
+                        metadata.name,
+                      )}
+                      alt={metadata.name}
+                      className="w-10 h-10 rounded-lg border bg-muted object-cover flex-shrink-0"
+                    />
+                    <div className="flex-1">
+                      <div className="font-medium">{metadata.name}</div>
+                      <div className="text-sm text-muted-foreground">
+                        {metadata.author} • v{metadata.version}
+                      </div>
+                      <div className="flex gap-1 mt-1">
+                        <PluginComponentList
+                          components={plugin.components}
+                          showComponentName={true}
+                          showTitle={false}
+                          useBadge={true}
+                          t={t}
+                        />
+                      </div>
+                    </div>
+                    {!plugin.enabled && (
+                      <Badge variant="secondary">
+                        {t('pipelines.extensions.disabled')}
+                      </Badge>
+                    )}
+                  </div>
+                );
+              })
+            )}
+          </div>
+          <DialogFooter>
+            <Button
+              variant="outline"
+              onClick={() => setPluginDialogOpen(false)}
+            >
+              {t('common.cancel')}
+            </Button>
+            <Button onClick={handleConfirmPluginSelection}>
+              {t('common.confirm')}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* MCP Server Selection Dialog */}
+      <Dialog open={mcpDialogOpen} onOpenChange={setMcpDialogOpen}>
+        <DialogContent className="max-w-2xl max-h-[80vh] overflow-hidden flex flex-col">
+          <DialogHeader>
+            <DialogTitle>
+              {t('pipelines.extensions.selectMCPServers')}
+            </DialogTitle>
+          </DialogHeader>
+          {allMCPServers.length > 0 && (
+            <div
+              className="flex items-center gap-3 px-1 py-2 border-b cursor-pointer"
+              onClick={handleToggleAllMCPServers}
+            >
+              <Checkbox
+                checked={
+                  tempSelectedMCPIds.length === allMCPServers.length &&
+                  allMCPServers.length > 0
+                }
+                onCheckedChange={handleToggleAllMCPServers}
+              />
+              <span className="text-sm font-medium">
+                {t('pipelines.extensions.selectAll')}
+              </span>
+            </div>
+          )}
+          <div className="flex-1 overflow-y-auto space-y-2 pr-2">
+            {allMCPServers.length === 0 ? (
+              <div className="flex h-full items-center justify-center">
+                <p className="text-sm text-muted-foreground">
+                  {t('pipelines.extensions.noMCPServersConfigured')}
+                </p>
+              </div>
+            ) : (
+              allMCPServers.map((server) => {
+                const isSelected = tempSelectedMCPIds.includes(
+                  server.uuid || '',
+                );
+                return (
+                  <div
+                    key={server.uuid}
+                    className="flex items-center gap-3 rounded-lg border p-3 hover:bg-accent cursor-pointer"
+                    onClick={() => handleToggleMCPServer(server.uuid || '')}
+                  >
+                    <Checkbox checked={isSelected} />
+                    <div className="w-10 h-10 rounded-lg border bg-muted flex items-center justify-center flex-shrink-0">
+                      <Server className="h-5 w-5 text-muted-foreground" />
+                    </div>
+                    <div className="flex-1">
+                      <div className="font-medium">{server.name}</div>
+                      <div className="text-sm text-muted-foreground">
+                        {server.mode}
+                      </div>
+                      {server.runtime_info &&
+                        server.runtime_info.status === 'connected' && (
+                          <Badge
+                            variant="outline"
+                            className="flex items-center gap-1 mt-1"
+                          >
+                            <Wrench className="h-3 w-3 text-black dark:text-white" />
+                            <span className="text-xs text-black dark:text-white">
+                              {t('pipelines.extensions.toolCount', {
+                                count: server.runtime_info.tool_count || 0,
+                              })}
+                            </span>
+                          </Badge>
+                        )}
+                    </div>
+                    {!server.enable && (
+                      <Badge variant="secondary">
+                        {t('pipelines.extensions.disabled')}
+                      </Badge>
+                    )}
+                  </div>
+                );
+              })
+            )}
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setMcpDialogOpen(false)}>
+              {t('common.cancel')}
+            </Button>
+            <Button onClick={handleConfirmMCPSelection}>
+              {t('common.confirm')}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}

web/src/app/home/pipelines/components/pipeline-form/PipelineFormComponent.tsx

@@ -33,7 +33,6 @@ import { useTranslation } from 'react-i18next';
 import { extractI18nObject } from '@/i18n/I18nProvider';
 
 export default function PipelineFormComponent({
-  isDefaultPipeline,
   onFinish,
   onNewPipelineCreated,
   isEditMode,
@@ -43,7 +42,6 @@ export default function PipelineFormComponent({
   onCancel,
 }: {
   pipelineId?: string;
-  isDefaultPipeline: boolean;
   isEditMode: boolean;
   disableForm: boolean;
   showButtons?: boolean;
@@ -54,6 +52,7 @@ export default function PipelineFormComponent({
 }) {
   const { t } = useTranslation();
   const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
+  const [isDefaultPipeline, setIsDefaultPipeline] = useState<boolean>(false);
 
   const formSchema = isEditMode
     ? z.object({
@@ -133,6 +132,7 @@ export default function PipelineFormComponent({
       httpClient
         .getPipeline(pipelineId || '')
         .then((resp: GetPipelineResponseData) => {
+          setIsDefaultPipeline(resp.pipeline.is_default ?? false);
           form.reset({
             basic: {
               name: resp.pipeline.name,
@@ -346,6 +346,34 @@ export default function PipelineFormComponent({
     }
   };
 
+  const handleCopy = () => {
+    if (pipelineId) {
+      let newPipelineName = '';
+      httpClient
+        .getPipeline(pipelineId)
+        .then((resp) => {
+          const originalPipeline = resp.pipeline;
+          newPipelineName = `${originalPipeline.name}${t(
+            'pipelines.copySuffix',
+          )}`;
+          const newPipeline: Pipeline = {
+            name: newPipelineName,
+            description: originalPipeline.description,
+            config: originalPipeline.config,
+          };
+          return httpClient.createPipeline(newPipeline);
+        })
+        .then(() => {
+          onFinish();
+          toast.success(`${t('common.copySuccess')}: ${newPipelineName}`);
+          onCancel();
+        })
+        .catch((err) => {
+          toast.error(t('pipelines.createError') + err.message);
+        });
+    }
+  };
+
   return (
     <>
       <div className="!max-w-[70vw] max-w-6xl h-full p-0 flex flex-col bg-white dark:bg-black">
@@ -478,6 +506,18 @@ export default function PipelineFormComponent({
                   {t('pipelines.defaultPipelineCannotDelete')}
                 </div>
               )}
+
+              {isEditMode && (
+                <Button
+                  type="button"
+                  variant="default"
+                  onClick={handleCopy}
+                  className="bg-green-600 hover:bg-green-700 text-white"
+                >
+                  {t('common.copy')}
+                </Button>
+              )}
+
               <Button type="submit" form="pipeline-form">
                 {isEditMode ? t('common.save') : t('common.submit')}
               </Button>

web/src/app/home/pipelines/page.tsx

@@ -22,9 +22,6 @@ export default function PluginConfigPage() {
   const [isEditForm, setIsEditForm] = useState(false);
   const [pipelineList, setPipelineList] = useState<PipelineCardVO[]>([]);
   const [selectedPipelineId, setSelectedPipelineId] = useState('');
-
-  const [selectedPipelineIsDefault, setSelectedPipelineIsDefault] =
-    useState(false);
   const [sortByValue, setSortByValue] = useState<string>('created_at');
   const [sortOrderValue, setSortOrderValue] = useState<string>('DESC');
 
@@ -92,8 +89,6 @@ export default function PluginConfigPage() {
   const handleCreateNew = () => {
     setIsEditForm(false);
     setSelectedPipelineId('');
-
-    setSelectedPipelineIsDefault(false);
     setDialogOpen(true);
   };
 
@@ -116,7 +111,6 @@ export default function PluginConfigPage() {
         onOpenChange={setDialogOpen}
         pipelineId={selectedPipelineId || undefined}
         isEditMode={isEditForm}
-        isDefaultPipeline={selectedPipelineIsDefault}
         onFinish={() => {
           getPipelines();
         }}

web/src/app/home/plugins/components/plugin-installed/PluginInstalledComponent.tsx

@@ -15,6 +15,7 @@ import {
   DialogFooter,
 } from '@/components/ui/dialog';
 import { Button } from '@/components/ui/button';
+import { Checkbox } from '@/components/ui/checkbox';
 import { useTranslation } from 'react-i18next';
 import { extractI18nObject } from '@/i18n/I18nProvider';
 import { toast } from 'sonner';
@@ -43,6 +44,7 @@ const PluginInstalledComponent = forwardRef<PluginInstalledComponentRef>(
       PluginOperationType.DELETE,
     );
     const [targetPlugin, setTargetPlugin] = useState<PluginCardVO | null>(null);
+    const [deleteData, setDeleteData] = useState<boolean>(false);
 
     const asyncTask = useAsyncTask({
       onSuccess: () => {
@@ -61,7 +63,6 @@ const PluginInstalledComponent = forwardRef<PluginInstalledComponentRef>(
 
     useEffect(() => {
       initData();
-      // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
 
     function initData() {
@@ -109,6 +110,7 @@ const PluginInstalledComponent = forwardRef<PluginInstalledComponentRef>(
       setTargetPlugin(plugin);
       setOperationType(PluginOperationType.DELETE);
       setShowOperationModal(true);
+      setDeleteData(false);
       asyncTask.reset();
     }
 
@@ -124,7 +126,11 @@ const PluginInstalledComponent = forwardRef<PluginInstalledComponentRef>(
 
       const apiCall =
         operationType === PluginOperationType.DELETE
-          ? httpClient.removePlugin(targetPlugin.author, targetPlugin.name)
+          ? httpClient.removePlugin(
+              targetPlugin.author,
+              targetPlugin.name,
+              deleteData,
+            )
           : httpClient.upgradePlugin(targetPlugin.author, targetPlugin.name);
 
       apiCall
@@ -162,16 +168,35 @@ const PluginInstalledComponent = forwardRef<PluginInstalledComponentRef>(
             </DialogHeader>
             <DialogDescription>
               {asyncTask.status === AsyncTaskStatus.WAIT_INPUT && (
-                <div>
-                  {operationType === PluginOperationType.DELETE
-                    ? t('plugins.confirmDeletePlugin', {
-                        author: targetPlugin?.author ?? '',
-                        name: targetPlugin?.name ?? '',
-                      })
-                    : t('plugins.confirmUpdatePlugin', {
-                        author: targetPlugin?.author ?? '',
-                        name: targetPlugin?.name ?? '',
-                      })}
+                <div className="flex flex-col gap-4">
+                  <div>
+                    {operationType === PluginOperationType.DELETE
+                      ? t('plugins.confirmDeletePlugin', {
+                          author: targetPlugin?.author ?? '',
+                          name: targetPlugin?.name ?? '',
+                        })
+                      : t('plugins.confirmUpdatePlugin', {
+                          author: targetPlugin?.author ?? '',
+                          name: targetPlugin?.name ?? '',
+                        })}
+                  </div>
+                  {operationType === PluginOperationType.DELETE && (
+                    <div className="flex items-center space-x-2">
+                      <Checkbox
+                        id="delete-data"
+                        checked={deleteData}
+                        onCheckedChange={(checked) =>
+                          setDeleteData(checked === true)
+                        }
+                      />
+                      <label
+                        htmlFor="delete-data"
+                        className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 cursor-pointer"
+                      >
+                        {t('plugins.deleteDataCheckbox')}
+                      </label>
+                    </div>
+                  )}
                 </div>
               )}
               {asyncTask.status === AsyncTaskStatus.RUNNING && (
@@ -249,7 +274,7 @@ const PluginInstalledComponent = forwardRef<PluginInstalledComponentRef>(
         </Dialog>
 
         {pluginList.length === 0 ? (
-          <div className="flex flex-col items-center justify-center text-gray-500 h-[calc(100vh-16rem)] w-full gap-2">
+          <div className="flex flex-col items-center justify-center text-gray-500 min-h-[60vh] w-full gap-2">
             <svg
               className="h-[3rem] w-[3rem]"
               xmlns="http://www.w3.org/2000/svg"

web/src/app/home/plugins/components/plugin-installed/plugin-card/PluginCardComponent.tsx

@@ -46,7 +46,7 @@ export default function PluginCardComponent({
           <img
             src={httpClient.getPluginIconURL(cardVO.author, cardVO.name)}
             alt="plugin icon"
-            className="w-16 h-16"
+            className="w-16 h-16 rounded-[8%]"
           />
 
           <div className="w-full h-full flex flex-col items-start justify-between gap-[0.6rem]">

web/src/app/home/plugins/components/plugin-installed/plugin-form/PluginForm.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useRef } from 'react';
 import { ApiRespPluginConfig } from '@/app/infra/entities/api';
 import { Plugin } from '@/app/infra/entities/plugin';
 import { httpClient } from '@/app/infra/http/HttpClient';
@@ -24,6 +24,9 @@ export default function PluginForm({
   const [pluginInfo, setPluginInfo] = useState<Plugin>();
   const [pluginConfig, setPluginConfig] = useState<ApiRespPluginConfig>();
   const [isSaving, setIsLoading] = useState(false);
+  const currentFormValues = useRef<object>({});
+  const uploadedFileKeys = useRef<Set<string>>(new Set());
+  const initialFileKeys = useRef<Set<string>>(new Set());
 
   useEffect(() => {
     // 获取插件信息
@@ -33,28 +36,103 @@ export default function PluginForm({
     // 获取插件配置
     httpClient.getPluginConfig(pluginAuthor, pluginName).then((res) => {
       setPluginConfig(res);
+
+      // 提取初始配置中的所有文件 key
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      const extractFileKeys = (obj: any): string[] => {
+        const keys: string[] = [];
+        if (obj && typeof obj === 'object') {
+          if ('file_key' in obj && typeof obj.file_key === 'string') {
+            keys.push(obj.file_key);
+          }
+          for (const value of Object.values(obj)) {
+            if (Array.isArray(value)) {
+              value.forEach((item) => keys.push(...extractFileKeys(item)));
+            } else if (typeof value === 'object' && value !== null) {
+              keys.push(...extractFileKeys(value));
+            }
+          }
+        }
+        return keys;
+      };
+
+      const fileKeys = extractFileKeys(res.config);
+      initialFileKeys.current = new Set(fileKeys);
     });
   }, [pluginAuthor, pluginName]);
 
-  const handleSubmit = async (values: object) => {
+  const handleSubmit = async () => {
     setIsLoading(true);
     const isDebugPlugin = pluginInfo?.debug;
-    httpClient
-      .updatePluginConfig(pluginAuthor, pluginName, values)
-      .then(() => {
-        toast.success(
-          isDebugPlugin
-            ? t('plugins.saveConfigSuccessDebugPlugin')
-            : t('plugins.saveConfigSuccessNormal'),
-        );
-        onFormSubmit(1000);
-      })
-      .catch((error) => {
-        toast.error(t('plugins.saveConfigError') + error.message);
-      })
-      .finally(() => {
-        setIsLoading(false);
+
+    try {
+      // 保存配置
+      await httpClient.updatePluginConfig(
+        pluginAuthor,
+        pluginName,
+        currentFormValues.current,
+      );
+
+      // 提取最终保存的配置中的所有文件 key
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      const extractFileKeys = (obj: any): string[] => {
+        const keys: string[] = [];
+        if (obj && typeof obj === 'object') {
+          if ('file_key' in obj && typeof obj.file_key === 'string') {
+            keys.push(obj.file_key);
+          }
+          for (const value of Object.values(obj)) {
+            if (Array.isArray(value)) {
+              value.forEach((item) => keys.push(...extractFileKeys(item)));
+            } else if (typeof value === 'object' && value !== null) {
+              keys.push(...extractFileKeys(value));
+            }
+          }
+        }
+        return keys;
+      };
+
+      const finalFileKeys = new Set(extractFileKeys(currentFormValues.current));
+
+      // 计算需要删除的文件：
+      // 1. 在编辑期间上传的，但最终未保存的文件
+      // 2. 初始配置中有的，但最终配置中没有的文件（被删除的文件）
+      const filesToDelete: string[] = [];
+
+      // 上传了但未使用的文件
+      uploadedFileKeys.current.forEach((key) => {
+        if (!finalFileKeys.has(key)) {
+          filesToDelete.push(key);
+        }
       });
+
+      // 初始有但最终没有的文件（被删除的）
+      initialFileKeys.current.forEach((key) => {
+        if (!finalFileKeys.has(key)) {
+          filesToDelete.push(key);
+        }
+      });
+
+      // 删除不需要的文件
+      const deletePromises = filesToDelete.map((fileKey) =>
+        httpClient.deletePluginConfigFile(fileKey).catch((err) => {
+          console.warn(`Failed to delete file ${fileKey}:`, err);
+        }),
+      );
+
+      await Promise.all(deletePromises);
+
+      toast.success(
+        isDebugPlugin
+          ? t('plugins.saveConfigSuccessDebugPlugin')
+          : t('plugins.saveConfigSuccessNormal'),
+      );
+      onFormSubmit(1000);
+    } catch (error) {
+      toast.error(t('plugins.saveConfigError') + (error as Error).message);
+    } finally {
+      setIsLoading(false);
+    }
   };
 
   if (!pluginInfo || !pluginConfig) {
@@ -95,14 +173,12 @@ export default function PluginForm({
             itemConfigList={pluginInfo.manifest.manifest.spec.config}
             initialValues={pluginConfig.config as Record<string, object>}
             onSubmit={(values) => {
-              let config = pluginConfig.config;
-              config = {
-                ...config,
-                ...values,
-              };
-              setPluginConfig({
-                config: config,
-              });
+              // 只保存表单值的引用，不触发状态更新
+              currentFormValues.current = values;
+            }}
+            onFileUploaded={(fileKey) => {
+              // 追踪上传的文件
+              uploadedFileKeys.current.add(fileKey);
             }}
           />
         )}
@@ -117,7 +193,7 @@ export default function PluginForm({
         <div className="flex justify-end gap-2">
           <Button
             type="submit"
-            onClick={() => handleSubmit(pluginConfig.config)}
+            onClick={() => handleSubmit()}
             disabled={isSaving}
           >
             {isSaving ? t('plugins.saving') : t('plugins.saveConfig')}

web/src/app/home/plugins/components/plugin-market/PluginMarketComponent.tsx

@@ -57,6 +57,7 @@ function MarketPageContent({
 
   const pageSize = 16; // 每页16个，4行x4列
   const searchTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+  const scrollContainerRef = useRef<HTMLDivElement | null>(null);
 
   // 排序选项
   const sortOptions: SortOption[] = [
@@ -172,7 +173,6 @@ function MarketPageContent({
   // 初始加载
   useEffect(() => {
     fetchPlugins(1, false, true);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   // 搜索功能
@@ -263,120 +263,163 @@ function MarketPageContent({
     }
   }, [currentPage, isLoadingMore, hasMore, fetchPlugins, searchQuery]);
 
-  // 监听滚动事件
+  // Check if content fills the viewport and load more if needed
+  const checkAndLoadMore = useCallback(() => {
+    const scrollContainer = scrollContainerRef.current;
+    if (!scrollContainer || isLoading || isLoadingMore || !hasMore) return;
+
+    const { scrollHeight, clientHeight } = scrollContainer;
+    // If content doesn't fill the viewport (no scrollbar), load more
+    if (scrollHeight <= clientHeight) {
+      loadMore();
+    }
+  }, [loadMore, isLoading, isLoadingMore, hasMore]);
+
+  // Listen to scroll events on the scroll container
   useEffect(() => {
+    const scrollContainer = scrollContainerRef.current;
+    if (!scrollContainer) return;
+
     const handleScroll = () => {
-      if (
-        window.innerHeight + document.documentElement.scrollTop >=
-        document.documentElement.offsetHeight - 100
-      ) {
+      const { scrollTop, scrollHeight, clientHeight } = scrollContainer;
+      // Load more when scrolled to within 100px of the bottom
+      if (scrollTop + clientHeight >= scrollHeight - 100) {
         loadMore();
       }
     };
 
-    window.addEventListener('scroll', handleScroll);
-    return () => window.removeEventListener('scroll', handleScroll);
+    scrollContainer.addEventListener('scroll', handleScroll);
+    return () => scrollContainer.removeEventListener('scroll', handleScroll);
   }, [loadMore]);
 
+  // Check if we need to load more after content changes or initial load
+  useEffect(() => {
+    // Small delay to ensure DOM has updated
+    const timer = setTimeout(() => {
+      checkAndLoadMore();
+    }, 100);
+    return () => clearTimeout(timer);
+  }, [plugins, checkAndLoadMore]);
+
+  // Also check on window resize
+  useEffect(() => {
+    const handleResize = () => {
+      checkAndLoadMore();
+    };
+
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  }, [checkAndLoadMore]);
+
   // 安装插件
   // const handleInstallPlugin = (plugin: PluginV4) => {
   //   console.log('install plugin', plugin);
   // };
 
   return (
-    <div className="container mx-auto px-4 py-6 space-y-6">
-      {/* 搜索框 */}
-      <div className="flex items-center justify-center">
-        <div className="relative w-full max-w-2xl">
-          <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground h-4 w-4" />
-          <Input
-            placeholder={t('market.searchPlaceholder')}
-            value={searchQuery}
-            onChange={(e) => handleSearchInputChange(e.target.value)}
-            onKeyPress={(e) => {
-              if (e.key === 'Enter') {
-                // 立即搜索，清除防抖定时器
-                if (searchTimeoutRef.current) {
-                  clearTimeout(searchTimeoutRef.current);
+    <div className="h-full flex flex-col">
+      {/* Fixed header with search and sort controls */}
+      <div className="flex-shrink-0 space-y-4 px-3 sm:px-4 py-4 sm:py-6">
+        {/* Search box */}
+        <div className="flex items-center justify-center">
+          <div className="relative w-full max-w-2xl">
+            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground h-4 w-4" />
+            <Input
+              placeholder={t('market.searchPlaceholder')}
+              value={searchQuery}
+              onChange={(e) => handleSearchInputChange(e.target.value)}
+              onKeyPress={(e) => {
+                if (e.key === 'Enter') {
+                  // Immediately search, clear debounce timer
+                  if (searchTimeoutRef.current) {
+                    clearTimeout(searchTimeoutRef.current);
+                  }
+                  handleSearch(searchQuery);
                 }
-                handleSearch(searchQuery);
-              }
-            }}
-            className="pl-10 pr-4"
-          />
-        </div>
-      </div>
-
-      {/* 排序下拉框 */}
-      <div className="flex items-center justify-center">
-        <div className="w-full max-w-2xl flex items-center gap-3">
-          <span className="text-sm text-muted-foreground whitespace-nowrap">
-            {t('market.sortBy')}:
-          </span>
-          <Select value={sortOption} onValueChange={handleSortChange}>
-            <SelectTrigger className="w-48">
-              <SelectValue />
-            </SelectTrigger>
-            <SelectContent>
-              {sortOptions.map((option) => (
-                <SelectItem key={option.value} value={option.value}>
-                  {option.label}
-                </SelectItem>
-              ))}
-            </SelectContent>
-          </Select>
-        </div>
-      </div>
-
-      {/* 搜索结果统计 */}
-      {total > 0 && (
-        <div className="text-center text-muted-foreground">
-          {searchQuery
-            ? t('market.searchResults', { count: total })
-            : t('market.totalPlugins', { count: total })}
-        </div>
-      )}
-
-      {/* 插件列表 */}
-      {isLoading ? (
-        <div className="flex items-center justify-center py-12">
-          <Loader2 className="h-8 w-8 animate-spin" />
-          <span className="ml-2">{t('market.loading')}</span>
-        </div>
-      ) : plugins.length === 0 ? (
-        <div className="flex items-center justify-center py-12">
-          <div className="text-muted-foreground">
-            {searchQuery ? t('market.noResults') : t('market.noPlugins')}
+              }}
+              className="pl-10 pr-4 text-sm sm:text-base"
+            />
           </div>
         </div>
-      ) : (
-        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4 gap-6">
-          {plugins.map((plugin) => (
-            <PluginMarketCardComponent
-              key={plugin.pluginId}
-              cardVO={plugin}
-              onPluginClick={handlePluginClick}
-            />
-          ))}
-        </div>
-      )}
 
-      {/* 加载更多指示器 */}
-      {isLoadingMore && (
-        <div className="flex items-center justify-center py-6">
-          <Loader2 className="h-6 w-6 animate-spin" />
-          <span className="ml-2">{t('market.loadingMore')}</span>
+        {/* Sort dropdown */}
+        <div className="flex items-center justify-center">
+          <div className="w-full max-w-2xl flex items-center gap-2 sm:gap-3">
+            <span className="text-xs sm:text-sm text-muted-foreground whitespace-nowrap">
+              {t('market.sortBy')}:
+            </span>
+            <Select value={sortOption} onValueChange={handleSortChange}>
+              <SelectTrigger className="w-40 sm:w-48 text-xs sm:text-sm">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                {sortOptions.map((option) => (
+                  <SelectItem key={option.value} value={option.value}>
+                    {option.label}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
         </div>
-      )}
 
-      {/* 没有更多数据提示 */}
-      {!hasMore && plugins.length > 0 && (
-        <div className="text-center text-muted-foreground py-6">
-          {t('market.allLoaded')}
-        </div>
-      )}
+        {/* Search results stats */}
+        {total > 0 && (
+          <div className="text-center text-muted-foreground text-sm">
+            {searchQuery
+              ? t('market.searchResults', { count: total })
+              : t('market.totalPlugins', { count: total })}
+          </div>
+        )}
+      </div>
 
-      {/* 插件详情对话框 */}
+      {/* Scrollable content area */}
+      <div
+        ref={scrollContainerRef}
+        className="flex-1 overflow-y-auto px-3 sm:px-4"
+      >
+        {isLoading ? (
+          <div className="flex items-center justify-center py-12">
+            <Loader2 className="h-8 w-8 animate-spin" />
+            <span className="ml-2">{t('market.loading')}</span>
+          </div>
+        ) : plugins.length === 0 ? (
+          <div className="flex items-center justify-center py-12">
+            <div className="text-muted-foreground">
+              {searchQuery ? t('market.noResults') : t('market.noPlugins')}
+            </div>
+          </div>
+        ) : (
+          <>
+            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4 gap-6 pb-6 pt-4">
+              {plugins.map((plugin) => (
+                <PluginMarketCardComponent
+                  key={plugin.pluginId}
+                  cardVO={plugin}
+                  onPluginClick={handlePluginClick}
+                />
+              ))}
+            </div>
+
+            {/* Loading more indicator */}
+            {isLoadingMore && (
+              <div className="flex items-center justify-center py-6">
+                <Loader2 className="h-6 w-6 animate-spin" />
+                <span className="ml-2">{t('market.loadingMore')}</span>
+              </div>
+            )}
+
+            {/* No more data hint */}
+            {!hasMore && plugins.length > 0 && (
+              <div className="text-center text-muted-foreground py-6">
+                {t('market.allLoaded')}
+              </div>
+            )}
+          </>
+        )}
+      </div>
+
+      {/* Plugin detail dialog */}
       <PluginDetailDialog
         open={dialogOpen}
         onOpenChange={handleDialogClose}

web/src/app/home/plugins/components/plugin-market/plugin-detail-dialog/PluginDetailDialog.tsx

@@ -228,6 +228,30 @@ export default function PluginDetailDialog({
               {...props}
             />
           ),
+          h3: ({ ...props }) => (
+            <h3
+              className="text-xl font-semibold mb-2 mt-4 dark:text-gray-400"
+              {...props}
+            />
+          ),
+          h4: ({ ...props }) => (
+            <h4
+              className="text-lg font-semibold mb-2 mt-4 dark:text-gray-400"
+              {...props}
+            />
+          ),
+          h5: ({ ...props }) => (
+            <h5
+              className="text-base font-semibold mb-2 mt-4 dark:text-gray-400"
+              {...props}
+            />
+          ),
+          h6: ({ ...props }) => (
+            <h6
+              className="text-sm font-semibold mb-2 mt-4 dark:text-gray-400"
+              {...props}
+            />
+          ),
           p: ({ ...props }) => (
             <p className="leading-relaxed dark:text-gray-400" {...props} />
           ),
@@ -274,6 +298,57 @@ export default function PluginDetailDialog({
               {...props}
             />
           ),
+          // 图片组件 - 转换本地路径为API路径
+          img: ({ src, alt, ...props }) => {
+            // 处理图片路径
+            let imageSrc = src || '';
+
+            // 确保 src 是字符串类型
+            if (typeof imageSrc !== 'string') {
+              return (
+                <img
+                  src={src}
+                  alt={alt || ''}
+                  className="max-w-full h-auto rounded-lg my-4"
+                  {...props}
+                />
+              );
+            }
+
+            // 如果是相对路径，转换为API路径
+            if (
+              imageSrc &&
+              !imageSrc.startsWith('http://') &&
+              !imageSrc.startsWith('https://') &&
+              !imageSrc.startsWith('data:')
+            ) {
+              // 移除开头的 ./ 或 / (支持多个前缀)
+              imageSrc = imageSrc.replace(/^(\.\/|\/)+/, '');
+
+              // 如果路径以 assets/ 开头，直接使用
+              // 否则假设它在 assets/ 目录下
+              if (!imageSrc.startsWith('assets/')) {
+                imageSrc = `assets/${imageSrc}`;
+              }
+
+              // 移除 assets/ 前缀以构建API URL
+              const assetPath = imageSrc.replace(/^assets\//, '');
+              imageSrc = getCloudServiceClientSync().getPluginAssetURL(
+                author!,
+                pluginName!,
+                assetPath,
+              );
+            }
+
+            return (
+              <img
+                src={imageSrc}
+                alt={alt || ''}
+                className="max-w-lg h-auto my-4"
+                {...props}
+              />
+            );
+          },
         }}
       >
         {readme}

web/src/app/home/plugins/components/plugin-market/plugin-market-card/PluginMarketCardComponent.tsx

@@ -15,35 +15,37 @@ export default function PluginMarketCardComponent({
 
   return (
     <div
-      className="w-[100%] h-[9rem] bg-white rounded-[10px] shadow-[0px_0px_4px_0_rgba(0,0,0,0.2)] p-[1rem] cursor-pointer hover:shadow-[0px_2px_8px_0_rgba(0,0,0,0.15)] transition-shadow duration-200 dark:bg-[#1f1f22]"
+      className="w-[100%] h-auto min-h-[8rem] sm:h-[9rem] bg-white rounded-[10px] shadow-[0px_0px_4px_0_rgba(0,0,0,0.2)] p-3 sm:p-[1rem] cursor-pointer hover:shadow-[0px_2px_8px_0_rgba(0,0,0,0.15)] transition-shadow duration-200 dark:bg-[#1f1f22]"
       onClick={handleCardClick}
     >
-      <div className="w-full h-full flex flex-col justify-between">
+      <div className="w-full h-full flex flex-col justify-between gap-2">
         {/* 上部分：插件信息 */}
-        <div className="flex flex-row items-start justify-start gap-[1.2rem]">
-          <img src={cardVO.iconURL} alt="plugin icon" className="w-16 h-16" />
+        <div className="flex flex-row items-start justify-start gap-2 sm:gap-[1.2rem] min-h-0">
+          <img
+            src={cardVO.iconURL}
+            alt="plugin icon"
+            className="w-12 h-12 sm:w-16 sm:h-16 flex-shrink-0 rounded-[8%]"
+          />
 
-          <div className="flex-1 flex flex-col items-start justify-start gap-[0.6rem]">
-            <div className="flex flex-col items-start justify-start">
-              <div className="text-[0.7rem] text-[#666] dark:text-[#999]">
+          <div className="flex-1 flex flex-col items-start justify-start gap-[0.4rem] sm:gap-[0.6rem] min-w-0 overflow-hidden">
+            <div className="flex flex-col items-start justify-start w-full min-w-0">
+              <div className="text-[0.65rem] sm:text-[0.7rem] text-[#666] dark:text-[#999] truncate w-full">
                 {cardVO.pluginId}
               </div>
-              <div className="flex flex-row items-center justify-start gap-[0.4rem]">
-                <div className="text-[1.2rem] text-black dark:text-[#f0f0f0]">
-                  {cardVO.label}
-                </div>
+              <div className="text-base sm:text-[1.2rem] text-black dark:text-[#f0f0f0] truncate w-full">
+                {cardVO.label}
               </div>
             </div>
 
-            <div className="text-[0.8rem] text-[#666] dark:text-[#999] line-clamp-2">
+            <div className="text-[0.7rem] sm:text-[0.8rem] text-[#666] dark:text-[#999] line-clamp-2 overflow-hidden">
               {cardVO.description}
             </div>
           </div>
 
-          <div className="flex h-full flex-row items-start justify-center gap-[0.4rem]">
+          <div className="flex flex-row items-start justify-center gap-[0.4rem] flex-shrink-0">
             {cardVO.githubURL && (
               <svg
-                className="w-[1.4rem] h-[1.4rem] text-black cursor-pointer hover:text-gray-600 dark:text-[#f0f0f0]"
+                className="w-5 h-5 sm:w-[1.4rem] sm:h-[1.4rem] text-black cursor-pointer hover:text-gray-600 dark:text-[#f0f0f0] flex-shrink-0"
                 xmlns="http://www.w3.org/2000/svg"
                 viewBox="0 0 24 24"
                 fill="currentColor"
@@ -59,9 +61,9 @@ export default function PluginMarketCardComponent({
         </div>
 
         {/* 下部分：下载量 */}
-        <div className="w-full flex flex-row items-center justify-start gap-[0.4rem] px-[0.4rem]">
+        <div className="w-full flex flex-row items-center justify-start gap-[0.3rem] sm:gap-[0.4rem] px-0 sm:px-[0.4rem] flex-shrink-0">
           <svg
-            className="w-[1.2rem] h-[1.2rem] text-[#2563eb]"
+            className="w-4 h-4 sm:w-[1.2rem] sm:h-[1.2rem] text-[#2563eb] flex-shrink-0"
             xmlns="http://www.w3.org/2000/svg"
             viewBox="0 0 24 24"
             fill="none"
@@ -72,7 +74,7 @@ export default function PluginMarketCardComponent({
             <polyline points="7,10 12,15 17,10" />
             <line x1="12" y1="15" x2="12" y2="3" />
           </svg>
-          <div className="text-sm text-[#2563eb] font-medium">
+          <div className="text-xs sm:text-sm text-[#2563eb] font-medium whitespace-nowrap">
             {cardVO.installCount.toLocaleString()}
           </div>
         </div>

web/src/app/home/plugins/mcp-server/MCPCardVO.ts

@@ -0,0 +1,29 @@
+import { MCPServer, MCPSessionStatus } from '@/app/infra/entities/api';
+
+export class MCPCardVO {
+  name: string;
+  mode: 'stdio' | 'sse';
+  enable: boolean;
+  status: MCPSessionStatus;
+  tools: number;
+  error?: string;
+
+  constructor(data: MCPServer) {
+    this.name = data.name;
+    this.mode = data.mode;
+    this.enable = data.enable;
+
+    // Determine status from runtime_info
+    if (!data.runtime_info) {
+      this.status = MCPSessionStatus.ERROR;
+      this.tools = 0;
+    } else if (data.runtime_info.status === MCPSessionStatus.CONNECTED) {
+      this.status = data.runtime_info.status;
+      this.tools = data.runtime_info.tool_count || 0;
+    } else {
+      this.status = data.runtime_info.status;
+      this.tools = 0;
+      this.error = data.runtime_info.error_message;
+    }
+  }
+}

web/src/app/home/plugins/mcp-server/MCPServerComponent.tsx

@@ -0,0 +1,114 @@
+'use client';
+
+import { useEffect, useState, useRef } from 'react';
+import MCPCardComponent from '@/app/home/plugins/mcp-server/mcp-card/MCPCardComponent';
+import { MCPCardVO } from '@/app/home/plugins/mcp-server/MCPCardVO';
+import { useTranslation } from 'react-i18next';
+import { MCPSessionStatus } from '@/app/infra/entities/api';
+
+import { httpClient } from '@/app/infra/http/HttpClient';
+
+export default function MCPComponent({
+  onEditServer,
+}: {
+  askInstallServer?: (githubURL: string) => void;
+  onEditServer?: (serverName: string) => void;
+}) {
+  const { t } = useTranslation();
+  const [installedServers, setInstalledServers] = useState<MCPCardVO[]>([]);
+  const [loading, setLoading] = useState(false);
+  const pollingIntervalRef = useRef<NodeJS.Timeout | null>(null);
+
+  useEffect(() => {
+    fetchInstalledServers();
+
+    return () => {
+      // Cleanup: clear polling interval when component unmounts
+      if (pollingIntervalRef.current) {
+        clearInterval(pollingIntervalRef.current);
+      }
+    };
+  }, []);
+
+  // Check if any enabled server is connecting and start/stop polling accordingly
+  useEffect(() => {
+    const hasConnecting = installedServers.some(
+      (server) =>
+        server.enable && server.status === MCPSessionStatus.CONNECTING,
+    );
+
+    if (hasConnecting && !pollingIntervalRef.current) {
+      // Start polling every 3 seconds
+      pollingIntervalRef.current = setInterval(() => {
+        fetchInstalledServers();
+      }, 3000);
+    } else if (!hasConnecting && pollingIntervalRef.current) {
+      // Stop polling when no enabled server is connecting
+      clearInterval(pollingIntervalRef.current);
+      pollingIntervalRef.current = null;
+    }
+
+    return () => {
+      if (pollingIntervalRef.current) {
+        clearInterval(pollingIntervalRef.current);
+        pollingIntervalRef.current = null;
+      }
+    };
+  }, [installedServers]);
+
+  function fetchInstalledServers() {
+    setLoading(true);
+    httpClient
+      .getMCPServers()
+      .then((resp) => {
+        const servers = resp.servers.map((server) => new MCPCardVO(server));
+        setInstalledServers(servers);
+        setLoading(false);
+      })
+      .catch((error) => {
+        console.error('Failed to fetch MCP servers:', error);
+        setLoading(false);
+      });
+  }
+
+  return (
+    <div className="w-full h-full">
+      {/* Server list */}
+      <div className="w-full h-full px-[0.8rem] pt-[0rem]">
+        {loading ? (
+          <div className="flex flex-col items-center justify-center text-gray-500 min-h-[60vh] w-full gap-2">
+            {t('mcp.loading')}
+          </div>
+        ) : installedServers.length === 0 ? (
+          <div className="flex flex-col items-center justify-center text-gray-500 min-h-[60vh] w-full gap-2">
+            <svg
+              className="h-[3rem] w-[3rem]"
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 24 24"
+              fill="currentColor"
+            >
+              <path d="M4.5 7.65311V16.3469L12 20.689L19.5 16.3469V7.65311L12 3.311L4.5 7.65311ZM12 1L21.5 6.5V17.5L12 23L2.5 17.5V6.5L12 1ZM6.49896 9.97065L11 12.5765V17.625H13V12.5765L17.501 9.97066L16.499 8.2398L12 10.8445L7.50104 8.2398L6.49896 9.97065Z"></path>
+            </svg>
+            <div className="text-lg mb-2">{t('mcp.noServerInstalled')}</div>
+          </div>
+        ) : (
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 pt-[2rem] pb-6">
+            {installedServers.map((server, index) => (
+              <div key={`${server.name}-${index}`}>
+                <MCPCardComponent
+                  cardVO={server}
+                  onCardClick={() => {
+                    if (onEditServer) {
+                      onEditServer(server.name);
+                    }
+                  }}
+                  onRefresh={fetchInstalledServers}
+                />
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

web/src/app/home/plugins/mcp-server/mcp-card/MCPCardComponent.tsx

@@ -0,0 +1,172 @@
+import { MCPCardVO } from '@/app/home/plugins/mcp-server/MCPCardVO';
+import { useState, useEffect } from 'react';
+import { httpClient } from '@/app/infra/http/HttpClient';
+import { Switch } from '@/components/ui/switch';
+import { Button } from '@/components/ui/button';
+import { toast } from 'sonner';
+import { useTranslation } from 'react-i18next';
+import { RefreshCcw, Wrench, Ban, AlertCircle, Loader2 } from 'lucide-react';
+import { MCPSessionStatus } from '@/app/infra/entities/api';
+
+export default function MCPCardComponent({
+  cardVO,
+  onCardClick,
+  onRefresh,
+}: {
+  cardVO: MCPCardVO;
+  onCardClick: () => void;
+  onRefresh: () => void;
+}) {
+  const { t } = useTranslation();
+  const [enabled, setEnabled] = useState(cardVO.enable);
+  const [switchEnable, setSwitchEnable] = useState(true);
+  const [testing, setTesting] = useState(false);
+  const [toolsCount, setToolsCount] = useState(cardVO.tools);
+  const [status, setStatus] = useState(cardVO.status);
+
+  useEffect(() => {
+    setStatus(cardVO.status);
+    setToolsCount(cardVO.tools);
+    setEnabled(cardVO.enable);
+  }, [cardVO.status, cardVO.tools, cardVO.enable]);
+
+  function handleEnable(checked: boolean) {
+    setSwitchEnable(false);
+    httpClient
+      .toggleMCPServer(cardVO.name, checked)
+      .then(() => {
+        setEnabled(checked);
+        toast.success(t('mcp.saveSuccess'));
+        onRefresh();
+        setSwitchEnable(true);
+      })
+      .catch((err) => {
+        toast.error(t('mcp.modifyFailed') + err.message);
+        setSwitchEnable(true);
+      });
+  }
+
+  function handleTest(e: React.MouseEvent) {
+    e.stopPropagation();
+    setTesting(true);
+
+    httpClient
+      .testMCPServer(cardVO.name, {})
+      .then((resp) => {
+        const taskId = resp.task_id;
+
+        const interval = setInterval(() => {
+          httpClient.getAsyncTask(taskId).then((taskResp) => {
+            if (taskResp.runtime.done) {
+              clearInterval(interval);
+              setTesting(false);
+
+              if (taskResp.runtime.exception) {
+                toast.error(
+                  t('mcp.refreshFailed') + taskResp.runtime.exception,
+                );
+              } else {
+                toast.success(t('mcp.refreshSuccess'));
+              }
+
+              // Refresh to get updated runtime_info
+              onRefresh();
+            }
+          });
+        }, 1000);
+      })
+      .catch((err) => {
+        toast.error(t('mcp.refreshFailed') + err.message);
+        setTesting(false);
+      });
+  }
+
+  return (
+    <div
+      className="w-[100%] h-[10rem] bg-white dark:bg-[#1f1f22] rounded-[10px] shadow-[0px_2px_2px_0_rgba(0,0,0,0.2)] dark:shadow-none p-[1.2rem] cursor-pointer transition-all duration-200 hover:shadow-[0px_2px_8px_0_rgba(0,0,0,0.1)] dark:hover:shadow-none"
+      onClick={onCardClick}
+    >
+      <div className="w-full h-full flex flex-row items-start justify-start gap-[1.2rem]">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 24 24"
+          width="64"
+          height="64"
+          fill="rgba(70,146,221,1)"
+        >
+          <path d="M17.6567 14.8284L16.2425 13.4142L17.6567 12C19.2188 10.4379 19.2188 7.90524 17.6567 6.34314C16.0946 4.78105 13.5619 4.78105 11.9998 6.34314L10.5856 7.75736L9.17139 6.34314L10.5856 4.92893C12.9287 2.58578 16.7277 2.58578 19.0709 4.92893C21.414 7.27208 21.414 11.0711 19.0709 13.4142L17.6567 14.8284ZM14.8282 17.6569L13.414 19.0711C11.0709 21.4142 7.27189 21.4142 4.92875 19.0711C2.5856 16.7279 2.5856 12.9289 4.92875 10.5858L6.34296 9.17157L7.75717 10.5858L6.34296 12C4.78086 13.5621 4.78086 16.0948 6.34296 17.6569C7.90506 19.2189 10.4377 19.2189 11.9998 17.6569L13.414 16.2426L14.8282 17.6569ZM14.8282 7.75736L16.2425 9.17157L9.17139 16.2426L7.75717 14.8284L14.8282 7.75736Z"></path>
+        </svg>
+
+        <div className="w-full h-full flex flex-col items-start justify-between gap-[0.6rem]">
+          <div className="flex flex-col items-start justify-start">
+            <div className="text-[1.2rem] text-black dark:text-[#f0f0f0] font-medium">
+              {cardVO.name}
+            </div>
+          </div>
+
+          <div className="w-full flex flex-row items-start justify-start gap-[0.6rem]">
+            {!enabled ? (
+              // 未启用 - 橙色
+              <div className="flex flex-row items-center gap-[0.4rem]">
+                <Ban className="w-4 h-4 text-orange-500 dark:text-orange-400" />
+                <div className="text-sm text-orange-500 dark:text-orange-400 font-medium">
+                  {t('mcp.statusDisabled')}
+                </div>
+              </div>
+            ) : status === MCPSessionStatus.CONNECTED ? (
+              // 连接成功 - 显示工具数量
+              <div className="flex h-full flex-row items-center justify-center gap-[0.4rem]">
+                <Wrench className="w-5 h-5" />
+                <div className="text-base text-black dark:text-[#f0f0f0] font-medium">
+                  {t('mcp.toolCount', { count: toolsCount })}
+                </div>
+              </div>
+            ) : status === MCPSessionStatus.CONNECTING ? (
+              // 连接中 - 蓝色加载
+              <div className="flex flex-row items-center gap-[0.4rem]">
+                <Loader2 className="w-4 h-4 text-blue-500 dark:text-blue-400 animate-spin" />
+                <div className="text-sm text-blue-500 dark:text-blue-400 font-medium">
+                  {t('mcp.connecting')}
+                </div>
+              </div>
+            ) : (
+              // 连接失败 - 红色
+              <div className="flex flex-row items-center gap-[0.4rem]">
+                <AlertCircle className="w-4 h-4 text-red-500 dark:text-red-400" />
+                <div className="text-sm text-red-500 dark:text-red-400 font-medium">
+                  {t('mcp.connectionFailedStatus')}
+                </div>
+              </div>
+            )}
+          </div>
+        </div>
+
+        <div className="flex flex-col items-center justify-between h-full">
+          <div
+            className="flex items-center justify-center"
+            onClick={(e) => e.stopPropagation()}
+          >
+            <Switch
+              className="cursor-pointer"
+              checked={enabled}
+              onCheckedChange={handleEnable}
+              disabled={!switchEnable}
+            />
+          </div>
+
+          <div className="flex items-center justify-center gap-[0.4rem]">
+            <Button
+              variant="ghost"
+              size="sm"
+              className="p-1 h-8 w-8"
+              onClick={(e) => handleTest(e)}
+              disabled={testing}
+            >
+              <RefreshCcw className="w-4 h-4" />
+            </Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

web/src/app/home/plugins/mcp-server/mcp-form/MCPDeleteConfirmDialog.tsx

@@ -0,0 +1,68 @@
+'use client';
+
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { toast } from 'sonner';
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+  DialogDescription,
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { httpClient } from '@/app/infra/http/HttpClient';
+
+interface MCPDeleteConfirmDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  serverName: string | null;
+  onSuccess?: () => void;
+}
+
+export default function MCPDeleteConfirmDialog({
+  open,
+  onOpenChange,
+  serverName,
+  onSuccess,
+}: MCPDeleteConfirmDialogProps) {
+  const { t } = useTranslation();
+
+  async function handleDelete() {
+    if (!serverName) return;
+
+    try {
+      await httpClient.deleteMCPServer(serverName);
+      toast.success(t('mcp.deleteSuccess'));
+
+      onOpenChange(false);
+
+      if (onSuccess) {
+        onSuccess();
+      }
+    } catch (error) {
+      console.error('Failed to delete server:', error);
+      toast.error(t('mcp.deleteFailed'));
+    }
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>{t('mcp.confirmDeleteTitle')}</DialogTitle>
+        </DialogHeader>
+        <DialogDescription>{t('mcp.confirmDeleteServer')}</DialogDescription>
+        <DialogFooter>
+          <Button variant="outline" onClick={() => onOpenChange(false)}>
+            {t('common.cancel')}
+          </Button>
+          <Button variant="destructive" onClick={handleDelete}>
+            {t('common.confirm')}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

web/src/app/home/plugins/mcp-server/mcp-form/MCPFormDialog.tsx

@@ -0,0 +1,673 @@
+'use client';
+
+import React, { useState, useEffect, useRef } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Resolver, useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { z } from 'zod';
+import { toast } from 'sonner';
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+} from '@/components/ui/dialog';
+import {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+} from '@/components/ui/card';
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/components/ui/form';
+import {
+  Select,
+  SelectTrigger,
+  SelectValue,
+  SelectContent,
+  SelectItem,
+} from '@/components/ui/select';
+import { Input } from '@/components/ui/input';
+import { Button } from '@/components/ui/button';
+import { httpClient } from '@/app/infra/http/HttpClient';
+import {
+  MCPServerRuntimeInfo,
+  MCPTool,
+  MCPServer,
+  MCPSessionStatus,
+} from '@/app/infra/entities/api';
+
+// Status Display Component - 在测试中、连接中或连接失败时使用
+function StatusDisplay({
+  testing,
+  runtimeInfo,
+  t,
+}: {
+  testing: boolean;
+  runtimeInfo: MCPServerRuntimeInfo;
+  t: (key: string) => string;
+}) {
+  if (testing) {
+    return (
+      <div className="flex items-center gap-2 text-blue-600">
+        <svg
+          className="w-5 h-5 animate-spin"
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+        >
+          <circle
+            className="opacity-25"
+            cx="12"
+            cy="12"
+            r="10"
+            stroke="currentColor"
+            strokeWidth="4"
+          />
+          <path
+            className="opacity-75"
+            fill="currentColor"
+            d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+          />
+        </svg>
+        <span className="font-medium">{t('mcp.testing')}</span>
+      </div>
+    );
+  }
+
+  // 连接中
+  if (runtimeInfo.status === MCPSessionStatus.CONNECTING) {
+    return (
+      <div className="flex items-center gap-2 text-blue-600">
+        <svg
+          className="w-5 h-5 animate-spin"
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+        >
+          <circle
+            className="opacity-25"
+            cx="12"
+            cy="12"
+            r="10"
+            stroke="currentColor"
+            strokeWidth="4"
+          />
+          <path
+            className="opacity-75"
+            fill="currentColor"
+            d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+          />
+        </svg>
+        <span className="font-medium">{t('mcp.connecting')}</span>
+      </div>
+    );
+  }
+
+  // 连接失败
+  return (
+    <div className="space-y-1">
+      <div className="flex items-center gap-2 text-red-600">
+        <svg
+          className="w-5 h-5"
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={2}
+            d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
+          />
+        </svg>
+        <span className="font-medium">{t('mcp.connectionFailed')}</span>
+      </div>
+      {/* {runtimeInfo.error_message && (
+        <div className="text-sm text-red-500 pl-7">
+          {runtimeInfo.error_message}
+        </div>
+      )} */}
+    </div>
+  );
+}
+
+// Tools List Component
+function ToolsList({ tools }: { tools: MCPTool[] }) {
+  return (
+    <div className="space-y-2 max-h-[300px] overflow-y-auto">
+      {tools.map((tool, index) => (
+        <Card key={index} className="py-3 shadow-none">
+          <CardHeader>
+            <CardTitle className="text-sm">{tool.name}</CardTitle>
+            {tool.description && (
+              <CardDescription className="text-xs">
+                {tool.description}
+              </CardDescription>
+            )}
+          </CardHeader>
+        </Card>
+      ))}
+    </div>
+  );
+}
+
+const getFormSchema = (t: (key: string) => string) =>
+  z.object({
+    name: z
+      .string({ required_error: t('mcp.nameRequired') })
+      .min(1, { message: t('mcp.nameRequired') }),
+    timeout: z
+      .number({ invalid_type_error: t('mcp.timeoutMustBeNumber') })
+      .positive({ message: t('mcp.timeoutMustBePositive') })
+      .default(30),
+    ssereadtimeout: z
+      .number({ invalid_type_error: t('mcp.sseTimeoutMustBeNumber') })
+      .positive({ message: t('mcp.timeoutMustBePositive') })
+      .default(300),
+    url: z
+      .string({ required_error: t('mcp.urlRequired') })
+      .min(1, { message: t('mcp.urlRequired') }),
+    extra_args: z
+      .array(
+        z.object({
+          key: z.string(),
+          type: z.enum(['string', 'number', 'boolean']),
+          value: z.string(),
+        }),
+      )
+      .optional(),
+  });
+
+type FormValues = z.infer<ReturnType<typeof getFormSchema>> & {
+  timeout: number;
+  ssereadtimeout: number;
+};
+
+interface MCPFormDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  serverName?: string | null;
+  isEditMode?: boolean;
+  onSuccess?: () => void;
+  onDelete?: () => void;
+}
+
+export default function MCPFormDialog({
+  open,
+  onOpenChange,
+  serverName,
+  isEditMode = false,
+  onSuccess,
+  onDelete,
+}: MCPFormDialogProps) {
+  const { t } = useTranslation();
+  const formSchema = getFormSchema(t);
+
+  const form = useForm<FormValues>({
+    resolver: zodResolver(formSchema) as unknown as Resolver<FormValues>,
+    defaultValues: {
+      name: '',
+      url: '',
+      timeout: 30,
+      ssereadtimeout: 300,
+      extra_args: [],
+    },
+  });
+
+  const [extraArgs, setExtraArgs] = useState<
+    { key: string; type: 'string' | 'number' | 'boolean'; value: string }[]
+  >([]);
+  const [mcpTesting, setMcpTesting] = useState(false);
+  const [runtimeInfo, setRuntimeInfo] = useState<MCPServerRuntimeInfo | null>(
+    null,
+  );
+  const pollingIntervalRef = useRef<NodeJS.Timeout | null>(null);
+
+  // Load server data when editing
+  useEffect(() => {
+    if (open && isEditMode && serverName) {
+      loadServerForEdit(serverName);
+    } else if (open && !isEditMode) {
+      // Reset form when creating new server
+      form.reset();
+      setExtraArgs([]);
+      setRuntimeInfo(null);
+    }
+
+    // Cleanup polling interval when dialog closes
+    return () => {
+      if (pollingIntervalRef.current) {
+        clearInterval(pollingIntervalRef.current);
+        pollingIntervalRef.current = null;
+      }
+    };
+  }, [open, isEditMode, serverName]);
+
+  // Poll for updates when runtime_info status is CONNECTING
+  useEffect(() => {
+    if (
+      !open ||
+      !isEditMode ||
+      !serverName ||
+      !runtimeInfo ||
+      runtimeInfo.status !== MCPSessionStatus.CONNECTING
+    ) {
+      // Stop polling if conditions are not met
+      if (pollingIntervalRef.current) {
+        clearInterval(pollingIntervalRef.current);
+        pollingIntervalRef.current = null;
+      }
+      return;
+    }
+
+    // Start polling if not already running
+    if (!pollingIntervalRef.current) {
+      pollingIntervalRef.current = setInterval(() => {
+        loadServerForEdit(serverName);
+      }, 3000);
+    }
+
+    return () => {
+      if (pollingIntervalRef.current) {
+        clearInterval(pollingIntervalRef.current);
+        pollingIntervalRef.current = null;
+      }
+    };
+  }, [open, isEditMode, serverName, runtimeInfo?.status]);
+
+  async function loadServerForEdit(serverName: string) {
+    try {
+      const resp = await httpClient.getMCPServer(serverName);
+      const server = resp.server ?? resp;
+
+      const extraArgs = server.extra_args;
+      form.setValue('name', server.name);
+      form.setValue('url', extraArgs.url);
+      form.setValue('timeout', extraArgs.timeout);
+      form.setValue('ssereadtimeout', extraArgs.ssereadtimeout);
+
+      if (extraArgs.headers) {
+        const headers = Object.entries(extraArgs.headers).map(
+          ([key, value]) => ({
+            key,
+            type: 'string' as const,
+            value: String(value),
+          }),
+        );
+        setExtraArgs(headers);
+        form.setValue('extra_args', headers);
+      }
+
+      // Set runtime_info from server data
+      if (server.runtime_info) {
+        setRuntimeInfo(server.runtime_info);
+      } else {
+        setRuntimeInfo(null);
+      }
+    } catch (error) {
+      console.error('Failed to load server:', error);
+      toast.error(t('mcp.loadFailed'));
+    }
+  }
+
+  async function handleFormSubmit(value: z.infer<typeof formSchema>) {
+    // Convert extra_args to headers - all values must be strings according to MCPServerExtraArgsSSE
+    const headers: Record<string, string> = {};
+    value.extra_args?.forEach((arg) => {
+      // Convert all values to strings to match MCPServerExtraArgsSSE.headers type
+      headers[arg.key] = String(arg.value);
+    });
+
+    try {
+      const serverConfig: Omit<
+        MCPServer,
+        'uuid' | 'created_at' | 'updated_at' | 'runtime_info'
+      > = {
+        name: value.name,
+        mode: 'sse' as const,
+        enable: true,
+        extra_args: {
+          url: value.url,
+          headers: headers,
+          timeout: value.timeout,
+          ssereadtimeout: value.ssereadtimeout,
+        },
+      };
+
+      if (isEditMode && serverName) {
+        await httpClient.updateMCPServer(serverName, serverConfig);
+        toast.success(t('mcp.updateSuccess'));
+      } else {
+        await httpClient.createMCPServer(serverConfig);
+        toast.success(t('mcp.createSuccess'));
+      }
+
+      handleDialogClose(false);
+      onSuccess?.();
+    } catch (error) {
+      console.error('Failed to save MCP server:', error);
+      toast.error(isEditMode ? t('mcp.updateFailed') : t('mcp.createFailed'));
+    }
+  }
+
+  async function testMcp() {
+    setMcpTesting(true);
+
+    try {
+      const { task_id } = await httpClient.testMCPServer('_', {
+        name: form.getValues('name'),
+        mode: 'sse',
+        enable: true,
+        extra_args: {
+          url: form.getValues('url'),
+          timeout: form.getValues('timeout'),
+          ssereadtimeout: form.getValues('ssereadtimeout'),
+          headers: Object.fromEntries(
+            extraArgs.map((arg) => [arg.key, arg.value]),
+          ),
+        },
+      });
+      if (!task_id) {
+        throw new Error(t('mcp.noTaskId'));
+      }
+
+      const interval = setInterval(async () => {
+        try {
+          const taskResp = await httpClient.getAsyncTask(task_id);
+
+          if (taskResp.runtime?.done) {
+            clearInterval(interval);
+            setMcpTesting(false);
+
+            if (taskResp.runtime.exception) {
+              const errorMsg =
+                taskResp.runtime.exception || t('mcp.unknownError');
+              toast.error(`${t('mcp.testError')}: ${errorMsg}`);
+              setRuntimeInfo({
+                status: MCPSessionStatus.ERROR,
+                error_message: errorMsg,
+                tool_count: 0,
+                tools: [],
+              });
+            } else {
+              if (isEditMode) {
+                await loadServerForEdit(form.getValues('name'));
+              }
+              toast.success(t('mcp.testSuccess'));
+            }
+          }
+        } catch (err) {
+          clearInterval(interval);
+          setMcpTesting(false);
+          const errorMsg = (err as Error).message || t('mcp.getTaskFailed');
+          toast.error(`${t('mcp.testError')}: ${errorMsg}`);
+        }
+      }, 1000);
+    } catch (err) {
+      setMcpTesting(false);
+      const errorMsg = (err as Error).message || t('mcp.unknownError');
+      toast.error(`${t('mcp.testError')}: ${errorMsg}`);
+    }
+  }
+
+  const addExtraArg = () => {
+    const newArgs = [
+      ...extraArgs,
+      { key: '', type: 'string' as const, value: '' },
+    ];
+    setExtraArgs(newArgs);
+    form.setValue('extra_args', newArgs);
+  };
+
+  const removeExtraArg = (index: number) => {
+    const newArgs = extraArgs.filter((_, i) => i !== index);
+    setExtraArgs(newArgs);
+    form.setValue('extra_args', newArgs);
+  };
+
+  const updateExtraArg = (
+    index: number,
+    field: 'key' | 'type' | 'value',
+    value: string,
+  ) => {
+    const newArgs = [...extraArgs];
+    newArgs[index] = { ...newArgs[index], [field]: value };
+    setExtraArgs(newArgs);
+    form.setValue('extra_args', newArgs);
+  };
+
+  const handleDialogClose = (open: boolean) => {
+    onOpenChange(open);
+    if (!open) {
+      form.reset();
+      setExtraArgs([]);
+      setRuntimeInfo(null);
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={handleDialogClose}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>
+            {isEditMode ? t('mcp.editServer') : t('mcp.createServer')}
+          </DialogTitle>
+        </DialogHeader>
+
+        {isEditMode && runtimeInfo && (
+          <div className="mb-0 space-y-3">
+            {/* 测试中或连接失败时显示状态 */}
+            {(mcpTesting ||
+              runtimeInfo.status !== MCPSessionStatus.CONNECTED) && (
+              <div className="p-3 rounded-lg border">
+                <StatusDisplay
+                  testing={mcpTesting}
+                  runtimeInfo={runtimeInfo}
+                  t={t}
+                />
+              </div>
+            )}
+
+            {/* 连接成功时只显示工具列表 */}
+            {!mcpTesting &&
+              runtimeInfo.status === MCPSessionStatus.CONNECTED &&
+              runtimeInfo.tools?.length > 0 && (
+                <>
+                  <div className="text-sm font-medium">
+                    {t('mcp.toolCount', {
+                      count: runtimeInfo.tools?.length || 0,
+                    })}
+                  </div>
+                  <ToolsList tools={runtimeInfo.tools} />
+                </>
+              )}
+          </div>
+        )}
+
+        <Form {...form}>
+          <form
+            onSubmit={form.handleSubmit(handleFormSubmit)}
+            className="space-y-4"
+          >
+            <div className="space-y-4">
+              <FormField
+                control={form.control}
+                name="name"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('mcp.name')}</FormLabel>
+                    <FormControl>
+                      <Input {...field} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name="url"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('mcp.url')}</FormLabel>
+                    <FormControl>
+                      <Input {...field} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name="timeout"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('mcp.timeout')}</FormLabel>
+                    <FormControl>
+                      <Input
+                        type="number"
+                        placeholder={t('mcp.timeout')}
+                        {...field}
+                        onChange={(e) => field.onChange(Number(e.target.value))}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name="ssereadtimeout"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('mcp.sseTimeout')}</FormLabel>
+                    <FormControl>
+                      <Input
+                        type="number"
+                        placeholder={t('mcp.sseTimeoutDescription')}
+                        {...field}
+                        onChange={(e) => field.onChange(Number(e.target.value))}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormItem>
+                <FormLabel>{t('models.extraParameters')}</FormLabel>
+                <div className="space-y-2">
+                  {extraArgs.map((arg, index) => (
+                    <div key={index} className="flex gap-2">
+                      <Input
+                        placeholder={t('models.keyName')}
+                        value={arg.key}
+                        onChange={(e) =>
+                          updateExtraArg(index, 'key', e.target.value)
+                        }
+                      />
+                      <Select
+                        value={arg.type}
+                        onValueChange={(value) =>
+                          updateExtraArg(index, 'type', value)
+                        }
+                      >
+                        <SelectTrigger className="w-[120px] bg-[#ffffff] dark:bg-[#2a2a2e]">
+                          <SelectValue placeholder={t('models.type')} />
+                        </SelectTrigger>
+                        <SelectContent className="bg-[#ffffff] dark:bg-[#2a2a2e]">
+                          <SelectItem value="string">
+                            {t('models.string')}
+                          </SelectItem>
+                          <SelectItem value="number">
+                            {t('models.number')}
+                          </SelectItem>
+                          <SelectItem value="boolean">
+                            {t('models.boolean')}
+                          </SelectItem>
+                        </SelectContent>
+                      </Select>
+                      <Input
+                        placeholder={t('models.value')}
+                        value={arg.value}
+                        onChange={(e) =>
+                          updateExtraArg(index, 'value', e.target.value)
+                        }
+                      />
+                      <button
+                        type="button"
+                        className="p-2 hover:bg-gray-100 rounded"
+                        onClick={() => removeExtraArg(index)}
+                      >
+                        <svg
+                          xmlns="http://www.w3.org/2000/svg"
+                          viewBox="0 0 24 24"
+                          fill="currentColor"
+                          className="w-5 h-5 text-red-500"
+                        >
+                          <path d="M7 4V2H17V4H22V6H20V21C20 21.5523 19.5523 22 19 22H5C4.44772 22 4 21.5523 4 21V6H2V4H7ZM6 6V20H18V6H6ZM9 9H11V17H9V9ZM13 9H15V17H13V9Z"></path>
+                        </svg>
+                      </button>
+                    </div>
+                  ))}
+                  <Button type="button" variant="outline" onClick={addExtraArg}>
+                    {t('models.addParameter')}
+                  </Button>
+                </div>
+                <FormDescription>
+                  {t('mcp.extraParametersDescription')}
+                </FormDescription>
+                <FormMessage />
+              </FormItem>
+
+              <DialogFooter>
+                {isEditMode && onDelete && (
+                  <Button
+                    type="button"
+                    variant="destructive"
+                    onClick={onDelete}
+                  >
+                    {t('common.delete')}
+                  </Button>
+                )}
+
+                <Button type="submit">
+                  {isEditMode ? t('common.save') : t('common.submit')}
+                </Button>
+
+                <Button
+                  type="button"
+                  variant="outline"
+                  onClick={() => testMcp()}
+                  disabled={mcpTesting}
+                >
+                  {t('common.test')}
+                </Button>
+
+                <Button
+                  type="button"
+                  variant="outline"
+                  onClick={() => handleDialogClose(false)}
+                >
+                  {t('common.cancel')}
+                </Button>
+              </DialogFooter>
+            </div>
+          </form>
+        </Form>
+      </DialogContent>
+    </Dialog>
+  );
+}

web/src/app/home/plugins/page.tsx

@@ -3,10 +3,18 @@ import PluginInstalledComponent, {
   PluginInstalledComponentRef,
 } from '@/app/home/plugins/components/plugin-installed/PluginInstalledComponent';
 import MarketPage from '@/app/home/plugins/components/plugin-market/PluginMarketComponent';
-// import PluginSortDialog from '@/app/home/plugins/plugin-sort/PluginSortDialog';
+import MCPServerComponent from '@/app/home/plugins/mcp-server/MCPServerComponent';
+import MCPFormDialog from '@/app/home/plugins/mcp-server/mcp-form/MCPFormDialog';
+import MCPDeleteConfirmDialog from '@/app/home/plugins/mcp-server/mcp-form/MCPDeleteConfirmDialog';
 import styles from './plugins.module.css';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import { Button } from '@/components/ui/button';
+import {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+} from '@/components/ui/card';
 import {
   PlusIcon,
   ChevronDownIcon,
@@ -14,6 +22,8 @@ import {
   StoreIcon,
   Download,
   Power,
+  Github,
+  ChevronLeft,
 } from 'lucide-react';
 import {
   DropdownMenu,
@@ -29,7 +39,7 @@ import {
   DialogFooter,
 } from '@/components/ui/dialog';
 import { Input } from '@/components/ui/input';
-import { useState, useRef, useCallback, useEffect } from 'react';
+import React, { useState, useRef, useCallback, useEffect } from 'react';
 import { httpClient } from '@/app/infra/http/HttpClient';
 import { toast } from 'sonner';
 import { useTranslation } from 'react-i18next';
@@ -39,28 +49,62 @@ import { ApiRespPluginSystemStatus } from '@/app/infra/entities/api';
 
 enum PluginInstallStatus {
   WAIT_INPUT = 'wait_input',
+  SELECT_RELEASE = 'select_release',
+  SELECT_ASSET = 'select_asset',
   ASK_CONFIRM = 'ask_confirm',
   INSTALLING = 'installing',
   ERROR = 'error',
 }
 
+interface GithubRelease {
+  id: number;
+  tag_name: string;
+  name: string;
+  published_at: string;
+  prerelease: boolean;
+  draft: boolean;
+}
+
+interface GithubAsset {
+  id: number;
+  name: string;
+  size: number;
+  download_url: string;
+  content_type: string;
+}
+
 export default function PluginConfigPage() {
   const { t } = useTranslation();
-  const [modalOpen, setModalOpen] = useState(false);
-  // const [sortModalOpen, setSortModalOpen] = useState(false);
   const [activeTab, setActiveTab] = useState('installed');
+  const [modalOpen, setModalOpen] = useState(false);
   const [installSource, setInstallSource] = useState<string>('local');
   const [installInfo, setInstallInfo] = useState<Record<string, any>>({}); // eslint-disable-line @typescript-eslint/no-explicit-any
+  const [mcpSSEModalOpen, setMcpSSEModalOpen] = useState(false);
   const [pluginInstallStatus, setPluginInstallStatus] =
     useState<PluginInstallStatus>(PluginInstallStatus.WAIT_INPUT);
   const [installError, setInstallError] = useState<string | null>(null);
   const [githubURL, setGithubURL] = useState('');
+  const [githubReleases, setGithubReleases] = useState<GithubRelease[]>([]);
+  const [selectedRelease, setSelectedRelease] = useState<GithubRelease | null>(
+    null,
+  );
+  const [githubAssets, setGithubAssets] = useState<GithubAsset[]>([]);
+  const [selectedAsset, setSelectedAsset] = useState<GithubAsset | null>(null);
+  const [githubOwner, setGithubOwner] = useState('');
+  const [githubRepo, setGithubRepo] = useState('');
+  const [fetchingReleases, setFetchingReleases] = useState(false);
+  const [fetchingAssets, setFetchingAssets] = useState(false);
   const [isDragOver, setIsDragOver] = useState(false);
   const [pluginSystemStatus, setPluginSystemStatus] =
     useState<ApiRespPluginSystemStatus | null>(null);
   const [statusLoading, setStatusLoading] = useState(true);
-  const pluginInstalledRef = useRef<PluginInstalledComponentRef>(null);
   const fileInputRef = useRef<HTMLInputElement>(null);
+  const [showDeleteConfirmModal, setShowDeleteConfirmModal] = useState(false);
+  const [editingServerName, setEditingServerName] = useState<string | null>(
+    null,
+  );
+  const [isEditMode, setIsEditMode] = useState(false);
+  const [refreshKey, setRefreshKey] = useState(0);
 
   useEffect(() => {
     const fetchPluginSystemStatus = async () => {
@@ -77,28 +121,33 @@ export default function PluginConfigPage() {
     };
 
     fetchPluginSystemStatus();
-  }, [t]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  function formatFileSize(bytes: number): string {
+    if (bytes === 0) return '0 Bytes';
+    const k = 1024;
+    const sizes = ['Bytes', 'KB', 'MB', 'GB'];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return Math.round((bytes / Math.pow(k, i)) * 100) / 100 + ' ' + sizes[i];
+  }
 
   function watchTask(taskId: number) {
     let alreadySuccess = false;
-    console.log('taskId:', taskId);
 
-    // 每秒拉取一次任务状态
     const interval = setInterval(() => {
       httpClient.getAsyncTask(taskId).then((resp) => {
-        console.log('task status:', resp);
         if (resp.runtime.done) {
           clearInterval(interval);
           if (resp.runtime.exception) {
             setInstallError(resp.runtime.exception);
             setPluginInstallStatus(PluginInstallStatus.ERROR);
           } else {
-            // success
             if (!alreadySuccess) {
               toast.success(t('plugins.installSuccess'));
               alreadySuccess = true;
             }
-            setGithubURL('');
+            resetGithubState();
             setModalOpen(false);
             pluginInstalledRef.current?.refreshPluginList();
           }
@@ -107,8 +156,96 @@ export default function PluginConfigPage() {
     }, 1000);
   }
 
+  const pluginInstalledRef = useRef<PluginInstalledComponentRef>(null);
+
+  function resetGithubState() {
+    setGithubURL('');
+    setGithubReleases([]);
+    setSelectedRelease(null);
+    setGithubAssets([]);
+    setSelectedAsset(null);
+    setGithubOwner('');
+    setGithubRepo('');
+    setFetchingReleases(false);
+    setFetchingAssets(false);
+  }
+
+  async function fetchGithubReleases() {
+    if (!githubURL.trim()) {
+      toast.error(t('plugins.enterRepoUrl'));
+      return;
+    }
+
+    setFetchingReleases(true);
+    setInstallError(null);
+
+    try {
+      const result = await httpClient.getGithubReleases(githubURL);
+      setGithubReleases(result.releases);
+      setGithubOwner(result.owner);
+      setGithubRepo(result.repo);
+
+      if (result.releases.length === 0) {
+        toast.warning(t('plugins.noReleasesFound'));
+      } else {
+        setPluginInstallStatus(PluginInstallStatus.SELECT_RELEASE);
+      }
+    } catch (error: unknown) {
+      console.error('Failed to fetch GitHub releases:', error);
+      const errorMessage =
+        error instanceof Error ? error.message : String(error);
+      setInstallError(errorMessage || t('plugins.fetchReleasesError'));
+      setPluginInstallStatus(PluginInstallStatus.ERROR);
+    } finally {
+      setFetchingReleases(false);
+    }
+  }
+
+  async function handleReleaseSelect(release: GithubRelease) {
+    setSelectedRelease(release);
+    setFetchingAssets(true);
+    setInstallError(null);
+
+    try {
+      const result = await httpClient.getGithubReleaseAssets(
+        githubOwner,
+        githubRepo,
+        release.id,
+      );
+      setGithubAssets(result.assets);
+
+      if (result.assets.length === 0) {
+        toast.warning(t('plugins.noAssetsFound'));
+      } else {
+        setPluginInstallStatus(PluginInstallStatus.SELECT_ASSET);
+      }
+    } catch (error: unknown) {
+      console.error('Failed to fetch GitHub release assets:', error);
+      const errorMessage =
+        error instanceof Error ? error.message : String(error);
+      setInstallError(errorMessage || t('plugins.fetchAssetsError'));
+      setPluginInstallStatus(PluginInstallStatus.ERROR);
+    } finally {
+      setFetchingAssets(false);
+    }
+  }
+
+  function handleAssetSelect(asset: GithubAsset) {
+    setSelectedAsset(asset);
+    setPluginInstallStatus(PluginInstallStatus.ASK_CONFIRM);
+  }
+
   function handleModalConfirm() {
-    installPlugin(installSource, installInfo as Record<string, any>); // eslint-disable-line @typescript-eslint/no-explicit-any
+    if (installSource === 'github' && selectedAsset && selectedRelease) {
+      installPlugin('github', {
+        asset_url: selectedAsset.download_url,
+        owner: githubOwner,
+        repo: githubRepo,
+        release_tag: selectedRelease.tag_name,
+      });
+    } else {
+      installPlugin(installSource, installInfo as Record<string, any>); // eslint-disable-line @typescript-eslint/no-explicit-any
+    }
   }
 
   function installPlugin(
@@ -118,7 +255,12 @@ export default function PluginConfigPage() {
     setPluginInstallStatus(PluginInstallStatus.INSTALLING);
     if (installSource === 'github') {
       httpClient
-        .installPluginFromGithub(installInfo.url)
+        .installPluginFromGithub(
+          installInfo.asset_url,
+          installInfo.owner,
+          installInfo.repo,
+          installInfo.release_tag,
+        )
         .then((resp) => {
           const taskId = resp.task_id;
           watchTask(taskId);
@@ -177,7 +319,7 @@ export default function PluginConfigPage() {
       setInstallError(null);
       installPlugin('local', { file });
     },
-    [t, pluginSystemStatus],
+    [t, pluginSystemStatus, installPlugin],
   );
 
   const handleFileSelect = useCallback(() => {
@@ -192,7 +334,7 @@ export default function PluginConfigPage() {
       if (file) {
         uploadPluginFile(file);
       }
-      // 清空input值，以便可以重复选择同一个文件
+
       event.target.value = '';
     },
     [uploadPluginFile],
@@ -234,7 +376,6 @@ export default function PluginConfigPage() {
     [uploadPluginFile, isPluginSystemReady, t],
   );
 
-  // 插件系统未启用的状态显示
   const renderPluginDisabledState = () => (
     <div className="flex flex-col items-center justify-center h-[60vh] text-center pt-[10vh]">
       <Power className="w-16 h-16 text-gray-400 mb-4" />
@@ -247,7 +388,6 @@ export default function PluginConfigPage() {
     </div>
   );
 
-  // 插件系统连接异常的状态显示
   const renderPluginConnectionErrorState = () => (
     <div className="flex flex-col items-center justify-center h-[60vh] text-center pt-[10vh]">
       <svg
@@ -269,7 +409,6 @@ export default function PluginConfigPage() {
     </div>
   );
 
-  // 加载状态显示
   const renderLoadingState = () => (
     <div className="flex flex-col items-center justify-center h-[60vh] pt-[10vh]">
       <p className="text-gray-500 dark:text-gray-400">
@@ -278,7 +417,6 @@ export default function PluginConfigPage() {
     </div>
   );
 
-  // 根据状态返回不同的内容
   if (statusLoading) {
     return renderLoadingState();
   }
@@ -293,7 +431,7 @@ export default function PluginConfigPage() {
 
   return (
     <div
-      className={`${styles.pageContainer} ${isDragOver ? 'bg-blue-50' : ''}`}
+      className={`${styles.pageContainer} h-full flex flex-col ${isDragOver ? 'bg-blue-50' : ''}`}
       onDragOver={handleDragOver}
       onDragLeave={handleDragLeave}
       onDrop={handleDrop}
@@ -305,8 +443,12 @@ export default function PluginConfigPage() {
         onChange={handleFileChange}
         style={{ display: 'none' }}
       />
-      <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
-        <div className="flex flex-row justify-between items-center px-[0.8rem]">
+      <Tabs
+        value={activeTab}
+        onValueChange={setActiveTab}
+        className="w-full h-full flex flex-col"
+      >
+        <div className="flex flex-row justify-between items-center px-[0.8rem] flex-shrink-0">
           <TabsList className="shadow-md py-5 bg-[#f0f0f0] dark:bg-[#2a2a2e]">
             <TabsTrigger value="installed" className="px-6 py-4 cursor-pointer">
               {t('plugins.installed')}
@@ -316,49 +458,78 @@ export default function PluginConfigPage() {
                 {t('plugins.marketplace')}
               </TabsTrigger>
             )}
+            <TabsTrigger
+              value="mcp-servers"
+              className="px-6 py-4 cursor-pointer"
+            >
+              {t('mcp.title')}
+            </TabsTrigger>
           </TabsList>
 
           <div className="flex flex-row justify-end items-center">
-            {/* <Button
-              variant="outline"
-              className="px-6 py-4 cursor-pointer mr-2"
-              onClick={() => {
-                // setSortModalOpen(true);
-              }}
-            >
-              {t('plugins.arrange')}
-            </Button> */}
             <DropdownMenu>
               <DropdownMenuTrigger asChild>
                 <Button variant="default" className="px-6 py-4 cursor-pointer">
                   <PlusIcon className="w-4 h-4" />
-                  {t('plugins.install')}
+                  {activeTab === 'mcp-servers'
+                    ? t('mcp.add')
+                    : t('plugins.install')}
                   <ChevronDownIcon className="ml-2 w-4 h-4" />
                 </Button>
               </DropdownMenuTrigger>
               <DropdownMenuContent align="end">
-                <DropdownMenuItem onClick={handleFileSelect}>
-                  <UploadIcon className="w-4 h-4" />
-                  {t('plugins.uploadLocal')}
-                </DropdownMenuItem>
-                {systemInfo.enable_marketplace && (
-                  <DropdownMenuItem
-                    onClick={() => {
-                      setActiveTab('market');
-                    }}
-                  >
-                    <StoreIcon className="w-4 h-4" />
-                    {t('plugins.marketplace')}
-                  </DropdownMenuItem>
+                {activeTab === 'mcp-servers' ? (
+                  <>
+                    <DropdownMenuItem
+                      onClick={() => {
+                        setActiveTab('mcp-servers');
+                        setIsEditMode(false);
+                        setEditingServerName(null);
+                        setMcpSSEModalOpen(true);
+                      }}
+                    >
+                      <PlusIcon className="w-4 h-4" />
+                      {t('mcp.createServer')}
+                    </DropdownMenuItem>
+                  </>
+                ) : (
+                  <>
+                    {systemInfo.enable_marketplace && (
+                      <DropdownMenuItem
+                        onClick={() => {
+                          setActiveTab('market');
+                        }}
+                      >
+                        <StoreIcon className="w-4 h-4" />
+                        {t('plugins.marketplace')}
+                      </DropdownMenuItem>
+                    )}
+                    <DropdownMenuItem onClick={handleFileSelect}>
+                      <UploadIcon className="w-4 h-4" />
+                      {t('plugins.uploadLocal')}
+                    </DropdownMenuItem>
+                    <DropdownMenuItem
+                      onClick={() => {
+                        setInstallSource('github');
+                        setPluginInstallStatus(PluginInstallStatus.WAIT_INPUT);
+                        setInstallError(null);
+                        resetGithubState();
+                        setModalOpen(true);
+                      }}
+                    >
+                      <Github className="w-4 h-4" />
+                      {t('plugins.installFromGithub')}
+                    </DropdownMenuItem>
+                  </>
                 )}
               </DropdownMenuContent>
             </DropdownMenu>
           </div>
         </div>
-        <TabsContent value="installed">
+        <TabsContent value="installed" className="flex-1 overflow-y-auto mt-0">
           <PluginInstalledComponent ref={pluginInstalledRef} />
         </TabsContent>
-        <TabsContent value="market">
+        <TabsContent value="market" className="flex-1 overflow-y-auto mt-0">
           <MarketPage
             installPlugin={(plugin: PluginV4) => {
               setInstallSource('marketplace');
@@ -372,51 +543,262 @@ export default function PluginConfigPage() {
             }}
           />
         </TabsContent>
+        <TabsContent
+          value="mcp-servers"
+          className="flex-1 overflow-y-auto mt-0"
+        >
+          <MCPServerComponent
+            key={refreshKey}
+            onEditServer={(serverName) => {
+              setEditingServerName(serverName);
+              setIsEditMode(true);
+              setMcpSSEModalOpen(true);
+            }}
+          />
+        </TabsContent>
       </Tabs>
 
-      <Dialog open={modalOpen} onOpenChange={setModalOpen}>
-        <DialogContent className="w-[500px] p-6 bg-white dark:bg-[#1a1a1e]">
+      <Dialog
+        open={modalOpen}
+        onOpenChange={(open) => {
+          setModalOpen(open);
+          if (!open) {
+            resetGithubState();
+            setInstallError(null);
+          }
+        }}
+      >
+        <DialogContent className="w-[500px] max-h-[80vh] p-6 bg-white dark:bg-[#1a1a1e] overflow-y-auto">
           <DialogHeader>
             <DialogTitle className="flex items-center gap-4">
-              <Download className="size-6" />
+              {installSource === 'github' ? (
+                <Github className="size-6" />
+              ) : (
+                <Download className="size-6" />
+              )}
               <span>{t('plugins.installPlugin')}</span>
             </DialogTitle>
           </DialogHeader>
-          {pluginInstallStatus === PluginInstallStatus.WAIT_INPUT && (
-            <div className="mt-4">
-              <p className="mb-2">{t('plugins.onlySupportGithub')}</p>
-              <Input
-                placeholder={t('plugins.enterGithubLink')}
-                value={githubURL}
-                onChange={(e) => setGithubURL(e.target.value)}
-                className="mb-4"
-              />
-            </div>
-          )}
-          {pluginInstallStatus === PluginInstallStatus.ASK_CONFIRM && (
-            <div className="mt-4">
-              <p className="mb-2">
-                {t('plugins.askConfirm', {
-                  name: installInfo.plugin_name,
-                  version: installInfo.plugin_version,
-                })}
-              </p>
-            </div>
-          )}
+
+          {/* GitHub Install Flow */}
+          {installSource === 'github' &&
+            pluginInstallStatus === PluginInstallStatus.WAIT_INPUT && (
+              <div className="mt-4">
+                <p className="mb-2">{t('plugins.enterRepoUrl')}</p>
+                <Input
+                  placeholder={t('plugins.repoUrlPlaceholder')}
+                  value={githubURL}
+                  onChange={(e) => setGithubURL(e.target.value)}
+                  className="mb-4"
+                />
+                {fetchingReleases && (
+                  <p className="text-sm text-gray-500">
+                    {t('plugins.fetchingReleases')}
+                  </p>
+                )}
+              </div>
+            )}
+
+          {installSource === 'github' &&
+            pluginInstallStatus === PluginInstallStatus.SELECT_RELEASE && (
+              <div className="mt-4">
+                <div className="flex items-center justify-between mb-4">
+                  <p className="font-medium">{t('plugins.selectRelease')}</p>
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    onClick={() => {
+                      setPluginInstallStatus(PluginInstallStatus.WAIT_INPUT);
+                      setGithubReleases([]);
+                    }}
+                  >
+                    <ChevronLeft className="w-4 h-4 mr-1" />
+                    {t('plugins.backToRepoUrl')}
+                  </Button>
+                </div>
+                <div className="max-h-[400px] overflow-y-auto space-y-2 pb-2">
+                  {githubReleases.map((release) => (
+                    <Card
+                      key={release.id}
+                      className="cursor-pointer hover:shadow-sm transition-shadow duration-200 shadow-none py-4"
+                      onClick={() => handleReleaseSelect(release)}
+                    >
+                      <CardHeader className="flex flex-row items-start justify-between px-3 space-y-0">
+                        <div className="flex-1">
+                          <CardTitle className="text-sm">
+                            {release.name || release.tag_name}
+                          </CardTitle>
+                          <CardDescription className="text-xs mt-1">
+                            {t('plugins.releaseTag', { tag: release.tag_name })}{' '}
+                            •{' '}
+                            {t('plugins.publishedAt', {
+                              date: new Date(
+                                release.published_at,
+                              ).toLocaleDateString(),
+                            })}
+                          </CardDescription>
+                        </div>
+                        {release.prerelease && (
+                          <span className="text-xs bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200 px-2 py-0.5 rounded ml-2 shrink-0">
+                            {t('plugins.prerelease')}
+                          </span>
+                        )}
+                      </CardHeader>
+                    </Card>
+                  ))}
+                </div>
+                {fetchingAssets && (
+                  <p className="text-sm text-gray-500 mt-4">
+                    {t('plugins.loading')}
+                  </p>
+                )}
+              </div>
+            )}
+
+          {installSource === 'github' &&
+            pluginInstallStatus === PluginInstallStatus.SELECT_ASSET && (
+              <div className="mt-4">
+                <div className="flex items-center justify-between mb-4">
+                  <p className="font-medium">{t('plugins.selectAsset')}</p>
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    onClick={() => {
+                      setPluginInstallStatus(
+                        PluginInstallStatus.SELECT_RELEASE,
+                      );
+                      setGithubAssets([]);
+                      setSelectedAsset(null);
+                    }}
+                  >
+                    <ChevronLeft className="w-4 h-4 mr-1" />
+                    {t('plugins.backToReleases')}
+                  </Button>
+                </div>
+                {selectedRelease && (
+                  <div className="mb-4 p-2 bg-gray-50 dark:bg-gray-900 rounded">
+                    <div className="text-sm font-medium">
+                      {selectedRelease.name || selectedRelease.tag_name}
+                    </div>
+                    <div className="text-xs text-gray-500">
+                      {selectedRelease.tag_name}
+                    </div>
+                  </div>
+                )}
+                <div className="max-h-[400px] overflow-y-auto space-y-2 pb-2">
+                  {githubAssets.map((asset) => (
+                    <Card
+                      key={asset.id}
+                      className="cursor-pointer hover:shadow-sm transition-shadow duration-200 shadow-none py-3"
+                      onClick={() => handleAssetSelect(asset)}
+                    >
+                      <CardHeader className="px-3">
+                        <CardTitle className="text-sm">{asset.name}</CardTitle>
+                        <CardDescription className="text-xs">
+                          {t('plugins.assetSize', {
+                            size: formatFileSize(asset.size),
+                          })}
+                        </CardDescription>
+                      </CardHeader>
+                    </Card>
+                  ))}
+                </div>
+              </div>
+            )}
+
+          {/* Marketplace Install Confirm */}
+          {installSource === 'marketplace' &&
+            pluginInstallStatus === PluginInstallStatus.ASK_CONFIRM && (
+              <div className="mt-4">
+                <p className="mb-2">
+                  {t('plugins.askConfirm', {
+                    name: installInfo.plugin_name,
+                    version: installInfo.plugin_version,
+                  })}
+                </p>
+              </div>
+            )}
+
+          {/* GitHub Install Confirm */}
+          {installSource === 'github' &&
+            pluginInstallStatus === PluginInstallStatus.ASK_CONFIRM && (
+              <div className="mt-4">
+                <div className="flex items-center justify-between mb-4">
+                  <p className="font-medium">{t('plugins.confirmInstall')}</p>
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    onClick={() => {
+                      setPluginInstallStatus(PluginInstallStatus.SELECT_ASSET);
+                      setSelectedAsset(null);
+                    }}
+                  >
+                    <ChevronLeft className="w-4 h-4 mr-1" />
+                    {t('plugins.backToAssets')}
+                  </Button>
+                </div>
+                {selectedRelease && selectedAsset && (
+                  <div className="p-3 bg-gray-50 dark:bg-gray-900 rounded space-y-2">
+                    <div>
+                      <span className="text-sm font-medium">Repository: </span>
+                      <span className="text-sm">
+                        {githubOwner}/{githubRepo}
+                      </span>
+                    </div>
+                    <div>
+                      <span className="text-sm font-medium">Release: </span>
+                      <span className="text-sm">
+                        {selectedRelease.tag_name}
+                      </span>
+                    </div>
+                    <div>
+                      <span className="text-sm font-medium">File: </span>
+                      <span className="text-sm">{selectedAsset.name}</span>
+                    </div>
+                  </div>
+                )}
+              </div>
+            )}
+
+          {/* Installing State */}
           {pluginInstallStatus === PluginInstallStatus.INSTALLING && (
             <div className="mt-4">
               <p className="mb-2">{t('plugins.installing')}</p>
             </div>
           )}
+
+          {/* Error State */}
           {pluginInstallStatus === PluginInstallStatus.ERROR && (
             <div className="mt-4">
               <p className="mb-2">{t('plugins.installFailed')}</p>
               <p className="mb-2 text-red-500">{installError}</p>
             </div>
           )}
+
           <DialogFooter>
-            {(pluginInstallStatus === PluginInstallStatus.WAIT_INPUT ||
-              pluginInstallStatus === PluginInstallStatus.ASK_CONFIRM) && (
+            {pluginInstallStatus === PluginInstallStatus.WAIT_INPUT &&
+              installSource === 'github' && (
+                <>
+                  <Button
+                    variant="outline"
+                    onClick={() => {
+                      setModalOpen(false);
+                      resetGithubState();
+                    }}
+                  >
+                    {t('common.cancel')}
+                  </Button>
+                  <Button
+                    onClick={fetchGithubReleases}
+                    disabled={!githubURL.trim() || fetchingReleases}
+                  >
+                    {fetchingReleases
+                      ? t('plugins.loading')
+                      : t('common.confirm')}
+                  </Button>
+                </>
+              )}
+            {pluginInstallStatus === PluginInstallStatus.ASK_CONFIRM && (
               <>
                 <Button variant="outline" onClick={() => setModalOpen(false)}>
                   {t('common.cancel')}
@@ -435,7 +817,6 @@ export default function PluginConfigPage() {
         </DialogContent>
       </Dialog>
 
-      {/* 拖拽提示覆盖层 */}
       {isDragOver && (
         <div className="fixed inset-0 bg-gray-500 bg-opacity-50 flex items-center justify-center z-50 pointer-events-none">
           <div className="bg-white rounded-lg p-8 shadow-lg border-2 border-dashed border-gray-500">
@@ -449,13 +830,32 @@ export default function PluginConfigPage() {
         </div>
       )}
 
-      {/* <PluginSortDialog
-        open={sortModalOpen}
-        onOpenChange={setSortModalOpen}
-        onSortComplete={() => {
-          pluginInstalledRef.current?.refreshPluginList();
+      <MCPFormDialog
+        open={mcpSSEModalOpen}
+        onOpenChange={setMcpSSEModalOpen}
+        serverName={editingServerName}
+        isEditMode={isEditMode}
+        onSuccess={() => {
+          setEditingServerName(null);
+          setIsEditMode(false);
+          setRefreshKey((prev) => prev + 1);
         }}
-      /> */}
+        onDelete={() => {
+          setShowDeleteConfirmModal(true);
+        }}
+      />
+
+      <MCPDeleteConfirmDialog
+        open={showDeleteConfirmModal}
+        onOpenChange={setShowDeleteConfirmModal}
+        serverName={editingServerName}
+        onSuccess={() => {
+          setMcpSSEModalOpen(false);
+          setEditingServerName(null);
+          setIsEditMode(false);
+          setRefreshKey((prev) => prev + 1);
+        }}
+      />
     </div>
   );
 }

web/src/app/infra/entities/api/index.ts

@@ -29,6 +29,7 @@ export interface Requester {
   icon?: string;
   spec: {
     config: IDynamicFormItemSchema[];
+    provider_category: string;
   };
 }
 
@@ -309,3 +310,49 @@ export interface RetrieveResult {
 export interface ApiRespKnowledgeBaseRetrieve {
   results: RetrieveResult[];
 }
+
+// MCP
+export interface ApiRespMCPServers {
+  servers: MCPServer[];
+}
+
+export interface ApiRespMCPServer {
+  server: MCPServer;
+}
+
+export interface MCPServerExtraArgsSSE {
+  url: string;
+  headers: Record<string, string>;
+  timeout: number;
+  ssereadtimeout: number;
+}
+
+export enum MCPSessionStatus {
+  CONNECTING = 'connecting',
+  CONNECTED = 'connected',
+  ERROR = 'error',
+}
+
+export interface MCPServerRuntimeInfo {
+  status: MCPSessionStatus;
+  error_message: string;
+  tool_count: number;
+  tools: MCPTool[];
+}
+
+export interface MCPServer {
+  uuid?: string;
+  name: string;
+  mode: 'stdio' | 'sse';
+  enable: boolean;
+  extra_args: MCPServerExtraArgsSSE;
+  runtime_info?: MCPServerRuntimeInfo;
+  created_at?: string;
+  updated_at?: string;
+}
+
+export interface MCPTool {
+  name: string;
+  description: string;
+  parameters?: object;
+}

web/src/app/infra/entities/form/dynamic.ts

@@ -9,6 +9,10 @@ export interface IDynamicFormItemSchema {
   type: DynamicFormItemType;
   description?: I18nObject;
   options?: IDynamicFormItemOption[];
+
+  /** when type is PLUGIN_SELECTOR, the scopes is the scopes of components(plugin contains), the default is all */
+  scopes?: string[];
+  accept?: string; // For file type: accepted MIME types
 }
 
 export enum DynamicFormItemType {
@@ -16,12 +20,23 @@ export enum DynamicFormItemType {
   FLOAT = 'float',
   BOOLEAN = 'boolean',
   STRING = 'string',
+  TEXT = 'text',
   STRING_ARRAY = 'array[string]',
+  FILE = 'file',
+  FILE_ARRAY = 'array[file]',
   SELECT = 'select',
   LLM_MODEL_SELECTOR = 'llm-model-selector',
   PROMPT_EDITOR = 'prompt-editor',
   UNKNOWN = 'unknown',
   KNOWLEDGE_BASE_SELECTOR = 'knowledge-base-selector',
+  KNOWLEDGE_BASE_MULTI_SELECTOR = 'knowledge-base-multi-selector',
+  PLUGIN_SELECTOR = 'plugin-selector',
+  BOT_SELECTOR = 'bot-selector',
+}
+
+export interface IFileConfig {
+  file_key: string;
+  mimetype: string;
 }
 
 export interface IDynamicFormItemOption {

web/src/app/infra/http/BackendClient.ts

@@ -33,7 +33,11 @@ import {
   ApiRespProviderEmbeddingModel,
   EmbeddingModel,
   ApiRespPluginSystemStatus,
+  ApiRespMCPServers,
+  ApiRespMCPServer,
+  MCPServer,
 } from '@/app/infra/entities/api';
+import { Plugin } from '@/app/infra/entities/plugin';
 import { GetBotLogsRequest } from '@/app/infra/http/requestParam/bots/GetBotLogsRequest';
 import { GetBotLogsResponse } from '@/app/infra/http/requestParam/bots/GetBotLogsResponse';
 
@@ -166,6 +170,26 @@ export class BackendClient extends BaseHttpClient {
     return this.delete(`/api/v1/pipelines/${uuid}`);
   }
 
+  public getPipelineExtensions(uuid: string): Promise<{
+    bound_plugins: Array<{ author: string; name: string }>;
+    available_plugins: Plugin[];
+    bound_mcp_servers: string[];
+    available_mcp_servers: MCPServer[];
+  }> {
+    return this.get(`/api/v1/pipelines/${uuid}/extensions`);
+  }
+
+  public updatePipelineExtensions(
+    uuid: string,
+    bound_plugins: Array<{ author: string; name: string }>,
+    bound_mcp_servers: string[],
+  ): Promise<object> {
+    return this.put(`/api/v1/pipelines/${uuid}/extensions`, {
+      bound_plugins,
+      bound_mcp_servers,
+    });
+  }
+
   // ============ Debug WebChat API ============
 
   // ============ Debug WebChat API ============
@@ -439,6 +463,26 @@ export class BackendClient extends BaseHttpClient {
     return this.put(`/api/v1/plugins/${author}/${name}/config`, config);
   }
 
+  public uploadPluginConfigFile(file: File): Promise<{ file_key: string }> {
+    const formData = new FormData();
+    formData.append('file', file);
+
+    return this.request<{ file_key: string }>({
+      method: 'post',
+      url: '/api/v1/plugins/config-files',
+      data: formData,
+      headers: {
+        'Content-Type': 'multipart/form-data',
+      },
+    });
+  }
+
+  public deletePluginConfigFile(
+    fileKey: string,
+  ): Promise<{ deleted: boolean }> {
+    return this.delete(`/api/v1/plugins/config-files/${fileKey}`);
+  }
+
   public getPluginIconURL(author: string, name: string): string {
     if (this.instance.defaults.baseURL === '/') {
       const url = window.location.href;
@@ -451,9 +495,52 @@ export class BackendClient extends BaseHttpClient {
   }
 
   public installPluginFromGithub(
-    source: string,
+    assetUrl: string,
+    owner: string,
+    repo: string,
+    releaseTag: string,
   ): Promise<AsyncTaskCreatedResp> {
-    return this.post('/api/v1/plugins/install/github', { source });
+    return this.post('/api/v1/plugins/install/github', {
+      asset_url: assetUrl,
+      owner,
+      repo,
+      release_tag: releaseTag,
+    });
+  }
+
+  public getGithubReleases(repoUrl: string): Promise<{
+    releases: Array<{
+      id: number;
+      tag_name: string;
+      name: string;
+      published_at: string;
+      prerelease: boolean;
+      draft: boolean;
+    }>;
+    owner: string;
+    repo: string;
+  }> {
+    return this.post('/api/v1/plugins/github/releases', { repo_url: repoUrl });
+  }
+
+  public getGithubReleaseAssets(
+    owner: string,
+    repo: string,
+    releaseId: number,
+  ): Promise<{
+    assets: Array<{
+      id: number;
+      name: string;
+      size: number;
+      download_url: string;
+      content_type: string;
+    }>;
+  }> {
+    return this.post('/api/v1/plugins/github/release-assets', {
+      owner,
+      repo,
+      release_id: releaseId,
+    });
   }
 
   public installPluginFromLocal(file: File): Promise<AsyncTaskCreatedResp> {
@@ -477,8 +564,11 @@ export class BackendClient extends BaseHttpClient {
   public removePlugin(
     author: string,
     name: string,
+    deleteData: boolean = false,
   ): Promise<AsyncTaskCreatedResp> {
-    return this.delete(`/api/v1/plugins/${author}/${name}`);
+    return this.delete(
+      `/api/v1/plugins/${author}/${name}?delete_data=${deleteData}`,
+    );
   }
 
   public upgradePlugin(
@@ -488,6 +578,58 @@ export class BackendClient extends BaseHttpClient {
     return this.post(`/api/v1/plugins/${author}/${name}/upgrade`);
   }
 
+  // ============ MCP API ============
+  public getMCPServers(): Promise<ApiRespMCPServers> {
+    return this.get('/api/v1/mcp/servers');
+  }
+
+  public getMCPServer(serverName: string): Promise<ApiRespMCPServer> {
+    return this.get(`/api/v1/mcp/servers/${serverName}`);
+  }
+
+  public createMCPServer(server: MCPServer): Promise<AsyncTaskCreatedResp> {
+    return this.post('/api/v1/mcp/servers', server);
+  }
+
+  public updateMCPServer(
+    serverName: string,
+    server: Partial<MCPServer>,
+  ): Promise<AsyncTaskCreatedResp> {
+    return this.put(`/api/v1/mcp/servers/${serverName}`, server);
+  }
+
+  public deleteMCPServer(serverName: string): Promise<AsyncTaskCreatedResp> {
+    return this.delete(`/api/v1/mcp/servers/${serverName}`);
+  }
+
+  public toggleMCPServer(
+    serverName: string,
+    target_enabled: boolean,
+  ): Promise<AsyncTaskCreatedResp> {
+    return this.put(`/api/v1/mcp/servers/${serverName}`, {
+      enable: target_enabled,
+    });
+  }
+
+  public testMCPServer(
+    serverName: string,
+    serverData: object,
+  ): Promise<AsyncTaskCreatedResp> {
+    return this.post(`/api/v1/mcp/servers/${serverName}/test`, serverData);
+  }
+
+  public installMCPServerFromGithub(
+    source: string,
+  ): Promise<AsyncTaskCreatedResp> {
+    return this.post('/api/v1/mcp/install/github', { source });
+  }
+
+  public installMCPServerFromSSE(
+    source: object,
+  ): Promise<AsyncTaskCreatedResp> {
+    return this.post('/api/v1/mcp/servers', { source });
+  }
+
   // ============ System API ============
   public getSystemInfo(): Promise<ApiRespSystemInfo> {
     return this.get('/api/v1/system/info');

web/src/app/infra/http/BaseHttpClient.ts

@@ -38,7 +38,7 @@ export abstract class BaseHttpClient {
 
     this.instance = axios.create({
       baseURL: baseURL,
-      timeout: 15000,
+      timeout: 30000,
       headers: {
         'Content-Type': 'application/json',
       },

web/src/app/infra/http/CloudServiceClient.ts

@@ -69,6 +69,14 @@ export class CloudServiceClient extends BaseHttpClient {
     return `${this.baseURL}/api/v1/marketplace/plugins/${author}/${name}/resources/icon`;
   }
 
+  public getPluginAssetURL(
+    author: string,
+    pluginName: string,
+    filepath: string,
+  ): string {
+    return `${this.baseURL}/api/v1/marketplace/plugins/${author}/${pluginName}/resources/assets/${filepath}`;
+  }
+
   public getPluginMarketplaceURL(author: string, name: string): string {
     return `${this.baseURL}/market?author=${author}&plugin=${name}`;
   }

web/src/components/ui/alert-dialog.tsx

@@ -0,0 +1,141 @@
+'use client';
+
+import * as React from 'react';
+import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
+
+import { cn } from '@/lib/utils';
+import { buttonVariants } from '@/components/ui/button';
+
+const AlertDialog = AlertDialogPrimitive.Root;
+
+const AlertDialogTrigger = AlertDialogPrimitive.Trigger;
+
+const AlertDialogPortal = AlertDialogPrimitive.Portal;
+
+const AlertDialogOverlay = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Overlay
+    className={cn(
+      'fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+      className,
+    )}
+    {...props}
+    ref={ref}
+  />
+));
+AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
+
+const AlertDialogContent = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPortal>
+    <AlertDialogOverlay />
+    <AlertDialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
+        className,
+      )}
+      {...props}
+    />
+  </AlertDialogPortal>
+));
+AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;
+
+const AlertDialogHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      'flex flex-col space-y-2 text-center sm:text-left',
+      className,
+    )}
+    {...props}
+  />
+);
+AlertDialogHeader.displayName = 'AlertDialogHeader';
+
+const AlertDialogFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2',
+      className,
+    )}
+    {...props}
+  />
+);
+AlertDialogFooter.displayName = 'AlertDialogFooter';
+
+const AlertDialogTitle = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Title
+    ref={ref}
+    className={cn('text-lg font-semibold', className)}
+    {...props}
+  />
+));
+AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
+
+const AlertDialogDescription = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Description
+    ref={ref}
+    className={cn('text-sm text-muted-foreground', className)}
+    {...props}
+  />
+));
+AlertDialogDescription.displayName =
+  AlertDialogPrimitive.Description.displayName;
+
+const AlertDialogAction = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Action>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Action
+    ref={ref}
+    className={cn(buttonVariants(), className)}
+    {...props}
+  />
+));
+AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
+
+const AlertDialogCancel = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Cancel
+    ref={ref}
+    className={cn(
+      buttonVariants({ variant: 'outline' }),
+      'mt-2 sm:mt-0',
+      className,
+    )}
+    {...props}
+  />
+));
+AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;
+
+export {
+  AlertDialog,
+  AlertDialogPortal,
+  AlertDialogOverlay,
+  AlertDialogTrigger,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogFooter,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogAction,
+  AlertDialogCancel,
+};

web/src/components/ui/dialog.tsx

@@ -7,9 +7,71 @@ import { XIcon } from 'lucide-react';
 import { cn } from '@/lib/utils';
 
 function Dialog({
+  onOpenChange,
+  open,
   ...props
 }: React.ComponentProps<typeof DialogPrimitive.Root>) {
-  return <DialogPrimitive.Root data-slot="dialog" {...props} />;
+  const handleOpenChange = React.useCallback(
+    (isOpen: boolean) => {
+      onOpenChange?.(isOpen);
+
+      // 当对话框关闭时，确保清理 body 样式
+      if (!isOpen) {
+        // 立即清理
+        document.body.style.removeProperty('pointer-events');
+        document.body.style.removeProperty('overflow');
+
+        // 延迟再次清理，确保覆盖 Radix 的设置
+        setTimeout(() => {
+          document.body.style.removeProperty('pointer-events');
+          document.body.style.removeProperty('overflow');
+        }, 0);
+
+        setTimeout(() => {
+          document.body.style.removeProperty('pointer-events');
+          document.body.style.removeProperty('overflow');
+        }, 50);
+
+        setTimeout(() => {
+          document.body.style.removeProperty('pointer-events');
+          document.body.style.removeProperty('overflow');
+        }, 150);
+      }
+    },
+    [onOpenChange],
+  );
+
+  // 使用 effect 监控 open 状态变化
+  React.useEffect(() => {
+    if (open === false) {
+      const cleanup = () => {
+        document.body.style.removeProperty('pointer-events');
+        document.body.style.removeProperty('overflow');
+      };
+
+      cleanup();
+      const timer1 = setTimeout(cleanup, 0);
+      const timer2 = setTimeout(cleanup, 50);
+      const timer3 = setTimeout(cleanup, 150);
+      const timer4 = setTimeout(cleanup, 300);
+
+      return () => {
+        clearTimeout(timer1);
+        clearTimeout(timer2);
+        clearTimeout(timer3);
+        clearTimeout(timer4);
+      };
+    }
+  }, [open]);
+
+  return (
+    <DialogPrimitive.Root
+      data-slot="dialog"
+      open={open}
+      {...props}
+      onOpenChange={handleOpenChange}
+    />
+  );
 }
 
 function DialogTrigger({
@@ -60,7 +122,6 @@ function DialogContent({
           'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg',
           className,
         )}
-        onInteractOutside={() => {}}
         {...props}
       >
         {children}

web/src/i18n/locales/en-US.ts

@@ -60,6 +60,39 @@ const enUS = {
     changePasswordSuccess: 'Password changed successfully',
     changePasswordFailed:
       'Failed to change password, please check your current password',
+    apiIntegration: 'API Integration',
+    apiKeys: 'API Keys',
+    manageApiIntegration: 'Manage API Integration',
+    manageApiKeys: 'Manage API Keys',
+    createApiKey: 'Create API Key',
+    apiKeyName: 'API Key Name',
+    apiKeyDescription: 'API Key Description',
+    apiKeyValue: 'API Key Value',
+    apiKeyCreated: 'API key created successfully',
+    apiKeyDeleted: 'API key deleted successfully',
+    apiKeyDeleteConfirm: 'Are you sure you want to delete this API key?',
+    apiKeyNameRequired: 'API key name is required',
+    copyApiKey: 'Copy API Key',
+    apiKeyCopied: 'API key copied to clipboard',
+    noApiKeys: 'No API keys configured',
+    apiKeyHint:
+      'API keys allow external systems to access LangBot Service APIs',
+    webhooks: 'Webhooks',
+    createWebhook: 'Create Webhook',
+    webhookName: 'Webhook Name',
+    webhookUrl: 'Webhook URL',
+    webhookDescription: 'Webhook Description',
+    webhookEnabled: 'Enabled',
+    webhookCreated: 'Webhook created successfully',
+    webhookDeleted: 'Webhook deleted successfully',
+    webhookDeleteConfirm: 'Are you sure you want to delete this webhook?',
+    webhookNameRequired: 'Webhook name is required',
+    webhookUrlRequired: 'Webhook URL is required',
+    noWebhooks: 'No webhooks configured',
+    webhookHint:
+      'Webhooks allow LangBot to push person and group message events to external systems',
+    actions: 'Actions',
+    apiKeyCreatedMessage: 'Please copy this API key.',
   },
   notFound: {
     title: 'Page not found',
@@ -109,6 +142,9 @@ const enUS = {
     selectModelProvider: 'Select Model Provider',
     modelProviderDescription:
       'Please fill in the model name provided by the supplier',
+    modelManufacturer: 'Model Manufacturer',
+    aggregationPlatform: 'Aggregation Platform',
+    selfDeployed: 'Self-deployed',
     selectModel: 'Select Model',
     testSuccess: 'Test successful',
     testError: 'Test failed, please check your model configuration',
@@ -141,6 +177,7 @@ const enUS = {
     adapterConfig: 'Adapter Configuration',
     bindPipeline: 'Bind Pipeline',
     selectPipeline: 'Select Pipeline',
+    selectBot: 'Select Bot',
     botLogTitle: 'Bot Log',
     enableAutoRefresh: 'Enable Auto Refresh',
     session: 'Session',
@@ -157,9 +194,9 @@ const enUS = {
       'Click the input to select all, then press Ctrl+C (Mac: Cmd+C) to copy, or click the button',
   },
   plugins: {
-    title: 'Plugins',
+    title: 'Extensions',
     description:
-      'Install and configure plugins to extend LangBot functionality',
+      'Install and configure plugins to extend functionality, please select them in the pipeline configuration',
     createPlugin: 'Create Plugin',
     editPlugin: 'Edit Plugin',
     installed: 'Installed',
@@ -205,7 +242,9 @@ const enUS = {
     saveConfig: 'Save Config',
     saving: 'Saving...',
     confirmDeletePlugin:
-      'Are you sure you want to delete the plugin ({{author}}/{{name}})? This will also delete the plugin configuration.',
+      'Are you sure you want to delete the plugin ({{author}}/{{name}})?',
+    deleteDataCheckbox:
+      'Also delete plugin configuration and persistence storage',
     confirmDelete: 'Confirm Delete',
     deleteError: 'Delete failed: ',
     close: 'Close',
@@ -246,6 +285,34 @@ const enUS = {
     saveConfigSuccessDebugPlugin:
       'Configuration saved successfully, please manually restart the plugin',
     saveConfigError: 'Configuration save failed: ',
+    fileUpload: {
+      tooLarge: 'File size exceeds 10MB limit',
+      success: 'File uploaded successfully',
+      failed: 'File upload failed',
+      uploading: 'Uploading...',
+      chooseFile: 'Choose File',
+      addFile: 'Add File',
+    },
+    installFromGithub: 'From GitHub',
+    enterRepoUrl: 'Enter GitHub repository URL',
+    repoUrlPlaceholder: 'e.g., https://github.com/owner/repo',
+    fetchingReleases: 'Fetching releases...',
+    selectRelease: 'Select Release',
+    noReleasesFound: 'No releases found',
+    fetchReleasesError: 'Failed to fetch releases: ',
+    selectAsset: 'Select file to install',
+    noAssetsFound: 'No .lbpkg files available in this release',
+    fetchAssetsError: 'Failed to fetch assets: ',
+    backToReleases: 'Back to releases',
+    backToRepoUrl: 'Back to repository URL',
+    backToAssets: 'Back to assets',
+    releaseTag: 'Tag: {{tag}}',
+    releaseName: 'Name: {{name}}',
+    publishedAt: 'Published at: {{date}}',
+    prerelease: 'Pre-release',
+    assetSize: 'Size: {{size}}',
+    confirmInstall: 'Confirm Install',
+    installFromGithubDesc: 'Install plugin from GitHub Release',
   },
   market: {
     searchPlaceholder: 'Search plugins...',
@@ -290,6 +357,84 @@ const enUS = {
     markAsReadSuccess: 'Marked as read',
     markAsReadFailed: 'Mark as read failed',
   },
+  mcp: {
+    title: 'MCP',
+    createServer: 'Add MCP Server',
+    editServer: 'Edit MCP Server',
+    deleteServer: 'Delete MCP Server',
+    confirmDeleteServer: 'Are you sure you want to delete this MCP server?',
+    confirmDeleteTitle: 'Delete MCP Server',
+    getServerListError: 'Failed to get MCP server list: ',
+    serverName: 'Server Name',
+    serverMode: 'Connection Mode',
+    stdio: 'Stdio Mode',
+    sse: 'SSE Mode',
+    noServerInstalled: 'No MCP servers configured',
+    serverNameRequired: 'Server name cannot be empty',
+    commandRequired: 'Command cannot be empty',
+    urlRequired: 'URL cannot be empty',
+    timeoutMustBePositive: 'Timeout must be a positive number',
+    command: 'Command',
+    args: 'Arguments',
+    env: 'Environment Variables',
+    url: 'URL',
+    headers: 'Headers',
+    timeout: 'Timeout',
+    addArgument: 'Add Argument',
+    addEnvVar: 'Add Environment Variable',
+    addHeader: 'Add Header',
+    keyName: 'Key Name',
+    value: 'Value',
+    testing: 'Testing...',
+    connecting: 'Connecting...',
+    testSuccess: 'Test successful',
+    testFailed: 'Test failed: ',
+    testError: 'Test error',
+    refreshSuccess: 'Refresh successful',
+    refreshFailed: 'Refresh failed: ',
+    connectionSuccess: 'Connection successful',
+    connectionFailed: 'Connection failed, please check URL',
+    connectionFailedStatus: 'Connection Failed',
+    toolsFound: 'tools',
+    unknownError: 'Unknown error',
+    noToolsFound: 'No tools found',
+    parseResultFailed: 'Failed to parse test result',
+    noResultReturned: 'Test returned no result',
+    getTaskFailed: 'Failed to get task status',
+    noTaskId: 'No task ID obtained',
+    deleteSuccess: 'Deleted successfully',
+    deleteFailed: 'Delete failed: ',
+    deleteError: 'Delete failed: ',
+    saveSuccess: 'Saved successfully',
+    saveError: 'Save failed: ',
+    createSuccess: 'Created successfully',
+    createFailed: 'Creation failed: ',
+    createError: 'Creation failed: ',
+    loadFailed: 'Load failed',
+    modifyFailed: 'Modify failed: ',
+    toolCount: 'Tools: {{count}}',
+    statusConnected: 'Connected',
+    statusDisconnected: 'Disconnected',
+    statusError: 'Connection Error',
+    statusDisabled: 'Disabled',
+    loading: 'Loading...',
+    starCount: 'Stars: {{count}}',
+    install: 'Install',
+    installFromGithub: 'Install MCP Server from GitHub',
+    add: 'Add',
+    name: 'Name',
+    nameRequired: 'Name cannot be empty',
+    sseTimeout: 'SSE Timeout',
+    sseTimeoutDescription: 'Timeout for establishing SSE connection',
+    extraParametersDescription:
+      'Additional parameters for configuring specific MCP server behavior',
+    timeoutMustBeNumber: 'Timeout must be a number',
+    timeoutNonNegative: 'Timeout cannot be negative',
+    sseTimeoutMustBeNumber: 'SSE timeout must be a number',
+    sseTimeoutNonNegative: 'SSE timeout cannot be negative',
+    updateSuccess: 'Updated successfully',
+    updateFailed: 'Update failed: ',
+  },
   pipelines: {
     title: 'Pipelines',
     description:
@@ -320,11 +465,32 @@ const enUS = {
     createError: 'Creation failed: ',
     saveSuccess: 'Saved successfully',
     saveError: 'Save failed: ',
+    copySuffix: ' Copy',
     deleteConfirmation:
       'Are you sure you want to delete this pipeline? Bots bound to this pipeline will not work.',
     defaultPipelineCannotDelete: 'Default pipeline cannot be deleted',
     deleteSuccess: 'Deleted successfully',
     deleteError: 'Delete failed: ',
+    extensions: {
+      title: 'Extensions',
+      loadError: 'Failed to load plugins',
+      saveSuccess: 'Saved successfully',
+      saveError: 'Save failed',
+      noPluginsAvailable: 'No plugins available',
+      disabled: 'Disabled',
+      noPluginsSelected: 'No plugins selected',
+      addPlugin: 'Add Plugin',
+      selectPlugins: 'Select Plugins',
+      pluginsTitle: 'Plugins',
+      mcpServersTitle: 'MCP Servers',
+      noMCPServersSelected: 'No MCP servers selected',
+      addMCPServer: 'Add MCP Server',
+      selectMCPServers: 'Select MCP Servers',
+      toolCount: '{{count}} tools',
+      noPluginsInstalled: 'No installed plugins',
+      noMCPServersConfigured: 'No configured MCP servers',
+      selectAll: 'Select All',
+    },
     debugDialog: {
       title: 'Pipeline Chat',
       selectPipeline: 'Select Pipeline',
@@ -351,6 +517,9 @@ const enUS = {
     createKnowledgeBase: 'Create Knowledge Base',
     editKnowledgeBase: 'Edit Knowledge Base',
     selectKnowledgeBase: 'Select Knowledge Base',
+    selectKnowledgeBases: 'Select Knowledge Bases',
+    addKnowledgeBase: 'Add Knowledge Base',
+    noKnowledgeBaseSelected: 'No knowledge bases selected',
     empty: 'Empty',
     editDocument: 'Documents',
     description: 'Configuring knowledge bases for improved LLM responses',
@@ -389,6 +558,8 @@ const enUS = {
       uploadSuccess: 'File uploaded successfully!',
       uploadError: 'File upload failed, please try again',
       uploadingFile: 'Uploading file...',
+      fileSizeExceeded:
+        'File size exceeds 10MB limit. Please split into smaller files.',
       actions: 'Actions',
       delete: 'Delete File',
       fileDeleteSuccess: 'File deleted successfully',

web/src/i18n/locales/ja-JP.ts

@@ -61,6 +61,39 @@ const jaJP = {
     changePasswordSuccess: 'パスワードの変更に成功しました',
     changePasswordFailed:
       'パスワードの変更に失敗しました。現在のパスワードを確認してください',
+    apiIntegration: 'API統合',
+    apiKeys: 'API キー',
+    manageApiIntegration: 'API統合の管理',
+    manageApiKeys: 'API キーの管理',
+    createApiKey: 'API キーを作成',
+    apiKeyName: 'API キー名',
+    apiKeyDescription: 'API キーの説明',
+    apiKeyValue: 'API キー値',
+    apiKeyCreated: 'API キーの作成に成功しました',
+    apiKeyDeleted: 'API キーの削除に成功しました',
+    apiKeyDeleteConfirm: 'この API キーを削除してもよろしいですか？',
+    apiKeyNameRequired: 'API キー名は必須です',
+    copyApiKey: 'API キーをコピー',
+    apiKeyCopied: 'API キーをクリップボードにコピーしました',
+    noApiKeys: 'API キーが設定されていません',
+    apiKeyHint:
+      'API キーを使用すると、外部システムが LangBot Service API にアクセスできます',
+    webhooks: 'Webhooks',
+    createWebhook: 'Webhook を作成',
+    webhookName: 'Webhook 名',
+    webhookUrl: 'Webhook URL',
+    webhookDescription: 'Webhook の説明',
+    webhookEnabled: '有効',
+    webhookCreated: 'Webhook が正常に作成されました',
+    webhookDeleted: 'Webhook が正常に削除されました',
+    webhookDeleteConfirm: 'この Webhook を削除してもよろしいですか？',
+    webhookNameRequired: 'Webhook 名は必須です',
+    webhookUrlRequired: 'Webhook URL は必須です',
+    noWebhooks: 'Webhook が設定されていません',
+    webhookHint:
+      'Webhook を使用すると、LangBot は個人メッセージとグループメッセージイベントを外部システムにプッシュできます',
+    actions: 'アクション',
+    apiKeyCreatedMessage: 'この API キーをコピーしてください。',
   },
   notFound: {
     title: 'ページが見つかりません',
@@ -112,6 +145,9 @@ const jaJP = {
       'リクエストボディに追加されるパラメータ（max_tokens、temperature、top_p など）',
     selectModelProvider: 'モデルプロバイダーを選択',
     modelProviderDescription: 'プロバイダーが提供するモデル名をご入力ください',
+    modelManufacturer: 'モデルメーカー',
+    aggregationPlatform: 'アグリゲーションプラットフォーム',
+    selfDeployed: 'セルフデプロイ',
     selectModel: 'モデルを選択してください',
     testSuccess: 'テストに成功しました',
     testError: 'テストに失敗しました。モデル設定を確認してください',
@@ -143,6 +179,7 @@ const jaJP = {
     adapterConfig: 'アダプター設定',
     bindPipeline: 'パイプラインを紐付け',
     selectPipeline: 'パイプラインを選択',
+    selectBot: 'ボットを選択してください',
     botLogTitle: 'ボットログ',
     enableAutoRefresh: '自動更新を有効にする',
     session: 'セッション',
@@ -159,8 +196,9 @@ const jaJP = {
       '入力ボックスをクリックして全選択し、Ctrl+C (Mac: Cmd+C) でコピーするか、右側のボタンをクリックしてください',
   },
   plugins: {
-    title: 'プラグイン',
-    description: 'LangBotの機能を拡張するプラグインをインストール・設定',
+    title: '拡張機能',
+    description:
+      'LangBotの機能を拡張するプラグインをインストール・設定。流水線設定で使用します',
     createPlugin: 'プラグインを作成',
     editPlugin: 'プラグインを編集',
     installed: 'インストール済み',
@@ -206,7 +244,8 @@ const jaJP = {
     saveConfig: '設定を保存',
     saving: '保存中...',
     confirmDeletePlugin:
-      'プラグイン「{{author}}/{{name}}」を削除してもよろしいですか？この操作により、プラグインの設定も削除されます。',
+      'プラグイン「{{author}}/{{name}}」を削除してもよろしいですか？',
+    deleteDataCheckbox: 'プラグイン設定と永続化ストレージも削除する',
     confirmDelete: '削除を確認',
     deleteError: '削除に失敗しました：',
     close: '閉じる',
@@ -247,6 +286,34 @@ const jaJP = {
     saveConfigSuccessDebugPlugin:
       '設定を保存しました。手動でプラグインを再起動してください',
     saveConfigError: '設定の保存に失敗しました：',
+    fileUpload: {
+      tooLarge: 'ファイルサイズが 10MB の制限を超えています',
+      success: 'ファイルのアップロードに成功しました',
+      failed: 'ファイルのアップロードに失敗しました',
+      uploading: 'アップロード中...',
+      chooseFile: 'ファイルを選択',
+      addFile: 'ファイルを追加',
+    },
+    installFromGithub: 'GitHubから',
+    enterRepoUrl: 'GitHubリポジトリのURLを入力してください',
+    repoUrlPlaceholder: '例: https://github.com/owner/repo',
+    fetchingReleases: 'リリース一覧を取得中...',
+    selectRelease: 'リリースを選択',
+    noReleasesFound: 'リリースが見つかりません',
+    fetchReleasesError: 'リリース一覧の取得に失敗しました：',
+    selectAsset: 'インストールするファイルを選択',
+    noAssetsFound: 'このリリースには利用可能な .lbpkg ファイルがありません',
+    fetchAssetsError: 'ファイル一覧の取得に失敗しました：',
+    backToReleases: 'リリース一覧に戻る',
+    backToRepoUrl: 'リポジトリURLに戻る',
+    backToAssets: 'ファイル選択に戻る',
+    releaseTag: 'タグ: {{tag}}',
+    releaseName: '名前: {{name}}',
+    publishedAt: '公開日: {{date}}',
+    prerelease: 'プレリリース',
+    assetSize: 'サイズ: {{size}}',
+    confirmInstall: 'インストールを確認',
+    installFromGithubDesc: 'GitHubリリースからプラグインをインストール',
   },
   market: {
     searchPlaceholder: 'プラグインを検索...',
@@ -292,6 +359,84 @@ const jaJP = {
     markAsReadSuccess: '既読に設定しました',
     markAsReadFailed: '既読に設定に失敗しました',
   },
+  mcp: {
+    title: 'MCP',
+    createServer: 'MCPサーバーを追加',
+    editServer: 'MCPサーバーを編集',
+    deleteServer: 'MCPサーバーを削除',
+    confirmDeleteServer: 'このMCPサーバーを削除してもよろしいですか？',
+    confirmDeleteTitle: 'MCPサーバーを削除',
+    getServerListError: 'MCPサーバーリストの取得に失敗しました：',
+    serverName: 'サーバー名',
+    serverMode: '接続モード',
+    stdio: 'Stdioモード',
+    sse: 'SSEモード',
+    noServerInstalled: 'MCPサーバーが設定されていません',
+    serverNameRequired: 'サーバー名は必須です',
+    commandRequired: 'コマンドは必須です',
+    urlRequired: 'URLは必須です',
+    timeoutMustBePositive: 'タイムアウトは正の数でなければなりません',
+    command: 'コマンド',
+    args: '引数',
+    env: '環境変数',
+    url: 'URL',
+    headers: 'ヘッダー',
+    timeout: 'タイムアウト',
+    addArgument: '引数を追加',
+    addEnvVar: '環境変数を追加',
+    addHeader: 'ヘッダーを追加',
+    keyName: 'キー名',
+    value: '値',
+    testing: 'テスト中...',
+    connecting: '接続中...',
+    testSuccess: '刷新に成功しました',
+    testFailed: '刷新に失敗しました：',
+    testError: '刷新エラー',
+    refreshSuccess: '刷新に成功しました',
+    refreshFailed: '刷新に失敗しました：',
+    connectionSuccess: '接続に成功しました',
+    connectionFailed: '接続に失敗しました，URLを確認してください',
+    connectionFailedStatus: '接続失敗',
+    toolsFound: '個のツール',
+    unknownError: '不明なエラー',
+    noToolsFound: 'ツールが見つかりません',
+    parseResultFailed: 'テスト結果の解析に失敗しました',
+    noResultReturned: 'テスト結果が返されませんでした',
+    getTaskFailed: 'タスクステータスの取得に失敗しました',
+    noTaskId: 'タスクIDを取得できませんでした',
+    deleteSuccess: '削除に成功しました',
+    deleteFailed: '削除に失敗しました：',
+    deleteError: '削除に失敗しました：',
+    saveSuccess: '保存に成功しました',
+    saveError: '保存に失敗しました：',
+    createSuccess: '作成に成功しました',
+    createFailed: '作成に失敗しました：',
+    createError: '作成に失敗しました：',
+    loadFailed: '読み込みに失敗しました',
+    modifyFailed: '変更に失敗しました：',
+    toolCount: 'ツール：{{count}}',
+    statusConnected: '接続済み',
+    statusDisconnected: '未接続',
+    statusError: '接続エラー',
+    statusDisabled: '無効',
+    loading: '読み込み中...',
+    starCount: 'スター：{{count}}',
+    install: 'インストール',
+    installFromGithub: 'GitHubからMCPサーバーをインストール',
+    add: '追加',
+    name: '名前',
+    nameRequired: '名前は必須です',
+    sseTimeout: 'SSEタイムアウト',
+    sseTimeoutDescription: 'SSE接続を確立するためのタイムアウト',
+    extraParametersDescription:
+      'MCPサーバーの特定の動作を設定するための追加パラメータ',
+    timeoutMustBeNumber: 'タイムアウトは数値である必要があります',
+    timeoutNonNegative: 'タイムアウトは負の数にできません',
+    sseTimeoutMustBeNumber: 'SSEタイムアウトは数値である必要があります',
+    sseTimeoutNonNegative: 'SSEタイムアウトは負の数にできません',
+    updateSuccess: '更新に成功しました',
+    updateFailed: '更新に失敗しました：',
+  },
   pipelines: {
     title: 'パイプライン',
     description:
@@ -323,11 +468,32 @@ const jaJP = {
     createError: '作成に失敗しました：',
     saveSuccess: '保存に成功しました',
     saveError: '保存に失敗しました：',
+    copySuffix: ' Copy',
     deleteConfirmation:
       '本当にこのパイプラインを削除しますか？このパイプラインに紐付けられたボットは動作しなくなります。',
     defaultPipelineCannotDelete: 'デフォルトパイプラインは削除できません',
     deleteSuccess: '削除に成功しました',
     deleteError: '削除に失敗しました：',
+    extensions: {
+      title: 'プラグイン統合',
+      loadError: 'プラグインリストの読み込みに失敗しました',
+      saveSuccess: '保存に成功しました',
+      saveError: '保存に失敗しました',
+      noPluginsAvailable: '利用可能なプラグインがありません',
+      disabled: '無効',
+      noPluginsSelected: 'プラグインが選択されていません',
+      addPlugin: 'プラグインを追加',
+      selectPlugins: 'プラグインを選択',
+      pluginsTitle: 'プラグイン',
+      mcpServersTitle: 'MCPサーバー',
+      noMCPServersSelected: 'MCPサーバーが選択されていません',
+      addMCPServer: 'MCPサーバーを追加',
+      selectMCPServers: 'MCPサーバーを選択',
+      toolCount: '{{count}}個のツール',
+      noPluginsInstalled: 'インストールされているプラグインがありません',
+      noMCPServersConfigured: '設定されているMCPサーバーがありません',
+      selectAll: 'すべて選択',
+    },
     debugDialog: {
       title: 'パイプラインのチャット',
       selectPipeline: 'パイプラインを選択',
@@ -354,6 +520,9 @@ const jaJP = {
     createKnowledgeBase: '知識ベースを作成',
     editKnowledgeBase: '知識ベースを編集',
     selectKnowledgeBase: '知識ベースを選択',
+    selectKnowledgeBases: '知識ベースを選択',
+    addKnowledgeBase: '知識ベースを追加',
+    noKnowledgeBaseSelected: '知識ベースが選択されていません',
     empty: 'なし',
     editDocument: 'ドキュメント',
     description: 'LLMの回答品質向上のための知識ベースを設定します',
@@ -393,6 +562,8 @@ const jaJP = {
       uploadSuccess: 'ファイルのアップロードに成功しました！',
       uploadError: 'ファイルのアップロードに失敗しました。再度お試しください',
       uploadingFile: 'ファイルをアップロード中...',
+      fileSizeExceeded:
+        'ファイルサイズが10MBの制限を超えています。より小さいファイルに分割してください。',
       actions: 'アクション',
       delete: 'ドキュメントを削除',
       fileDeleteSuccess: 'ドキュメントの削除に成功しました',

web/src/i18n/locales/zh-Hans.ts

@@ -59,6 +59,37 @@ const zhHans = {
     passwordsDoNotMatch: '两次输入的密码不一致',
     changePasswordSuccess: '密码修改成功',
     changePasswordFailed: '密码修改失败，请检查当前密码是否正确',
+    apiIntegration: 'API 集成',
+    apiKeys: 'API 密钥',
+    manageApiIntegration: '管理 API 集成',
+    manageApiKeys: '管理 API 密钥',
+    createApiKey: '创建 API 密钥',
+    apiKeyName: 'API 密钥名称',
+    apiKeyDescription: 'API 密钥描述',
+    apiKeyValue: 'API 密钥值',
+    apiKeyCreated: 'API 密钥创建成功',
+    apiKeyDeleted: 'API 密钥删除成功',
+    apiKeyDeleteConfirm: '确定要删除此 API 密钥吗？',
+    apiKeyNameRequired: 'API 密钥名称不能为空',
+    copyApiKey: '复制 API 密钥',
+    apiKeyCopied: 'API 密钥已复制到剪贴板',
+    noApiKeys: '暂无 API 密钥',
+    apiKeyHint: 'API 密钥允许外部系统访问 LangBot 的 Service API',
+    webhooks: 'Webhooks',
+    createWebhook: '创建 Webhook',
+    webhookName: 'Webhook 名称',
+    webhookUrl: 'Webhook URL',
+    webhookDescription: 'Webhook 描述',
+    webhookEnabled: '是否启用',
+    webhookCreated: 'Webhook 创建成功',
+    webhookDeleted: 'Webhook 删除成功',
+    webhookDeleteConfirm: '确定要删除此 Webhook 吗？',
+    webhookNameRequired: 'Webhook 名称不能为空',
+    webhookUrlRequired: 'Webhook URL 不能为空',
+    noWebhooks: '暂无 Webhook',
+    webhookHint: 'Webhook 允许 LangBot 将个人消息和群消息事件推送到外部系统',
+    actions: '操作',
+    apiKeyCreatedMessage: '请复制此 API 密钥。',
   },
   notFound: {
     title: '页面不存在',
@@ -108,6 +139,9 @@ const zhHans = {
     boolean: '布尔值',
     selectModelProvider: '选择模型供应商',
     modelProviderDescription: '请填写供应商向您提供的模型名称',
+    modelManufacturer: '模型厂商',
+    aggregationPlatform: '中转平台',
+    selfDeployed: '自部署',
     selectModel: '请选择模型',
     testSuccess: '测试成功',
     testError: '测试失败，请检查模型配置',
@@ -138,6 +172,7 @@ const zhHans = {
     adapterConfig: '适配器配置',
     bindPipeline: '绑定流水线',
     selectPipeline: '选择流水线',
+    selectBot: '请选择机器人',
     botLogTitle: '机器人日志',
     enableAutoRefresh: '开启自动刷新',
     session: '会话',
@@ -154,8 +189,8 @@ const zhHans = {
       '点击输入框自动全选，然后按 Ctrl+C (Mac: Cmd+C) 复制，或点击右侧按钮',
   },
   plugins: {
-    title: '插件管理',
-    description: '安装和配置用于扩展 LangBot 功能的插件',
+    title: '插件扩展',
+    description: '安装和配置用于扩展功能的插件，请在流水线配置中选用',
     createPlugin: '创建插件',
     editPlugin: '编辑插件',
     installed: '已安装',
@@ -197,8 +232,8 @@ const zhHans = {
     cancel: '取消',
     saveConfig: '保存配置',
     saving: '保存中...',
-    confirmDeletePlugin:
-      '你确定要删除插件（{{author}}/{{name}}）吗？这将同时删除插件的配置。',
+    confirmDeletePlugin: '你确定要删除插件（{{author}}/{{name}}）吗？',
+    deleteDataCheckbox: '同时删除插件配置和持久化存储',
     confirmDelete: '确认删除',
     deleteError: '删除失败：',
     close: '关闭',
@@ -236,6 +271,34 @@ const zhHans = {
     saveConfigSuccessNormal: '保存配置成功',
     saveConfigSuccessDebugPlugin: '保存配置成功，请手动重启插件',
     saveConfigError: '保存配置失败：',
+    fileUpload: {
+      tooLarge: '文件大小超过 10MB 限制',
+      success: '文件上传成功',
+      failed: '文件上传失败',
+      uploading: '上传中...',
+      chooseFile: '选择文件',
+      addFile: '添加文件',
+    },
+    installFromGithub: '来自 GitHub',
+    enterRepoUrl: '请输入 GitHub 仓库地址',
+    repoUrlPlaceholder: '例如: https://github.com/owner/repo',
+    fetchingReleases: '正在获取 Release 列表...',
+    selectRelease: '选择 Release',
+    noReleasesFound: '未找到 Release',
+    fetchReleasesError: '获取 Release 列表失败：',
+    selectAsset: '选择要安装的文件',
+    noAssetsFound: '该 Release 没有可用的 .lbpkg 文件',
+    fetchAssetsError: '获取文件列表失败：',
+    backToReleases: '返回 Release 列表',
+    backToRepoUrl: '返回仓库地址',
+    backToAssets: '返回文件选择',
+    releaseTag: 'Tag: {{tag}}',
+    releaseName: '名称: {{name}}',
+    publishedAt: '发布于: {{date}}',
+    prerelease: '预发布',
+    assetSize: '大小: {{size}}',
+    confirmInstall: '确认安装',
+    installFromGithubDesc: '从 GitHub Release 安装插件',
   },
   market: {
     searchPlaceholder: '搜索插件...',
@@ -278,6 +341,83 @@ const zhHans = {
     markAsReadSuccess: '已标记为已读',
     markAsReadFailed: '标记为已读失败',
   },
+  mcp: {
+    title: 'MCP',
+    createServer: '添加 MCP 服务器',
+    editServer: '修改 MCP 服务器',
+    deleteServer: '删除 MCP 服务器',
+    confirmDeleteServer: '你确定要删除此 MCP 服务器吗？',
+    confirmDeleteTitle: '删除 MCP 服务器',
+    getServerListError: '获取 MCP 服务器列表失败：',
+    serverName: '服务器名称',
+    serverMode: '连接模式',
+    stdio: 'Stdio模式',
+    sse: 'SSE模式',
+    noServerInstalled: '暂未配置任何 MCP 服务器',
+    serverNameRequired: '服务器名称不能为空',
+    commandRequired: '命令不能为空',
+    urlRequired: 'URL 不能为空',
+    timeoutMustBePositive: '超时时间必须是正数',
+    command: '命令',
+    args: '参数',
+    env: '环境变量',
+    url: 'URL地址',
+    headers: '请求头',
+    timeout: '超时时间',
+    addArgument: '添加参数',
+    addEnvVar: '添加环境变量',
+    addHeader: '添加请求头',
+    keyName: '键名',
+    value: '值',
+    testing: '测试中...',
+    connecting: '连接中...',
+    testSuccess: '测试成功',
+    testFailed: '测试失败：',
+    testError: '刷新出错',
+    refreshSuccess: '刷新成功',
+    refreshFailed: '刷新失败：',
+    connectionSuccess: '连接成功',
+    connectionFailed: '连接失败，请检查URL',
+    connectionFailedStatus: '连接失败',
+    toolsFound: '个工具',
+    unknownError: '未知错误',
+    noToolsFound: '未找到任何工具',
+    parseResultFailed: '解析测试结果失败',
+    noResultReturned: '测试未返回结果',
+    getTaskFailed: '获取任务状态失败',
+    noTaskId: '未获取到任务ID',
+    deleteSuccess: '删除成功',
+    deleteFailed: '删除失败：',
+    deleteError: '删除失败：',
+    saveSuccess: '保存成功',
+    saveError: '保存失败：',
+    createSuccess: '创建成功',
+    createFailed: '创建失败：',
+    createError: '创建失败：',
+    loadFailed: '加载失败',
+    modifyFailed: '修改失败：',
+    toolCount: '工具：{{count}}',
+    statusConnected: '已打开',
+    statusDisconnected: '未打开',
+    statusError: '连接错误',
+    statusDisabled: '已禁用',
+    loading: '加载中...',
+    starCount: '星标：{{count}}',
+    install: '安装',
+    installFromGithub: '从Github安装MCP服务器',
+    add: '添加',
+    name: '名称',
+    nameRequired: '名称不能为空',
+    sseTimeout: 'SSE超时时间',
+    sseTimeoutDescription: '用于建立SSE连接的超时时间',
+    extraParametersDescription: '额外参数，用于配置MCP服务器的特定行为',
+    timeoutMustBeNumber: '超时时间必须是数字',
+    timeoutNonNegative: '超时时间不能为负数',
+    sseTimeoutMustBeNumber: 'SSE超时时间必须是数字',
+    sseTimeoutNonNegative: 'SSE超时时间不能为负数',
+    updateSuccess: '更新成功',
+    updateFailed: '更新失败：',
+  },
   pipelines: {
     title: '流水线',
     description: '流水线定义了对消息事件的处理流程，用于绑定到机器人',
@@ -307,11 +447,32 @@ const zhHans = {
     createError: '创建失败：',
     saveSuccess: '保存成功',
     saveError: '保存失败：',
+    copySuffix: ' Copy',
     deleteConfirmation:
       '你确定要删除这个流水线吗？已绑定此流水线的机器人将无法使用。',
     defaultPipelineCannotDelete: '默认流水线不可删除',
     deleteSuccess: '删除成功',
     deleteError: '删除失败：',
+    extensions: {
+      title: '扩展集成',
+      loadError: '加载插件列表失败',
+      saveSuccess: '保存成功',
+      saveError: '保存失败',
+      noPluginsAvailable: '暂无可用插件',
+      disabled: '已禁用',
+      noPluginsSelected: '未选择任何插件',
+      addPlugin: '添加插件',
+      selectPlugins: '选择插件',
+      pluginsTitle: '插件',
+      mcpServersTitle: 'MCP 服务器',
+      noMCPServersSelected: '未选择任何 MCP 服务器',
+      addMCPServer: '添加 MCP 服务器',
+      selectMCPServers: '选择 MCP 服务器',
+      toolCount: '{{count}} 个工具',
+      noPluginsInstalled: '无已安装的插件',
+      noMCPServersConfigured: '无已配置的 MCP 服务器',
+      selectAll: '全选',
+    },
     debugDialog: {
       title: '流水线对话',
       selectPipeline: '选择流水线',
@@ -338,6 +499,9 @@ const zhHans = {
     createKnowledgeBase: '创建知识库',
     editKnowledgeBase: '编辑知识库',
     selectKnowledgeBase: '选择知识库',
+    selectKnowledgeBases: '选择知识库',
+    addKnowledgeBase: '添加知识库',
+    noKnowledgeBaseSelected: '未选择知识库',
     empty: '无',
     editDocument: '文档',
     description: '配置可用于提升模型回复质量的知识库',
@@ -372,6 +536,7 @@ const zhHans = {
       uploadSuccess: '文件上传成功！',
       uploadError: '文件上传失败，请重试',
       uploadingFile: '上传文件中...',
+      fileSizeExceeded: '文件大小超过 10MB 限制，请分割成较小的文件后上传',
       actions: '操作',
       delete: '删除文件',
       fileDeleteSuccess: '文件删除成功',

web/src/i18n/locales/zh-Hant.ts

@@ -59,6 +59,37 @@ const zhHant = {
     passwordsDoNotMatch: '兩次輸入的密碼不一致',
     changePasswordSuccess: '密碼修改成功',
     changePasswordFailed: '密碼修改失敗，請檢查當前密碼是否正確',
+    apiIntegration: 'API 整合',
+    apiKeys: 'API 金鑰',
+    manageApiIntegration: '管理 API 整合',
+    manageApiKeys: '管理 API 金鑰',
+    createApiKey: '建立 API 金鑰',
+    apiKeyName: 'API 金鑰名稱',
+    apiKeyDescription: 'API 金鑰描述',
+    apiKeyValue: 'API 金鑰值',
+    apiKeyCreated: 'API 金鑰建立成功',
+    apiKeyDeleted: 'API 金鑰刪除成功',
+    apiKeyDeleteConfirm: '確定要刪除此 API 金鑰嗎？',
+    apiKeyNameRequired: 'API 金鑰名稱不能為空',
+    copyApiKey: '複製 API 金鑰',
+    apiKeyCopied: 'API 金鑰已複製到剪貼簿',
+    noApiKeys: '暫無 API 金鑰',
+    apiKeyHint: 'API 金鑰允許外部系統訪問 LangBot 的 Service API',
+    webhooks: 'Webhooks',
+    createWebhook: '建立 Webhook',
+    webhookName: 'Webhook 名稱',
+    webhookUrl: 'Webhook URL',
+    webhookDescription: 'Webhook 描述',
+    webhookEnabled: '是否啟用',
+    webhookCreated: 'Webhook 建立成功',
+    webhookDeleted: 'Webhook 刪除成功',
+    webhookDeleteConfirm: '確定要刪除此 Webhook 嗎？',
+    webhookNameRequired: 'Webhook 名稱不能為空',
+    webhookUrlRequired: 'Webhook URL 不能為空',
+    noWebhooks: '暫無 Webhook',
+    webhookHint: 'Webhook 允許 LangBot 將個人訊息和群組訊息事件推送到外部系統',
+    actions: '操作',
+    apiKeyCreatedMessage: '請複製此 API 金鑰。',
   },
   notFound: {
     title: '頁面不存在',
@@ -108,6 +139,9 @@ const zhHant = {
     boolean: '布林值',
     selectModelProvider: '選擇模型供應商',
     modelProviderDescription: '請填寫供應商向您提供的模型名稱',
+    modelManufacturer: '模型廠商',
+    aggregationPlatform: '中轉平台',
+    selfDeployed: '自部署',
     selectModel: '請選擇模型',
     testSuccess: '測試成功',
     testError: '測試失敗，請檢查模型設定',
@@ -138,6 +172,7 @@ const zhHant = {
     adapterConfig: '適配器設定',
     bindPipeline: '綁定流程線',
     selectPipeline: '選擇流程線',
+    selectBot: '請選擇機器人',
     botLogTitle: '機器人日誌',
     enableAutoRefresh: '開啟自動重新整理',
     session: '對話',
@@ -154,15 +189,15 @@ const zhHant = {
       '點擊輸入框自動全選，然後按 Ctrl+C (Mac: Cmd+C) 複製，或點擊右側按鈕',
   },
   plugins: {
-    title: '外掛管理',
-    description: '安裝和設定用於擴展 LangBot 功能的外掛',
+    title: '外掛擴展',
+    description: '安裝和設定用於擴展功能的外掛，請在流程線配置中選用',
     createPlugin: '建立外掛',
     editPlugin: '編輯外掛',
     installed: '已安裝',
     marketplace: 'Marketplace',
     arrange: '編排',
     install: '安裝',
-    installFromGithub: '從 GitHub 安裝外掛',
+    installFromGithub: '來自 GitHub',
     onlySupportGithub: '目前僅支援從 GitHub 安裝',
     enterGithubLink: '請輸入外掛的Github連結',
     installing: '正在安裝外掛...',
@@ -198,6 +233,7 @@ const zhHant = {
     saveConfig: '儲存設定',
     saving: '儲存中...',
     confirmDeletePlugin: '您確定要刪除外掛（{{author}}/{{name}}）嗎？',
+    deleteDataCheckbox: '同時刪除外掛設定和持久化儲存',
     confirmDelete: '確認刪除',
     deleteError: '刪除失敗：',
     close: '關閉',
@@ -234,6 +270,33 @@ const zhHant = {
     saveConfigSuccessNormal: '儲存配置成功',
     saveConfigSuccessDebugPlugin: '儲存配置成功，請手動重啟插件',
     saveConfigError: '儲存配置失敗：',
+    fileUpload: {
+      tooLarge: '檔案大小超過 10MB 限制',
+      success: '檔案上傳成功',
+      failed: '檔案上傳失敗',
+      uploading: '上傳中...',
+      chooseFile: '選擇檔案',
+      addFile: '新增檔案',
+    },
+    enterRepoUrl: '請輸入 GitHub 倉庫地址',
+    repoUrlPlaceholder: '例如: https://github.com/owner/repo',
+    fetchingReleases: '正在獲取 Release 列表...',
+    selectRelease: '選擇 Release',
+    noReleasesFound: '未找到 Release',
+    fetchReleasesError: '獲取 Release 列表失敗：',
+    selectAsset: '選擇要安裝的文件',
+    noAssetsFound: '該 Release 沒有可用的 .lbpkg 文件',
+    fetchAssetsError: '獲取文件列表失敗：',
+    backToReleases: '返回 Release 列表',
+    backToRepoUrl: '返回倉庫地址',
+    backToAssets: '返回文件選擇',
+    releaseTag: 'Tag: {{tag}}',
+    releaseName: '名稱: {{name}}',
+    publishedAt: '發佈於: {{date}}',
+    prerelease: '預發佈',
+    assetSize: '大小: {{size}}',
+    confirmInstall: '確認安裝',
+    installFromGithubDesc: '從 GitHub Release 安裝插件',
   },
   market: {
     searchPlaceholder: '搜尋插件...',
@@ -276,6 +339,83 @@ const zhHant = {
     markAsReadSuccess: '已標記為已讀',
     markAsReadFailed: '標記為已讀失敗',
   },
+  mcp: {
+    title: 'MCP',
+    createServer: '新增MCP伺服器',
+    editServer: '編輯MCP伺服器',
+    deleteServer: '刪除MCP伺服器',
+    confirmDeleteServer: '您確定要刪除此MCP伺服器嗎？',
+    confirmDeleteTitle: '刪除MCP伺服器',
+    getServerListError: '取得MCP伺服器清單失敗：',
+    serverName: '伺服器名稱',
+    serverMode: '連接模式',
+    stdio: 'Stdio模式',
+    sse: 'SSE模式',
+    noServerInstalled: '暫未設定任何MCP伺服器',
+    serverNameRequired: '伺服器名稱不能為空',
+    commandRequired: '命令不能為空',
+    urlRequired: 'URL不能為空',
+    timeoutMustBePositive: '逾時時間必須是正數',
+    command: '命令',
+    args: '參數',
+    env: '環境變數',
+    url: 'URL位址',
+    headers: '請求標頭',
+    timeout: '逾時時間',
+    addArgument: '新增參數',
+    addEnvVar: '新增環境變數',
+    addHeader: '新增請求標頭',
+    keyName: '鍵名',
+    value: '值',
+    testing: '測試中...',
+    connecting: '連接中...',
+    testSuccess: '測試成功',
+    testFailed: '刷新失敗：',
+    testError: '刷新出錯',
+    refreshSuccess: '刷新成功',
+    refreshFailed: '刷新失敗：',
+    connectionSuccess: '連接成功',
+    connectionFailed: '連接失敗，請檢查URL',
+    connectionFailedStatus: '連接失敗',
+    toolsFound: '個工具',
+    unknownError: '未知錯誤',
+    noToolsFound: '未找到任何工具',
+    parseResultFailed: '解析測試結果失敗',
+    noResultReturned: '測試未返回結果',
+    getTaskFailed: '獲取任務狀態失敗',
+    noTaskId: '未獲取到任務ID',
+    deleteSuccess: '刪除成功',
+    deleteFailed: '刪除失敗：',
+    deleteError: '刪除失敗：',
+    saveSuccess: '儲存成功',
+    saveError: '儲存失敗：',
+    createSuccess: '建立成功',
+    createFailed: '建立失敗：',
+    createError: '建立失敗：',
+    loadFailed: '載入失敗',
+    modifyFailed: '修改失敗：',
+    toolCount: '工具：{{count}}',
+    statusConnected: '已開啟',
+    statusDisconnected: '未開啟',
+    statusError: '連接錯誤',
+    statusDisabled: '已停用',
+    loading: '載入中...',
+    starCount: '星標：{{count}}',
+    install: '安裝',
+    installFromGithub: '從Github安裝MCP伺服器',
+    add: '新增',
+    name: '名稱',
+    nameRequired: '名稱不能為空',
+    sseTimeout: 'SSE逾時時間',
+    sseTimeoutDescription: '用於建立SSE連接的逾時時間',
+    extraParametersDescription: '額外參數，用於設定MCP伺服器的特定行為',
+    timeoutMustBeNumber: '逾時時間必須是數字',
+    timeoutNonNegative: '逾時時間不能為負數',
+    sseTimeoutMustBeNumber: 'SSE逾時時間必須是數字',
+    sseTimeoutNonNegative: 'SSE逾時時間不能為負數',
+    updateSuccess: '更新成功',
+    updateFailed: '更新失敗：',
+  },
   pipelines: {
     title: '流程線',
     description: '流程線定義了對訊息事件的處理流程，用於綁定到機器人',
@@ -305,11 +445,32 @@ const zhHant = {
     createError: '建立失敗：',
     saveSuccess: '儲存成功',
     saveError: '儲存失敗：',
+    copySuffix: ' Copy',
     deleteConfirmation:
       '您確定要刪除這個流程線嗎？已綁定此流程線的機器人將無法使用。',
     defaultPipelineCannotDelete: '預設流程線不可刪除',
     deleteSuccess: '刪除成功',
     deleteError: '刪除失敗：',
+    extensions: {
+      title: '擴展集成',
+      loadError: '載入插件清單失敗',
+      saveSuccess: '儲存成功',
+      saveError: '儲存失敗',
+      noPluginsAvailable: '暫無可用插件',
+      disabled: '已停用',
+      noPluginsSelected: '未選擇任何插件',
+      addPlugin: '新增插件',
+      selectPlugins: '選擇插件',
+      pluginsTitle: '插件',
+      mcpServersTitle: 'MCP 伺服器',
+      noMCPServersSelected: '未選擇任何 MCP 伺服器',
+      addMCPServer: '新增 MCP 伺服器',
+      selectMCPServers: '選擇 MCP 伺服器',
+      toolCount: '{{count}} 個工具',
+      noPluginsInstalled: '無已安裝的插件',
+      noMCPServersConfigured: '無已配置的 MCP 伺服器',
+      selectAll: '全選',
+    },
     debugDialog: {
       title: '流程線對話',
       selectPipeline: '選擇流程線',
@@ -335,6 +496,9 @@ const zhHant = {
     createKnowledgeBase: '建立知識庫',
     editKnowledgeBase: '編輯知識庫',
     selectKnowledgeBase: '選擇知識庫',
+    selectKnowledgeBases: '選擇知識庫',
+    addKnowledgeBase: '新增知識庫',
+    noKnowledgeBaseSelected: '未選擇知識庫',
     empty: '無',
     editDocument: '文檔',
     description: '設定可用於提升模型回覆品質的知識庫',
@@ -369,6 +533,7 @@ const zhHant = {
       uploadSuccess: '文檔上傳成功！',
       uploadError: '文檔上傳失敗，請重試',
       uploadingFile: '上傳文檔中...',
+      fileSizeExceeded: '檔案大小超過 10MB 限制，請分割成較小的檔案後上傳',
       actions: '操作',
       delete: '刪除文檔',
       fileDeleteSuccess: '文檔刪除成功',