Function McpSettings

web/components/settings/McpSettings.tsx:129–256

()

}

export function McpSettings() {
  const { settings, updateSettings } = useChatStore();
  const [showAddForm, setShowAddForm] = useState(false);
  const [newServer, setNewServer] = useState<Omit<MCPServerConfig, "id">>({
    name: "",
    command: "",
    args: [],
    env: {},
    enabled: true,
  });

  function updateServer(id: string, updated: MCPServerConfig) {
    updateSettings({
      mcpServers: settings.mcpServers.map((s) => (s.id === id ? updated : s)),
    });
  }

  function deleteServer(id: string) {
    updateSettings({
      mcpServers: settings.mcpServers.filter((s) => s.id !== id),
    });
  }

  function addServer() {
    if (!newServer.name.trim() || !newServer.command.trim()) return;
    updateSettings({
      mcpServers: [...settings.mcpServers, { ...newServer, id: nanoid() }],
    });
    setNewServer({ name: "", command: "", args: [], env: {}, enabled: true });
    setShowAddForm(false);
  }

  return (
    <div>
      <SectionHeader title="MCP Servers" />

      <p className="text-xs text-surface-400 mb-4">
        Model Context Protocol servers extend Claude with external tools and data sources.
      </p>

      <div className="space-y-2 mb-4">
        {settings.mcpServers.length === 0 ? (
          <div className="text-center py-8 text-surface-500 text-sm">
            No MCP servers configured
          </div>
        ) : (
          settings.mcpServers.map((server) => (
            <ServerRow
              key={server.id}
              server={server}
              onUpdate={(updated) => updateServer(server.id, updated)}
              onDelete={() => deleteServer(server.id)}
            />
          ))
        )}
      </div>

      {showAddForm ? (