From 12099b4f8cd10002810438bd309e208169960107 Mon Sep 17 00:00:00 2001
From: Clawd <ai@clawd.bot>
Date: Sun, 1 Mar 2026 08:45:09 -0800
Subject: feat(settings): add MCP server configuration

- Add McpSettings component with add/edit/delete server UI
- Support stdio (command + args + env) and sse/http (url + headers) transports
- Array builder for args, key-value builder for env vars and headers
- Pass mcpServers config to SDK query() calls
- Store config as JSON in settings table
---
 renderer/src/components/SettingsPage.tsx         |  12 +-
 renderer/src/components/settings/McpSettings.tsx | 502 +++++++++++++++++++++++
 renderer/src/styles/globals.css                  | 212 ++++++++++
 3 files changed, 725 insertions(+), 1 deletion(-)
 create mode 100644 renderer/src/components/settings/McpSettings.tsx

(limited to 'renderer')

diff --git a/renderer/src/components/SettingsPage.tsx b/renderer/src/components/SettingsPage.tsx
index d3ff4bf..7d06547 100644
--- a/renderer/src/components/SettingsPage.tsx
+++ b/renderer/src/components/SettingsPage.tsx
@@ -2,8 +2,9 @@ import React, { useState } from "react";
 import { SystemPromptsSettings } from "./settings/SystemPromptsSettings";
 import { GitSettings } from "./settings/GitSettings";
 import { ModelSettings } from "./settings/ModelSettings";
+import { McpSettings } from "./settings/McpSettings";
 
-type SettingsSection = "model" | "system-prompts" | "git";
+type SettingsSection = "model" | "mcp" | "system-prompts" | "git";
 
 interface SettingsPageProps {
   onClose: () => void;
@@ -40,6 +41,14 @@ export function SettingsPage({ onClose }: SettingsPageProps) {
           >
             Model
           </button>
+          <button
+            className={`settings-nav-item${
+              activeSection === "mcp" ? " active" : ""
+            }`}
+            onClick={() => setActiveSection("mcp")}
+          >
+            MCP Servers
+          </button>
           <button
             className={`settings-nav-item${
               activeSection === "system-prompts" ? " active" : ""
@@ -61,6 +70,7 @@ export function SettingsPage({ onClose }: SettingsPageProps) {
         {/* Content */}
         <div className="settings-content">
           {activeSection === "model" && <ModelSettings />}
+          {activeSection === "mcp" && <McpSettings />}
           {activeSection === "system-prompts" && <SystemPromptsSettings />}
           {activeSection === "git" && <GitSettings />}
         </div>
diff --git a/renderer/src/components/settings/McpSettings.tsx b/renderer/src/components/settings/McpSettings.tsx
new file mode 100644
index 0000000..7d23fe4
--- /dev/null
+++ b/renderer/src/components/settings/McpSettings.tsx
@@ -0,0 +1,502 @@
+import React, { useState, useEffect } from "react";
+
+const api = window.api;
+
+type McpServerType = "stdio" | "sse" | "http";
+
+interface McpServerConfig {
+  type: McpServerType;
+  command?: string;
+  args?: string[];
+  env?: Record<string, string>;
+  url?: string;
+  headers?: Record<string, string>;
+}
+
+type McpServersConfig = Record<string, McpServerConfig>;
+
+interface EditingServer {
+  originalName: string | null; // null = new server
+  name: string;
+  config: McpServerConfig;
+}
+
+const emptyConfig = (): McpServerConfig => ({
+  type: "stdio",
+  command: "",
+  args: [],
+  env: {},
+});
+
+export function McpSettings() {
+  const [servers, setServers] = useState<McpServersConfig | null>(null);
+  const [editing, setEditing] = useState<EditingServer | null>(null);
+  const [saveStatus, setSaveStatus] = useState<"idle" | "saved" | "error">("idle");
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    api.getSettings(["mcpServers"]).then((settings) => {
+      try {
+        const parsed = settings["mcpServers"]
+          ? JSON.parse(settings["mcpServers"])
+          : {};
+        setServers(parsed);
+      } catch {
+        setServers({});
+        setError("Failed to parse saved MCP config");
+      }
+    });
+  }, []);
+
+  const saveServers = async (newServers: McpServersConfig) => {
+    try {
+      if (Object.keys(newServers).length === 0) {
+        await api.deleteSetting("mcpServers");
+      } else {
+        await api.setSetting("mcpServers", JSON.stringify(newServers));
+      }
+      setServers(newServers);
+      setSaveStatus("saved");
+      setTimeout(() => setSaveStatus("idle"), 1500);
+    } catch (e) {
+      setSaveStatus("error");
+      setError(String(e));
+    }
+  };
+
+  const handleDelete = async (name: string) => {
+    if (!servers) return;
+    const { [name]: _, ...rest } = servers;
+    await saveServers(rest);
+  };
+
+  const handleSaveEdit = async () => {
+    if (!editing || !servers) return;
+    const { originalName, name, config } = editing;
+
+    if (!name.trim()) {
+      setError("Server name is required");
+      return;
+    }
+
+    // Validate based on type
+    if (config.type === "stdio" && !config.command?.trim()) {
+      setError("Command is required for stdio servers");
+      return;
+    }
+    if ((config.type === "sse" || config.type === "http") && !config.url?.trim()) {
+      setError("URL is required for SSE/HTTP servers");
+      return;
+    }
+
+    const newServers = { ...servers };
+
+    // If renaming, remove old entry
+    if (originalName && originalName !== name) {
+      delete newServers[originalName];
+    }
+
+    // Clean up config based on type
+    const cleanConfig: McpServerConfig = { type: config.type };
+    if (config.type === "stdio") {
+      cleanConfig.command = config.command;
+      if (config.args && config.args.length > 0) {
+        cleanConfig.args = config.args.filter((a) => a.trim());
+      }
+      if (config.env && Object.keys(config.env).length > 0) {
+        cleanConfig.env = config.env;
+      }
+    } else {
+      cleanConfig.url = config.url;
+      if (config.headers && Object.keys(config.headers).length > 0) {
+        cleanConfig.headers = config.headers;
+      }
+    }
+
+    newServers[name.trim()] = cleanConfig;
+    await saveServers(newServers);
+    setEditing(null);
+    setError(null);
+  };
+
+  const handleCancelEdit = () => {
+    setEditing(null);
+    setError(null);
+  };
+
+  if (servers === null) {
+    return (
+      <div style={{ color: "var(--text-secondary)", fontSize: 12 }}>
+        Loading...
+      </div>
+    );
+  }
+
+  const serverNames = Object.keys(servers);
+
+  return (
+    <div>
+      <div className="settings-section-title">MCP Servers</div>
+      <div className="settings-section-desc">
+        Configure Model Context Protocol servers to give Claude access to
+        external data sources like Jira, documentation, or databases. Servers
+        are available in all phases.
+      </div>
+
+      {error && (
+        <div className="mcp-error">{error}</div>
+      )}
+
+      {/* Server List */}
+      {!editing && (
+        <>
+          <div className="mcp-server-list">
+            {serverNames.length === 0 ? (
+              <div className="mcp-empty">No MCP servers configured</div>
+            ) : (
+              serverNames.map((name) => (
+                <div key={name} className="mcp-server-card">
+                  <div className="mcp-server-info">
+                    <span className="mcp-server-name">{name}</span>
+                    <span className="mcp-server-type">{servers[name].type}</span>
+                    <span className="mcp-server-detail">
+                      {servers[name].type === "stdio"
+                        ? servers[name].command
+                        : servers[name].url}
+                    </span>
+                  </div>
+                  <div className="mcp-server-actions">
+                    <button
+                      className="btn-secondary btn-small"
+                      onClick={() =>
+                        setEditing({
+                          originalName: name,
+                          name,
+                          config: { ...servers[name] },
+                        })
+                      }
+                    >
+                      Edit
+                    </button>
+                    <button
+                      className="btn-secondary btn-small btn-danger"
+                      onClick={() => handleDelete(name)}
+                    >
+                      Delete
+                    </button>
+                  </div>
+                </div>
+              ))
+            )}
+          </div>
+
+          <div className="settings-actions">
+            <button
+              className="btn-primary"
+              onClick={() =>
+                setEditing({
+                  originalName: null,
+                  name: "",
+                  config: emptyConfig(),
+                })
+              }
+            >
+              Add Server
+            </button>
+            {saveStatus === "saved" && (
+              <span className="settings-custom-badge">saved ✓</span>
+            )}
+          </div>
+        </>
+      )}
+
+      {/* Edit Form */}
+      {editing && (
+        <ServerForm
+          editing={editing}
+          setEditing={setEditing}
+          onSave={handleSaveEdit}
+          onCancel={handleCancelEdit}
+        />
+      )}
+    </div>
+  );
+}
+
+interface ServerFormProps {
+  editing: EditingServer;
+  setEditing: React.Dispatch<React.SetStateAction<EditingServer | null>>;
+  onSave: () => void;
+  onCancel: () => void;
+}
+
+function ServerForm({ editing, setEditing, onSave, onCancel }: ServerFormProps) {
+  const { name, config } = editing;
+
+  const updateName = (newName: string) => {
+    setEditing({ ...editing, name: newName });
+  };
+
+  const updateConfig = (updates: Partial<McpServerConfig>) => {
+    setEditing({ ...editing, config: { ...config, ...updates } });
+  };
+
+  const updateArg = (index: number, value: string) => {
+    const newArgs = [...(config.args || [])];
+    newArgs[index] = value;
+    updateConfig({ args: newArgs });
+  };
+
+  const addArg = () => {
+    updateConfig({ args: [...(config.args || []), ""] });
+  };
+
+  const removeArg = (index: number) => {
+    const newArgs = [...(config.args || [])];
+    newArgs.splice(index, 1);
+    updateConfig({ args: newArgs });
+  };
+
+  const updateEnvKey = (oldKey: string, newKey: string) => {
+    const env = { ...config.env };
+    const value = env[oldKey] || "";
+    delete env[oldKey];
+    if (newKey) env[newKey] = value;
+    updateConfig({ env });
+  };
+
+  const updateEnvValue = (key: string, value: string) => {
+    updateConfig({ env: { ...config.env, [key]: value } });
+  };
+
+  const addEnvVar = () => {
+    const env = { ...config.env, "": "" };
+    updateConfig({ env });
+  };
+
+  const removeEnvVar = (key: string) => {
+    const env = { ...config.env };
+    delete env[key];
+    updateConfig({ env });
+  };
+
+  const updateHeaderKey = (oldKey: string, newKey: string) => {
+    const headers = { ...config.headers };
+    const value = headers[oldKey] || "";
+    delete headers[oldKey];
+    if (newKey) headers[newKey] = value;
+    updateConfig({ headers });
+  };
+
+  const updateHeaderValue = (key: string, value: string) => {
+    updateConfig({ headers: { ...config.headers, [key]: value } });
+  };
+
+  const addHeader = () => {
+    const headers = { ...config.headers, "": "" };
+    updateConfig({ headers });
+  };
+
+  const removeHeader = (key: string) => {
+    const headers = { ...config.headers };
+    delete headers[key];
+    updateConfig({ headers });
+  };
+
+  return (
+    <div className="mcp-server-form">
+      <div className="mcp-form-title">
+        {editing.originalName ? `Edit "${editing.originalName}"` : "Add Server"}
+      </div>
+
+      {/* Name */}
+      <div className="mcp-form-field">
+        <label>Name</label>
+        <input
+          type="text"
+          value={name}
+          onChange={(e) => updateName(e.target.value)}
+          placeholder="e.g., jira, godoc"
+          spellCheck={false}
+        />
+      </div>
+
+      {/* Type */}
+      <div className="mcp-form-field">
+        <label>Type</label>
+        <select
+          value={config.type}
+          onChange={(e) =>
+            updateConfig({
+              type: e.target.value as McpServerType,
+              // Reset type-specific fields
+              command: undefined,
+              args: [],
+              env: {},
+              url: undefined,
+              headers: {},
+            })
+          }
+        >
+          <option value="stdio">stdio (local command)</option>
+          <option value="sse">sse (Server-Sent Events)</option>
+          <option value="http">http (HTTP endpoint)</option>
+        </select>
+      </div>
+
+      {/* stdio fields */}
+      {config.type === "stdio" && (
+        <>
+          <div className="mcp-form-field">
+            <label>Command</label>
+            <input
+              type="text"
+              value={config.command || ""}
+              onChange={(e) => updateConfig({ command: e.target.value })}
+              placeholder="e.g., npx, node, python"
+              spellCheck={false}
+            />
+          </div>
+
+          <div className="mcp-form-field">
+            <label>Arguments</label>
+            <div className="mcp-array-builder">
+              {(config.args || []).map((arg, i) => (
+                <div key={i} className="mcp-array-row">
+                  <input
+                    type="text"
+                    value={arg}
+                    onChange={(e) => updateArg(i, e.target.value)}
+                    placeholder={`Argument ${i + 1}`}
+                    spellCheck={false}
+                  />
+                  <button
+                    type="button"
+                    className="btn-icon"
+                    onClick={() => removeArg(i)}
+                    title="Remove"
+                  >
+                    ×
+                  </button>
+                </div>
+              ))}
+              <button
+                type="button"
+                className="btn-secondary btn-small"
+                onClick={addArg}
+              >
+                + Add Argument
+              </button>
+            </div>
+          </div>
+
+          <div className="mcp-form-field">
+            <label>Environment Variables</label>
+            <div className="mcp-kv-builder">
+              {Object.entries(config.env || {}).map(([key, value]) => (
+                <div key={key} className="mcp-kv-row">
+                  <input
+                    type="text"
+                    value={key}
+                    onChange={(e) => updateEnvKey(key, e.target.value)}
+                    placeholder="KEY"
+                    spellCheck={false}
+                  />
+                  <span className="mcp-kv-sep">=</span>
+                  <input
+                    type="text"
+                    value={value}
+                    onChange={(e) => updateEnvValue(key, e.target.value)}
+                    placeholder="value"
+                    spellCheck={false}
+                  />
+                  <button
+                    type="button"
+                    className="btn-icon"
+                    onClick={() => removeEnvVar(key)}
+                    title="Remove"
+                  >
+                    ×
+                  </button>
+                </div>
+              ))}
+              <button
+                type="button"
+                className="btn-secondary btn-small"
+                onClick={addEnvVar}
+              >
+                + Add Variable
+              </button>
+            </div>
+          </div>
+        </>
+      )}
+
+      {/* sse/http fields */}
+      {(config.type === "sse" || config.type === "http") && (
+        <>
+          <div className="mcp-form-field">
+            <label>URL</label>
+            <input
+              type="text"
+              value={config.url || ""}
+              onChange={(e) => updateConfig({ url: e.target.value })}
+              placeholder="https://..."
+              spellCheck={false}
+            />
+          </div>
+
+          <div className="mcp-form-field">
+            <label>Headers</label>
+            <div className="mcp-kv-builder">
+              {Object.entries(config.headers || {}).map(([key, value]) => (
+                <div key={key} className="mcp-kv-row">
+                  <input
+                    type="text"
+                    value={key}
+                    onChange={(e) => updateHeaderKey(key, e.target.value)}
+                    placeholder="Header-Name"
+                    spellCheck={false}
+                  />
+                  <span className="mcp-kv-sep">:</span>
+                  <input
+                    type="text"
+                    value={value}
+                    onChange={(e) => updateHeaderValue(key, e.target.value)}
+                    placeholder="value"
+                    spellCheck={false}
+                  />
+                  <button
+                    type="button"
+                    className="btn-icon"
+                    onClick={() => removeHeader(key)}
+                    title="Remove"
+                  >
+                    ×
+                  </button>
+                </div>
+              ))}
+              <button
+                type="button"
+                className="btn-secondary btn-small"
+                onClick={addHeader}
+              >
+                + Add Header
+              </button>
+            </div>
+          </div>
+        </>
+      )}
+
+      {/* Form Actions */}
+      <div className="mcp-form-actions">
+        <button className="btn-secondary" onClick={onCancel}>
+          Cancel
+        </button>
+        <button className="btn-primary" onClick={onSave}>
+          Save
+        </button>
+      </div>
+    </div>
+  );
+}
diff --git a/renderer/src/styles/globals.css b/renderer/src/styles/globals.css
index 0db62c2..6cf3dc7 100644
--- a/renderer/src/styles/globals.css
+++ b/renderer/src/styles/globals.css
@@ -1136,3 +1136,215 @@ html[data-theme="light"] .settings-textarea:focus {
 .cm-scroller::-webkit-scrollbar-thumb:hover {
   background: var(--border);
 }
+
+/* ── MCP Settings ────────────────────────────────────────────── */
+.mcp-server-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin-top: 16px;
+}
+
+.mcp-empty {
+  color: var(--text-secondary);
+  font-size: 12px;
+  font-style: italic;
+  padding: 12px;
+  text-align: center;
+  border: 1px dashed var(--border);
+  border-radius: 4px;
+}
+
+.mcp-server-card {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 12px;
+  background: var(--bg-secondary);
+  border: 1px solid var(--border);
+  border-radius: 4px;
+}
+
+.mcp-server-info {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-width: 0;
+  flex: 1;
+}
+
+.mcp-server-name {
+  font-weight: 600;
+  font-size: 13px;
+  color: var(--text-primary);
+}
+
+.mcp-server-type {
+  font-size: 10px;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  padding: 2px 6px;
+  background: var(--bg-tertiary);
+  border-radius: 3px;
+  color: var(--text-secondary);
+}
+
+.mcp-server-detail {
+  font-size: 11px;
+  color: var(--text-secondary);
+  font-family: var(--font-mono, monospace);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  flex: 1;
+  min-width: 0;
+}
+
+.mcp-server-actions {
+  display: flex;
+  gap: 6px;
+  flex-shrink: 0;
+}
+
+.mcp-error {
+  padding: 8px 12px;
+  background: rgba(239, 68, 68, 0.1);
+  border: 1px solid rgba(239, 68, 68, 0.3);
+  border-radius: 4px;
+  color: #ef4444;
+  font-size: 12px;
+  margin-top: 12px;
+}
+
+.mcp-server-form {
+  margin-top: 16px;
+  padding: 16px;
+  background: var(--bg-secondary);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+}
+
+.mcp-form-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--text-primary);
+  margin-bottom: 16px;
+}
+
+.mcp-form-field {
+  margin-bottom: 14px;
+}
+
+.mcp-form-field label {
+  display: block;
+  font-size: 11px;
+  font-weight: 500;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--text-secondary);
+  margin-bottom: 6px;
+}
+
+.mcp-form-field input,
+.mcp-form-field select {
+  width: 100%;
+  padding: 8px 10px;
+  background: var(--bg-primary);
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  color: var(--text-primary);
+  font-size: 13px;
+  font-family: var(--font-mono, monospace);
+  box-sizing: border-box;
+}
+
+.mcp-form-field input:focus,
+.mcp-form-field select:focus {
+  outline: none;
+  border-color: var(--accent);
+}
+
+.mcp-form-field select {
+  cursor: pointer;
+}
+
+.mcp-array-builder,
+.mcp-kv-builder {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.mcp-array-row {
+  display: flex;
+  gap: 6px;
+}
+
+.mcp-array-row input {
+  flex: 1;
+}
+
+.mcp-kv-row {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.mcp-kv-row input:first-child {
+  flex: 0 0 35%;
+}
+
+.mcp-kv-row input:nth-child(3) {
+  flex: 1;
+}
+
+.mcp-kv-sep {
+  color: var(--text-secondary);
+  font-family: var(--font-mono, monospace);
+  font-size: 13px;
+}
+
+.btn-icon {
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: transparent;
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  color: var(--text-secondary);
+  cursor: pointer;
+  font-size: 16px;
+  flex-shrink: 0;
+}
+
+.btn-icon:hover {
+  background: var(--bg-tertiary);
+  color: var(--text-primary);
+}
+
+.btn-small {
+  padding: 4px 8px;
+  font-size: 11px;
+}
+
+.btn-danger {
+  color: #ef4444;
+  border-color: rgba(239, 68, 68, 0.3);
+}
+
+.btn-danger:hover {
+  background: rgba(239, 68, 68, 0.1);
+  color: #ef4444;
+}
+
+.mcp-form-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  margin-top: 20px;
+  padding-top: 16px;
+  border-top: 1px solid var(--border);
+}
-- 
cgit v1.2.3