add mcp support

src/components/MCPServerManager.tsx

@@ -0,0 +1,434 @@
+import React, { useState } from "react";
+import { Plus, Server, Wifi, WifiOff, Trash2, TestTube } from "lucide-react";
+import { useMCP } from "../hooks/useMCP";
+import type { MCPServerConfig } from "../types/mcp";
+
+interface MCPServerManagerProps {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+export const MCPServerManager: React.FC<MCPServerManagerProps> = ({
+  isOpen,
+  onClose,
+}) => {
+  const {
+    mcpState,
+    addServer,
+    removeServer,
+    connectToServer,
+    disconnectFromServer,
+    testConnection,
+  } = useMCP();
+  const [showAddForm, setShowAddForm] = useState(false);
+  const [testingConnection, setTestingConnection] = useState<string | null>(
+    null
+  );
+
+  const [newServer, setNewServer] = useState<Omit<MCPServerConfig, "id">>({
+    name: "",
+    url: "",
+    enabled: true,
+    transport: "streamable-http",
+    auth: {
+      type: "bearer",
+    },
+  });
+
+  if (!isOpen) return null;
+
+  const handleAddServer = async () => {
+    if (!newServer.name || !newServer.url) return;
+
+    const serverConfig: MCPServerConfig = {
+      ...newServer,
+      id: `server_${Date.now()}`,
+    };
+
+    try {
+      await addServer(serverConfig);
+      setNewServer({
+        name: "",
+        url: "",
+        enabled: true,
+        transport: "streamable-http",
+        auth: {
+          type: "bearer",
+        },
+      });
+      setShowAddForm(false);
+    } catch (error) {
+      console.error("Failed to add server:", error);
+    }
+  };
+
+  const handleTestConnection = async (config: MCPServerConfig) => {
+    setTestingConnection(config.id);
+    try {
+      const success = await testConnection(config);
+      if (success) {
+        alert("Connection test successful!");
+      } else {
+        alert("Connection test failed. Please check your configuration.");
+      }
+    } catch (error) {
+      alert(`Connection test failed: ${error}`);
+    } finally {
+      setTestingConnection(null);
+    }
+  };
+
+  const handleToggleConnection = async (
+    serverId: string,
+    isConnected: boolean
+  ) => {
+    try {
+      if (isConnected) {
+        await disconnectFromServer(serverId);
+      } else {
+        await connectToServer(serverId);
+      }
+    } catch (error) {
+      console.error("Failed to toggle connection:", error);
+    }
+  };
+
+  return (
+    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+      <div className="bg-gray-800 rounded-lg p-6 w-full max-w-4xl max-h-[80vh] overflow-y-auto">
+        <div className="flex justify-between items-center mb-6">
+          <h2 className="text-2xl font-bold text-white flex items-center gap-2">
+            <Server className="text-blue-400" />
+            MCP Server Manager
+          </h2>
+          <button onClick={onClose} className="text-gray-400 hover:text-white">
+            ✕
+          </button>
+        </div>
+
+        {/* Add Server Button */}
+        <div className="mb-6">
+          <button
+            onClick={() => setShowAddForm(!showAddForm)}
+            className="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg flex items-center gap-2"
+          >
+            <Plus size={16} />
+            Add MCP Server
+          </button>
+        </div>
+
+        {/* Add Server Form */}
+        {showAddForm && (
+          <div className="bg-gray-700 rounded-lg p-4 mb-6">
+            <h3 className="text-lg font-semibold text-white mb-4">
+              Add New MCP Server
+            </h3>
+            <div className="space-y-4">
+              <div>
+                <label className="block text-sm font-medium text-gray-300 mb-1">
+                  Server Name
+                </label>
+                <input
+                  type="text"
+                  value={newServer.name}
+                  onChange={(e) =>
+                    setNewServer({ ...newServer, name: e.target.value })
+                  }
+                  className="w-full bg-gray-600 text-white rounded px-3 py-2"
+                  placeholder="My MCP Server"
+                />
+              </div>
+
+              <div>
+                <label className="block text-sm font-medium text-gray-300 mb-1">
+                  Server URL
+                </label>
+                <input
+                  type="url"
+                  value={newServer.url}
+                  onChange={(e) =>
+                    setNewServer({ ...newServer, url: e.target.value })
+                  }
+                  className="w-full bg-gray-600 text-white rounded px-3 py-2"
+                  placeholder="http://localhost:3000/mcp"
+                />
+              </div>
+
+              <div>
+                <label className="block text-sm font-medium text-gray-300 mb-1">
+                  Transport
+                </label>
+                <select
+                  value={newServer.transport}
+                  onChange={(e) =>
+                    setNewServer({
+                      ...newServer,
+                      transport: e.target.value as MCPServerConfig["transport"],
+                    })
+                  }
+                  className="w-full bg-gray-600 text-white rounded px-3 py-2"
+                >
+                  <option value="streamable-http">Streamable HTTP</option>
+                  <option value="sse">Server-Sent Events</option>
+                  <option value="websocket">WebSocket</option>
+                </select>
+              </div>
+
+              <div>
+                <label className="block text-sm font-medium text-gray-300 mb-1">
+                  Authentication
+                </label>
+                <select
+                  value={newServer.auth?.type || "none"}
+                  onChange={(e) => {
+                    const authType = e.target.value;
+                    if (authType === "none") {
+                      setNewServer({ ...newServer, auth: undefined });
+                    } else {
+                      setNewServer({
+                        ...newServer,
+                        auth: {
+                          type: authType as "bearer" | "basic" | "oauth",
+                          ...(authType === "bearer" ? { token: "" } : {}),
+                          ...(authType === "basic"
+                            ? { username: "", password: "" }
+                            : {}),
+                          ...(authType === "oauth" ? { token: "" } : {}),
+                        },
+                      });
+                    }
+                  }}
+                  className="w-full bg-gray-600 text-white rounded px-3 py-2"
+                >
+                  <option value="none">No Authentication</option>
+                  <option value="bearer">Bearer Token</option>
+                  <option value="basic">Basic Auth</option>
+                  <option value="oauth">OAuth Token</option>
+                </select>
+              </div>
+
+              {/* Auth-specific fields */}
+              {newServer.auth?.type === "bearer" && (
+                <div>
+                  <label className="block text-sm font-medium text-gray-300 mb-1">
+                    Bearer Token
+                  </label>
+                  <input
+                    type="password"
+                    value={newServer.auth.token || ""}
+                    onChange={(e) =>
+                      setNewServer({
+                        ...newServer,
+                        auth: { ...newServer.auth!, token: e.target.value },
+                      })
+                    }
+                    className="w-full bg-gray-600 text-white rounded px-3 py-2"
+                    placeholder="your-bearer-token"
+                  />
+                </div>
+              )}
+
+              {newServer.auth?.type === "basic" && (
+                <>
+                  <div>
+                    <label className="block text-sm font-medium text-gray-300 mb-1">
+                      Username
+                    </label>
+                    <input
+                      type="text"
+                      value={newServer.auth.username || ""}
+                      onChange={(e) =>
+                        setNewServer({
+                          ...newServer,
+                          auth: {
+                            ...newServer.auth!,
+                            username: e.target.value,
+                          },
+                        })
+                      }
+                      className="w-full bg-gray-600 text-white rounded px-3 py-2"
+                      placeholder="username"
+                    />
+                  </div>
+                  <div>
+                    <label className="block text-sm font-medium text-gray-300 mb-1">
+                      Password
+                    </label>
+                    <input
+                      type="password"
+                      value={newServer.auth.password || ""}
+                      onChange={(e) =>
+                        setNewServer({
+                          ...newServer,
+                          auth: {
+                            ...newServer.auth!,
+                            password: e.target.value,
+                          },
+                        })
+                      }
+                      className="w-full bg-gray-600 text-white rounded px-3 py-2"
+                      placeholder="password"
+                    />
+                  </div>
+                </>
+              )}
+
+              {newServer.auth?.type === "oauth" && (
+                <div>
+                  <label className="block text-sm font-medium text-gray-300 mb-1">
+                    OAuth Token
+                  </label>
+                  <input
+                    type="password"
+                    value={newServer.auth.token || ""}
+                    onChange={(e) =>
+                      setNewServer({
+                        ...newServer,
+                        auth: { ...newServer.auth!, token: e.target.value },
+                      })
+                    }
+                    className="w-full bg-gray-600 text-white rounded px-3 py-2"
+                    placeholder="your-oauth-token"
+                  />
+                </div>
+              )}
+
+              <div className="flex items-center gap-2">
+                <input
+                  type="checkbox"
+                  id="enabled"
+                  checked={newServer.enabled}
+                  onChange={(e) =>
+                    setNewServer({ ...newServer, enabled: e.target.checked })
+                  }
+                  className="rounded"
+                />
+                <label htmlFor="enabled" className="text-sm text-gray-300">
+                  Auto-connect when added
+                </label>
+              </div>
+
+              <div className="flex gap-2">
+                <button
+                  onClick={handleAddServer}
+                  className="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded"
+                >
+                  Add Server
+                </button>
+                <button
+                  onClick={() => setShowAddForm(false)}
+                  className="bg-gray-600 hover:bg-gray-700 text-white px-4 py-2 rounded"
+                >
+                  Cancel
+                </button>
+              </div>
+            </div>
+          </div>
+        )}
+
+        {/* Server List */}
+        <div className="space-y-4">
+          <h3 className="text-lg font-semibold text-white">
+            Configured Servers
+          </h3>
+
+          {Object.values(mcpState.servers).length === 0 ? (
+            <div className="text-gray-400 text-center py-8">
+              No MCP servers configured. Add one to get started!
+            </div>
+          ) : (
+            Object.values(mcpState.servers).map((config) => (
+              <div
+                key={config.config.id}
+                className="mb-4 p-2 border rounded-lg bg-gray-800"
+              >
+                <div className="flex items-center justify-between">
+                  <div>
+                    <span className="font-bold text-lg">
+                      {config.config.name}
+                    </span>
+                    <span className="ml-2 text-xs text-gray-400">
+                      {config.config.url}
+                    </span>
+                  </div>
+                  <div className="flex gap-2">
+                    {/* Test Connection */}
+                    <button
+                      onClick={() => handleTestConnection(config.config)}
+                      disabled={testingConnection === config.config.id}
+                      className="p-2 text-yellow-400 hover:text-yellow-300 disabled:opacity-50"
+                      title="Test Connection"
+                    >
+                      <TestTube size={16} />
+                    </button>
+
+                    {/* Connect/Disconnect */}
+                    <button
+                      onClick={() =>
+                        handleToggleConnection(
+                          config.config.id,
+                          config.isConnected
+                        )
+                      }
+                      className={`p-2 ${
+                        config.isConnected
+                          ? "text-green-400 hover:text-green-300"
+                          : "text-gray-400 hover:text-gray-300"
+                      }`}
+                      title={config.isConnected ? "Disconnect" : "Connect"}
+                    >
+                      {config.isConnected ? (
+                        <Wifi size={16} />
+                      ) : (
+                        <WifiOff size={16} />
+                      )}
+                    </button>
+
+                    {/* Remove Server */}
+                    <button
+                      onClick={() => removeServer(config.config.id)}
+                      className="p-2 text-red-400 hover:text-red-300"
+                      title="Remove Server"
+                    >
+                      <Trash2 size={16} />
+                    </button>
+                  </div>
+                </div>
+
+                {config.lastError && (
+                  <div className="mt-2 text-red-400 text-sm">
+                    Error: {config.lastError}
+                  </div>
+                )}
+
+                {config.isConnected && config.tools.length > 0 && (
+                  <div className="mt-3">
+                    <details className="text-sm">
+                      <summary className="text-gray-300 cursor-pointer">
+                        Available Tools ({config.tools.length})
+                      </summary>
+                      <div className="mt-2 space-y-1">
+                        {config.tools.map((tool) => (
+                          <div key={tool.name} className="text-gray-400 pl-4">
+                            • {tool.name} -{" "}
+                            {tool.description || "No description"}
+                          </div>
+                        ))}
+                      </div>
+                    </details>
+                  </div>
+                )}
+              </div>
+            ))
+          )}
+        </div>
+
+        {mcpState.error && (
+          <div className="mt-4 p-4 bg-red-900 border border-red-700 rounded-lg text-red-200">
+            <strong>Error:</strong> {mcpState.error}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};

src/hooks/useMCP.ts

@@ -0,0 +1,239 @@
+import { useState, useEffect, useCallback } from "react";
+import { MCPClientService } from "../services/mcpClient";
+import type {
+  MCPServerConfig,
+  MCPClientState,
+  ExtendedTool,
+} from "../types/mcp";
+import type { Tool as OriginalTool } from "../components/ToolItem";
+
+// Singleton instance
+let mcpClientInstance: MCPClientService | null = null;
+
+const getMCPClient = (): MCPClientService => {
+  if (!mcpClientInstance) {
+    mcpClientInstance = new MCPClientService();
+  }
+  return mcpClientInstance;
+};
+
+export const useMCP = () => {
+  const [mcpState, setMCPState] = useState<MCPClientState>({
+    servers: {},
+    isLoading: false,
+    error: undefined,
+  });
+
+  const mcpClient = getMCPClient();
+
+  // Subscribe to MCP state changes
+  useEffect(() => {
+    const handleStateChange = (state: MCPClientState) => {
+      console.log("MCP state change triggered:", Object.keys(state.servers));
+      setMCPState(state);
+    };
+
+    mcpClient.addStateListener(handleStateChange);
+
+    // Get initial state
+    setMCPState(mcpClient.getState());
+
+    return () => {
+      mcpClient.removeStateListener(handleStateChange);
+      // Don't cleanup the service itself as it's a singleton used across the app
+    };
+  }, [mcpClient]);
+
+  // Add a new MCP server
+  const addServer = useCallback(
+    async (config: MCPServerConfig): Promise<void> => {
+      return mcpClient.addServer(config);
+    },
+    [mcpClient]
+  );
+
+  // Remove an MCP server
+  const removeServer = useCallback(
+    async (serverId: string): Promise<void> => {
+      return mcpClient.removeServer(serverId);
+    },
+    [mcpClient]
+  );
+
+  // Connect to a server
+  const connectToServer = useCallback(
+    async (serverId: string): Promise<void> => {
+      return mcpClient.connectToServer(serverId);
+    },
+    [mcpClient]
+  );
+
+  // Disconnect from a server
+  const disconnectFromServer = useCallback(
+    async (serverId: string): Promise<void> => {
+      return mcpClient.disconnectFromServer(serverId);
+    },
+    [mcpClient]
+  );
+
+  // Test connection to a server
+  const testConnection = useCallback(
+    async (config: MCPServerConfig): Promise<boolean> => {
+      return mcpClient.testConnection(config);
+    },
+    [mcpClient]
+  );
+
+  // Call a tool on an MCP server
+  const callMCPTool = useCallback(
+    async (
+      serverId: string,
+      toolName: string,
+      args: Record<string, unknown>
+    ) => {
+      console.log("MCP tool called:", {
+        serverId,
+        toolName,
+        args,
+        timestamp: new Date().toISOString(),
+      });
+      console.trace("MCP tool call stack trace:");
+      return mcpClient.callTool(serverId, toolName, args);
+    },
+    [mcpClient]
+  );
+
+  // Get all available MCP tools
+  const getMCPTools = useCallback((): ExtendedTool[] => {
+    console.log(
+      "getMCPTools called - checking if this is being called frequently"
+    );
+    const mcpTools: ExtendedTool[] = [];
+
+    Object.entries(mcpState.servers).forEach(([serverId, connection]) => {
+      if (connection.isConnected && connection.config.enabled) {
+        connection.tools.forEach((mcpTool) => {
+          mcpTools.push({
+            id: `${serverId}:${mcpTool.name}`,
+            name: mcpTool.name,
+            enabled: true,
+            isCollapsed: false,
+            mcpServerId: serverId,
+            mcpTool: mcpTool,
+            isRemote: true,
+          });
+        });
+      }
+    });
+
+    return mcpTools;
+  }, [mcpState.servers]);
+
+  // Convert MCP tools to the format expected by the existing tool system
+  const getMCPToolsAsOriginalTools = useCallback((): OriginalTool[] => {
+    const mcpTools: OriginalTool[] = [];
+    let globalId = 10000; // Start with high numbers to avoid conflicts
+
+    Object.entries(mcpState.servers).forEach(([serverId, connection]) => {
+      if (connection.isConnected && connection.config.enabled) {
+        connection.tools.forEach((mcpTool) => {
+          // Convert tool name to valid JavaScript identifier and include server name for uniqueness
+          const serverName = connection.config.name
+            .replace(/[-\s]/g, "_")
+            .replace(/[^a-zA-Z0-9_]/g, "");
+          const toolName = mcpTool.name
+            .replace(/[-\s]/g, "_")
+            .replace(/[^a-zA-Z0-9_]/g, "");
+          const jsToolName = `${serverName}_${toolName}`;
+
+          // Create a JavaScript function that calls the MCP tool
+          const code = `/**
+ * ${mcpTool.description || `MCP tool from ${connection.config.name}`}
+ * Server: ${connection.config.name}
+ * ${Object.entries(mcpTool.inputSchema.properties || {})
+   .map(([name, prop]) => {
+     const p = prop as { type?: string; description?: string };
+     return `@param {${p.type || "any"}} ${name} - ${p.description || ""}`;
+   })
+   .join("\n * ")}
+ * @returns {Promise<any>} Tool execution result
+ */
+export async function ${jsToolName}(${Object.keys(
+            mcpTool.inputSchema.properties || {}
+          ).join(", ")}) {
+  // This is an MCP tool - execution is handled by the MCP client
+  return { mcpServerId: "${serverId}", toolName: "${
+            mcpTool.name
+          }", arguments: arguments };
+}
+
+export default (input, output) =>
+  React.createElement(
+    "div",
+    { className: "bg-blue-50 border border-blue-200 rounded-lg p-4" },
+    React.createElement(
+      "div",
+      { className: "flex items-center mb-3" },
+      React.createElement(
+        "div",
+        {
+          className:
+            "w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center mr-3",
+        },
+        "🌐",
+      ),
+      React.createElement(
+        "h3",
+        { className: "text-blue-900 font-semibold" },
+        "${mcpTool.name} (${connection.config.name})"
+      ),
+    ),
+    React.createElement(
+      "div",
+      { className: "text-sm mb-2" },
+      React.createElement(
+        "p",
+        { className: "text-blue-700 font-medium mb-1" },
+        \`Server: ${connection.config.name}\`
+      ),
+    ),
+  );`;
+
+          mcpTools.push({
+            id: globalId++,
+            name: jsToolName, // Use JavaScript-safe name for function calls
+            code: code,
+            enabled: true,
+            isCollapsed: false,
+          });
+        });
+      }
+    });
+
+    return mcpTools;
+  }, [mcpState.servers]);
+
+  // Connect to all enabled servers
+  const connectAll = useCallback(async (): Promise<void> => {
+    return mcpClient.connectAll();
+  }, [mcpClient]);
+
+  // Disconnect from all servers
+  const disconnectAll = useCallback(async (): Promise<void> => {
+    return mcpClient.disconnectAll();
+  }, [mcpClient]);
+
+  return {
+    mcpState,
+    addServer,
+    removeServer,
+    connectToServer,
+    disconnectFromServer,
+    testConnection,
+    callMCPTool,
+    getMCPTools,
+    getMCPToolsAsOriginalTools,
+    connectAll,
+    disconnectAll,
+  };
+};

src/services/mcpClient.ts

@@ -0,0 +1,444 @@
+import { Client } from "@modelcontextprotocol/sdk/client/index.js";
+import { WebSocketClientTransport } from "@modelcontextprotocol/sdk/client/websocket.js";
+import { StreamableHTTPClientTransport } from "@modelcontextprotocol/sdk/client/streamableHttp.js";
+import { SSEClientTransport } from "@modelcontextprotocol/sdk/client/sse.js";
+import type { Tool } from "@modelcontextprotocol/sdk/types.js";
+
+import type {
+  MCPServerConfig,
+  MCPServerConnection,
+  MCPClientState,
+  MCPToolResult,
+} from "../types/mcp.js";
+
+export class MCPClientService {
+  private clients: Map<string, Client> = new Map();
+  private connections: Map<string, MCPServerConnection> = new Map();
+  private listeners: Array<(state: MCPClientState) => void> = [];
+  private healthCheckInterval: NodeJS.Timeout | null = null;
+
+  constructor() {
+    // Load saved server configurations from localStorage
+    this.loadServerConfigs();
+
+    // Start health check every 5 minutes
+    this.startHealthCheck();
+  }
+
+  // Start periodic health check (every 5 minutes)
+  private startHealthCheck() {
+    // Clear any existing interval
+    if (this.healthCheckInterval) {
+      clearInterval(this.healthCheckInterval);
+    }
+
+    // Set up new interval for 5 minutes (300,000 ms)
+    this.healthCheckInterval = setInterval(() => {
+      this.performHealthCheck();
+    }, 5 * 60 * 1000);
+  }
+
+  // Perform health check on all connected servers
+  private async performHealthCheck() {
+    console.log("Performing MCP health check...");
+
+    for (const [serverId, connection] of this.connections) {
+      if (connection.config.enabled && connection.isConnected) {
+        try {
+          const client = this.clients.get(serverId);
+          if (client) {
+            // Try to list tools as a health check
+            await client.listTools();
+            console.log(`Health check passed for ${serverId}`);
+          }
+        } catch (error) {
+          console.warn(`Health check failed for ${serverId}:`, error);
+          // Mark as disconnected and try to reconnect
+          connection.isConnected = false;
+          connection.lastError = "Health check failed";
+
+          // Try to reconnect
+          try {
+            await this.connectToServer(serverId);
+            console.log(`Reconnected to ${serverId}`);
+          } catch (reconnectError) {
+            console.error(
+              `Failed to reconnect to ${serverId}:`,
+              reconnectError
+            );
+          }
+        }
+      }
+    }
+
+    this.notifyStateChange();
+  }
+
+  // Clean up health check on destruction
+  public cleanup() {
+    if (this.healthCheckInterval) {
+      clearInterval(this.healthCheckInterval);
+      this.healthCheckInterval = null;
+    }
+  }
+
+  // Add state change listener
+  addStateListener(listener: (state: MCPClientState) => void) {
+    this.listeners.push(listener);
+  }
+
+  // Remove state change listener
+  removeStateListener(listener: (state: MCPClientState) => void) {
+    const index = this.listeners.indexOf(listener);
+    if (index > -1) {
+      this.listeners.splice(index, 1);
+    }
+  }
+
+  // Notify all listeners of state changes
+  private notifyStateChange() {
+    const state = this.getState();
+    this.listeners.forEach((listener) => listener(state));
+  }
+
+  // Get current MCP client state
+  getState(): MCPClientState {
+    const servers: Record<string, MCPServerConnection> = {};
+    for (const [id, connection] of this.connections) {
+      servers[id] = connection;
+    }
+
+    return {
+      servers,
+      isLoading: false,
+      error: undefined,
+    };
+  }
+
+  // Load server configurations from localStorage
+  private loadServerConfigs() {
+    try {
+      const stored = localStorage.getItem("mcp-servers");
+      if (stored) {
+        const configs: MCPServerConfig[] = JSON.parse(stored);
+        configs.forEach((config) => {
+          const connection: MCPServerConnection = {
+            config,
+            isConnected: false,
+            tools: [],
+            lastError: undefined,
+            lastConnected: undefined,
+          };
+          this.connections.set(config.id, connection);
+        });
+      }
+    } catch (error) {
+      console.error("Failed to load MCP server configs:", error);
+    }
+  }
+
+  // Save server configurations to localStorage
+  private saveServerConfigs() {
+    try {
+      const configs = Array.from(this.connections.values()).map(
+        (conn) => conn.config
+      );
+      localStorage.setItem("mcp-servers", JSON.stringify(configs));
+    } catch (error) {
+      console.error("Failed to save MCP server configs:", error);
+    }
+  }
+
+  // Add a new MCP server
+  async addServer(config: MCPServerConfig): Promise<void> {
+    const connection: MCPServerConnection = {
+      config,
+      isConnected: false,
+      tools: [],
+      lastError: undefined,
+      lastConnected: undefined,
+    };
+
+    this.connections.set(config.id, connection);
+    this.saveServerConfigs();
+    this.notifyStateChange();
+
+    // Auto-connect if enabled
+    if (config.enabled) {
+      await this.connectToServer(config.id);
+    }
+  }
+
+  // Remove an MCP server
+  async removeServer(serverId: string): Promise<void> {
+    // Disconnect first if connected
+    await this.disconnectFromServer(serverId);
+
+    // Remove from our maps
+    this.connections.delete(serverId);
+    this.clients.delete(serverId);
+
+    this.saveServerConfigs();
+    this.notifyStateChange();
+  }
+
+  // Connect to an MCP server
+  async connectToServer(serverId: string): Promise<void> {
+    const connection = this.connections.get(serverId);
+    if (!connection) {
+      throw new Error(`Server ${serverId} not found`);
+    }
+
+    if (connection.isConnected) {
+      return; // Already connected
+    }
+
+    try {
+      // Create client
+      const client = new Client(
+        {
+          name: "LFM2-WebGPU",
+          version: "1.0.0",
+        },
+        {
+          capabilities: {
+            tools: {},
+          },
+        }
+      );
+
+      // Create transport based on config
+      let transport;
+      const url = new URL(connection.config.url);
+
+      // Prepare headers for authentication
+      const headers: Record<string, string> = {};
+      if (connection.config.auth) {
+        switch (connection.config.auth.type) {
+          case "bearer":
+            if (connection.config.auth.token) {
+              headers[
+                "Authorization"
+              ] = `Bearer ${connection.config.auth.token}`;
+            }
+            break;
+          case "basic":
+            if (
+              connection.config.auth.username &&
+              connection.config.auth.password
+            ) {
+              const credentials = btoa(
+                `${connection.config.auth.username}:${connection.config.auth.password}`
+              );
+              headers["Authorization"] = `Basic ${credentials}`;
+            }
+            break;
+          case "oauth":
+            if (connection.config.auth.token) {
+              headers[
+                "Authorization"
+              ] = `Bearer ${connection.config.auth.token}`;
+            }
+            break;
+        }
+      }
+
+      switch (connection.config.transport) {
+        case "websocket": {
+          // Convert HTTP/HTTPS URLs to WS/WSS
+          const wsUrl = new URL(connection.config.url);
+          wsUrl.protocol = wsUrl.protocol === "https:" ? "wss:" : "ws:";
+          transport = new WebSocketClientTransport(wsUrl);
+          // Note: WebSocket auth headers would need to be passed differently
+          // For now, auth is only supported on HTTP-based transports
+          break;
+        }
+
+        case "streamable-http":
+          transport = new StreamableHTTPClientTransport(url, {
+            requestInit:
+              Object.keys(headers).length > 0 ? { headers } : undefined,
+          });
+          break;
+
+        case "sse":
+          transport = new SSEClientTransport(url, {
+            requestInit:
+              Object.keys(headers).length > 0 ? { headers } : undefined,
+          });
+          break;
+
+        default:
+          throw new Error(
+            `Unsupported transport: ${connection.config.transport}`
+          );
+      }
+
+      // Set up error handling
+      client.onerror = (error) => {
+        console.error(`MCP Client error for ${serverId}:`, error);
+        connection.lastError = error.message;
+        connection.isConnected = false;
+        this.notifyStateChange();
+      };
+
+      // Connect to the server
+      await client.connect(transport);
+
+      // List available tools
+      const toolsResult = await client.listTools();
+
+      // Update connection state
+      connection.isConnected = true;
+      connection.tools = toolsResult.tools;
+      connection.lastError = undefined;
+      connection.lastConnected = new Date();
+
+      // Store client reference
+      this.clients.set(serverId, client);
+
+      this.notifyStateChange();
+    } catch (error) {
+      console.error(`Failed to connect to MCP server ${serverId}:`, error);
+      connection.isConnected = false;
+      connection.lastError =
+        error instanceof Error ? error.message : "Connection failed";
+      this.notifyStateChange();
+      throw error;
+    }
+  }
+
+  // Disconnect from an MCP server
+  async disconnectFromServer(serverId: string): Promise<void> {
+    const client = this.clients.get(serverId);
+    const connection = this.connections.get(serverId);
+
+    if (client) {
+      try {
+        await client.close();
+      } catch (error) {
+        console.error(`Error disconnecting from ${serverId}:`, error);
+      }
+      this.clients.delete(serverId);
+    }
+
+    if (connection) {
+      connection.isConnected = false;
+      connection.tools = [];
+      this.notifyStateChange();
+    }
+  }
+
+  // Get all tools from all connected servers
+  getAllTools(): Tool[] {
+    const allTools: Tool[] = [];
+
+    for (const connection of this.connections.values()) {
+      if (connection.isConnected && connection.config.enabled) {
+        allTools.push(...connection.tools);
+      }
+    }
+
+    return allTools;
+  }
+
+  // Call a tool on an MCP server
+  async callTool(
+    serverId: string,
+    toolName: string,
+    args: Record<string, unknown>
+  ): Promise<MCPToolResult> {
+    const client = this.clients.get(serverId);
+    const connection = this.connections.get(serverId);
+
+    if (!client || !connection?.isConnected) {
+      throw new Error(`Not connected to server ${serverId}`);
+    }
+
+    try {
+      const result = await client.callTool({
+        name: toolName,
+        arguments: args,
+      });
+
+      return {
+        content: Array.isArray(result.content) ? result.content : [],
+        isError: Boolean(result.isError),
+      };
+    } catch (error) {
+      console.error(`Error calling tool ${toolName} on ${serverId}:`, error);
+      throw error;
+    }
+  }
+
+  // Test connection to a server without saving it
+  async testConnection(config: MCPServerConfig): Promise<boolean> {
+    try {
+      const client = new Client(
+        {
+          name: "LFM2-WebGPU-Test",
+          version: "1.0.0",
+        },
+        {
+          capabilities: {
+            tools: {},
+          },
+        }
+      );
+
+      let transport;
+      const url = new URL(config.url);
+
+      switch (config.transport) {
+        case "websocket": {
+          const wsUrl = new URL(config.url);
+          wsUrl.protocol = wsUrl.protocol === "https:" ? "wss:" : "ws:";
+          transport = new WebSocketClientTransport(wsUrl);
+          break;
+        }
+
+        case "streamable-http":
+          transport = new StreamableHTTPClientTransport(url);
+          break;
+
+        case "sse":
+          transport = new SSEClientTransport(url);
+          break;
+
+        default:
+          throw new Error(`Unsupported transport: ${config.transport}`);
+      }
+
+      await client.connect(transport);
+      await client.close();
+      return true;
+    } catch (error) {
+      console.error("Test connection failed:", error);
+      return false;
+    }
+  }
+
+  // Connect to all enabled servers
+  async connectAll(): Promise<void> {
+    const promises = Array.from(this.connections.entries())
+      .filter(
+        ([, connection]) => connection.config.enabled && !connection.isConnected
+      )
+      .map(([serverId]) =>
+        this.connectToServer(serverId).catch((error) => {
+          console.error(`Failed to connect to ${serverId}:`, error);
+        })
+      );
+
+    await Promise.all(promises);
+  }
+
+  // Disconnect from all servers
+  async disconnectAll(): Promise<void> {
+    const promises = Array.from(this.connections.keys()).map((serverId) =>
+      this.disconnectFromServer(serverId)
+    );
+
+    await Promise.all(promises);
+  }
+}

src/services/oauth.ts

@@ -0,0 +1,54 @@
+// Utility for OAuth authentication with MCP servers
+// Usage: import { authenticateWithOAuth } from "./oauth";
+
+export async function authenticateWithOAuth({
+  authUrl,
+  clientId,
+  redirectUri,
+  scope = "openid profile",
+}: {
+  authUrl: string;
+  clientId: string;
+  redirectUri: string;
+  scope?: string;
+}): Promise<string> {
+  // Open a popup for OAuth login
+  const state = Math.random().toString(36).substring(2);
+  const url = `${authUrl}?response_type=token&client_id=${encodeURIComponent(
+    clientId
+  )}&redirect_uri=${encodeURIComponent(redirectUri)}&scope=${encodeURIComponent(
+    scope
+  )}&state=${state}`;
+
+  return new Promise((resolve, reject) => {
+    const popup = window.open(url, "oauth-login", "width=500,height=700");
+    if (!popup) return reject("Popup blocked");
+
+    const interval = setInterval(() => {
+      try {
+        if (!popup || popup.closed) {
+          clearInterval(interval);
+          reject("Popup closed");
+        }
+        // Check for access token in URL
+        const href = popup.location.href;
+        if (href.startsWith(redirectUri)) {
+          const hash = popup.location.hash;
+          const params = new URLSearchParams(hash.substring(1));
+          const token = params.get("access_token");
+          if (token) {
+            clearInterval(interval);
+            popup.close();
+            resolve(token);
+          } else {
+            clearInterval(interval);
+            popup.close();
+            reject("No access token found");
+          }
+        }
+      } catch (e) {
+        // Ignore cross-origin errors until redirect
+      }
+    }, 500);
+  });
+}

src/types/mcp.ts

@@ -0,0 +1,58 @@
+import type { Tool as MCPTool } from "@modelcontextprotocol/sdk/types.js";
+
+export interface MCPServerConfig {
+  id: string;
+  name: string;
+  url: string;
+  enabled: boolean;
+  transport: 'websocket' | 'sse' | 'streamable-http';
+  auth?: {
+    type: 'bearer' | 'basic' | 'oauth';
+    token?: string;
+    username?: string;
+    password?: string;
+  };
+}
+
+export interface MCPServerConnection {
+  config: MCPServerConfig;
+  isConnected: boolean;
+  tools: MCPTool[];
+  lastError?: string;
+  lastConnected?: Date;
+}
+
+// Extended Tool interface to support both local and MCP tools
+export interface ExtendedTool {
+  id: number | string;
+  name: string;
+  enabled: boolean;
+  isCollapsed?: boolean;
+  
+  // Local tool properties
+  code?: string;
+  renderer?: string;
+  
+  // MCP tool properties
+  mcpServerId?: string;
+  mcpTool?: MCPTool;
+  isRemote?: boolean;
+}
+
+// MCP Tool execution result
+export interface MCPToolResult {
+  content: Array<{
+    type: string;
+    text?: string;
+    data?: unknown;
+    mimeType?: string;
+  }>;
+  isError?: boolean;
+}
+
+// MCP Client state
+export interface MCPClientState {
+  servers: Record<string, MCPServerConnection>;
+  isLoading: boolean;
+  error?: string;
+}