Add MCP support

package.json

@@ -11,12 +11,14 @@
   },
   "dependencies": {
     "@huggingface/transformers": "^3.7.1",
+    "@modelcontextprotocol/sdk": "^1.17.3",
     "@monaco-editor/react": "^4.7.0",
     "@tailwindcss/vite": "^4.1.11",
     "idb": "^8.0.3",
     "lucide-react": "^0.535.0",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
+    "react-router-dom": "^7.8.0",
     "tailwindcss": "^4.1.11"
   },
   "devDependencies": {

src/App.tsx

@@ -6,8 +6,18 @@ import React, {
   useMemo,
 } from "react";
 import { openDB, type IDBPDatabase } from "idb";
-import { Play, Plus, Zap, RotateCcw, Settings, X } from "lucide-react";
+import {
+  Play,
+  Plus,
+  Zap,
+  RotateCcw,
+  Settings,
+  X,
+  PanelRightClose,
+  PanelRightOpen,
+} from "lucide-react";
 import { useLLM } from "./hooks/useLLM";
+import { useMCP } from "./hooks/useMCP";
 
 import type { Tool } from "./components/ToolItem";
 
@@ -31,14 +41,15 @@ import ToolCallIndicator from "./components/ToolCallIndicator";
 import ToolItem from "./components/ToolItem";
 import ResultBlock from "./components/ResultBlock";
 import ExamplePrompts from "./components/ExamplePrompts";
+import { MCPServerManager } from "./components/MCPServerManager";
 
 import { LoadingScreen } from "./components/LoadingScreen";
 
 interface RenderInfo {
   call: string;
-  result?: any;
+  result?: unknown;
   renderer?: string;
-  input?: Record<string, any>;
+  input?: Record<string, unknown>;
   error?: string;
 }
 
@@ -71,7 +82,7 @@ async function getDB(): Promise<IDBPDatabase> {
 
 const App: React.FC = () => {
   const [systemPrompt, setSystemPrompt] = useState<string>(
-    DEFAULT_SYSTEM_PROMPT,
+    DEFAULT_SYSTEM_PROMPT
   );
   const [isSystemPromptModalOpen, setIsSystemPromptModalOpen] =
     useState<boolean>(false);
@@ -82,10 +93,12 @@ const App: React.FC = () => {
   const [isGenerating, setIsGenerating] = useState<boolean>(false);
   const isMobile = useMemo(isMobileOrTablet, []);
   const [selectedModelId, setSelectedModelId] = useState<string>(
-    isMobile ? "350M" : "1.2B",
+    isMobile ? "350M" : "1.2B"
   );
   const [isModelDropdownOpen, setIsModelDropdownOpen] =
     useState<boolean>(false);
+  const [isMCPManagerOpen, setIsMCPManagerOpen] = useState<boolean>(false);
+  const [isToolsPanelVisible, setIsToolsPanelVisible] = useState<boolean>(true);
   const chatContainerRef = useRef<HTMLDivElement>(null);
   const debounceTimers = useRef<Record<number, NodeJS.Timeout>>({});
   const toolsContainerRef = useRef<HTMLDivElement>(null);
@@ -100,6 +113,13 @@ const App: React.FC = () => {
     clearPastKeyValues,
   } = useLLM(selectedModelId);
 
+  // MCP integration
+  const {
+    getMCPToolsAsOriginalTools,
+    callMCPTool,
+    connectAll: connectAllMCPServers,
+  } = useMCP();
+
   const loadTools = useCallback(async (): Promise<void> => {
     const db = await getDB();
     const allTools: Tool[] = await db.getAll(STORE_NAME);
@@ -111,7 +131,7 @@ const App: React.FC = () => {
           code,
           enabled: true,
           isCollapsed: false,
-        }),
+        })
       );
       const tx = db.transaction(STORE_NAME, "readwrite");
       await Promise.all(defaultTools.map((tool) => tx.store.put(tool)));
@@ -120,11 +140,19 @@ const App: React.FC = () => {
     } else {
       setTools(allTools.map((t) => ({ ...t, isCollapsed: false })));
     }
-  }, []);
+
+    // Load MCP tools and merge them
+    const mcpTools = getMCPToolsAsOriginalTools();
+    setTools((prevTools) => [...prevTools, ...mcpTools]);
+  }, [getMCPToolsAsOriginalTools]);
 
   useEffect(() => {
     loadTools();
-  }, [loadTools]);
+    // Connect to MCP servers on startup
+    connectAllMCPServers().catch((error) => {
+      console.error("Failed to connect to MCP servers:", error);
+    });
+  }, [loadTools, connectAllMCPServers]);
 
   useEffect(() => {
     if (chatContainerRef.current) {
@@ -202,16 +230,16 @@ const App: React.FC = () => {
   const toggleToolCollapsed = (id: number): void => {
     setTools(
       tools.map((tool) =>
-        tool.id === id ? { ...tool, isCollapsed: !tool.isCollapsed } : tool,
-      ),
+        tool.id === id ? { ...tool, isCollapsed: !tool.isCollapsed } : tool
+      )
     );
   };
 
   const expandTool = (id: number): void => {
     setTools(
       tools.map((tool) =>
-        tool.id === id ? { ...tool, isCollapsed: false } : tool,
-      ),
+        tool.id === id ? { ...tool, isCollapsed: false } : tool
+      )
     );
   };
 
@@ -238,21 +266,63 @@ const App: React.FC = () => {
     const toolToUse = tools.find((t) => t.name === name && t.enabled);
     if (!toolToUse) throw new Error(`Tool '${name}' not found or is disabled.`);
 
+    // Check if this is an MCP tool
+    const isMCPTool = toolToUse.code?.includes("mcpServerId:");
+    if (isMCPTool) {
+      // Extract MCP server ID and tool name from the code
+      const mcpServerMatch = toolToUse.code?.match(/mcpServerId: "([^"]+)"/);
+      const mcpToolMatch = toolToUse.code?.match(/toolName: "([^"]+)"/);
+
+      if (mcpServerMatch && mcpToolMatch) {
+        const serverId = mcpServerMatch[1];
+        const toolName = mcpToolMatch[1];
+
+        // Convert positional and keyword args to a single args object
+        const { functionCode } = extractFunctionAndRenderer(toolToUse.code);
+        const schema = generateSchemaFromCode(functionCode);
+        const paramNames = Object.keys(schema.parameters.properties);
+
+        const args: Record<string, unknown> = {};
+
+        // Map positional args
+        for (
+          let i = 0;
+          i < Math.min(positionalArgs.length, paramNames.length);
+          i++
+        ) {
+          args[paramNames[i]] = positionalArgs[i];
+        }
+
+        // Map keyword args
+        Object.entries(keywordArgs).forEach(([key, value]) => {
+          args[key] = value;
+        });
+
+        // Call MCP tool
+        const result = await callMCPTool(serverId, toolName, args);
+        return JSON.stringify(result);
+      }
+    }
+
+    // Handle local tools as before
     const { functionCode } = extractFunctionAndRenderer(toolToUse.code);
     const schema = generateSchemaFromCode(functionCode);
     const paramNames = Object.keys(schema.parameters.properties);
 
-    const finalArgs: any[] = [];
+    const finalArgs: unknown[] = [];
     const requiredParams = schema.parameters.required || [];
 
     for (let i = 0; i < paramNames.length; ++i) {
       const paramName = paramNames[i];
       if (i < positionalArgs.length) {
         finalArgs.push(positionalArgs[i]);
-      } else if (keywordArgs.hasOwnProperty(paramName)) {
+      } else if (Object.prototype.hasOwnProperty.call(keywordArgs, paramName)) {
         finalArgs.push(keywordArgs[paramName]);
       } else if (
-        schema.parameters.properties[paramName].hasOwnProperty("default")
+        Object.prototype.hasOwnProperty.call(
+          schema.parameters.properties[paramName],
+          "default"
+        )
       ) {
         finalArgs.push(schema.parameters.properties[paramName].default);
       } else if (!requiredParams.includes(paramName)) {
@@ -265,12 +335,12 @@ const App: React.FC = () => {
     const bodyMatch = functionCode.match(/function[^{]+\{([\s\S]*)\}/);
     if (!bodyMatch) {
       throw new Error(
-        "Could not parse function body. Ensure it's a standard `function` declaration.",
+        "Could not parse function body. Ensure it's a standard `function` declaration."
       );
     }
     const body = bodyMatch[1];
     const AsyncFunction = Object.getPrototypeOf(
-      async function () {},
+      async function () {}
     ).constructor;
     const func = new AsyncFunction(...paramNames, body);
     const result = await func(...finalArgs);
@@ -278,7 +348,7 @@ const App: React.FC = () => {
   };
 
   const executeToolCalls = async (
-    toolCallContent: string,
+    toolCallContent: string
   ): Promise<RenderInfo[]> => {
     const toolCalls = extractPythonicCalls(toolCallContent);
     if (toolCalls.length === 0)
@@ -303,16 +373,16 @@ const App: React.FC = () => {
           parsedResult = result;
         }
 
-        let namedParams: Record<string, any> = Object.create(null);
+        let namedParams: Record<string, unknown> = Object.create(null);
         if (parsedCall && toolUsed) {
           const schema = generateSchemaFromCode(
-            extractFunctionAndRenderer(toolUsed.code).functionCode,
+            extractFunctionAndRenderer(toolUsed.code).functionCode
           );
           const paramNames = Object.keys(schema.parameters.properties);
           namedParams = mapArgsToNamedParams(
             paramNames,
             parsedCall.positionalArgs,
-            parsedCall.keywordArgs,
+            parsedCall.keywordArgs
           );
         }
 
@@ -334,7 +404,7 @@ const App: React.FC = () => {
     if (!input.trim() || !isReady) return;
 
     const userMessage: Message = { role: "user", content: input };
-    let currentMessages: Message[] = [...messages, userMessage];
+    const currentMessages: Message[] = [...messages, userMessage];
     setMessages(currentMessages);
     setInput("");
     setIsGenerating(true);
@@ -366,7 +436,7 @@ const App: React.FC = () => {
               };
               return updated;
             });
-          },
+          }
         );
 
         currentMessages.push({ role: "assistant", content: response });
@@ -425,7 +495,7 @@ const App: React.FC = () => {
         console.error("Failed to save system prompt:", error);
       }
     },
-    [],
+    []
   );
 
   const loadSelectedModel = useCallback(async (): Promise<void> => {
@@ -434,7 +504,7 @@ const App: React.FC = () => {
     } catch (error) {
       console.error("Failed to load model:", error);
     }
-  }, [selectedModelId, loadModel]);
+  }, [loadModel]);
 
   const loadSelectedModelId = useCallback(async (): Promise<void> => {
     try {
@@ -484,7 +554,7 @@ const App: React.FC = () => {
         console.error("Failed to save selected model ID:", error);
       }
     },
-    [],
+    []
   );
 
   useEffect(() => {
@@ -535,7 +605,7 @@ const App: React.FC = () => {
               };
               return updated;
             });
-          },
+          }
         );
 
         currentMessages.push({ role: "assistant", content: response });
@@ -587,7 +657,11 @@ const App: React.FC = () => {
         />
       ) : (
         <div className="flex h-screen text-white">
-          <div className="w-1/2 flex flex-col p-4">
+          <div
+            className={`flex flex-col p-4 transition-all duration-300 ${
+              isToolsPanelVisible ? "w-1/2" : "w-full"
+            }`}
+          >
             <div className="flex items-center justify-between mb-4">
               <div className="flex items-center gap-3">
                 <h1 className="text-3xl font-bold text-gray-200">
@@ -618,6 +692,28 @@ const App: React.FC = () => {
                 >
                   <Settings size={16} />
                 </button>
+                <button
+                  onClick={() => setIsMCPManagerOpen(true)}
+                  className="h-10 flex items-center px-3 py-2 rounded-lg font-bold transition-colors bg-blue-600 hover:bg-blue-700 text-sm"
+                  title="Manage MCP Servers"
+                >
+                  🌐
+                </button>
+                <button
+                  onClick={() => setIsToolsPanelVisible(!isToolsPanelVisible)}
+                  className="h-10 flex items-center px-3 py-2 rounded-lg font-bold transition-colors bg-gray-600 hover:bg-gray-700 text-sm"
+                  title={
+                    isToolsPanelVisible
+                      ? "Hide Tools Panel"
+                      : "Show Tools Panel"
+                  }
+                >
+                  {isToolsPanelVisible ? (
+                    <PanelRightClose size={16} />
+                  ) : (
+                    <PanelRightOpen size={16} />
+                  )}
+                </button>
               </div>
             </div>
 
@@ -643,7 +739,7 @@ const App: React.FC = () => {
                     );
                   } else if (msg.role === "assistant") {
                     const isToolCall = msg.content.includes(
-                      "<|tool_call_start|>",
+                      "<|tool_call_start|>"
                     );
 
                     if (isToolCall) {
@@ -652,7 +748,7 @@ const App: React.FC = () => {
                       const hasError =
                         isCompleted &&
                         (nextMessage as ToolMessage).renderInfo.some(
-                          (info) => !!info.error,
+                          (info) => !!info.error
                         );
 
                       return (
@@ -680,7 +776,7 @@ const App: React.FC = () => {
                   } else if (msg.role === "tool") {
                     const visibleToolResults = msg.renderInfo.filter(
                       (info) =>
-                        info.error || (info.result != null && info.renderer),
+                        info.error || (info.result != null && info.renderer)
                     );
 
                     if (visibleToolResults.length === 0) return null;
@@ -745,35 +841,37 @@ const App: React.FC = () => {
             </div>
           </div>
 
-          <div className="w-1/2 flex flex-col p-4 border-l border-gray-700">
-            <div className="flex justify-between items-center mb-4">
-              <h2 className="text-2xl font-bold text-teal-400">Tools</h2>
-              <button
-                onClick={addTool}
-                className="flex items-center bg-teal-600 hover:bg-teal-700 text-white font-bold py-2 px-4 rounded-lg transition-colors"
+          {isToolsPanelVisible && (
+            <div className="w-1/2 flex flex-col p-4 border-l border-gray-700 transition-all duration-300">
+              <div className="flex justify-between items-center mb-4">
+                <h2 className="text-2xl font-bold text-teal-400">Tools</h2>
+                <button
+                  onClick={addTool}
+                  className="flex items-center bg-teal-600 hover:bg-teal-700 text-white font-bold py-2 px-4 rounded-lg transition-colors"
+                >
+                  <Plus size={16} className="mr-2" /> Add Tool
+                </button>
+              </div>
+              <div
+                ref={toolsContainerRef}
+                className="flex-grow bg-gray-800 rounded-lg p-4 overflow-y-auto space-y-3"
               >
-                <Plus size={16} className="mr-2" /> Add Tool
-              </button>
-            </div>
-            <div
-              ref={toolsContainerRef}
-              className="flex-grow bg-gray-800 rounded-lg p-4 overflow-y-auto space-y-3"
-            >
-              {tools.map((tool) => (
-                <ToolItem
-                  key={tool.id}
-                  tool={tool}
-                  onToggleEnabled={() => toggleToolEnabled(tool.id)}
-                  onToggleCollapsed={() => toggleToolCollapsed(tool.id)}
-                  onExpand={() => expandTool(tool.id)}
-                  onDelete={() => deleteTool(tool.id)}
-                  onCodeChange={(newCode) =>
-                    handleToolCodeChange(tool.id, newCode)
-                  }
-                />
-              ))}
+                {tools.map((tool) => (
+                  <ToolItem
+                    key={tool.id}
+                    tool={tool}
+                    onToggleEnabled={() => toggleToolEnabled(tool.id)}
+                    onToggleCollapsed={() => toggleToolCollapsed(tool.id)}
+                    onExpand={() => expandTool(tool.id)}
+                    onDelete={() => deleteTool(tool.id)}
+                    onCodeChange={(newCode) =>
+                      handleToolCodeChange(tool.id, newCode)
+                    }
+                  />
+                ))}
+              </div>
             </div>
-          </div>
+          )}
         </div>
       )}
 
@@ -819,6 +917,12 @@ const App: React.FC = () => {
           </div>
         </div>
       )}
+
+      {/* MCP Server Manager Modal */}
+      <MCPServerManager
+        isOpen={isMCPManagerOpen}
+        onClose={() => setIsMCPManagerOpen(false)}
+      />
     </div>
   );
 };

src/components/MCPServerManager.tsx

@@ -0,0 +1,509 @@
+import React, { useState } from "react";
+import { discoverOAuthEndpoints, startOAuthFlow } from "../services/oauth";
+import { Plus, Server, Wifi, WifiOff, Trash2, TestTube } from "lucide-react";
+import { useMCP } from "../hooks/useMCP";
+import type { MCPServerConfig } from "../types/mcp";
+import { STORAGE_KEYS, DEFAULTS } from "../config/constants";
+
+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 [notification, setNotification] = useState<{
+    message: string;
+    type: 'success' | 'error';
+  } | 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()}`,
+    };
+
+    // Persist name and transport for OAuth flow
+    localStorage.setItem(STORAGE_KEYS.MCP_SERVER_NAME, newServer.name);
+    localStorage.setItem(STORAGE_KEYS.MCP_SERVER_TRANSPORT, newServer.transport);
+
+    try {
+      await addServer(serverConfig);
+      setNewServer({
+        name: "",
+        url: "",
+        enabled: true,
+        transport: "streamable-http",
+        auth: {
+          type: "bearer",
+        },
+      });
+      setShowAddForm(false);
+    } catch (error) {
+      setNotification({
+        message: `Failed to add server: ${error instanceof Error ? error.message : 'Unknown error'}`,
+        type: 'error'
+      });
+      setTimeout(() => setNotification(null), DEFAULTS.OAUTH_ERROR_TIMEOUT);
+    }
+  };
+
+  const handleTestConnection = async (config: MCPServerConfig) => {
+    setTestingConnection(config.id);
+    try {
+      const success = await testConnection(config);
+      if (success) {
+        setNotification({ message: "Connection test successful!", type: 'success' });
+      } else {
+        setNotification({ message: "Connection test failed. Please check your configuration.", type: 'error' });
+      }
+    } catch (error) {
+      setNotification({ message: `Connection test failed: ${error}`, type: 'error' });
+    } finally {
+      setTestingConnection(null);
+      // Auto-hide notification after 3 seconds
+      setTimeout(() => setNotification(null), DEFAULTS.NOTIFICATION_TIMEOUT);
+    }
+  };
+
+  const handleToggleConnection = async (
+    serverId: string,
+    isConnected: boolean
+  ) => {
+    try {
+      if (isConnected) {
+        await disconnectFromServer(serverId);
+      } else {
+        await connectToServer(serverId);
+      }
+    } catch (error) {
+      setNotification({
+        message: `Failed to toggle connection: ${error instanceof Error ? error.message : 'Unknown error'}`,
+        type: 'error'
+      });
+      setTimeout(() => setNotification(null), DEFAULTS.OAUTH_ERROR_TIMEOUT);
+    }
+  };
+
+  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 Authorization
+                  </label>
+                  <button
+                    className="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded mb-2"
+                    type="button"
+                    onClick={async () => {
+                      try {
+                        // Persist name and transport for OAuthCallback
+                        localStorage.setItem(STORAGE_KEYS.MCP_SERVER_NAME, newServer.name);
+                        localStorage.setItem(
+                          STORAGE_KEYS.MCP_SERVER_TRANSPORT,
+                          newServer.transport
+                        );
+                        const endpoints = await discoverOAuthEndpoints(
+                          newServer.url
+                        );
+                        
+                        if (!endpoints.clientId || !endpoints.redirectUri) {
+                          throw new Error("Missing required OAuth configuration (clientId or redirectUri)");
+                        }
+                        
+                        startOAuthFlow({
+                          authorizationEndpoint:
+                            endpoints.authorizationEndpoint,
+                          clientId: endpoints.clientId as string,
+                          redirectUri: endpoints.redirectUri as string,
+                          scopes: (endpoints.scopes || []) as string[],
+                        });
+                      } catch (err) {
+                        setNotification({
+                          message: "OAuth discovery failed: " +
+                            (err instanceof Error ? err.message : String(err)),
+                          type: 'error'
+                        });
+                        setTimeout(() => setNotification(null), DEFAULTS.OAUTH_ERROR_TIMEOUT);
+                      }
+                    }}
+                  >
+                    Connect with OAuth
+                  </button>
+                  <p className="text-xs text-gray-400">
+                    You will be redirected to authorize this app with the MCP
+                    server.
+                  </p>
+                </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((connection) => (
+              <div
+                key={connection.config.id}
+                className="bg-gray-700 rounded-lg p-4"
+              >
+                <div className="flex items-center justify-between">
+                  <div className="flex items-center gap-3">
+                    <div
+                      className={`w-3 h-3 rounded-full ${
+                        connection.isConnected ? "bg-green-400" : "bg-red-400"
+                      }`}
+                    />
+                    <div>
+                      <h4 className="text-white font-medium">
+                        {connection.config.name}
+                      </h4>
+                      <p className="text-gray-400 text-sm">
+                        {connection.config.url}
+                      </p>
+                      <p className="text-gray-500 text-xs">
+                        Transport: {connection.config.transport}
+                        {connection.config.auth &&
+                          ` • Auth: ${connection.config.auth.type}`}
+                        {connection.isConnected &&
+                          ` • ${connection.tools.length} tools available`}
+                      </p>
+                    </div>
+                  </div>
+
+                  <div className="flex items-center gap-2">
+                    {/* Test Connection */}
+                    <button
+                      onClick={() => handleTestConnection(connection.config)}
+                      disabled={testingConnection === connection.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(
+                          connection.config.id,
+                          connection.isConnected
+                        )
+                      }
+                      className={`p-2 ${
+                        connection.isConnected
+                          ? "text-green-400 hover:text-green-300"
+                          : "text-gray-400 hover:text-gray-300"
+                      }`}
+                      title={connection.isConnected ? "Disconnect" : "Connect"}
+                    >
+                      {connection.isConnected ? (
+                        <Wifi size={16} />
+                      ) : (
+                        <WifiOff size={16} />
+                      )}
+                    </button>
+
+                    {/* Remove Server */}
+                    <button
+                      onClick={() => removeServer(connection.config.id)}
+                      className="p-2 text-red-400 hover:text-red-300"
+                      title="Remove Server"
+                    >
+                      <Trash2 size={16} />
+                    </button>
+                  </div>
+                </div>
+
+                {connection.lastError && (
+                  <div className="mt-2 text-red-400 text-sm">
+                    Error: {connection.lastError}
+                  </div>
+                )}
+
+                {connection.isConnected && connection.tools.length > 0 && (
+                  <div className="mt-3">
+                    <details className="text-sm">
+                      <summary className="text-gray-300 cursor-pointer">
+                        Available Tools ({connection.tools.length})
+                      </summary>
+                      <div className="mt-2 space-y-1">
+                        {connection.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>
+        )}
+
+        {notification && (
+          <div className={`mt-4 p-4 border rounded-lg ${
+            notification.type === 'success' 
+              ? 'bg-green-900 border-green-700 text-green-200' 
+              : 'bg-red-900 border-red-700 text-red-200'
+          }`}>
+            {notification.message}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};

src/components/OAuthCallback.tsx

@@ -0,0 +1,97 @@
+import { useEffect, useState } from "react";
+import { exchangeCodeForToken } from "../services/oauth";
+import { secureStorage } from "../utils/storage";
+import type { MCPServerConfig } from "../types/mcp";
+import { STORAGE_KEYS, DEFAULTS } from "../config/constants";
+
+interface OAuthTokens {
+  access_token: string;
+  refresh_token?: string;
+  expires_in?: number;
+  token_type?: string;
+  [key: string]: string | number | undefined;
+}
+
+interface OAuthCallbackProps {
+  serverUrl: string;
+  onSuccess?: (tokens: OAuthTokens) => void;
+  onError?: (error: Error) => void;
+}
+
+const OAuthCallback: React.FC<OAuthCallbackProps> = ({
+  serverUrl,
+  onSuccess,
+  onError,
+}) => {
+  const [status, setStatus] = useState<string>("Authorizing...");
+
+  useEffect(() => {
+    const params = new URLSearchParams(window.location.search);
+    const code = params.get("code");
+    // Always persist MCP server URL for robustness
+    localStorage.setItem(STORAGE_KEYS.OAUTH_MCP_SERVER_URL, serverUrl);
+    if (code) {
+      exchangeCodeForToken({
+        serverUrl,
+        code,
+        redirectUri: window.location.origin + DEFAULTS.OAUTH_REDIRECT_PATH,
+      })
+        .then(async (tokens) => {
+          await secureStorage.setItem(STORAGE_KEYS.OAUTH_ACCESS_TOKEN, tokens.access_token);
+          // Add MCP server to MCPClientService for UI
+          const mcpServerUrl = localStorage.getItem(STORAGE_KEYS.OAUTH_MCP_SERVER_URL);
+          if (mcpServerUrl) {
+            // Use persisted name and transport from initial add
+            const serverName =
+              localStorage.getItem(STORAGE_KEYS.MCP_SERVER_NAME) || mcpServerUrl;
+            const serverTransport = 
+              (localStorage.getItem(STORAGE_KEYS.MCP_SERVER_TRANSPORT) as MCPServerConfig['transport']) || DEFAULTS.MCP_TRANSPORT;
+            // Build config and add to mcp-servers
+            const serverConfig = {
+              id: `server_${Date.now()}`,
+              name: serverName,
+              url: mcpServerUrl,
+              enabled: true,
+              transport: serverTransport,
+              auth: {
+                type: "bearer" as const,
+                token: tokens.access_token,
+              },
+            };
+            // Load existing servers
+            let servers: MCPServerConfig[] = [];
+            try {
+              const stored = localStorage.getItem(STORAGE_KEYS.MCP_SERVERS);
+              if (stored) servers = JSON.parse(stored);
+            } catch {}
+            // Add or update
+            const exists = servers.some((s: MCPServerConfig) => s.url === mcpServerUrl);
+            if (!exists) {
+              servers.push(serverConfig);
+              localStorage.setItem(STORAGE_KEYS.MCP_SERVERS, JSON.stringify(servers));
+            }
+            // Clear temp values from localStorage for clean slate
+            localStorage.removeItem(STORAGE_KEYS.MCP_SERVER_NAME);
+            localStorage.removeItem(STORAGE_KEYS.MCP_SERVER_TRANSPORT);
+            localStorage.removeItem(STORAGE_KEYS.OAUTH_MCP_SERVER_URL);
+          }
+          setStatus("Authorization successful! Redirecting...");
+          if (onSuccess) onSuccess(tokens);
+          // Redirect to main app page after short delay
+          setTimeout(() => {
+            window.location.replace("/");
+          }, 1000);
+        })
+        .catch((err) => {
+          setStatus("OAuth token exchange failed: " + err.message);
+          if (onError) onError(err);
+        });
+    } else {
+      setStatus("Missing authorization code in callback URL.");
+    }
+  }, [serverUrl, onSuccess, onError]);
+
+  return <div>{status}</div>;
+};
+
+export default OAuthCallback;

src/components/ResultBlock.tsx

@@ -1,6 +1,11 @@
 import type React from "react";
 
-const ResultBlock: React.FC<{ error?: string; result?: any }> = ({
+interface ResultBlockProps {
+  error?: string;
+  result?: unknown;
+}
+
+const ResultBlock: React.FC<ResultBlockProps> = ({
   error,
   result,
 }) => (
@@ -13,7 +18,9 @@ const ResultBlock: React.FC<{ error?: string; result?: any }> = ({
   >
     {error ? <p className="text-red-300 text-sm">Error: {error}</p> : null}
     <pre className="text-sm text-gray-300 whitespace-pre-wrap overflow-auto mt-2">
-      {typeof result === "object" ? JSON.stringify(result, null, 2) : result}
+      {result !== undefined && result !== null 
+        ? (typeof result === "object" ? JSON.stringify(result, null, 2) : String(result))
+        : "No result"}
     </pre>
   </div>
 );

src/components/ToolResultRenderer.tsx

@@ -1,11 +1,13 @@
 import React from "react";
 import ResultBlock from "./ResultBlock";
 
-const ToolResultRenderer: React.FC<{
-  result: any;
+interface ToolResultRendererProps {
+  result: unknown;
   rendererCode?: string;
-  input?: any;
-}> = ({ result, rendererCode, input }) => {
+  input?: unknown;
+}
+
+const ToolResultRenderer: React.FC<ToolResultRendererProps> = ({ result, rendererCode, input }) => {
   if (!rendererCode) {
     return <ResultBlock result={result} />;
   }

src/config/constants.ts

@@ -0,0 +1,35 @@
+/**
+ * Application configuration constants
+ */
+
+// MCP Client Configuration
+export const MCP_CLIENT_CONFIG = {
+  NAME: "LFM2-WebGPU",
+  VERSION: "1.0.0",
+  TEST_CLIENT_NAME: "LFM2-WebGPU-Test",
+} as const;
+
+// Storage Keys
+export const STORAGE_KEYS = {
+  MCP_SERVERS: "mcp-servers",
+  OAUTH_CLIENT_ID: "oauth_client_id",
+  OAUTH_CLIENT_SECRET: "oauth_client_secret",
+  OAUTH_AUTHORIZATION_ENDPOINT: "oauth_authorization_endpoint",
+  OAUTH_TOKEN_ENDPOINT: "oauth_token_endpoint",
+  OAUTH_REDIRECT_URI: "oauth_redirect_uri",
+  OAUTH_RESOURCE: "oauth_resource",
+  OAUTH_ACCESS_TOKEN: "oauth_access_token",
+  OAUTH_CODE_VERIFIER: "oauth_code_verifier",
+  OAUTH_MCP_SERVER_URL: "oauth_mcp_server_url",
+  OAUTH_AUTHORIZATION_SERVER_METADATA: "oauth_authorization_server_metadata",
+  MCP_SERVER_NAME: "mcp_server_name",
+  MCP_SERVER_TRANSPORT: "mcp_server_transport",
+} as const;
+
+// Default Values
+export const DEFAULTS = {
+  MCP_TRANSPORT: "streamable-http" as const,
+  OAUTH_REDIRECT_PATH: "/oauth/callback",
+  NOTIFICATION_TIMEOUT: 3000,
+  OAUTH_ERROR_TIMEOUT: 5000,
+} as const;

src/hooks/useMCP.ts

@@ -0,0 +1,232 @@
+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) => {
+      setMCPState(state);
+    };
+
+    mcpClient.addStateListener(handleStateChange);
+
+    // Get initial state
+    setMCPState(mcpClient.getState());
+
+    return () => {
+      mcpClient.removeStateListener(handleStateChange);
+    };
+  }, [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>) => {
+    return mcpClient.callTool(serverId, toolName, args);
+  }, [mcpClient]);
+
+  // Get all available MCP tools
+  const getMCPTools = useCallback((): ExtendedTool[] => {
+    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 = Date.now(); // Use timestamp to force tool refresh
+
+    Object.entries(mcpState.servers).forEach(([serverId, connection]) => {
+      if (connection.isConnected && connection.config.enabled) {
+        connection.tools.forEach((mcpTool) => {
+          // Convert tool name to valid JavaScript identifier
+          const jsToolName = mcpTool.name.replace(/[-\s]/g, '_').replace(/[^a-zA-Z0-9_]/g, '');
+
+          // Create a JavaScript function that calls the MCP tool
+          const safeDescription = (mcpTool.description || `MCP tool from ${connection.config.name}`).replace(/[`${}\\]/g, '');
+          const serverName = connection.config.name;
+          const safeParams = Object.entries(mcpTool.inputSchema.properties || {}).map(([name, prop]) => {
+            const p = prop as { type?: string; description?: string };
+            const safeType = (p.type || 'any').replace(/[`${}\\]/g, '');
+            const safeDesc = (p.description || '').replace(/[`${}\\]/g, '');
+            return `@param {${safeType}} ${name} - ${safeDesc}`;
+          }).join('\n * ');
+          
+          const code = `/**
+ * ${safeDescription}
+ * ${safeParams}
+ * @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: ${JSON.stringify(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-2" },
+      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} (MCP)"
+      ),
+    ),
+    React.createElement(
+      "div",
+      { className: "text-sm space-y-1" },
+      React.createElement(
+        "p",
+        { className: "text-blue-700 font-medium" },
+        "Server: " + ${JSON.stringify(serverName)}
+      ),
+      React.createElement(
+        "p",
+        { className: "text-blue-700 font-medium" },
+        "Input: " + JSON.stringify(input)
+      ),
+      React.createElement(
+        "div",
+        { className: "mt-3" },
+        React.createElement(
+          "h4",
+          { className: "text-blue-800 font-medium mb-2" },
+          "Result:"
+        ),
+        React.createElement(
+          "pre",
+          { 
+            className: "text-gray-800 text-xs bg-gray-50 p-3 rounded border overflow-x-auto max-w-full",
+            style: { whiteSpace: "pre-wrap", wordBreak: "break-word" }
+          },
+          (() => {
+            // Try to parse and format JSON content from text fields
+            if (output && output.content && Array.isArray(output.content)) {
+              const textContent = output.content.find(item => item.type === 'text' && item.text);
+              if (textContent && textContent.text) {
+                try {
+                  const parsed = JSON.parse(textContent.text);
+                  return JSON.stringify(parsed, null, 2);
+                } catch {
+                  // If not JSON, return the original text
+                  return textContent.text;
+                }
+              }
+            }
+            // Fallback to original output
+            return JSON.stringify(output, null, 2);
+          })()
+        )
+      ),
+    ),
+  );`;
+
+          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/main.tsx

@@ -1,10 +1,24 @@
 import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
+import { BrowserRouter, Routes, Route } from "react-router-dom";
 import "./index.css";
 import App from "./App.tsx";
+import OAuthCallback from "./components/OAuthCallback";
 
 createRoot(document.getElementById("root")!).render(
   <StrictMode>
-    <App />
-  </StrictMode>,
+    <BrowserRouter>
+      <Routes>
+        <Route
+          path="/oauth/callback"
+          element={
+            <OAuthCallback
+              serverUrl={localStorage.getItem("oauth_mcp_server_url") || ""}
+            />
+          }
+        />
+        <Route path="/*" element={<App />} />
+      </Routes>
+    </BrowserRouter>
+  </StrictMode>
 );

src/services/mcpClient.ts

@@ -0,0 +1,381 @@
+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";
+import { MCP_CLIENT_CONFIG, STORAGE_KEYS } from "../config/constants";
+
+export class MCPClientService {
+  private clients: Map<string, Client> = new Map();
+  private connections: Map<string, MCPServerConnection> = new Map();
+  private listeners: Array<(state: MCPClientState) => void> = [];
+
+  constructor() {
+    // Load saved server configurations from localStorage
+    this.loadServerConfigs();
+  }
+
+  // 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(STORAGE_KEYS.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) {
+      // Silently handle missing or corrupted config
+    }
+  }
+
+  // Save server configurations to localStorage
+  private saveServerConfigs() {
+    try {
+      const configs = Array.from(this.connections.values()).map(
+        (conn) => conn.config
+      );
+      localStorage.setItem(STORAGE_KEYS.MCP_SERVERS, JSON.stringify(configs));
+    } catch (error) {
+      // Handle storage errors gracefully
+      throw new Error(`Failed to save server configuration: ${error instanceof Error ? error.message : 'Unknown 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: MCP_CLIENT_CONFIG.NAME,
+          version: MCP_CLIENT_CONFIG.VERSION,
+        },
+        {
+          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) => {
+        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) {
+      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) {
+        // Handle disconnect error silently
+      }
+      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) {
+      throw new Error(`Tool execution failed (${toolName}): ${error instanceof Error ? error.message : 'Unknown error'}`);
+    }
+  }
+
+  // Test connection to a server without saving it
+  async testConnection(config: MCPServerConfig): Promise<boolean> {
+    try {
+      const client = new Client(
+        {
+          name: MCP_CLIENT_CONFIG.TEST_CLIENT_NAME,
+          version: MCP_CLIENT_CONFIG.VERSION,
+        },
+        {
+          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) {
+      throw new Error(`Connection test failed: ${error instanceof Error ? error.message : 'Unknown error'}`);
+    }
+  }
+
+  // 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(() => {
+          // Handle auto-connection error silently
+        })
+      );
+
+    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,239 @@
+import {
+  discoverOAuthProtectedResourceMetadata,
+  discoverAuthorizationServerMetadata,
+  startAuthorization,
+  exchangeAuthorization,
+  registerClient,
+} from "@modelcontextprotocol/sdk/client/auth.js";
+import { secureStorage } from "../utils/storage";
+import { MCP_CLIENT_CONFIG, STORAGE_KEYS, DEFAULTS } from "../config/constants";
+// Utility to fetch .well-known/modelcontextprotocol for OAuth endpoints
+export async function discoverOAuthEndpoints(serverUrl: string) {
+  // ...existing code...
+  let resourceMetadata, authMetadata, authorizationServerUrl;
+  try {
+    resourceMetadata = await discoverOAuthProtectedResourceMetadata(serverUrl);
+    if (resourceMetadata?.authorization_servers?.length) {
+      authorizationServerUrl = resourceMetadata.authorization_servers[0];
+    }
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  } catch (e) {
+    // Fallback to direct metadata discovery if protected resource fails
+    authMetadata = await discoverAuthorizationServerMetadata(serverUrl);
+    authorizationServerUrl = authMetadata?.issuer || serverUrl;
+  }
+
+  if (!authorizationServerUrl) {
+    throw new Error("No authorization server found for this MCP server");
+  }
+
+  // Discover authorization server metadata if not already done
+  if (!authMetadata) {
+    authMetadata = await discoverAuthorizationServerMetadata(
+      authorizationServerUrl
+    );
+  }
+
+  if (
+    !authMetadata ||
+    !authMetadata.authorization_endpoint ||
+    !authMetadata.token_endpoint
+  ) {
+    throw new Error("Missing OAuth endpoints in authorization server metadata");
+  }
+
+  // If client_id is missing, register client dynamically
+  if (!authMetadata.client_id && authMetadata.registration_endpoint) {
+    // Determine token endpoint auth method
+    let tokenEndpointAuthMethod = "none";
+    if (
+      authMetadata.token_endpoint_auth_methods_supported?.includes(
+        "client_secret_post"
+      )
+    ) {
+      tokenEndpointAuthMethod = "client_secret_post";
+    } else if (
+      authMetadata.token_endpoint_auth_methods_supported?.includes(
+        "client_secret_basic"
+      )
+    ) {
+      tokenEndpointAuthMethod = "client_secret_basic";
+    }
+    const clientMetadata = {
+      redirect_uris: [
+        String(
+          authMetadata.redirect_uri ||
+            window.location.origin + "/oauth/callback"
+        ),
+      ],
+      client_name: MCP_CLIENT_CONFIG.NAME,
+      grant_types: ["authorization_code"],
+      response_types: ["code"],
+      token_endpoint_auth_method: tokenEndpointAuthMethod,
+    };
+    const clientInfo = await registerClient(authorizationServerUrl, {
+      metadata: authMetadata,
+      clientMetadata,
+    });
+    authMetadata.client_id = clientInfo.client_id;
+    if (clientInfo.client_secret) {
+      authMetadata.client_secret = clientInfo.client_secret;
+    }
+    // Persist client credentials for later use
+    localStorage.setItem(STORAGE_KEYS.OAUTH_CLIENT_ID, clientInfo.client_id);
+    if (clientInfo.client_secret) {
+      await secureStorage.setItem(STORAGE_KEYS.OAUTH_CLIENT_SECRET, clientInfo.client_secret);
+    }
+  }
+  if (!authMetadata.client_id) {
+    throw new Error(
+      "Missing client_id and registration not supported by authorization server"
+    );
+  }
+
+  // Step 3: Validate resource
+  const resource = resourceMetadata?.resource
+    ? new URL(resourceMetadata.resource)
+    : undefined;
+
+  // Persist endpoints, metadata, and MCP server URL for callback use
+  localStorage.setItem(
+    STORAGE_KEYS.OAUTH_AUTHORIZATION_ENDPOINT,
+    authMetadata.authorization_endpoint
+  );
+  localStorage.setItem(STORAGE_KEYS.OAUTH_TOKEN_ENDPOINT, authMetadata.token_endpoint);
+  localStorage.setItem(
+    STORAGE_KEYS.OAUTH_REDIRECT_URI,
+    (authMetadata.redirect_uri || window.location.origin + DEFAULTS.OAUTH_REDIRECT_PATH).toString()
+  );
+  localStorage.setItem(STORAGE_KEYS.OAUTH_MCP_SERVER_URL, serverUrl);
+  localStorage.setItem(
+    STORAGE_KEYS.OAUTH_AUTHORIZATION_SERVER_METADATA,
+    JSON.stringify(authMetadata)
+  );
+  if (resource) {
+    localStorage.setItem(STORAGE_KEYS.OAUTH_RESOURCE, resource.toString());
+  }
+  return {
+    authorizationEndpoint: authMetadata.authorization_endpoint,
+    tokenEndpoint: authMetadata.token_endpoint,
+    clientId: authMetadata.client_id,
+    clientSecret: authMetadata.client_secret,
+    scopes: authMetadata.scopes || [],
+    redirectUri:
+      authMetadata.redirect_uri || window.location.origin + "/oauth/callback",
+    resource,
+  };
+}
+
+// Start OAuth flow: redirect user to authorization endpoint
+export async function startOAuthFlow({
+  authorizationEndpoint,
+  clientId,
+  redirectUri,
+  scopes,
+  resource,
+}: {
+  authorizationEndpoint: string;
+  clientId: string;
+  redirectUri: string;
+  scopes?: string[];
+  resource?: URL;
+}) {
+  // Use Proof Key for Code Exchange (PKCE) and SDK to build the authorization URL
+  // Use persisted client_id if available
+  const persistedClientId = localStorage.getItem(STORAGE_KEYS.OAUTH_CLIENT_ID) || clientId;
+  const clientInformation = { client_id: persistedClientId };
+  // Retrieve metadata from localStorage if available
+  let metadata;
+  try {
+    const stored = localStorage.getItem(STORAGE_KEYS.OAUTH_AUTHORIZATION_SERVER_METADATA);
+    if (stored) metadata = JSON.parse(stored);
+  } catch {
+    console.warn("Failed to parse stored OAuth metadata, using defaults");
+  }
+  // Always pass resource from localStorage if not provided
+  let resourceParam = resource;
+  if (!resourceParam) {
+    const resourceStr = localStorage.getItem(STORAGE_KEYS.OAUTH_RESOURCE);
+    if (resourceStr) resourceParam = new URL(resourceStr);
+  }
+  const { authorizationUrl, codeVerifier } = await startAuthorization(
+    authorizationEndpoint,
+    {
+      metadata,
+      clientInformation,
+      redirectUrl: redirectUri,
+      scope: scopes?.join(" ") || undefined,
+      resource: resourceParam,
+    }
+  );
+  // Save codeVerifier in localStorage for later token exchange
+  localStorage.setItem(STORAGE_KEYS.OAUTH_CODE_VERIFIER, codeVerifier);
+  window.location.href = authorizationUrl.toString();
+}
+
+// Exchange code for token using MCP SDK
+export async function exchangeCodeForToken({
+  code,
+  redirectUri,
+}: {
+  serverUrl?: string;
+  code: string;
+  redirectUri: string;
+}) {
+  // Use only persisted credentials and endpoints for token exchange
+  const tokenEndpoint = localStorage.getItem(STORAGE_KEYS.OAUTH_TOKEN_ENDPOINT);
+  const redirectUriPersisted = localStorage.getItem(STORAGE_KEYS.OAUTH_REDIRECT_URI);
+  const resourceStr = localStorage.getItem(STORAGE_KEYS.OAUTH_RESOURCE);
+  const persistedClientId = localStorage.getItem(STORAGE_KEYS.OAUTH_CLIENT_ID);
+  const persistedClientSecret = await secureStorage.getItem(STORAGE_KEYS.OAUTH_CLIENT_SECRET);
+  const codeVerifier = localStorage.getItem(STORAGE_KEYS.OAUTH_CODE_VERIFIER);
+  if (!persistedClientId || !tokenEndpoint || !codeVerifier)
+    throw new Error(
+      "Missing OAuth client credentials or endpoints for token exchange"
+    );
+  const clientInformation: { client_id: string; client_secret?: string } = { client_id: persistedClientId };
+  if (persistedClientSecret) {
+    clientInformation.client_secret = persistedClientSecret;
+  }
+  // Retrieve metadata from localStorage if available
+  let metadata;
+  try {
+    const stored = localStorage.getItem(STORAGE_KEYS.OAUTH_AUTHORIZATION_SERVER_METADATA);
+    if (stored) metadata = JSON.parse(stored);
+  } catch {
+    console.warn("Failed to parse stored OAuth metadata, using defaults");
+  }
+  // Use SDK to exchange code for tokens
+  const tokens = await exchangeAuthorization(tokenEndpoint, {
+    metadata,
+    clientInformation,
+    authorizationCode: code,
+    codeVerifier,
+    redirectUri: redirectUriPersisted || redirectUri,
+    resource: resourceStr ? new URL(resourceStr) : undefined,
+  });
+  // Persist access token in localStorage and sync to mcp-servers
+  if (tokens && tokens.access_token) {
+    await secureStorage.setItem(STORAGE_KEYS.OAUTH_ACCESS_TOKEN, tokens.access_token);
+    try {
+      const serversStr = localStorage.getItem(STORAGE_KEYS.MCP_SERVERS);
+      if (serversStr) {
+        const servers = JSON.parse(serversStr);
+        for (const server of servers) {
+          if (
+            server.auth &&
+            (server.auth.type === "bearer" || server.auth.type === "oauth")
+          ) {
+            server.auth.token = tokens.access_token;
+          }
+        }
+        localStorage.setItem(STORAGE_KEYS.MCP_SERVERS, JSON.stringify(servers));
+      }
+    } catch (err) {
+      console.warn("Failed to sync token to mcp-servers:", err);
+    }
+  }
+  return tokens;
+}

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;
+}

src/utils/storage.ts

@@ -0,0 +1,108 @@
+/**
+ * Secure storage utilities for sensitive data like OAuth tokens
+ */
+
+const ENCRYPTION_KEY_NAME = 'mcp-encryption-key';
+
+// Generate or retrieve encryption key
+async function getEncryptionKey(): Promise<CryptoKey> {
+  const keyData = localStorage.getItem(ENCRYPTION_KEY_NAME);
+  
+  if (keyData) {
+    try {
+      const keyBuffer = new Uint8Array(JSON.parse(keyData));
+      return await crypto.subtle.importKey(
+        'raw',
+        keyBuffer,
+        { name: 'AES-GCM' },
+        false,
+        ['encrypt', 'decrypt']
+      );
+    } catch {
+      // Key corrupted, generate new one
+    }
+  }
+  
+  // Generate new key
+  const key = await crypto.subtle.generateKey(
+    { name: 'AES-GCM', length: 256 },
+    true,
+    ['encrypt', 'decrypt']
+  );
+  
+  // Store key for future use
+  const keyBuffer = await crypto.subtle.exportKey('raw', key);
+  localStorage.setItem(ENCRYPTION_KEY_NAME, JSON.stringify(Array.from(new Uint8Array(keyBuffer))));
+  
+  return key;
+}
+
+// Encrypt sensitive data
+export async function encryptData(data: string): Promise<string> {
+  try {
+    const key = await getEncryptionKey();
+    const encoder = new TextEncoder();
+    const dataBuffer = encoder.encode(data);
+    
+    const iv = crypto.getRandomValues(new Uint8Array(12));
+    const encryptedBuffer = await crypto.subtle.encrypt(
+      { name: 'AES-GCM', iv },
+      key,
+      dataBuffer
+    );
+    
+    // Combine IV and encrypted data
+    const result = new Uint8Array(iv.length + encryptedBuffer.byteLength);
+    result.set(iv);
+    result.set(new Uint8Array(encryptedBuffer), iv.length);
+    
+    return btoa(String.fromCharCode(...result));
+  } catch (error) {
+    console.warn('Encryption failed, storing data unencrypted:', error);
+    return data;
+  }
+}
+
+// Decrypt sensitive data
+export async function decryptData(encryptedData: string): Promise<string> {
+  try {
+    const key = await getEncryptionKey();
+    const dataBuffer = new Uint8Array(
+      atob(encryptedData).split('').map(char => char.charCodeAt(0))
+    );
+    
+    const iv = dataBuffer.slice(0, 12);
+    const encrypted = dataBuffer.slice(12);
+    
+    const decryptedBuffer = await crypto.subtle.decrypt(
+      { name: 'AES-GCM', iv },
+      key,
+      encrypted
+    );
+    
+    const decoder = new TextDecoder();
+    return decoder.decode(decryptedBuffer);
+  } catch (error) {
+    console.warn('Decryption failed, returning data as-is:', error);
+    return encryptedData;
+  }
+}
+
+// Secure storage wrapper for sensitive data
+export const secureStorage = {
+  async setItem(key: string, value: string): Promise<void> {
+    const encrypted = await encryptData(value);
+    localStorage.setItem(`secure_${key}`, encrypted);
+  },
+  
+  async getItem(key: string): Promise<string | null> {
+    const encrypted = localStorage.getItem(`secure_${key}`);
+    if (!encrypted) return null;
+    
+    return await decryptData(encrypted);
+  },
+  
+  removeItem(key: string): void {
+    localStorage.removeItem(`secure_${key}`);
+  }
+};