Spaces:

shreyask
/

LFM2-WebGPU-MCP

Running

App Files Files Community

shreyask commited on Aug 18, 2025

Commit

d417126

1 Parent(s): 8b70f87

initial checkin

Browse files

Files changed (47) hide show

.gitattributes copy +36 -0
.gitignore +24 -0
README copy.md +15 -0
eslint.config.js +23 -0
index copy.html +13 -0
package-lock.json +0 -0
package.json +37 -0
public/liquidai-logo.svg +1 -0
src/App.tsx +930 -0
src/components/ExamplePrompts.tsx +40 -0
src/components/LoadingScreen.tsx +255 -0
src/components/MCPServerManager.tsx +509 -0
src/components/OAuthCallback.tsx +97 -0
src/components/ResultBlock.tsx +28 -0
src/components/ToolCallIndicator.tsx +98 -0
src/components/ToolItem.tsx +144 -0
src/components/ToolResultRenderer.tsx +44 -0
src/components/icons/HfLogo.tsx +35 -0
src/components/icons/LiquidAILogo.tsx +12 -0
src/config/constants.ts +35 -0
src/constants/db.ts +3 -0
src/constants/examples.ts +39 -0
src/constants/models.ts +5 -0
src/constants/systemPrompt.ts +11 -0
src/hooks/useLLM.ts +234 -0
src/hooks/useMCP.ts +232 -0
src/index.css +1 -0
src/main.tsx +24 -0
src/services/mcpClient.ts +381 -0
src/services/oauth.ts +239 -0
src/tools/get_location.js +84 -0
src/tools/get_time.js +51 -0
src/tools/index.ts +19 -0
src/tools/math_eval.js +54 -0
src/tools/open_webpage.js +49 -0
src/tools/random_number.js +51 -0
src/tools/sleep.js +45 -0
src/tools/speak.js +58 -0
src/tools/template.js +47 -0
src/types/mcp.ts +58 -0
src/utils.ts +370 -0
src/utils/storage.ts +108 -0
src/vite-env.d.ts +1 -0
tsconfig.app.json +27 -0
tsconfig.json +7 -0
tsconfig.node.json +25 -0
vite.config.ts +8 -0

.gitattributes copy ADDED Viewed

	@@ -0,0 +1,36 @@

+*.7z filter=lfs diff=lfs merge=lfs -text
+*.arrow filter=lfs diff=lfs merge=lfs -text
+*.bin filter=lfs diff=lfs merge=lfs -text
+*.bz2 filter=lfs diff=lfs merge=lfs -text
+*.ckpt filter=lfs diff=lfs merge=lfs -text
+*.ftz filter=lfs diff=lfs merge=lfs -text
+*.gz filter=lfs diff=lfs merge=lfs -text
+*.h5 filter=lfs diff=lfs merge=lfs -text
+*.joblib filter=lfs diff=lfs merge=lfs -text
+*.lfs.* filter=lfs diff=lfs merge=lfs -text
+*.mlmodel filter=lfs diff=lfs merge=lfs -text
+*.model filter=lfs diff=lfs merge=lfs -text
+*.msgpack filter=lfs diff=lfs merge=lfs -text
+*.npy filter=lfs diff=lfs merge=lfs -text
+*.npz filter=lfs diff=lfs merge=lfs -text
+*.onnx filter=lfs diff=lfs merge=lfs -text
+*.ot filter=lfs diff=lfs merge=lfs -text
+*.parquet filter=lfs diff=lfs merge=lfs -text
+*.pb filter=lfs diff=lfs merge=lfs -text
+*.pickle filter=lfs diff=lfs merge=lfs -text
+*.pkl filter=lfs diff=lfs merge=lfs -text
+*.pt filter=lfs diff=lfs merge=lfs -text
+*.pth filter=lfs diff=lfs merge=lfs -text
+*.rar filter=lfs diff=lfs merge=lfs -text
+*.safetensors filter=lfs diff=lfs merge=lfs -text
+saved_model/**/* filter=lfs diff=lfs merge=lfs -text
+*.tar.* filter=lfs diff=lfs merge=lfs -text
+*.tar filter=lfs diff=lfs merge=lfs -text
+*.tflite filter=lfs diff=lfs merge=lfs -text
+*.tgz filter=lfs diff=lfs merge=lfs -text
+*.wasm filter=lfs diff=lfs merge=lfs -text
+*.xz filter=lfs diff=lfs merge=lfs -text
+*.zip filter=lfs diff=lfs merge=lfs -text
+*.zst filter=lfs diff=lfs merge=lfs -text
+*tfevents* filter=lfs diff=lfs merge=lfs -text
+public/thumbnail.png filter=lfs diff=lfs merge=lfs -text

.gitignore ADDED Viewed

	@@ -0,0 +1,24 @@

+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+node_modules
+dist
+dist-ssr
+*.local
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

README copy.md ADDED Viewed

	@@ -0,0 +1,15 @@

+---
+title: LFM2 WebGPU – In-browser tool calling
+emoji: 🛠️
+colorFrom: yellow
+colorTo: red
+sdk: static
+pinned: true
+license: apache-2.0
+short_description: In-browser tool calling, powered by Transformers.js
+app_build_command: npm run build
+app_file: dist/index.html
+thumbnail: https://huggingface.co/spaces/LiquidAI/LFM2-WebGPU/resolve/main/public/thumbnail.png
+---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

eslint.config.js ADDED Viewed

	@@ -0,0 +1,23 @@

+import js from "@eslint/js";
+import globals from "globals";
+import reactHooks from "eslint-plugin-react-hooks";
+import reactRefresh from "eslint-plugin-react-refresh";
+import tseslint from "typescript-eslint";
+import { globalIgnores } from "eslint/config";
+export default tseslint.config([
+  globalIgnores(["dist"]),
+  {
+    files: ["**/*.{ts,tsx}"],
+    extends: [
+      js.configs.recommended,
+      tseslint.configs.recommended,
+      reactHooks.configs["recommended-latest"],
+      reactRefresh.configs.vite,
+    ],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+  },
+]);

index copy.html ADDED Viewed

	@@ -0,0 +1,13 @@

+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/liquidai-logo.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>LFM2 WebGPU - In-Browser Tool Calling</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package-lock.json ADDED Viewed

The diff for this file is too large to render. See raw diff

package.json ADDED Viewed

	@@ -0,0 +1,37 @@

+{
+  "name": "lfm-tool-calling",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "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": {
+    "@eslint/js": "^9.30.1",
+    "@types/react": "^19.1.8",
+    "@types/react-dom": "^19.1.6",
+    "@vitejs/plugin-react": "^4.6.0",
+    "eslint": "^9.30.1",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-react-refresh": "^0.4.20",
+    "globals": "^16.3.0",
+    "typescript": "~5.8.3",
+    "typescript-eslint": "^8.35.1",
+    "vite": "^7.0.4"
+  }
+}

public/liquidai-logo.svg ADDED Viewed

src/App.tsx ADDED Viewed

	@@ -0,0 +1,930 @@

+import React, {
+  useState,
+  useEffect,
+  useCallback,
+  useRef,
+  useMemo,
+} from "react";
+import { openDB, type IDBPDatabase } from "idb";
+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";
+import {
+  parsePythonicCalls,
+  extractPythonicCalls,
+  extractFunctionAndRenderer,
+  generateSchemaFromCode,
+  extractToolCallContent,
+  mapArgsToNamedParams,
+  getErrorMessage,
+  isMobileOrTablet,
+} from "./utils";
+import { DEFAULT_SYSTEM_PROMPT } from "./constants/systemPrompt";
+import { DB_NAME, STORE_NAME, SETTINGS_STORE_NAME } from "./constants/db";
+import { DEFAULT_TOOLS, TEMPLATE } from "./tools";
+import ToolResultRenderer from "./components/ToolResultRenderer";
+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?: unknown;
+  renderer?: string;
+  input?: Record<string, unknown>;
+  error?: string;
+}
+interface BaseMessage {
+  role: "system" | "user" | "assistant";
+  content: string;
+}
+interface ToolMessage {
+  role: "tool";
+  content: string;
+  renderInfo: RenderInfo[]; // Rich data for the UI
+}
+type Message = BaseMessage | ToolMessage;
+async function getDB(): Promise<IDBPDatabase> {
+  return openDB(DB_NAME, 1, {
+    upgrade(db) {
+      if (!db.objectStoreNames.contains(STORE_NAME)) {
+        db.createObjectStore(STORE_NAME, {
+          keyPath: "id",
+          autoIncrement: true,
+        });
+      }
+      if (!db.objectStoreNames.contains(SETTINGS_STORE_NAME)) {
+        db.createObjectStore(SETTINGS_STORE_NAME, { keyPath: "key" });
+      }
+    },
+  });
+}
+const App: React.FC = () => {
+  const [systemPrompt, setSystemPrompt] = useState<string>(
+    DEFAULT_SYSTEM_PROMPT
+  );
+  const [isSystemPromptModalOpen, setIsSystemPromptModalOpen] =
+    useState<boolean>(false);
+  const [tempSystemPrompt, setTempSystemPrompt] = useState<string>("");
+  const [messages, setMessages] = useState<Message[]>([]);
+  const [tools, setTools] = useState<Tool[]>([]);
+  const [input, setInput] = useState<string>("");
+  const [isGenerating, setIsGenerating] = useState<boolean>(false);
+  const isMobile = useMemo(isMobileOrTablet, []);
+  const [selectedModelId, setSelectedModelId] = useState<string>(
+    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);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const {
+    isLoading,
+    isReady,
+    error,
+    progress,
+    loadModel,
+    generateResponse,
+    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);
+    if (allTools.length === 0) {
+      const defaultTools: Tool[] = Object.entries(DEFAULT_TOOLS).map(
+        ([name, code], id) => ({
+          id,
+          name,
+          code,
+          enabled: true,
+          isCollapsed: false,
+        })
+      );
+      const tx = db.transaction(STORE_NAME, "readwrite");
+      await Promise.all(defaultTools.map((tool) => tx.store.put(tool)));
+      await tx.done;
+      setTools(defaultTools);
+    } else {
+      setTools(allTools.map((t) => ({ ...t, isCollapsed: false })));
+    }
+    // Load MCP tools and merge them
+    const mcpTools = getMCPToolsAsOriginalTools();
+    setTools((prevTools) => [...prevTools, ...mcpTools]);
+  }, [getMCPToolsAsOriginalTools]);
+  useEffect(() => {
+    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) {
+      chatContainerRef.current.scrollTop =
+        chatContainerRef.current.scrollHeight;
+    }
+  }, [messages]);
+  const updateToolInDB = async (tool: Tool): Promise<void> => {
+    const db = await getDB();
+    await db.put(STORE_NAME, tool);
+  };
+  const saveToolDebounced = (tool: Tool): void => {
+    if (tool.id !== undefined && debounceTimers.current[tool.id]) {
+      clearTimeout(debounceTimers.current[tool.id]);
+    }
+    if (tool.id !== undefined) {
+      debounceTimers.current[tool.id] = setTimeout(() => {
+        updateToolInDB(tool);
+      }, 300);
+    }
+  };
+  const clearChat = useCallback(() => {
+    setMessages([]);
+    clearPastKeyValues();
+  }, [clearPastKeyValues]);
+  const addTool = async (): Promise<void> => {
+    const newTool: Omit<Tool, "id"> = {
+      name: "new_tool",
+      code: TEMPLATE,
+      enabled: true,
+      isCollapsed: false,
+    };
+    const db = await getDB();
+    const id = await db.add(STORE_NAME, newTool);
+    setTools((prev) => {
+      const updated = [...prev, { ...newTool, id: id as number }];
+      setTimeout(() => {
+        if (toolsContainerRef.current) {
+          toolsContainerRef.current.scrollTop =
+            toolsContainerRef.current.scrollHeight;
+        }
+      }, 0);
+      return updated;
+    });
+    clearChat();
+  };
+  const deleteTool = async (id: number): Promise<void> => {
+    if (debounceTimers.current[id]) {
+      clearTimeout(debounceTimers.current[id]);
+    }
+    const db = await getDB();
+    await db.delete(STORE_NAME, id);
+    setTools(tools.filter((tool) => tool.id !== id));
+    clearChat();
+  };
+  const toggleToolEnabled = (id: number): void => {
+    let changedTool: Tool | undefined;
+    const newTools = tools.map((tool) => {
+      if (tool.id === id) {
+        changedTool = { ...tool, enabled: !tool.enabled };
+        return changedTool;
+      }
+      return tool;
+    });
+    setTools(newTools);
+    if (changedTool) saveToolDebounced(changedTool);
+  };
+  const toggleToolCollapsed = (id: number): void => {
+    setTools(
+      tools.map((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
+      )
+    );
+  };
+  const handleToolCodeChange = (id: number, newCode: string): void => {
+    let changedTool: Tool | undefined;
+    const newTools = tools.map((tool) => {
+      if (tool.id === id) {
+        const { functionCode } = extractFunctionAndRenderer(newCode);
+        const schema = generateSchemaFromCode(functionCode);
+        changedTool = { ...tool, code: newCode, name: schema.name };
+        return changedTool;
+      }
+      return tool;
+    });
+    setTools(newTools);
+    if (changedTool) saveToolDebounced(changedTool);
+  };
+  const executeToolCall = async (callString: string): Promise<string> => {
+    const parsedCall = parsePythonicCalls(callString);
+    if (!parsedCall) throw new Error(`Invalid tool call format: ${callString}`);
+    const { name, positionalArgs, keywordArgs } = parsedCall;
+    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: 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 (Object.prototype.hasOwnProperty.call(keywordArgs, paramName)) {
+        finalArgs.push(keywordArgs[paramName]);
+      } else if (
+        Object.prototype.hasOwnProperty.call(
+          schema.parameters.properties[paramName],
+          "default"
+        )
+      ) {
+        finalArgs.push(schema.parameters.properties[paramName].default);
+      } else if (!requiredParams.includes(paramName)) {
+        finalArgs.push(undefined);
+      } else {
+        throw new Error(`Missing required argument: ${paramName}`);
+      }
+    }
+    const bodyMatch = functionCode.match(/function[^{]+\{([\s\S]*)\}/);
+    if (!bodyMatch) {
+      throw new Error(
+        "Could not parse function body. Ensure it's a standard `function` declaration."
+      );
+    }
+    const body = bodyMatch[1];
+    const AsyncFunction = Object.getPrototypeOf(
+      async function () {}
+    ).constructor;
+    const func = new AsyncFunction(...paramNames, body);
+    const result = await func(...finalArgs);
+    return JSON.stringify(result);
+  };
+  const executeToolCalls = async (
+    toolCallContent: string
+  ): Promise<RenderInfo[]> => {
+    const toolCalls = extractPythonicCalls(toolCallContent);
+    if (toolCalls.length === 0)
+      return [{ call: "", error: "No valid tool calls found." }];
+    const results: RenderInfo[] = [];
+    for (const call of toolCalls) {
+      try {
+        const result = await executeToolCall(call);
+        const parsedCall = parsePythonicCalls(call);
+        const toolUsed = parsedCall
+          ? tools.find((t) => t.name === parsedCall.name && t.enabled)
+          : null;
+        const { rendererCode } = toolUsed
+          ? extractFunctionAndRenderer(toolUsed.code)
+          : { rendererCode: undefined };
+        let parsedResult;
+        try {
+          parsedResult = JSON.parse(result);
+        } catch {
+          parsedResult = result;
+        }
+        let namedParams: Record<string, unknown> = Object.create(null);
+        if (parsedCall && toolUsed) {
+          const schema = generateSchemaFromCode(
+            extractFunctionAndRenderer(toolUsed.code).functionCode
+          );
+          const paramNames = Object.keys(schema.parameters.properties);
+          namedParams = mapArgsToNamedParams(
+            paramNames,
+            parsedCall.positionalArgs,
+            parsedCall.keywordArgs
+          );
+        }
+        results.push({
+          call,
+          result: parsedResult,
+          renderer: rendererCode,
+          input: namedParams,
+        });
+      } catch (error) {
+        const errorMessage = getErrorMessage(error);
+        results.push({ call, error: errorMessage });
+      }
+    }
+    return results;
+  };
+  const handleSendMessage = async (): Promise<void> => {
+    if (!input.trim() || !isReady) return;
+    const userMessage: Message = { role: "user", content: input };
+    const currentMessages: Message[] = [...messages, userMessage];
+    setMessages(currentMessages);
+    setInput("");
+    setIsGenerating(true);
+    try {
+      const toolSchemas = tools
+        .filter((tool) => tool.enabled)
+        .map((tool) => generateSchemaFromCode(tool.code));
+      while (true) {
+        const messagesForGeneration = [
+          { role: "system" as const, content: systemPrompt },
+          ...currentMessages,
+        ];
+        setMessages([...currentMessages, { role: "assistant", content: "" }]);
+        let accumulatedContent = "";
+        const response = await generateResponse(
+          messagesForGeneration,
+          toolSchemas,
+          (token: string) => {
+            accumulatedContent += token;
+            setMessages((current) => {
+              const updated = [...current];
+              updated[updated.length - 1] = {
+                role: "assistant",
+                content: accumulatedContent,
+              };
+              return updated;
+            });
+          }
+        );
+        currentMessages.push({ role: "assistant", content: response });
+        const toolCallContent = extractToolCallContent(response);
+        if (toolCallContent) {
+          const toolResults = await executeToolCalls(toolCallContent);
+          const toolMessage: ToolMessage = {
+            role: "tool",
+            content: JSON.stringify(toolResults.map((r) => r.result ?? null)),
+            renderInfo: toolResults,
+          };
+          currentMessages.push(toolMessage);
+          setMessages([...currentMessages]);
+          continue;
+        } else {
+          setMessages(currentMessages);
+          break;
+        }
+      }
+    } catch (error) {
+      const errorMessage = getErrorMessage(error);
+      setMessages([
+        ...currentMessages,
+        {
+          role: "assistant",
+          content: `Error generating response: ${errorMessage}`,
+        },
+      ]);
+    } finally {
+      setIsGenerating(false);
+      setTimeout(() => inputRef.current?.focus(), 0);
+    }
+  };
+  const loadSystemPrompt = useCallback(async (): Promise<void> => {
+    try {
+      const db = await getDB();
+      const stored = await db.get(SETTINGS_STORE_NAME, "systemPrompt");
+      if (stored && stored.value) setSystemPrompt(stored.value);
+    } catch (error) {
+      console.error("Failed to load system prompt:", error);
+    }
+  }, []);
+  const saveSystemPrompt = useCallback(
+    async (prompt: string): Promise<void> => {
+      try {
+        const db = await getDB();
+        await db.put(SETTINGS_STORE_NAME, {
+          key: "systemPrompt",
+          value: prompt,
+        });
+      } catch (error) {
+        console.error("Failed to save system prompt:", error);
+      }
+    },
+    []
+  );
+  const loadSelectedModel = useCallback(async (): Promise<void> => {
+    try {
+      await loadModel();
+    } catch (error) {
+      console.error("Failed to load model:", error);
+    }
+  }, [loadModel]);
+  const loadSelectedModelId = useCallback(async (): Promise<void> => {
+    try {
+      const db = await getDB();
+      const stored = await db.get(SETTINGS_STORE_NAME, "selectedModelId");
+      if (stored && stored.value) {
+        setSelectedModelId(stored.value);
+      }
+    } catch (error) {
+      console.error("Failed to load selected model ID:", error);
+    }
+  }, []);
+  useEffect(() => {
+    loadSystemPrompt();
+  }, [loadSystemPrompt]);
+  const handleOpenSystemPromptModal = (): void => {
+    setTempSystemPrompt(systemPrompt);
+    setIsSystemPromptModalOpen(true);
+  };
+  const handleSaveSystemPrompt = (): void => {
+    setSystemPrompt(tempSystemPrompt);
+    saveSystemPrompt(tempSystemPrompt);
+    setIsSystemPromptModalOpen(false);
+  };
+  const handleCancelSystemPrompt = (): void => {
+    setTempSystemPrompt("");
+    setIsSystemPromptModalOpen(false);
+  };
+  const handleResetSystemPrompt = (): void => {
+    setTempSystemPrompt(DEFAULT_SYSTEM_PROMPT);
+  };
+  const saveSelectedModel = useCallback(
+    async (modelId: string): Promise<void> => {
+      try {
+        const db = await getDB();
+        await db.put(SETTINGS_STORE_NAME, {
+          key: "selectedModelId",
+          value: modelId,
+        });
+      } catch (error) {
+        console.error("Failed to save selected model ID:", error);
+      }
+    },
+    []
+  );
+  useEffect(() => {
+    loadSystemPrompt();
+    loadSelectedModelId();
+  }, [loadSystemPrompt, loadSelectedModelId]);
+  const handleModelSelect = async (modelId: string) => {
+    setSelectedModelId(modelId);
+    setIsModelDropdownOpen(false);
+    await saveSelectedModel(modelId);
+  };
+  const handleExampleClick = async (messageText: string): Promise<void> => {
+    if (!isReady || isGenerating) return;
+    setInput(messageText);
+    const userMessage: Message = { role: "user", content: messageText };
+    const currentMessages: Message[] = [...messages, userMessage];
+    setMessages(currentMessages);
+    setInput("");
+    setIsGenerating(true);
+    try {
+      const toolSchemas = tools
+        .filter((tool) => tool.enabled)
+        .map((tool) => generateSchemaFromCode(tool.code));
+      while (true) {
+        const messagesForGeneration = [
+          { role: "system" as const, content: systemPrompt },
+          ...currentMessages,
+        ];
+        setMessages([...currentMessages, { role: "assistant", content: "" }]);
+        let accumulatedContent = "";
+        const response = await generateResponse(
+          messagesForGeneration,
+          toolSchemas,
+          (token: string) => {
+            accumulatedContent += token;
+            setMessages((current) => {
+              const updated = [...current];
+              updated[updated.length - 1] = {
+                role: "assistant",
+                content: accumulatedContent,
+              };
+              return updated;
+            });
+          }
+        );
+        currentMessages.push({ role: "assistant", content: response });
+        const toolCallContent = extractToolCallContent(response);
+        if (toolCallContent) {
+          const toolResults = await executeToolCalls(toolCallContent);
+          const toolMessage: ToolMessage = {
+            role: "tool",
+            content: JSON.stringify(toolResults.map((r) => r.result ?? null)),
+            renderInfo: toolResults,
+          };
+          currentMessages.push(toolMessage);
+          setMessages([...currentMessages]);
+          continue;
+        } else {
+          setMessages(currentMessages);
+          break;
+        }
+      }
+    } catch (error) {
+      const errorMessage = getErrorMessage(error);
+      setMessages([
+        ...currentMessages,
+        {
+          role: "assistant",
+          content: `Error generating response: ${errorMessage}`,
+        },
+      ]);
+    } finally {
+      setIsGenerating(false);
+      setTimeout(() => inputRef.current?.focus(), 0);
+    }
+  };
+  return (
+    <div className="font-sans bg-gray-900">
+      {!isReady ? (
+        <LoadingScreen
+          isLoading={isLoading}
+          progress={progress}
+          error={error}
+          loadSelectedModel={loadSelectedModel}
+          selectedModelId={selectedModelId}
+          isModelDropdownOpen={isModelDropdownOpen}
+          setIsModelDropdownOpen={setIsModelDropdownOpen}
+          handleModelSelect={handleModelSelect}
+        />
+      ) : (
+        <div className="flex h-screen text-white">
+          <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">
+                  LFM2 WebGPU
+                </h1>
+              </div>
+              <div className="flex items-center gap-3">
+                <div className="flex items-center text-green-400">
+                  <Zap size={16} className="mr-2" />
+                  Ready
+                </div>
+                <button
+                  disabled={isGenerating}
+                  onClick={clearChat}
+                  className={`h-10 flex items-center px-3 py-2 rounded-lg font-bold transition-colors text-sm ${
+                    isGenerating
+                      ? "bg-gray-600 cursor-not-allowed opacity-50"
+                      : "bg-gray-600 hover:bg-gray-700"
+                  }`}
+                  title="Clear chat"
+                >
+                  <RotateCcw size={14} className="mr-2" /> Clear
+                </button>
+                <button
+                  onClick={handleOpenSystemPromptModal}
+                  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="Edit system prompt"
+                >
+                  <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>
+            <div
+              ref={chatContainerRef}
+              className="flex-grow bg-gray-800 rounded-lg p-4 overflow-y-auto mb-4 space-y-4"
+            >
+              {messages.length === 0 && isReady ? (
+                <ExamplePrompts onExampleClick={handleExampleClick} />
+              ) : (
+                messages.map((msg, index) => {
+                  const key = `${msg.role}-${index}`;
+                  if (msg.role === "user") {
+                    return (
+                      <div key={key} className="flex justify-end">
+                        <div className="p-3 rounded-lg max-w-md bg-indigo-600">
+                          <p className="text-sm whitespace-pre-wrap">
+                            {msg.content}
+                          </p>
+                        </div>
+                      </div>
+                    );
+                  } else if (msg.role === "assistant") {
+                    const isToolCall = msg.content.includes(
+                      "<|tool_call_start|>"
+                    );
+                    if (isToolCall) {
+                      const nextMessage = messages[index + 1];
+                      const isCompleted = nextMessage?.role === "tool";
+                      const hasError =
+                        isCompleted &&
+                        (nextMessage as ToolMessage).renderInfo.some(
+                          (info) => !!info.error
+                        );
+                      return (
+                        <div key={key} className="flex justify-start">
+                          <div className="p-3 rounded-lg bg-gray-700">
+                            <ToolCallIndicator
+                              content={msg.content}
+                              isRunning={!isCompleted}
+                              hasError={hasError}
+                            />
+                          </div>
+                        </div>
+                      );
+                    }
+                    return (
+                      <div key={key} className="flex justify-start">
+                        <div className="p-3 rounded-lg max-w-md bg-gray-700">
+                          <p className="text-sm whitespace-pre-wrap">
+                            {msg.content}
+                          </p>
+                        </div>
+                      </div>
+                    );
+                  } else if (msg.role === "tool") {
+                    const visibleToolResults = msg.renderInfo.filter(
+                      (info) =>
+                        info.error || (info.result != null && info.renderer)
+                    );
+                    if (visibleToolResults.length === 0) return null;
+                    return (
+                      <div key={key} className="flex justify-start">
+                        <div className="p-3 rounded-lg bg-gray-700 max-w-lg">
+                          <div className="space-y-3">
+                            {visibleToolResults.map((info, idx) => (
+                              <div className="flex flex-col gap-2" key={idx}>
+                                <div className="text-xs text-gray-400 font-mono">
+                                  {info.call}
+                                </div>
+                                {info.error ? (
+                                  <ResultBlock error={info.error} />
+                                ) : (
+                                  <ToolResultRenderer
+                                    result={info.result}
+                                    rendererCode={info.renderer}
+                                    input={info.input}
+                                  />
+                                )}
+                              </div>
+                            ))}
+                          </div>
+                        </div>
+                      </div>
+                    );
+                  }
+                  return null;
+                })
+              )}
+            </div>
+            <div className="flex">
+              <input
+                ref={inputRef}
+                type="text"
+                value={input}
+                onChange={(e) => setInput(e.target.value)}
+                onKeyDown={(e) =>
+                  e.key === "Enter" &&
+                  !isGenerating &&
+                  isReady &&
+                  handleSendMessage()
+                }
+                disabled={isGenerating || !isReady}
+                className="flex-grow bg-gray-700 rounded-l-lg p-3 focus:outline-none focus:ring-2 focus:ring-indigo-500 disabled:opacity-50"
+                placeholder={
+                  isReady
+                    ? "Type your message here..."
+                    : "Load model first to enable chat"
+                }
+              />
+              <button
+                onClick={handleSendMessage}
+                disabled={isGenerating || !isReady}
+                className="bg-indigo-600 hover:bg-indigo-700 disabled:bg-gray-600 disabled:cursor-not-allowed text-white font-bold p-3 rounded-r-lg transition-colors"
+              >
+                <Play size={20} />
+              </button>
+            </div>
+          </div>
+          {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"
+              >
+                {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>
+      )}
+      {isSystemPromptModalOpen && (
+        <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-3/4 max-w-4xl max-h-3/4 flex flex-col text-gray-100">
+            <div className="flex justify-between items-center mb-4">
+              <h2 className="text-xl font-bold text-indigo-400">
+                Edit System Prompt
+              </h2>
+              <button
+                onClick={handleCancelSystemPrompt}
+                className="text-gray-400 hover:text-white"
+              >
+                <X size={20} />
+              </button>
+            </div>
+            <div className="flex-grow mb-4">
+              <textarea
+                value={tempSystemPrompt}
+                onChange={(e) => setTempSystemPrompt(e.target.value)}
+                className="w-full h-full bg-gray-700 text-white p-4 rounded-lg resize-none focus:outline-none focus:ring-2 focus:ring-indigo-500"
+                placeholder="Enter your system prompt here..."
+                style={{ minHeight: "300px" }}
+              />
+            </div>
+            <div className="flex justify-between">
+              <button
+                onClick={handleResetSystemPrompt}
+                className="px-4 py-2 bg-teal-600 hover:bg-teal-700 rounded-lg transition-colors"
+              >
+                Reset
+              </button>
+              <div className="flex gap-3">
+                <button
+                  onClick={handleSaveSystemPrompt}
+                  className="px-4 py-2 bg-indigo-600 hover:bg-indigo-700 rounded-lg transition-colors"
+                >
+                  Save
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+      {/* MCP Server Manager Modal */}
+      <MCPServerManager
+        isOpen={isMCPManagerOpen}
+        onClose={() => setIsMCPManagerOpen(false)}
+      />
+    </div>
+  );
+};
+export default App;

src/components/ExamplePrompts.tsx ADDED Viewed

	@@ -0,0 +1,40 @@

+import type React from "react";
+import { DEFAULT_EXAMPLES, type Example } from "../constants/examples";
+interface ExamplePromptsProps {
+  examples?: Example[];
+  onExampleClick: (messageText: string) => void;
+}
+const ExamplePrompts: React.FC<ExamplePromptsProps> = ({
+  examples,
+  onExampleClick,
+}) => (
+  <div className="flex flex-col items-center justify-center h-full space-y-6">
+    <div className="text-center mb-6">
+      <h2 className="text-2xl font-semibold text-gray-300 mb-1">
+        Try an example
+      </h2>
+      <p className="text-sm text-gray-500">Click one to get started</p>
+    </div>
+    <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 max-w-2xl w-full px-4">
+      {(examples || DEFAULT_EXAMPLES).map((example, index) => (
+        <button
+          key={index}
+          onClick={() => onExampleClick(example.messageText)}
+          className="flex items-center gap-3 p-4 bg-gray-700 hover:bg-gray-600 rounded-lg transition-colors text-left group cursor-pointer"
+        >
+          <span className="text-xl flex-shrink-0 group-hover:scale-110 transition-transform">
+            {example.icon}
+          </span>
+          <span className="text-sm text-gray-200 group-hover:text-white transition-colors">
+            {example.displayText}
+          </span>
+        </button>
+      ))}
+    </div>
+  </div>
+);
+export default ExamplePrompts;

src/components/LoadingScreen.tsx ADDED Viewed

	@@ -0,0 +1,255 @@

+import { ChevronDown } from "lucide-react";
+import { MODEL_OPTIONS } from "../constants/models";
+import LiquidAILogo from "./icons/LiquidAILogo";
+import HfLogo from "./icons/HfLogo";
+import { useEffect, useRef } from "react";
+export const LoadingScreen = ({
+  isLoading,
+  progress,
+  error,
+  loadSelectedModel,
+  selectedModelId,
+  isModelDropdownOpen,
+  setIsModelDropdownOpen,
+  handleModelSelect,
+}: {
+  isLoading: boolean;
+  progress: number;
+  error: string | null;
+  loadSelectedModel: () => void;
+  selectedModelId: string;
+  isModelDropdownOpen: boolean;
+  setIsModelDropdownOpen: (isOpen: boolean) => void;
+  handleModelSelect: (modelId: string) => void;
+}) => {
+  const model = MODEL_OPTIONS.find((opt) => opt.id === selectedModelId);
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  // Background Animation Effect
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+    let animationFrameId: number;
+    let dots: {
+      x: number;
+      y: number;
+      radius: number;
+      speed: number;
+      opacity: number;
+      blur: number;
+    }[] = [];
+    const setup = () => {
+      canvas.width = window.innerWidth;
+      canvas.height = window.innerHeight;
+      dots = [];
+      const numDots = Math.floor((canvas.width * canvas.height) / 15000);
+      for (let i = 0; i < numDots; ++i) {
+        dots.push({
+          x: Math.random() * canvas.width,
+          y: Math.random() * canvas.height,
+          radius: Math.random() * 1.5 + 0.5,
+          speed: Math.random() * 0.5 + 0.1,
+          opacity: Math.random() * 0.5 + 0.2,
+          blur: Math.random() > 0.7 ? Math.random() * 2 + 1 : 0,
+        });
+      }
+    };
+    const draw = () => {
+      if (!ctx) return;
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
+      dots.forEach((dot) => {
+        // Update dot position
+        dot.y += dot.speed;
+        if (dot.y > canvas.height) {
+          dot.y = 0 - dot.radius;
+          dot.x = Math.random() * canvas.width;
+        }
+        // Draw dot
+        ctx.beginPath();
+        ctx.arc(dot.x, dot.y, dot.radius, 0, Math.PI * 2);
+        ctx.fillStyle = `rgba(255, 255, 255, ${dot.opacity})`;
+        if (dot.blur > 0) {
+          ctx.filter = `blur(${dot.blur}px)`;
+        }
+        ctx.fill();
+        ctx.filter = "none"; // Reset filter
+      });
+      animationFrameId = requestAnimationFrame(draw);
+    };
+    const handleResize = () => {
+      cancelAnimationFrame(animationFrameId);
+      setup();
+      draw();
+    };
+    setup();
+    draw();
+    window.addEventListener("resize", handleResize);
+    return () => {
+      window.removeEventListener("resize", handleResize);
+      cancelAnimationFrame(animationFrameId);
+    };
+  }, []);
+  return (
+    <div className="relative flex flex-col items-center justify-center h-screen bg-gray-900 text-white p-4 overflow-hidden">
+      {/* Background Canvas for Animation */}
+      <canvas
+        ref={canvasRef}
+        className="absolute top-0 left-0 w-full h-full z-0"
+      />
+      {/* Vignette Overlay */}
+      <div className="absolute top-0 left-0 w-full h-full z-10 bg-[radial-gradient(ellipse_at_center,_rgba(17,24,39,0)_30%,_#111827_95%)]"></div>
+      {/* Main Content */}
+      <div className="relative z-20 max-w-2xl w-full flex flex-col items-center">
+        <div className="flex items-center justify-center mb-6 gap-6 text-5xl md:text-6xl">
+          <a
+            href="https://www.liquid.ai/"
+            target="_blank"
+            rel="noopener noreferrer"
+            title="Liquid AI"
+          >
+            <LiquidAILogo className="h-20 md:h-24 text-gray-300 hover:text-white transition-colors" />
+          </a>
+          <span className="text-gray-600">×</span>
+          <a
+            href="https://huggingface.co/docs/transformers.js"
+            target="_blank"
+            rel="noopener noreferrer"
+            title="Transformers.js"
+          >
+            <HfLogo className="h-24 md:h-28 text-gray-300 hover:text-white transition-colors" />
+          </a>
+        </div>
+        <div className="w-full text-center mb-6">
+          <h1 className="text-5xl font-bold mb-2 text-gray-100 tracking-tight">
+            LFM2 WebGPU
+          </h1>
+          <p className="text-md md:text-lg text-gray-400">
+            In-browser tool calling, powered by Transformers.js
+          </p>
+        </div>
+        <div className="w-full text-left text-gray-300 space-y-4 mb-6 text-base max-w-xl">
+          <p>
+            This demo showcases in-browser tool calling with LFM2, a new
+            generation of hybrid models by{" "}
+            <a
+              href="https://www.liquid.ai/"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-indigo-400 hover:underline font-medium"
+            >
+              Liquid AI
+            </a>{" "}
+            designed for edge AI and on-device deployment.
+          </p>
+          <p>
+            Everything runs entirely in your browser with{" "}
+            <a
+              href="https://huggingface.co/docs/transformers.js"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-indigo-400 hover:underline font-medium"
+            >
+              Transformers.js
+            </a>{" "}
+            and ONNX Runtime Web, meaning no data is sent to a server. It can
+            even run offline!
+          </p>
+        </div>
+        <p className="text-gray-400 mb-6">
+          Select a model and click load to get started.
+        </p>
+        <div className="relative">
+          <div className="flex rounded-lg shadow-lg bg-indigo-600">
+            <button
+              onClick={isLoading ? undefined : loadSelectedModel}
+              disabled={isLoading}
+              className={`flex items-center justify-center rounded-l-lg font-bold transition-all text-lg ${isLoading ? "bg-gray-700 text-gray-400 cursor-not-allowed" : "bg-indigo-600 hover:bg-indigo-700"}`}
+            >
+              <div className="px-6 py-3">
+                {isLoading ? (
+                  <div className="flex items-center">
+                    <span className="inline-block w-5 h-5 border-2 border-white border-t-transparent rounded-full animate-spin"></span>
+                    <span className="ml-3">Loading... ({progress}%)</span>
+                  </div>
+                ) : (
+                  `Load ${model?.label}`
+                )}
+              </div>
+            </button>
+            <button
+              onClick={(e) => {
+                if (!isLoading) {
+                  e.stopPropagation();
+                  setIsModelDropdownOpen(!isModelDropdownOpen);
+                }
+              }}
+              aria-label="Select model"
+              className="px-3 py-3 border-l border-indigo-800 hover:bg-indigo-700 transition-colors rounded-r-lg disabled:cursor-not-allowed disabled:bg-gray-700"
+              disabled={isLoading}
+            >
+              <ChevronDown size={24} />
+            </button>
+          </div>
+          {isModelDropdownOpen && (
+            <div className="absolute left-0 right-0 top-full mt-2 bg-gray-800 border border-gray-700 rounded-lg shadow-lg z-10 w-full overflow-hidden">
+              {MODEL_OPTIONS.map((option) => (
+                <button
+                  key={option.id}
+                  onClick={() => handleModelSelect(option.id)}
+                  className={`w-full px-4 py-2 text-left hover:bg-gray-700 transition-colors ${selectedModelId === option.id ? "bg-indigo-600 text-white" : "text-gray-200"}`}
+                >
+                  <div className="font-medium">{option.label}</div>
+                  <div className="text-sm text-gray-400">{option.size}</div>
+                </button>
+              ))}
+            </div>
+          )}
+        </div>
+        {error && (
+          <div className="bg-red-900/50 border border-red-700/60 rounded-lg p-4 mt-6 max-w-md text-center">
+            <p className="text-sm text-red-200">Error: {error}</p>
+            <button
+              onClick={loadSelectedModel}
+              className="mt-3 text-sm bg-red-600 hover:bg-red-700 px-4 py-1.5 rounded-md font-semibold transition-colors"
+            >
+              Retry
+            </button>
+          </div>
+        )}
+      </div>
+      {/* Click-away listener for dropdown */}
+      {isModelDropdownOpen && (
+        <div
+          className="fixed inset-0 z-5"
+          onClick={() => setIsModelDropdownOpen(false)}
+        />
+      )}
+    </div>
+  );
+};

src/components/MCPServerManager.tsx ADDED Viewed

	@@ -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 ADDED Viewed

	@@ -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 ADDED Viewed

	@@ -0,0 +1,28 @@

+import type React from "react";
+interface ResultBlockProps {
+  error?: string;
+  result?: unknown;
+}
+const ResultBlock: React.FC<ResultBlockProps> = ({
+  error,
+  result,
+}) => (
+  <div
+    className={
+      error
+        ? "bg-red-900 border border-red-600 rounded p-3"
+        : "bg-gray-700 border border-gray-600 rounded p-3"
+    }
+  >
+    {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">
+      {result !== undefined && result !== null
+        ? (typeof result === "object" ? JSON.stringify(result, null, 2) : String(result))
+        : "No result"}
+    </pre>
+  </div>
+);
+export default ResultBlock;

src/components/ToolCallIndicator.tsx ADDED Viewed

	@@ -0,0 +1,98 @@

+import type React from "react";
+import { extractToolCallContent } from "../utils";
+const ToolCallIndicator: React.FC<{
+  content: string;
+  isRunning: boolean;
+  hasError: boolean;
+}> = ({ content, isRunning, hasError }) => (
+  <div
+    className={`transition-all duration-500 ease-in-out rounded-lg p-4 ${
+      isRunning
+        ? "bg-gradient-to-r from-yellow-900/30 to-orange-900/30 border border-yellow-600/50"
+        : hasError
+          ? "bg-gradient-to-r from-red-900/30 to-rose-900/30 border border-red-600/50"
+          : "bg-gradient-to-r from-green-900/30 to-emerald-900/30 border border-green-600/50"
+    }`}
+  >
+    <div className="flex items-start space-x-3">
+      <div className="flex-shrink-0">
+        <div className="relative w-6 h-6">
+          {/* Spinner for running */}
+          <div
+            className={`absolute inset-0 flex items-center justify-center transition-opacity duration-500 ${
+              isRunning ? "opacity-100" : "opacity-0 pointer-events-none"
+            }`}
+          >
+            <div className="w-6 h-6 bg-green-400/0 border-2 border-yellow-400 border-t-transparent rounded-full animate-spin"></div>
+          </div>
+          {/* Cross for error */}
+          <div
+            className={`absolute inset-0 flex items-center justify-center transition-opacity duration-500 ${
+              hasError ? "opacity-100" : "opacity-0 pointer-events-none"
+            }`}
+          >
+            <div className="w-6 h-6 bg-red-400/100 rounded-full flex items-center justify-center transition-colors duration-500 ease-in-out">
+              <span className="text-xs text-gray-900 font-bold">✗</span>
+            </div>
+          </div>
+          {/* Tick for success */}
+          <div
+            className={`absolute inset-0 flex items-center justify-center transition-opacity duration-500 ${
+              !isRunning && !hasError
+                ? "opacity-100"
+                : "opacity-0 pointer-events-none"
+            }`}
+          >
+            <div className="w-6 h-6 bg-green-400/100 rounded-full flex items-center justify-center transition-colors duration-500 ease-in-out">
+              <span className="text-xs text-gray-900 font-bold">✓</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div className="flex-grow min-w-0">
+        <div className="flex items-center space-x-2 mb-2">
+          <span
+            className={`font-semibold text-sm transition-colors duration-500 ease-in-out ${
+              isRunning
+                ? "text-yellow-400"
+                : hasError
+                  ? "text-red-400"
+                  : "text-green-400"
+            }`}
+          >
+            🔧 Tool Call
+          </span>
+          {isRunning && (
+            <span className="text-yellow-300 text-xs animate-pulse">
+              Running...
+            </span>
+          )}
+        </div>
+        <div className="bg-gray-800/50 rounded p-2 mb-2">
+          <code className="text-xs text-gray-300 font-mono break-all">
+            {extractToolCallContent(content) ?? "..."}
+          </code>
+        </div>
+        <p
+          className={`text-xs transition-colors duration-500 ease-in-out ${
+            isRunning
+              ? "text-yellow-200"
+              : hasError
+                ? "text-red-200"
+                : "text-green-200"
+          }`}
+        >
+          {isRunning
+            ? "Executing tool call..."
+            : hasError
+              ? "Tool call failed"
+              : "Tool call completed"}
+        </p>
+      </div>
+    </div>
+  </div>
+);
+export default ToolCallIndicator;

src/components/ToolItem.tsx ADDED Viewed

	@@ -0,0 +1,144 @@

+import Editor from "@monaco-editor/react";
+import { ChevronUp, ChevronDown, Trash2, Power } from "lucide-react";
+import { useMemo } from "react";
+import { extractFunctionAndRenderer, generateSchemaFromCode } from "../utils";
+export interface Tool {
+  id: number;
+  name: string;
+  code: string;
+  enabled: boolean;
+  isCollapsed?: boolean;
+  renderer?: string;
+}
+interface ToolItemProps {
+  tool: Tool;
+  onToggleEnabled: () => void;
+  onToggleCollapsed: () => void;
+  onExpand: () => void;
+  onDelete: () => void;
+  onCodeChange: (newCode: string) => void;
+}
+const ToolItem: React.FC<ToolItemProps> = ({
+  tool,
+  onToggleEnabled,
+  onToggleCollapsed,
+  onDelete,
+  onCodeChange,
+}) => {
+  const { functionCode } = extractFunctionAndRenderer(tool.code);
+  const schema = useMemo(
+    () => generateSchemaFromCode(functionCode),
+    [functionCode],
+  );
+  return (
+    <div
+      className={`bg-gray-700 rounded-lg p-4 transition-all ${!tool.enabled ? "opacity-50 grayscale" : ""}`}
+    >
+      <div
+        className="flex justify-between items-center cursor-pointer"
+        onClick={onToggleCollapsed}
+      >
+        <div>
+          <h3 className="text-lg font-bold text-teal-300 font-mono">
+            {schema.name}
+          </h3>
+          <div className="text-xs text-gray-300 mt-1">{schema.description}</div>
+        </div>
+        <div className="flex items-center space-x-3">
+          <button
+            onClick={(e) => {
+              e.stopPropagation();
+              onToggleEnabled();
+            }}
+            className={`p-1 rounded-full ${tool.enabled ? "text-green-400 hover:bg-green-900" : "text-red-400 hover:bg-red-900"}`}
+          >
+            <Power size={18} />
+          </button>
+          <button
+            onClick={(e) => {
+              e.stopPropagation();
+              onDelete();
+            }}
+            className="p-2 text-gray-400 hover:text-red-500 hover:bg-gray-600 rounded-lg"
+          >
+            <Trash2 size={18} />
+          </button>
+          <button
+            onClick={(e) => {
+              e.stopPropagation();
+              onToggleCollapsed();
+            }}
+            className="p-2 text-gray-400 hover:text-white"
+          >
+            {tool.isCollapsed ? (
+              <ChevronDown size={20} />
+            ) : (
+              <ChevronUp size={20} />
+            )}
+          </button>
+        </div>
+      </div>
+      {!tool.isCollapsed && (
+        <div className="mt-4 grid grid-cols-1 md:grid-cols-3 gap-4">
+          <div className="md:col-span-2">
+            <label className="text-sm font-bold text-gray-400">
+              Implementation & Renderer
+            </label>
+            <div
+              className="mt-1 rounded-md overflow-visible border border-gray-600"
+              style={{ overflow: "visible" }}
+            >
+              <Editor
+                height="300px"
+                language="javascript"
+                theme="vs-dark"
+                value={tool.code}
+                onChange={(value) => onCodeChange(value || "")}
+                options={{
+                  minimap: { enabled: false },
+                  scrollbar: { verticalScrollbarSize: 10 },
+                  fontSize: 14,
+                  lineDecorationsWidth: 0,
+                  lineNumbersMinChars: 3,
+                  scrollBeyondLastLine: false,
+                }}
+              />
+            </div>
+          </div>
+          <div className="flex flex-col">
+            <label className="text-sm font-bold text-gray-400">
+              Generated Schema
+            </label>
+            <div className="mt-1 rounded-md flex-grow overflow-visible border border-gray-600">
+              <Editor
+                height="300px"
+                language="json"
+                theme="vs-dark"
+                value={JSON.stringify(schema, null, 2)}
+                options={{
+                  readOnly: true,
+                  minimap: { enabled: false },
+                  scrollbar: { verticalScrollbarSize: 10 },
+                  lineNumbers: "off",
+                  glyphMargin: false,
+                  folding: false,
+                  lineDecorationsWidth: 0,
+                  lineNumbersMinChars: 0,
+                  scrollBeyondLastLine: false,
+                  fontSize: 12,
+                }}
+              />
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+export default ToolItem;

src/components/ToolResultRenderer.tsx ADDED Viewed

	@@ -0,0 +1,44 @@

+import React from "react";
+import ResultBlock from "./ResultBlock";
+interface ToolResultRendererProps {
+  result: unknown;
+  rendererCode?: string;
+  input?: unknown;
+}
+const ToolResultRenderer: React.FC<ToolResultRendererProps> = ({ result, rendererCode, input }) => {
+  if (!rendererCode) {
+    return <ResultBlock result={result} />;
+  }
+  try {
+    const exportMatch = rendererCode.match(/export\s+default\s+(.*)/s);
+    if (!exportMatch) {
+      throw new Error("Invalid renderer format - no export default found");
+    }
+    const componentCode = exportMatch[1].trim();
+    const componentFunction = new Function(
+      "React",
+      "input",
+      "output",
+      `
+      const { createElement: h, Fragment } = React;
+      const JSXComponent = ${componentCode};
+      return JSXComponent(input, output);
+      `,
+    );
+    const element = componentFunction(React, input || {}, result);
+    return element;
+  } catch (error) {
+    return (
+      <ResultBlock
+        error={error instanceof Error ? error.message : "Unknown error"}
+        result={result}
+      />
+    );
+  }
+};
+export default ToolResultRenderer;

src/components/icons/HfLogo.tsx ADDED Viewed

	@@ -0,0 +1,35 @@

+import type React from "react";
+export default (props: React.SVGProps<SVGSVGElement>) => (
+  <svg
+    {...props}
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    fill="currentColor"
+  >
+    <path
+      d="M2.25 11.535c0-3.407 1.847-6.554 4.844-8.258a9.822 9.822 0 019.687 0c2.997 1.704 4.844 4.851 4.844 8.258 0 5.266-4.337 9.535-9.687 9.535S2.25 16.8 2.25 11.535z"
+      fill="#FF9D0B"
+    ></path>
+    <path
+      d="M11.938 20.086c4.797 0 8.687-3.829 8.687-8.551 0-4.722-3.89-8.55-8.687-8.55-4.798 0-8.688 3.828-8.688 8.55 0 4.722 3.89 8.55 8.688 8.55z"
+      fill="#FFD21E"
+    ></path>
+    <path
+      d="M11.875 15.113c2.457 0 3.25-2.156 3.25-3.263 0-.576-.393-.394-1.023-.089-.582.283-1.365.675-2.224.675-1.798 0-3.25-1.693-3.25-.586 0 1.107.79 3.263 3.25 3.263h-.003z"
+      fill="#FF323D"
+    ></path>
+    <path
+      d="M14.76 9.21c.32.108.445.753.767.585.447-.233.707-.708.659-1.204a1.235 1.235 0 00-.879-1.059 1.262 1.262 0 00-1.33.394c-.322.384-.377.92-.14 1.36.153.283.638-.177.925-.079l-.002.003zm-5.887 0c-.32.108-.448.753-.768.585a1.226 1.226 0 01-.658-1.204c.048-.495.395-.913.878-1.059a1.262 1.262 0 011.33.394c.322.384.377.92.14 1.36-.152.283-.64-.177-.925-.079l.003.003zm1.12 5.34a2.166 2.166 0 011.325-1.106c.07-.02.144.06.219.171l.192.306c.069.1.139.175.209.175.074 0 .15-.074.223-.172l.205-.302c.08-.11.157-.188.234-.165.537.168.986.536 1.25 1.026.932-.724 1.275-1.905 1.275-2.633 0-.508-.306-.426-.81-.19l-.616.296c-.52.24-1.148.48-1.824.48-.676 0-1.302-.24-1.823-.48l-.589-.283c-.52-.248-.838-.342-.838.177 0 .703.32 1.831 1.187 2.56l.18.14z"
+      fill="#3A3B45"
+    ></path>
+    <path
+      d="M17.812 10.366a.806.806 0 00.813-.8c0-.441-.364-.8-.813-.8a.806.806 0 00-.812.8c0 .442.364.8.812.8zm-11.624 0a.806.806 0 00.812-.8c0-.441-.364-.8-.812-.8a.806.806 0 00-.813.8c0 .442.364.8.813.8zM4.515 13.073c-.405 0-.765.162-1.017.46a1.455 1.455 0 00-.333.925 1.801 1.801 0 00-.485-.074c-.387 0-.737.146-.985.409a1.41 1.41 0 00-.2 1.722 1.302 1.302 0 00-.447.694c-.06.222-.12.69.2 1.166a1.267 1.267 0 00-.093 1.236c.238.533.81.958 1.89 1.405l.24.096c.768.3 1.473.492 1.478.494.89.243 1.808.375 2.732.394 1.465 0 2.513-.443 3.115-1.314.93-1.342.842-2.575-.274-3.763l-.151-.154c-.692-.684-1.155-1.69-1.25-1.912-.195-.655-.71-1.383-1.562-1.383-.46.007-.889.233-1.15.605-.25-.31-.495-.553-.715-.694a1.87 1.87 0 00-.993-.312zm14.97 0c.405 0 .767.162 1.017.46.216.262.333.588.333.925.158-.047.322-.071.487-.074.388 0 .738.146.985.409a1.41 1.41 0 01.2 1.722c.22.178.377.422.445.694.06.222.12.69-.2 1.166.244.37.279.836.093 1.236-.238.533-.81.958-1.889 1.405l-.239.096c-.77.3-1.475.492-1.48.494-.89.243-1.808.375-2.732.394-1.465 0-2.513-.443-3.115-1.314-.93-1.342-.842-2.575.274-3.763l.151-.154c.695-.684 1.157-1.69 1.252-1.912.195-.655.708-1.383 1.56-1.383.46.007.889.233 1.15.605.25-.31.495-.553.718-.694.244-.162.523-.265.814-.3l.176-.012z"
+      fill="#FF9D0B"
+    ></path>
+    <path
+      d="M9.785 20.132c.688-.994.638-1.74-.305-2.667-.945-.928-1.495-2.288-1.495-2.288s-.205-.788-.672-.714c-.468.074-.81 1.25.17 1.971.977.721-.195 1.21-.573.534-.375-.677-1.405-2.416-1.94-2.751-.532-.332-.907-.148-.782.541.125.687 2.357 2.35 2.14 2.707-.218.362-.983-.42-.983-.42S2.953 14.9 2.43 15.46c-.52.558.398 1.026 1.7 1.803 1.308.778 1.41.985 1.225 1.28-.187.295-3.07-2.1-3.34-1.083-.27 1.011 2.943 1.304 2.745 2.006-.2.7-2.265-1.324-2.685-.537-.425.79 2.913 1.718 2.94 1.725 1.075.276 3.813.859 4.77-.522zm4.432 0c-.687-.994-.64-1.74.305-2.667.943-.928 1.493-2.288 1.493-2.288s.205-.788.675-.714c.465.074.807 1.25-.17 1.971-.98.721.195 1.21.57.534.377-.677 1.407-2.416 1.94-2.751.532-.332.91-.148.782.541-.125.687-2.355 2.35-2.137 2.707.215.362.98-.42.98-.42S21.05 14.9 21.57 15.46c.52.558-.395 1.026-1.7 1.803-1.308.778-1.408.985-1.225 1.28.187.295 3.07-2.1 3.34-1.083.27 1.011-2.94 1.304-2.743 2.006.2.7 2.263-1.324 2.685-.537.423.79-2.912 1.718-2.94 1.725-1.077.276-3.815.859-4.77-.522z"
+      fill="#FFD21E"
+    ></path>
+  </svg>
+);

src/components/icons/LiquidAILogo.tsx ADDED Viewed

	@@ -0,0 +1,12 @@

+import type React from "react";
+export default (props: React.SVGProps<SVGSVGElement>) => (
+  <svg
+    {...props}
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    fill="currentColor"
+  >
+    <path d="M12.028 8.546l-.008.005 3.03 5.25a3.94 3.94 0 01.643 2.162c0 .754-.212 1.46-.58 2.062l6.173-1.991L11.63 0 9.304 3.872l2.724 4.674zM6.837 24l4.85-4.053h-.013c-2.219 0-4.017-1.784-4.017-3.984 0-.794.235-1.534.64-2.156l2.865-4.976-2.381-4.087L2 16.034 6.83 24h.007zM13.737 19.382h-.001L8.222 24h8.182l4.148-6.769-6.815 2.151z"></path>
+  </svg>
+);

src/config/constants.ts ADDED Viewed

	@@ -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/constants/db.ts ADDED Viewed

	@@ -0,0 +1,3 @@

+export const DB_NAME = "tool-caller-db";
+export const STORE_NAME = "tools";
+export const SETTINGS_STORE_NAME = "settings";

src/constants/examples.ts ADDED Viewed

	@@ -0,0 +1,39 @@

+export interface Example {
+  icon: string;
+  displayText: string;
+  messageText: string;
+}
+export const DEFAULT_EXAMPLES: Example[] = [
+  {
+    icon: "🌍",
+    displayText: "Where am I and what time is it?",
+    messageText: "Where am I and what time is it?",
+  },
+  {
+    icon: "👋",
+    displayText: "Say hello",
+    messageText: "Say hello",
+  },
+  {
+    icon: "🔢",
+    displayText: "Solve a math problem",
+    messageText: "What is 123 plus 15% of 200 all divided by 7?",
+  },
+  {
+    icon: "😴",
+    displayText: "Sleep for 3 seconds",
+    messageText: "Sleep for 3 seconds",
+  },
+  {
+    icon: "🎲",
+    displayText: "Generate a random number",
+    messageText: "Generate a random number between 1 and 100.",
+  },
+  {
+    icon: "📹",
+    displayText: "Play a video",
+    messageText:
+      'Open the following webpage: "https://www.youtube.com/embed/dQw4w9WgXcQ?autoplay=1".',
+  },
+];

src/constants/models.ts ADDED Viewed

	@@ -0,0 +1,5 @@

+export const MODEL_OPTIONS = [
+  { id: "350M", label: "LFM2-350M", size: "350M parameters (312 MB)" },
+  { id: "700M", label: "LFM2-700M", size: "700M parameters (579 MB)" },
+  { id: "1.2B", label: "LFM2-1.2B", size: "1.2B parameters (868 MB)" },
+];

src/constants/systemPrompt.ts ADDED Viewed

	@@ -0,0 +1,11 @@

+export const DEFAULT_SYSTEM_PROMPT = [
+  "You are an AI assistant with access to a set of tools.",
+  "When a user asks a question, determine if a tool should be called to help answer.",
+  "If a tool is needed, respond with a tool call using the following format: ",
+  "<|tool_call_start|>[tool_function_call_1, tool_function_call_2, ...]<|tool_call_end|>.",
+  'Each tool function call should use Python-like syntax, e.g., speak("Hello"), random_number(min=1, max=10).',
+  "If no tool is needed, you should answer the user directly without calling any tools.",
+  "Always use the most relevant tool(s) for the user's request.",
+  "If a tool returns an error, explain the error to the user.",
+  "Be concise and helpful.",
+].join(" ");

src/hooks/useLLM.ts ADDED Viewed

	@@ -0,0 +1,234 @@

+import { useState, useEffect, useRef, useCallback } from "react";
+import {
+  AutoModelForCausalLM,
+  AutoTokenizer,
+  TextStreamer,
+} from "@huggingface/transformers";
+interface LLMState {
+  isLoading: boolean;
+  isReady: boolean;
+  error: string | null;
+  progress: number;
+}
+interface LLMInstance {
+  model: any;
+  tokenizer: any;
+}
+let moduleCache: {
+  [modelId: string]: {
+    instance: LLMInstance | null;
+    loadingPromise: Promise<LLMInstance> | null;
+  };
+} = {};
+export const useLLM = (modelId?: string) => {
+  const [state, setState] = useState<LLMState>({
+    isLoading: false,
+    isReady: false,
+    error: null,
+    progress: 0,
+  });
+  const instanceRef = useRef<LLMInstance | null>(null);
+  const loadingPromiseRef = useRef<Promise<LLMInstance> | null>(null);
+  const abortControllerRef = useRef<AbortController | null>(null);
+  const pastKeyValuesRef = useRef<any>(null);
+  const loadModel = useCallback(async () => {
+    if (!modelId) {
+      throw new Error("Model ID is required");
+    }
+    const MODEL_ID = `onnx-community/LFM2-${modelId}-ONNX`;
+    if (!moduleCache[modelId]) {
+      moduleCache[modelId] = {
+        instance: null,
+        loadingPromise: null,
+      };
+    }
+    const cache = moduleCache[modelId];
+    const existingInstance = instanceRef.current || cache.instance;
+    if (existingInstance) {
+      instanceRef.current = existingInstance;
+      cache.instance = existingInstance;
+      setState((prev) => ({ ...prev, isReady: true, isLoading: false }));
+      return existingInstance;
+    }
+    const existingPromise = loadingPromiseRef.current || cache.loadingPromise;
+    if (existingPromise) {
+      try {
+        const instance = await existingPromise;
+        instanceRef.current = instance;
+        cache.instance = instance;
+        setState((prev) => ({ ...prev, isReady: true, isLoading: false }));
+        return instance;
+      } catch (error) {
+        setState((prev) => ({
+          ...prev,
+          isLoading: false,
+          error:
+            error instanceof Error ? error.message : "Failed to load model",
+        }));
+        throw error;
+      }
+    }
+    setState((prev) => ({
+      ...prev,
+      isLoading: true,
+      error: null,
+      progress: 0,
+    }));
+    abortControllerRef.current = new AbortController();
+    const loadingPromise = (async () => {
+      try {
+        const progressCallback = (progress: any) => {
+          // Only update progress for weights
+          if (
+            progress.status === "progress" &&
+            progress.file.endsWith(".onnx_data")
+          ) {
+            const percentage = Math.round(
+              (progress.loaded / progress.total) * 100,
+            );
+            setState((prev) => ({ ...prev, progress: percentage }));
+          }
+        };
+        const tokenizer = await AutoTokenizer.from_pretrained(MODEL_ID, {
+          progress_callback: progressCallback,
+        });
+        const model = await AutoModelForCausalLM.from_pretrained(MODEL_ID, {
+          dtype: "q4f16",
+          device: "webgpu",
+          progress_callback: progressCallback,
+        });
+        const instance = { model, tokenizer };
+        instanceRef.current = instance;
+        cache.instance = instance;
+        loadingPromiseRef.current = null;
+        cache.loadingPromise = null;
+        setState((prev) => ({
+          ...prev,
+          isLoading: false,
+          isReady: true,
+          progress: 100,
+        }));
+        return instance;
+      } catch (error) {
+        loadingPromiseRef.current = null;
+        cache.loadingPromise = null;
+        setState((prev) => ({
+          ...prev,
+          isLoading: false,
+          error:
+            error instanceof Error ? error.message : "Failed to load model",
+        }));
+        throw error;
+      }
+    })();
+    loadingPromiseRef.current = loadingPromise;
+    cache.loadingPromise = loadingPromise;
+    return loadingPromise;
+  }, [modelId]);
+  const generateResponse = useCallback(
+    async (
+      messages: Array<{ role: string; content: string }>,
+      tools: Array<any>,
+      onToken?: (token: string) => void,
+    ): Promise<string> => {
+      const instance = instanceRef.current;
+      if (!instance) {
+        throw new Error("Model not loaded. Call loadModel() first.");
+      }
+      const { model, tokenizer } = instance;
+      // Apply chat template with tools
+      const input = tokenizer.apply_chat_template(messages, {
+        tools,
+        add_generation_prompt: true,
+        return_dict: true,
+      });
+      const streamer = onToken
+        ? new TextStreamer(tokenizer, {
+            skip_prompt: true,
+            skip_special_tokens: false,
+            callback_function: (token: string) => {
+              onToken(token);
+            },
+          })
+        : undefined;
+      // Generate the response
+      const { sequences, past_key_values } = await model.generate({
+        ...input,
+        past_key_values: pastKeyValuesRef.current,
+        max_new_tokens: 512,
+        do_sample: false,
+        streamer,
+        return_dict_in_generate: true,
+      });
+      pastKeyValuesRef.current = past_key_values;
+      // Decode the generated text with special tokens preserved (except final <|im_end|>) for tool call detection
+      const response = tokenizer
+        .batch_decode(sequences.slice(null, [input.input_ids.dims[1], null]), {
+          skip_special_tokens: false,
+        })[0]
+        .replace(/<\|im_end\|>$/, "");
+      return response;
+    },
+    [],
+  );
+  const clearPastKeyValues = useCallback(() => {
+    pastKeyValuesRef.current = null;
+  }, []);
+  const cleanup = useCallback(() => {
+    if (abortControllerRef.current) {
+      abortControllerRef.current.abort();
+    }
+  }, []);
+  useEffect(() => {
+    return cleanup;
+  }, [cleanup]);
+  useEffect(() => {
+    if (modelId && moduleCache[modelId]) {
+      const existingInstance =
+        instanceRef.current || moduleCache[modelId].instance;
+      if (existingInstance) {
+        instanceRef.current = existingInstance;
+        setState((prev) => ({ ...prev, isReady: true }));
+      }
+    }
+  }, [modelId]);
+  return {
+    ...state,
+    loadModel,
+    generateResponse,
+    clearPastKeyValues,
+    cleanup,
+  };
+};

src/hooks/useMCP.ts ADDED Viewed

	@@ -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/index.css ADDED Viewed

	@@ -0,0 +1 @@


1	+ @import "tailwindcss";

src/main.tsx ADDED Viewed

	@@ -0,0 +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>
+    <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 ADDED Viewed

	@@ -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 ADDED Viewed

	@@ -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/tools/get_location.js ADDED Viewed

	@@ -0,0 +1,84 @@

+/**
+ * Get the user's current location using the browser's geolocation API.
+ * @returns {Promise<{ latitude: number, longitude: number }>} The current position { latitude, longitude }.
+ */
+export async function get_location() {
+  return new Promise((resolve, reject) => {
+    if (!navigator.geolocation) {
+      reject("Geolocation not supported.");
+      return;
+    }
+    navigator.geolocation.getCurrentPosition(
+      (pos) =>
+        resolve({
+          latitude: pos.coords.latitude,
+          longitude: pos.coords.longitude,
+        }),
+      (err) => reject(err.message || "Geolocation error"),
+    );
+  });
+}
+export default (input, output) =>
+  React.createElement(
+    "div",
+    { className: "bg-green-50 border border-green-200 rounded-lg p-4" },
+    React.createElement(
+      "div",
+      { className: "flex items-center mb-2" },
+      React.createElement(
+        "div",
+        {
+          className:
+            "w-8 h-8 bg-green-100 rounded-full flex items-center justify-center mr-3",
+        },
+        "📍",
+      ),
+      React.createElement(
+        "h3",
+        { className: "text-green-900 font-semibold" },
+        "Location",
+      ),
+    ),
+    output?.latitude && output?.longitude
+      ? React.createElement(
+          "div",
+          { className: "space-y-1 text-sm" },
+          React.createElement(
+            "p",
+            { className: "text-green-700" },
+            React.createElement(
+              "span",
+              { className: "font-medium" },
+              "Latitude: ",
+            ),
+            output.latitude.toFixed(6),
+          ),
+          React.createElement(
+            "p",
+            { className: "text-green-700" },
+            React.createElement(
+              "span",
+              { className: "font-medium" },
+              "Longitude: ",
+            ),
+            output.longitude.toFixed(6),
+          ),
+          React.createElement(
+            "a",
+            {
+              href: `https://maps.google.com?q=${output.latitude},${output.longitude}`,
+              target: "_blank",
+              rel: "noopener noreferrer",
+              className:
+                "inline-block mt-2 text-green-600 hover:text-green-800 underline text-xs",
+            },
+            "View on Google Maps",
+          ),
+        )
+      : React.createElement(
+          "p",
+          { className: "text-green-700 text-sm" },
+          JSON.stringify(output),
+        ),
+  );

src/tools/get_time.js ADDED Viewed

	@@ -0,0 +1,51 @@

+/**
+ * Get the current date and time.
+ * @returns {{ iso: string, local: string }} The current date and time as ISO and local time strings.
+ */
+export function get_time() {
+  const now = new Date();
+  return {
+    iso: now.toISOString(),
+    local: now.toLocaleString(undefined, {
+      dateStyle: "full",
+      timeStyle: "long",
+    }),
+  };
+}
+export default (input, output) =>
+  React.createElement(
+    "div",
+    { className: "bg-amber-50 border border-amber-200 rounded-lg p-4" },
+    React.createElement(
+      "div",
+      { className: "flex items-center mb-2" },
+      React.createElement(
+        "div",
+        {
+          className:
+            "w-8 h-8 bg-amber-100 rounded-full flex items-center justify-center mr-3",
+        },
+        "🕐",
+      ),
+      React.createElement(
+        "h3",
+        { className: "text-amber-900 font-semibold" },
+        "Current Time",
+      ),
+    ),
+    React.createElement(
+      "div",
+      { className: "text-sm space-y-1" },
+      React.createElement(
+        "p",
+        { className: "text-amber-700 font-mono" },
+        output.local,
+      ),
+      React.createElement(
+        "p",
+        { className: "text-amber-600 text-xs" },
+        new Date(output.iso).toLocaleString(),
+      ),
+    ),
+  );

src/tools/index.ts ADDED Viewed

	@@ -0,0 +1,19 @@

+import SPEAK_TOOL from "./speak.js?raw";
+import GET_LOCATION_TOOL from "./get_location.js?raw";
+import SLEEP_TOOL from "./sleep.js?raw";
+import GET_TIME_TOOL from "./get_time.js?raw";
+import RANDOM_NUMBER_TOOL from "./random_number.js?raw";
+import MATH_EVAL_TOOL from "./math_eval.js?raw";
+import TEMPLATE_TOOL from "./template.js?raw";
+import OPEN_WEBPAGE_TOOL from "./open_webpage.js?raw";
+export const DEFAULT_TOOLS = {
+  speak: SPEAK_TOOL,
+  get_location: GET_LOCATION_TOOL,
+  sleep: SLEEP_TOOL,
+  get_time: GET_TIME_TOOL,
+  random_number: RANDOM_NUMBER_TOOL,
+  math_eval: MATH_EVAL_TOOL,
+  open_webpage: OPEN_WEBPAGE_TOOL,
+};
+export const TEMPLATE = TEMPLATE_TOOL;

src/tools/math_eval.js ADDED Viewed

	@@ -0,0 +1,54 @@

+/**
+ * Evaluate a math expression.
+ * @param {string} expression - The math expression (e.g., "2 + 2 * (3 - 1)").
+ * @returns {number} The result of the expression.
+ */
+export function math_eval(expression) {
+  // Only allow numbers, spaces, and math symbols: + - * / % ( ) .
+  if (!/^[\d\s+\-*/%.()]+$/.test(expression)) {
+    throw new Error("Invalid characters in expression.");
+  }
+  return Function('"use strict";return (' + expression + ")")();
+}
+export default (input, output) =>
+  React.createElement(
+    "div",
+    { className: "bg-emerald-50 border border-emerald-200 rounded-lg p-4" },
+    React.createElement(
+      "div",
+      { className: "flex items-center mb-2" },
+      React.createElement(
+        "div",
+        {
+          className:
+            "w-8 h-8 bg-emerald-100 rounded-full flex items-center justify-center mr-3",
+        },
+        "🧮",
+      ),
+      React.createElement(
+        "h3",
+        { className: "text-emerald-900 font-semibold" },
+        "Math Evaluation",
+      ),
+    ),
+    React.createElement(
+      "div",
+      { className: "text-center" },
+      React.createElement(
+        "div",
+        { className: "text-lg font-mono text-emerald-700 mb-1" },
+        input.expression || "Unknown expression",
+      ),
+      React.createElement(
+        "div",
+        { className: "text-2xl font-bold text-emerald-600 mb-1" },
+        `= ${output}`,
+      ),
+      React.createElement(
+        "p",
+        { className: "text-emerald-500 text-xs" },
+        "Calculation result",
+      ),
+    ),
+  );

src/tools/open_webpage.js ADDED Viewed

	@@ -0,0 +1,49 @@

+/**
+ * Open a webpage
+ * @param {string} src - The URL of the webpage.
+ * @returns {string} The validated URL.
+ */
+export function open_webpage(src) {
+  try {
+    const urlObj = new URL(src);
+    if (!["http:", "https:"].includes(urlObj.protocol)) {
+      throw new Error("Only HTTP and HTTPS URLs are allowed.");
+    }
+    return urlObj.href;
+  } catch (error) {
+    throw new Error("Invalid URL provided.");
+  }
+}
+export default (input, output) => {
+  return 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" },
+        "Web Page",
+      ),
+    ),
+    React.createElement("iframe", {
+      src: output,
+      className: "w-full border border-blue-300 rounded",
+      width: 480,
+      height: 360,
+      title: "Embedded content",
+      allow: "autoplay",
+      frameBorder: "0",
+    }),
+  );
+};

src/tools/random_number.js ADDED Viewed

	@@ -0,0 +1,51 @@

+/**
+ * Generate a random integer between min and max (inclusive).
+ * @param {number} min - Minimum value (inclusive).
+ * @param {number} max - Maximum value (inclusive).
+ * @returns {number} A random integer.
+ */
+export function random_number(min, max) {
+  min = Math.ceil(Number(min));
+  max = Math.floor(Number(max));
+  if (isNaN(min) || isNaN(max) || min > max) {
+    throw new Error("Invalid min or max value.");
+  }
+  return Math.floor(Math.random() * (max - min + 1)) + min;
+}
+export default (input, output) =>
+  React.createElement(
+    "div",
+    { className: "bg-indigo-50 border border-indigo-200 rounded-lg p-4" },
+    React.createElement(
+      "div",
+      { className: "flex items-center mb-2" },
+      React.createElement(
+        "div",
+        {
+          className:
+            "w-8 h-8 bg-indigo-100 rounded-full flex items-center justify-center mr-3",
+        },
+        "🎲",
+      ),
+      React.createElement(
+        "h3",
+        { className: "text-indigo-900 font-semibold" },
+        "Random Number",
+      ),
+    ),
+    React.createElement(
+      "div",
+      { className: "text-center" },
+      React.createElement(
+        "div",
+        { className: "text-3xl font-bold text-indigo-600 mb-1" },
+        output,
+      ),
+      React.createElement(
+        "p",
+        { className: "text-indigo-500 text-xs" },
+        `Range: ${input.min || "?"} - ${input.max || "?"}`,
+      ),
+    ),
+  );

src/tools/sleep.js ADDED Viewed

	@@ -0,0 +1,45 @@

+/**
+ * Sleep for a given number of seconds.
+ * @param {number} seconds - The number of seconds to sleep.
+ * @return {void}
+ */
+export async function sleep(seconds) {
+  return new Promise((resolve) => setTimeout(resolve, seconds * 1000));
+}
+export default (input, output) =>
+  React.createElement(
+    "div",
+    { className: "bg-purple-50 border border-purple-200 rounded-lg p-4" },
+    React.createElement(
+      "div",
+      { className: "flex items-center mb-2" },
+      React.createElement(
+        "div",
+        {
+          className:
+            "w-8 h-8 bg-purple-100 rounded-full flex items-center justify-center mr-3",
+        },
+        "😴",
+      ),
+      React.createElement(
+        "h3",
+        { className: "text-purple-900 font-semibold" },
+        "Sleep",
+      ),
+    ),
+    React.createElement(
+      "div",
+      { className: "text-sm space-y-1" },
+      React.createElement(
+        "p",
+        { className: "text-purple-700 font-medium" },
+        `Slept for ${input.seconds || "unknown"} seconds`,
+      ),
+      React.createElement(
+        "p",
+        { className: "text-purple-600 text-xs" },
+        output,
+      ),
+    ),
+  );

src/tools/speak.js ADDED Viewed

	@@ -0,0 +1,58 @@

+/**
+ * Speak text using the browser's speech synthesis API.
+ * @param {string} text - The text to speak.
+ * @param {string} [voice] - The name of the voice to use (optional).
+ * @return {void}
+ */
+export function speak(text, voice = undefined) {
+  const utter = new window.SpeechSynthesisUtterance(text);
+  if (voice) {
+    const voices = window.speechSynthesis.getVoices();
+    const match = voices.find((v) => v.name === voice);
+    if (match) utter.voice = match;
+  }
+  window.speechSynthesis.speak(utter);
+}
+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" },
+        "Speech Synthesis",
+      ),
+    ),
+    React.createElement(
+      "div",
+      { className: "text-sm space-y-1" },
+      React.createElement(
+        "p",
+        { className: "text-blue-700 font-medium" },
+        `Speaking: "${input.text || "Unknown text"}"`,
+      ),
+      input.voice &&
+        React.createElement(
+          "p",
+          { className: "text-blue-600 text-xs" },
+          `Voice: ${input.voice}`,
+        ),
+      React.createElement(
+        "p",
+        { className: "text-blue-600 text-xs" },
+        typeof output === "string" ? output : "Speech completed successfully",
+      ),
+    ),
+  );

src/tools/template.js ADDED Viewed

	@@ -0,0 +1,47 @@

+/**
+ * Description of the tool.
+ * @param {any} parameter1 - Description of the first parameter.
+ * @param {any} parameter2 - Description of the second parameter.
+ * @returns {any} Description of the return value.
+ */
+export function new_tool(parameter1, parameter2) {
+  // TODO: Implement the tool logic here
+  return true; // Placeholder return value
+}
+export default (input, output) =>
+  React.createElement(
+    "div",
+    { className: "bg-amber-50 border border-amber-200 rounded-lg p-4" },
+    React.createElement(
+      "div",
+      { className: "flex items-center mb-2" },
+      React.createElement(
+        "div",
+        {
+          className:
+            "w-8 h-8 bg-amber-100 rounded-full flex items-center justify-center mr-3",
+        },
+        "🛠️",
+      ),
+      React.createElement(
+        "h3",
+        { className: "text-amber-900 font-semibold" },
+        "Tool Name",
+      ),
+    ),
+    React.createElement(
+      "div",
+      { className: "text-sm space-y-1" },
+      React.createElement(
+        "p",
+        { className: "text-amber-700 font-medium" },
+        `Input: ${JSON.stringify(input)}`,
+      ),
+      React.createElement(
+        "p",
+        { className: "text-amber-600 text-xs" },
+        `Output: ${output}`,
+      ),
+    ),
+  );

src/types/mcp.ts ADDED Viewed

	@@ -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.ts ADDED Viewed

	@@ -0,0 +1,370 @@

+interface ParsedCall {
+  name: string;
+  positionalArgs: any[];
+  keywordArgs: Record<string, any>;
+}
+interface Schema {
+  name: string;
+  description: string;
+  parameters: {
+    type: string;
+    properties: Record<
+      string,
+      {
+        type: string;
+        description: string;
+        default?: any;
+      }
+    >;
+    required: string[];
+  };
+}
+interface JSDocParam {
+  type: string;
+  description: string;
+  isOptional: boolean;
+  defaultValue?: string;
+}
+const parseArguments = (argsString: string): string[] => {
+  const args: string[] = [];
+  let current = "";
+  let inQuotes = false;
+  let quoteChar = "";
+  let depth = 0;
+  for (let i = 0; i < argsString.length; i++) {
+    const char = argsString[i];
+    if (!inQuotes && (char === '"' || char === "'")) {
+      inQuotes = true;
+      quoteChar = char;
+      current += char;
+    } else if (inQuotes && char === quoteChar) {
+      inQuotes = false;
+      quoteChar = "";
+      current += char;
+    } else if (!inQuotes && char === "(") {
+      depth++;
+      current += char;
+    } else if (!inQuotes && char === ")") {
+      depth--;
+      current += char;
+    } else if (!inQuotes && char === "," && depth === 0) {
+      args.push(current.trim());
+      current = "";
+    } else {
+      current += char;
+    }
+  }
+  if (current.trim()) {
+    args.push(current.trim());
+  }
+  return args;
+};
+export const extractPythonicCalls = (toolCallContent: string): string[] => {
+  try {
+    const cleanContent = toolCallContent.trim();
+    try {
+      const parsed = JSON.parse(cleanContent);
+      if (Array.isArray(parsed)) {
+        return parsed;
+      }
+    } catch {
+      // Fallback to manual parsing
+    }
+    if (cleanContent.startsWith("[") && cleanContent.endsWith("]")) {
+      const inner = cleanContent.slice(1, -1).trim();
+      if (!inner) return [];
+      return parseArguments(inner).map((call) =>
+        call.trim().replace(/^['"]|['"]$/g, ""),
+      );
+    }
+    return [cleanContent];
+  } catch (error) {
+    console.error("Error parsing tool calls:", error);
+    return [];
+  }
+};
+export const parsePythonicCalls = (command: string): ParsedCall | null => {
+  const callMatch = command.match(/^([a-zA-Z0-9_]+)\((.*)\)$/);
+  if (!callMatch) return null;
+  const [, name, argsStr] = callMatch;
+  const args = parseArguments(argsStr);
+  const positionalArgs: any[] = [];
+  const keywordArgs: Record<string, any> = {};
+  for (const arg of args) {
+    const kwargMatch = arg.match(/^([a-zA-Z0-9_]+)\s*=\s*(.*)$/);
+    if (kwargMatch) {
+      const [, key, value] = kwargMatch;
+      try {
+        keywordArgs[key] = JSON.parse(value);
+      } catch {
+        keywordArgs[key] = value;
+      }
+    } else {
+      try {
+        positionalArgs.push(JSON.parse(arg));
+      } catch {
+        positionalArgs.push(arg);
+      }
+    }
+  }
+  return { name, positionalArgs, keywordArgs };
+};
+export const extractFunctionAndRenderer = (
+  code: string,
+): { functionCode: string; rendererCode?: string } => {
+  if (typeof code !== "string") {
+    return { functionCode: code };
+  }
+  const exportMatch = code.match(/export\s+default\s+/);
+  if (!exportMatch) {
+    return { functionCode: code };
+  }
+  const exportIndex = exportMatch.index!;
+  const functionCode = code.substring(0, exportIndex).trim();
+  const rendererCode = code.substring(exportIndex).trim();
+  return { functionCode, rendererCode };
+};
+/**
+ * Helper function to extract JSDoc parameters from JSDoc comments.
+ */
+const extractJSDocParams = (
+  jsdoc: string,
+): Record<string, JSDocParam & { jsdocDefault?: string }> => {
+  const jsdocParams: Record<string, JSDocParam & { jsdocDefault?: string }> =
+    {};
+  const lines = jsdoc
+    .split("\n")
+    .map((line) => line.trim().replace(/^\*\s?/, ""));
+  const paramRegex =
+    /@param\s+\{([^}]+)\}\s+(\[?[a-zA-Z0-9_]+(?:=[^\]]+)?\]?|\S+)\s*-?\s*(.*)?/;
+  for (const line of lines) {
+    const paramMatch = line.match(paramRegex);
+    if (paramMatch) {
+      let [, type, namePart, description] = paramMatch;
+      description = description || "";
+      let isOptional = false;
+      let name = namePart;
+      let jsdocDefault: string | undefined = undefined;
+      if (name.startsWith("[") && name.endsWith("]")) {
+        isOptional = true;
+        name = name.slice(1, -1);
+      }
+      if (name.includes("=")) {
+        const [n, def] = name.split("=");
+        name = n.trim();
+        jsdocDefault = def.trim().replace(/['"]/g, "");
+      }
+      jsdocParams[name] = {
+        type: type.toLowerCase(),
+        description: description.trim(),
+        isOptional,
+        defaultValue: undefined,
+        jsdocDefault,
+      };
+    }
+  }
+  return jsdocParams;
+};
+/**
+ * Helper function to extract function signature information.
+ */
+const extractFunctionSignature = (
+  functionCode: string,
+): {
+  name: string;
+  params: { name: string; defaultValue?: string }[];
+} | null => {
+  const functionSignatureMatch = functionCode.match(
+    /function\s+([a-zA-Z0-9_]+)\s*\(([^)]*)\)/,
+  );
+  if (!functionSignatureMatch) {
+    return null;
+  }
+  const functionName = functionSignatureMatch[1];
+  const params = functionSignatureMatch[2]
+    .split(",")
+    .map((p) => p.trim())
+    .filter(Boolean)
+    .map((p) => {
+      const [name, defaultValue] = p.split("=").map((s) => s.trim());
+      return { name, defaultValue };
+    });
+  return { name: functionName, params };
+};
+export const generateSchemaFromCode = (code: string): Schema => {
+  const { functionCode } = extractFunctionAndRenderer(code);
+  if (typeof functionCode !== "string") {
+    return {
+      name: "invalid_code",
+      description: "Code is not a valid string.",
+      parameters: { type: "object", properties: {}, required: [] },
+    };
+  }
+  // 1. Extract function signature, name, and parameter names directly from the code
+  const signatureInfo = extractFunctionSignature(functionCode);
+  if (!signatureInfo) {
+    return {
+      name: "invalid_function",
+      description: "Could not parse function signature.",
+      parameters: { type: "object", properties: {}, required: [] },
+    };
+  }
+  const { name: functionName, params: paramsFromSignature } = signatureInfo;
+  const schema: Schema = {
+    name: functionName,
+    description: "",
+    parameters: {
+      type: "object",
+      properties: {},
+      required: [],
+    },
+  };
+  // 2. Parse JSDoc comments to get descriptions and types
+  const jsdocMatch = functionCode.match(/\/\*\*([\s\S]*?)\*\//);
+  let jsdocParams: Record<string, JSDocParam & { jsdocDefault?: string }> = {};
+  if (jsdocMatch) {
+    const jsdoc = jsdocMatch[1];
+    jsdocParams = extractJSDocParams(jsdoc);
+    const descriptionLines = jsdoc
+      .split("\n")
+      .map((line) => line.trim().replace(/^\*\s?/, ""))
+      .filter((line) => !line.startsWith("@") && line);
+    schema.description = descriptionLines.join(" ").trim();
+  }
+  // 3. Combine signature parameters with JSDoc info
+  for (const param of paramsFromSignature) {
+    const paramName = param.name;
+    const jsdocInfo = jsdocParams[paramName];
+    schema.parameters.properties[paramName] = {
+      type: jsdocInfo ? jsdocInfo.type : "any",
+      description: jsdocInfo ? jsdocInfo.description : "",
+    };
+    // Prefer default from signature, then from JSDoc
+    if (param.defaultValue !== undefined) {
+      // Try to parse as JSON, fallback to string
+      try {
+        schema.parameters.properties[paramName].default = JSON.parse(
+          param.defaultValue.replace(/'/g, '"'),
+        );
+      } catch {
+        schema.parameters.properties[paramName].default = param.defaultValue;
+      }
+    } else if (jsdocInfo && jsdocInfo.jsdocDefault !== undefined) {
+      schema.parameters.properties[paramName].default = jsdocInfo.jsdocDefault;
+    }
+    // A parameter is required if:
+    // - Not optional in JSDoc
+    // - No default in signature
+    // - No default in JSDoc
+    const hasDefault =
+      param.defaultValue !== undefined ||
+      (jsdocInfo && jsdocInfo.jsdocDefault !== undefined);
+    if (!jsdocInfo || (!jsdocInfo.isOptional && !hasDefault)) {
+      schema.parameters.required.push(paramName);
+    }
+  }
+  return schema;
+};
+/**
+ * Extracts tool call content from a string using the tool call markers.
+ */
+export const extractToolCallContent = (content: string): string | null => {
+  const toolCallMatch = content.match(
+    /<\|tool_call_start\|>(.*?)<\|tool_call_end\|>/s,
+  );
+  return toolCallMatch ? toolCallMatch[1].trim() : null;
+};
+/**
+ * Maps positional and keyword arguments to named parameters based on schema.
+ */
+export const mapArgsToNamedParams = (
+  paramNames: string[],
+  positionalArgs: any[],
+  keywordArgs: Record<string, any>,
+): Record<string, any> => {
+  const namedParams: Record<string, any> = Object.create(null);
+  positionalArgs.forEach((arg, idx) => {
+    if (idx < paramNames.length) {
+      namedParams[paramNames[idx]] = arg;
+    }
+  });
+  Object.assign(namedParams, keywordArgs);
+  return namedParams;
+};
+export const getErrorMessage = (error: unknown): string => {
+  if (error instanceof Error) {
+    return error.message;
+  }
+  if (typeof error === "string") {
+    return error;
+  }
+  if (error && typeof error === "object") {
+    return JSON.stringify(error);
+  }
+  return String(error);
+};
+/**
+ * Adapted from https://stackoverflow.com/questions/11381673/detecting-a-mobile-browser.
+ */
+export function isMobileOrTablet() {
+  let check = false;
+  (function (a: string) {
+    if (
+      /(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino|android|ipad|playbook|silk/i.test(
+        a,
+      ) ||
+      /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(
+        a.slice(0, 4),
+      )
+    )
+      check = true;
+  })(
+    navigator.userAgent ||
+      navigator.vendor ||
+      ("opera" in window && typeof window.opera === "string"
+        ? window.opera
+        : ""),
+  );
+  return check;
+}

src/utils/storage.ts ADDED Viewed

	@@ -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}`);
+  }
+};

src/vite-env.d.ts ADDED Viewed

	@@ -0,0 +1 @@


1	+ /// <reference types="vite/client" />

tsconfig.app.json ADDED Viewed

	@@ -0,0 +1,27 @@

+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["src"]
+}

tsconfig.json ADDED Viewed

	@@ -0,0 +1,7 @@

+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}

tsconfig.node.json ADDED Viewed

	@@ -0,0 +1,25 @@

+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2023",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["vite.config.ts"]
+}

vite.config.ts ADDED Viewed

	@@ -0,0 +1,8 @@

+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+import tailwindcss from "@tailwindcss/vite";
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [react(), tailwindcss()],
+});