Add MCP section to config UI

web/frontend/src/components/config/config-page.tsx

@@ -22,6 +22,7 @@ import {
   DevicesSection,
   ExecSection,
   LauncherSection,
+  MCPSection,
   RuntimeSection,
 } from "@/components/config/config-sections"
 import {
@@ -29,9 +30,11 @@ import {
   EMPTY_FORM,
   EMPTY_LAUNCHER_FORM,
   type LauncherForm,
+  type MCPServerForm,
   buildFormFromConfig,
   parseCIDRText,
   parseIntField,
+  parseJSONObjectField,
   parseMultilineList,
 } from "@/components/config/form-model"
 import { PageHeader } from "@/components/page-header"
@@ -143,6 +146,42 @@ export function ConfigPage() {
     setLauncherForm((prev) => ({ ...prev, [key]: value }))
   }
 
+  const handleMCPServerAdd = () => {
+    const nextIndex = form.mcpServers.length + 1
+    const server: MCPServerForm = {
+      id: `mcp-${Date.now()}-${nextIndex}`,
+      name: "",
+      enabled: true,
+      type: "stdio",
+      url: "",
+      command: "",
+      argsText: "",
+      envText: "{}",
+      headersText: "{}",
+    }
+    updateField("mcpServers", [...form.mcpServers, server])
+  }
+
+  const handleMCPServerRemove = (id: string) => {
+    updateField(
+      "mcpServers",
+      form.mcpServers.filter((server) => server.id !== id),
+    )
+  }
+
+  const handleMCPServerFieldChange = <K extends keyof MCPServerForm>(
+    id: string,
+    key: K,
+    value: MCPServerForm[K],
+  ) => {
+    updateField(
+      "mcpServers",
+      form.mcpServers.map((server) =>
+        server.id === id ? { ...server, [key]: value } : server,
+      ),
+    )
+  }
+
   const handleReset = () => {
     setForm(baseline)
     setLauncherForm(launcherBaseline)
@@ -214,10 +253,86 @@ export function ConfigPage() {
           "Cron exec timeout",
           { min: 0 },
         )
+        const mcpDiscoveryTTL = parseIntField(
+          form.mcpDiscoveryTTL,
+          "MCP discovery ttl",
+          { min: 0 },
+        )
+        const mcpDiscoveryMaxSearchResults = parseIntField(
+          form.mcpDiscoveryMaxSearchResults,
+          "MCP discovery max search results",
+          { min: 0 },
+        )
         const execConfigPatch: Record<string, unknown> = {
           enabled: form.execEnabled,
         }
 
+        const baselineServerNames = new Set(
+          baseline.mcpServers
+            .map((server) => server.name.trim())
+            .filter((name) => name !== ""),
+        )
+
+        const normalizedServers = form.mcpServers
+          .map((server) => ({
+            ...server,
+            name: server.name.trim(),
+            url: server.url.trim(),
+            command: server.command.trim(),
+          }))
+          .filter((server) => server.name !== "")
+
+        const currentServerNames = new Set(
+          normalizedServers.map((server) => server.name),
+        )
+
+        const removedServerEntries = Array.from(baselineServerNames)
+          .filter((name) => !currentServerNames.has(name))
+          .map((name) => [name, null] as const)
+
+        const upsertServerEntries = normalizedServers.map((server) => {
+          if (server.type === "http") {
+            if (server.url === "") {
+              throw new Error(`MCP server ${server.name} requires an HTTP URL.`)
+            }
+
+            return [
+              server.name,
+              {
+                enabled: server.enabled,
+                type: "http",
+                url: server.url,
+                headers: parseJSONObjectField(
+                  server.headersText,
+                  `MCP server ${server.name} headers`,
+                ),
+              },
+            ] as const
+          }
+
+          if (server.command === "") {
+            throw new Error(`MCP server ${server.name} requires a command.`)
+          }
+
+          return [
+            server.name,
+            {
+              enabled: server.enabled,
+              command: server.command,
+              args: parseMultilineList(server.argsText),
+              env: parseJSONObjectField(
+                server.envText,
+                `MCP server ${server.name} env`,
+              ),
+            },
+          ] as const
+        })
+
+        const mcpServersPatch = Object.fromEntries([
+          ...upsertServerEntries,
+          ...removedServerEntries,
+        ])
+
         if (form.execEnabled) {
           execConfigPatch.allow_remote = form.allowRemote
           execConfigPatch.enable_deny_patterns = form.enableDenyPatterns
@@ -264,6 +379,17 @@ export function ConfigPage() {
               exec_timeout_minutes: cronExecTimeoutMinutes,
             },
             exec: execConfigPatch,
+            mcp: {
+              enabled: form.mcpEnabled,
+              discovery: {
+                enabled: form.mcpDiscoveryEnabled,
+                ttl: mcpDiscoveryTTL,
+                max_search_results: mcpDiscoveryMaxSearchResults,
+                use_bm25: form.mcpDiscoveryUseBM25,
+                use_regex: form.mcpDiscoveryUseRegex,
+              },
+              servers: mcpServersPatch,
+            },
           },
           heartbeat: {
             enabled: form.heartbeatEnabled,
@@ -414,6 +540,14 @@ export function ConfigPage() {
 
               <RuntimeSection form={form} onFieldChange={updateField} />
 
+              <MCPSection
+                form={form}
+                onFieldChange={updateField}
+                onAddServer={handleMCPServerAdd}
+                onRemoveServer={handleMCPServerRemove}
+                onServerFieldChange={handleMCPServerFieldChange}
+              />
+
               <ExecSection form={form} onFieldChange={updateField} />
 
               <CronSection form={form} onFieldChange={updateField} />

web/frontend/src/components/config/config-sections.tsx

@@ -1,3 +1,4 @@
+import { IconPlus, IconTrash } from "@tabler/icons-react"
 import { useState } from "react"
 import type { ReactNode } from "react"
 import { useTranslation } from "react-i18next"
@@ -6,6 +7,8 @@ import {
   type CoreConfigForm,
   DM_SCOPE_OPTIONS,
   type LauncherForm,
+  type MCPServerForm,
+  type MCPServerType,
 } from "@/components/config/form-model"
 import { Field, SwitchCardField } from "@/components/shared-form"
 import { Button } from "@/components/ui/button"
@@ -221,6 +224,264 @@ interface ExecSectionProps {
   onFieldChange: UpdateCoreField
 }
 
+interface MCPSectionProps {
+  form: CoreConfigForm
+  onFieldChange: UpdateCoreField
+  onAddServer: () => void
+  onRemoveServer: (id: string) => void
+  onServerFieldChange: <K extends keyof MCPServerForm>(
+    id: string,
+    key: K,
+    value: MCPServerForm[K],
+  ) => void
+}
+
+export function MCPSection({
+  form,
+  onFieldChange,
+  onAddServer,
+  onRemoveServer,
+  onServerFieldChange,
+}: MCPSectionProps) {
+  const { t } = useTranslation()
+
+  return (
+    <ConfigSectionCard
+      title={t("pages.config.sections.mcp")}
+      description={t("pages.config.mcp_section_hint")}
+    >
+      <SwitchCardField
+        label={t("pages.config.mcp_enabled")}
+        hint={t("pages.config.mcp_enabled_hint")}
+        layout="setting-row"
+        checked={form.mcpEnabled}
+        onCheckedChange={(checked) => onFieldChange("mcpEnabled", checked)}
+      />
+
+      {form.mcpEnabled && (
+        <>
+          <SwitchCardField
+            label={t("pages.config.mcp_discovery_enabled")}
+            hint={t("pages.config.mcp_discovery_enabled_hint")}
+            layout="setting-row"
+            checked={form.mcpDiscoveryEnabled}
+            onCheckedChange={(checked) =>
+              onFieldChange("mcpDiscoveryEnabled", checked)
+            }
+          />
+
+          {form.mcpDiscoveryEnabled && (
+            <>
+              <Field
+                label={t("pages.config.mcp_discovery_ttl")}
+                hint={t("pages.config.mcp_discovery_ttl_hint")}
+                layout="setting-row"
+              >
+                <Input
+                  type="number"
+                  min={0}
+                  value={form.mcpDiscoveryTTL}
+                  onChange={(e) =>
+                    onFieldChange("mcpDiscoveryTTL", e.target.value)
+                  }
+                />
+              </Field>
+
+              <Field
+                label={t("pages.config.mcp_discovery_max_results")}
+                hint={t("pages.config.mcp_discovery_max_results_hint")}
+                layout="setting-row"
+              >
+                <Input
+                  type="number"
+                  min={0}
+                  value={form.mcpDiscoveryMaxSearchResults}
+                  onChange={(e) =>
+                    onFieldChange(
+                      "mcpDiscoveryMaxSearchResults",
+                      e.target.value,
+                    )
+                  }
+                />
+              </Field>
+
+              <SwitchCardField
+                label={t("pages.config.mcp_discovery_use_bm25")}
+                hint={t("pages.config.mcp_discovery_use_bm25_hint")}
+                layout="setting-row"
+                checked={form.mcpDiscoveryUseBM25}
+                onCheckedChange={(checked) =>
+                  onFieldChange("mcpDiscoveryUseBM25", checked)
+                }
+              />
+
+              <SwitchCardField
+                label={t("pages.config.mcp_discovery_use_regex")}
+                hint={t("pages.config.mcp_discovery_use_regex_hint")}
+                layout="setting-row"
+                checked={form.mcpDiscoveryUseRegex}
+                onCheckedChange={(checked) =>
+                  onFieldChange("mcpDiscoveryUseRegex", checked)
+                }
+              />
+            </>
+          )}
+
+          <Field
+            label={t("pages.config.mcp_servers")}
+            hint={t("pages.config.mcp_servers_hint")}
+            layout="setting-row"
+            controlClassName="md:max-w-2xl"
+          >
+            <div className="flex flex-col gap-3">
+              {form.mcpServers.map((server) => (
+                <div
+                  key={server.id}
+                  className="border-border rounded-md border p-3"
+                >
+                  <div className="mb-3 flex items-center justify-between">
+                    <div className="text-sm font-medium">
+                      {server.name.trim() || t("pages.config.mcp_server_new")}
+                    </div>
+                    <Button
+                      type="button"
+                      variant="outline"
+                      size="sm"
+                      onClick={() => onRemoveServer(server.id)}
+                    >
+                      <IconTrash className="size-4" />
+                      {t("pages.config.mcp_server_remove")}
+                    </Button>
+                  </div>
+
+                  <div className="grid gap-3 md:grid-cols-2">
+                    <Input
+                      value={server.name}
+                      placeholder={t(
+                        "pages.config.mcp_server_name_placeholder",
+                      )}
+                      onChange={(e) =>
+                        onServerFieldChange(server.id, "name", e.target.value)
+                      }
+                    />
+
+                    <Select
+                      value={server.type}
+                      onValueChange={(value) =>
+                        onServerFieldChange(
+                          server.id,
+                          "type",
+                          value as MCPServerType,
+                        )
+                      }
+                    >
+                      <SelectTrigger>
+                        <SelectValue />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="stdio">stdio</SelectItem>
+                        <SelectItem value="http">http</SelectItem>
+                      </SelectContent>
+                    </Select>
+
+                    <SwitchCardField
+                      label={t("pages.config.mcp_server_enabled")}
+                      layout="setting-row"
+                      checked={server.enabled}
+                      onCheckedChange={(checked) =>
+                        onServerFieldChange(server.id, "enabled", checked)
+                      }
+                    />
+                  </div>
+
+                  {server.type === "http" ? (
+                    <div className="mt-3 grid gap-3">
+                      <Input
+                        value={server.url}
+                        placeholder={t(
+                          "pages.config.mcp_server_url_placeholder",
+                        )}
+                        onChange={(e) =>
+                          onServerFieldChange(server.id, "url", e.target.value)
+                        }
+                      />
+                      <Textarea
+                        value={server.headersText}
+                        placeholder={t(
+                          "pages.config.mcp_server_headers_placeholder",
+                        )}
+                        className="min-h-[88px] font-mono text-xs"
+                        onChange={(e) =>
+                          onServerFieldChange(
+                            server.id,
+                            "headersText",
+                            e.target.value,
+                          )
+                        }
+                      />
+                    </div>
+                  ) : (
+                    <div className="mt-3 grid gap-3">
+                      <Input
+                        value={server.command}
+                        placeholder={t(
+                          "pages.config.mcp_server_command_placeholder",
+                        )}
+                        onChange={(e) =>
+                          onServerFieldChange(
+                            server.id,
+                            "command",
+                            e.target.value,
+                          )
+                        }
+                      />
+                      <Textarea
+                        value={server.argsText}
+                        placeholder={t(
+                          "pages.config.mcp_server_args_placeholder",
+                        )}
+                        className="min-h-[88px] font-mono text-xs"
+                        onChange={(e) =>
+                          onServerFieldChange(
+                            server.id,
+                            "argsText",
+                            e.target.value,
+                          )
+                        }
+                      />
+                      <Textarea
+                        value={server.envText}
+                        placeholder={t(
+                          "pages.config.mcp_server_env_placeholder",
+                        )}
+                        className="min-h-[88px] font-mono text-xs"
+                        onChange={(e) =>
+                          onServerFieldChange(
+                            server.id,
+                            "envText",
+                            e.target.value,
+                          )
+                        }
+                      />
+                    </div>
+                  )}
+                </div>
+              ))}
+
+              <div>
+                <Button type="button" variant="outline" onClick={onAddServer}>
+                  <IconPlus className="size-4" />
+                  {t("pages.config.mcp_server_add")}
+                </Button>
+              </div>
+            </div>
+          </Field>
+        </>
+      )}
+    </ConfigSectionCard>
+  )
+}
+
 export function ExecSection({ form, onFieldChange }: ExecSectionProps) {
   const { t } = useTranslation()
   const [testCommand, setTestCommand] = useState("")
@@ -545,9 +806,7 @@ export function LauncherSection({
           disabled={disabled}
           autoComplete="new-password"
           placeholder={t("pages.config.dashboard_password_placeholder")}
-          onChange={(e) =>
+          onChange={(e) => onFieldChange("dashboardPassword", e.target.value)}
-            onFieldChange("dashboardPassword", e.target.value)
-          }
         />
       </Field>
 

web/frontend/src/components/config/form-model.ts

@@ -25,6 +25,27 @@ export interface CoreConfigForm {
   heartbeatInterval: string
   devicesEnabled: boolean
   monitorUSB: boolean
+  mcpEnabled: boolean
+  mcpDiscoveryEnabled: boolean
+  mcpDiscoveryTTL: string
+  mcpDiscoveryMaxSearchResults: string
+  mcpDiscoveryUseBM25: boolean
+  mcpDiscoveryUseRegex: boolean
+  mcpServers: MCPServerForm[]
+}
+
+export type MCPServerType = "http" | "stdio"
+
+export interface MCPServerForm {
+  id: string
+  name: string
+  enabled: boolean
+  type: MCPServerType
+  url: string
+  command: string
+  argsText: string
+  envText: string
+  headersText: string
 }
 
 export interface LauncherForm {
@@ -91,6 +112,13 @@ export const EMPTY_FORM: CoreConfigForm = {
   heartbeatInterval: "30",
   devicesEnabled: false,
   monitorUSB: true,
+  mcpEnabled: false,
+  mcpDiscoveryEnabled: false,
+  mcpDiscoveryTTL: "5",
+  mcpDiscoveryMaxSearchResults: "5",
+  mcpDiscoveryUseBM25: true,
+  mcpDiscoveryUseRegex: false,
+  mcpServers: [],
 }
 
 export const EMPTY_LAUNCHER_FORM: LauncherForm = {
@@ -126,6 +154,45 @@ function asNumberString(value: unknown, fallback: string): string {
   return fallback
 }
 
+function toMCPServerType(value: unknown): MCPServerType {
+  return value === "http" ? "http" : "stdio"
+}
+
+function makeMCPServerID(name: string): string {
+  const normalized = name
+    .trim()
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, "-")
+  if (normalized.length > 0) {
+    return `mcp-${normalized}`
+  }
+  return `mcp-${Math.random().toString(36).slice(2, 10)}`
+}
+
+function mapMCPServers(value: unknown): MCPServerForm[] {
+  const servers = asRecord(value)
+  return Object.entries(servers).map(([name, rawConfig]) => {
+    const cfg = asRecord(rawConfig)
+    const argsList = Array.isArray(cfg.args)
+      ? cfg.args.filter((item): item is string => typeof item === "string")
+      : []
+    const env = asRecord(cfg.env)
+    const headers = asRecord(cfg.headers)
+
+    return {
+      id: makeMCPServerID(name),
+      name,
+      enabled: cfg.enabled !== false,
+      type: toMCPServerType(cfg.type),
+      url: asString(cfg.url),
+      command: asString(cfg.command),
+      argsText: argsList.join("\n"),
+      envText: JSON.stringify(env, null, 2),
+      headersText: JSON.stringify(headers, null, 2),
+    }
+  })
+}
+
 export function buildFormFromConfig(config: unknown): CoreConfigForm {
   const root = asRecord(config)
   const agents = asRecord(root.agents)
@@ -134,6 +201,8 @@ export function buildFormFromConfig(config: unknown): CoreConfigForm {
   const heartbeat = asRecord(root.heartbeat)
   const devices = asRecord(root.devices)
   const tools = asRecord(root.tools)
+  const mcp = asRecord(tools.mcp)
+  const mcpDiscovery = asRecord(mcp.discovery)
   const cron = asRecord(tools.cron)
   const exec = asRecord(tools.exec)
   const toolFeedback = asRecord(defaults.tool_feedback)
@@ -228,6 +297,29 @@ export function buildFormFromConfig(config: unknown): CoreConfigForm {
       devices.monitor_usb === undefined
         ? EMPTY_FORM.monitorUSB
         : asBool(devices.monitor_usb),
+    mcpEnabled:
+      mcp.enabled === undefined ? EMPTY_FORM.mcpEnabled : asBool(mcp.enabled),
+    mcpDiscoveryEnabled:
+      mcpDiscovery.enabled === undefined
+        ? EMPTY_FORM.mcpDiscoveryEnabled
+        : asBool(mcpDiscovery.enabled),
+    mcpDiscoveryTTL: asNumberString(
+      mcpDiscovery.ttl,
+      EMPTY_FORM.mcpDiscoveryTTL,
+    ),
+    mcpDiscoveryMaxSearchResults: asNumberString(
+      mcpDiscovery.max_search_results,
+      EMPTY_FORM.mcpDiscoveryMaxSearchResults,
+    ),
+    mcpDiscoveryUseBM25:
+      mcpDiscovery.use_bm25 === undefined
+        ? EMPTY_FORM.mcpDiscoveryUseBM25
+        : asBool(mcpDiscovery.use_bm25),
+    mcpDiscoveryUseRegex:
+      mcpDiscovery.use_regex === undefined
+        ? EMPTY_FORM.mcpDiscoveryUseRegex
+        : asBool(mcpDiscovery.use_regex),
+    mcpServers: mapMCPServers(mcp.servers),
   }
 }
 
@@ -268,3 +360,34 @@ export function parseMultilineList(raw: string): string[] {
     .map((value) => value.trim())
     .filter((value) => value.length > 0)
 }
+
+export function parseJSONObjectField(
+  rawValue: string,
+  label: string,
+): Record<string, string> {
+  const trimmed = rawValue.trim()
+  if (trimmed === "") {
+    return {}
+  }
+
+  let parsed: unknown
+  try {
+    parsed = JSON.parse(trimmed)
+  } catch {
+    throw new Error(`${label} must be valid JSON.`)
+  }
+
+  if (!parsed || typeof parsed !== "object" || Array.isArray(parsed)) {
+    throw new Error(`${label} must be a JSON object.`)
+  }
+
+  const entries = Object.entries(parsed as Record<string, unknown>)
+  const result: Record<string, string> = {}
+  for (const [key, value] of entries) {
+    if (typeof value !== "string") {
+      throw new Error(`${label}.${key} must be a string.`)
+    }
+    result[key] = value
+  }
+  return result
+}

web/frontend/src/i18n/locales/en.json

@@ -701,9 +701,35 @@
       "allowed_cidrs": "Allowed Network CIDRs",
       "allowed_cidrs_hint": "Only clients from these CIDR ranges can access the service. One per line or comma-separated. Leave empty to allow all.",
       "allowed_cidrs_placeholder": "192.168.1.0/24\n10.0.0.0/8",
+      "mcp_section_hint": "Configure MCP servers without editing config.json manually.",
+      "mcp_enabled": "Enable MCP",
+      "mcp_enabled_hint": "Turn MCP server integration on or off.",
+      "mcp_discovery_enabled": "Enable MCP Discovery",
+      "mcp_discovery_enabled_hint": "Allow MCP discovery tools to search registered MCP servers.",
+      "mcp_discovery_ttl": "Discovery Cache TTL (minutes)",
+      "mcp_discovery_ttl_hint": "How long MCP discovery results stay cached.",
+      "mcp_discovery_max_results": "Discovery Max Results",
+      "mcp_discovery_max_results_hint": "Maximum MCP discovery matches returned per query.",
+      "mcp_discovery_use_bm25": "Use BM25 Ranking",
+      "mcp_discovery_use_bm25_hint": "Use BM25 lexical scoring for MCP discovery results.",
+      "mcp_discovery_use_regex": "Enable Regex Search",
+      "mcp_discovery_use_regex_hint": "Allow regex-based matching in MCP discovery.",
+      "mcp_servers": "MCP Servers",
+      "mcp_servers_hint": "Add, edit, or remove MCP servers.",
+      "mcp_server_new": "New MCP server",
+      "mcp_server_add": "Add server",
+      "mcp_server_remove": "Remove",
+      "mcp_server_enabled": "Enabled",
+      "mcp_server_name_placeholder": "Server name (e.g. github)",
+      "mcp_server_url_placeholder": "Server URL (e.g. https://example.com/mcp)",
+      "mcp_server_command_placeholder": "Command (e.g. npx)",
+      "mcp_server_args_placeholder": "Args, one per line",
+      "mcp_server_env_placeholder": "Environment JSON object",
+      "mcp_server_headers_placeholder": "Headers JSON object",
       "sections": {
         "agent": "Agent",
         "runtime": "Runtime",
+        "mcp": "MCP",
         "exec": "Run Commands",
         "cron": "Cron Tasks",
         "launcher": "Launcher",

web/frontend/src/i18n/locales/zh.json

@@ -701,9 +701,35 @@
       "allowed_cidrs": "允许访问网段",
       "allowed_cidrs_hint": "仅允许这些 CIDR 网段的客户端访问服务。可按行或逗号分隔；留空表示允许所有来源",
       "allowed_cidrs_placeholder": "192.168.1.0/24\n10.0.0.0/8",
+      "mcp_section_hint": "通过可视化界面配置 MCP 服务器，无需手动编辑 config.json",
+      "mcp_enabled": "启用 MCP",
+      "mcp_enabled_hint": "开启或关闭 MCP 服务集成",
+      "mcp_discovery_enabled": "启用 MCP 发现",
+      "mcp_discovery_enabled_hint": "允许 MCP 发现工具检索已注册的 MCP 服务器",
+      "mcp_discovery_ttl": "发现缓存 TTL（分钟）",
+      "mcp_discovery_ttl_hint": "MCP 发现结果在缓存中的保留时长",
+      "mcp_discovery_max_results": "发现最大结果数",
+      "mcp_discovery_max_results_hint": "每次查询返回的 MCP 发现结果上限",
+      "mcp_discovery_use_bm25": "使用 BM25 排序",
+      "mcp_discovery_use_bm25_hint": "在 MCP 发现中启用 BM25 词法评分",
+      "mcp_discovery_use_regex": "启用正则搜索",
+      "mcp_discovery_use_regex_hint": "允许在 MCP 发现中使用正则匹配",
+      "mcp_servers": "MCP 服务器",
+      "mcp_servers_hint": "添加、编辑或删除 MCP 服务器",
+      "mcp_server_new": "新 MCP 服务器",
+      "mcp_server_add": "添加服务器",
+      "mcp_server_remove": "移除",
+      "mcp_server_enabled": "已启用",
+      "mcp_server_name_placeholder": "服务器名称（例如 github）",
+      "mcp_server_url_placeholder": "服务器 URL（例如 https://example.com/mcp）",
+      "mcp_server_command_placeholder": "命令（例如 npx）",
+      "mcp_server_args_placeholder": "参数（每行一个）",
+      "mcp_server_env_placeholder": "环境变量 JSON 对象",
+      "mcp_server_headers_placeholder": "请求头 JSON 对象",
       "sections": {
         "agent": "智能体",
         "runtime": "运行时",
+        "mcp": "MCP",
         "exec": "运行命令",
         "cron": "定时任务",
         "launcher": "启动器",