Initial Checkin

.gitattributes

@@ -33,3 +33,5 @@ saved_model/**/* 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
+*.png filter=lfs diff=lfs merge=lfs -text

.gitignore

@@ -1,23 +1,24 @@
-# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
-
-# dependencies
-/node_modules
-/.pnp
-.pnp.js
-
-# testing
-/coverage
-
-# production
-/build
-
-# misc
-.DS_Store
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
-
+# 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.md

@@ -1,81 +1,15 @@
 ---
 title: LFM2 MCP
-emoji: 🐠
-colorFrom: indigo
-colorTo: red
+emoji: 🌐
+colorFrom: blue
+colorTo: yellow
 sdk: static
-pinned: false
+pinned: true
+license: apache-2.0
+short_description: In-browser tool calling with MCP, powered by Transformers.js
 app_build_command: npm run build
-app_file: build/index.html
+app_file: dist/index.html
+thumbnail: https://huggingface.co/spaces/LiquidAI/LFM2-MCP/resolve/main/public/thumbnail.png
 ---
 
-# Getting Started with Create React App
-
-This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
-
-## Available Scripts
-
-In the project directory, you can run:
-
-### `npm start`
-
-Runs the app in the development mode.\
-Open [http://localhost:3000](http://localhost:3000) to view it in your browser.
-
-The page will reload when you make changes.\
-You may also see any lint errors in the console.
-
-### `npm test`
-
-Launches the test runner in the interactive watch mode.\
-See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
-
-### `npm run build`
-
-Builds the app for production to the `build` folder.\
-It correctly bundles React in production mode and optimizes the build for the best performance.
-
-The build is minified and the filenames include the hashes.\
-Your app is ready to be deployed!
-
-See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
-
-### `npm run eject`
-
-**Note: this is a one-way operation. Once you `eject`, you can't go back!**
-
-If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
-
-Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own.
-
-You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it.
-
-## Learn More
-
-You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
-
-To learn React, check out the [React documentation](https://reactjs.org/).
-
-### Code Splitting
-
-This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting)
-
-### Analyzing the Bundle Size
-
-This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)
-
-### Making a Progressive Web App
-
-This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)
-
-### Advanced Configuration
-
-This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)
-
-### Deployment
-
-This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)
-
-### `npm run build` fails to minify
-
-This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)
+Check out the configuration reference at <https://huggingface.co/docs/hub/spaces-config-reference>

eslint.config.js

@@ -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.html

@@ -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 MCP - In-Browser Tool Calling</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package.json

@@ -1,39 +1,37 @@
 {
-  "name": "react-template",
-  "version": "0.1.0",
+  "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": {
-    "@testing-library/dom": "^10.4.0",
-    "@testing-library/jest-dom": "^6.6.3",
-    "@testing-library/react": "^16.3.0",
-    "@testing-library/user-event": "^13.5.0",
+    "@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-scripts": "5.0.1",
-    "web-vitals": "^2.1.4"
-  },
-  "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject"
-  },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ]
+    "react-router-dom": "^7.8.0",
+    "tailwindcss": "^4.1.11"
   },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
+  "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/index.html

@@ -1,43 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#000000" />
-    <meta
-      name="description"
-      content="Web site created using create-react-app"
-    />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
-    <!--
-      manifest.json provides metadata used when your web app is installed on a
-      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-    -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
-
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      work correctly both with client-side routing and a non-root public URL.
-      Learn how to configure a non-root public URL by running `npm run build`.
-    -->
-    <title>React App</title>
-  </head>
-  <body>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root"></div>
-    <!--
-      This HTML file is a template.
-      If you open it directly in the browser, you will see an empty page.
-
-      You can add webfonts, meta tags, or analytics to this file.
-      The build step will place the bundled scripts into the <body> tag.
-
-      To begin the development, run `npm start` or `yarn start`.
-      To create a production bundle, use `npm run build` or `yarn build`.
-    -->
-  </body>
-</html>

public/manifest.json

@@ -1,25 +0,0 @@
-{
-  "short_name": "React App",
-  "name": "Create React App Sample",
-  "icons": [
-    {
-      "src": "favicon.ico",
-      "sizes": "64x64 32x32 24x24 16x16",
-      "type": "image/x-icon"
-    },
-    {
-      "src": "logo192.png",
-      "type": "image/png",
-      "sizes": "192x192"
-    },
-    {
-      "src": "logo512.png",
-      "type": "image/png",
-      "sizes": "512x512"
-    }
-  ],
-  "start_url": ".",
-  "display": "standalone",
-  "theme_color": "#000000",
-  "background_color": "#ffffff"
-}

public/robots.txt

@@ -1,3 +0,0 @@
-# https://www.robotstxt.org/robotstxt.html
-User-agent: *
-Disallow:

src/App.css

@@ -1,38 +0,0 @@
-.App {
-  text-align: center;
-}
-
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}

src/App.js

@@ -1,25 +0,0 @@
-import logo from './logo.svg';
-import './App.css';
-
-function App() {
-  return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
-  );
-}
-
-export default App;

src/App.test.js

@@ -1,8 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import App from './App';
-
-test('renders learn react link', () => {
-  render(<App />);
-  const linkElement = screen.getByText(/learn react/i);
-  expect(linkElement).toBeInTheDocument();
-});

src/App.tsx

@@ -0,0 +1,928 @@
+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 MCP</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

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

@@ -0,0 +1,550 @@
+import { ChevronDown } from "lucide-react";
+import { MODEL_OPTIONS } from "../constants/models";
+import LiquidAILogo from "./icons/LiquidAILogo";
+import HfLogo from "./icons/HfLogo";
+import MCPLogo from "./icons/MCPLogo";
+import { useEffect, useMemo, useRef, useState } from "react";
+import ReactDOM from "react-dom";
+
+type Dot = {
+  x: number;
+  y: number;
+  radius: number;
+  speed: number;
+  opacity: number;
+  blur: number;
+  pulse: number;
+  pulseSpeed: number;
+};
+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 = useMemo(
+    () => MODEL_OPTIONS.find((opt) => opt.id === selectedModelId),
+    [selectedModelId]
+  );
+
+  // Refs
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  const dropdownBtnRef = useRef<HTMLButtonElement>(null);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+  const wrapperRef = useRef<HTMLDivElement>(null); // NEW: anchor for centering
+
+  // For keyboard navigation
+  const [activeIndex, setActiveIndex] = useState(
+    Math.max(
+      0,
+      MODEL_OPTIONS.findIndex((m) => m.id === selectedModelId)
+    )
+  );
+
+  // Background Animation Effect (crisper dots + reduced motion)
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+
+    const prefersReduced =
+      typeof window !== "undefined" &&
+      window.matchMedia &&
+      window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+
+    let animationFrameId: number;
+    let dots: Dot[] = [];
+
+    const setup = () => {
+      const dpr = Math.max(1, Math.min(2, window.devicePixelRatio || 1));
+      const { innerWidth, innerHeight } = window;
+      canvas.width = Math.floor(innerWidth * dpr);
+      canvas.height = Math.floor(innerHeight * dpr);
+      canvas.style.width = `${innerWidth}px`;
+      canvas.style.height = `${innerHeight}px`;
+      ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+
+      dots = [];
+      const numDots = Math.floor((innerWidth * innerHeight) / 12000);
+      for (let i = 0; i < numDots; ++i) {
+        dots.push({
+          x: Math.random() * innerWidth,
+          y: Math.random() * innerHeight,
+          radius: Math.random() * 2 + 0.3,
+          speed: prefersReduced ? 0 : Math.random() * 0.3 + 0.05,
+          opacity: Math.random() * 0.4 + 0.1,
+          blur: Math.random() > 0.8 ? Math.random() * 1.5 + 0.5 : 0,
+          pulse: Math.random() * Math.PI * 2,
+          pulseSpeed: prefersReduced ? 0 : Math.random() * 0.02 + 0.01,
+        });
+      }
+    };
+
+    const draw = () => {
+      if (!ctx) return;
+      const width = canvas.clientWidth;
+      const height = canvas.clientHeight;
+      ctx.clearRect(0, 0, width, height);
+
+      dots.forEach((dot) => {
+        dot.y += dot.speed;
+        dot.pulse += dot.pulseSpeed;
+
+        if (dot.y > height + dot.radius) {
+          dot.y = -dot.radius;
+          dot.x = Math.random() * width;
+        }
+
+        const pulseFactor = 1 + Math.sin(dot.pulse) * 0.2;
+        const currentRadius = dot.radius * pulseFactor;
+        const currentOpacity = dot.opacity * (0.8 + Math.sin(dot.pulse) * 0.2);
+
+        ctx.beginPath();
+        ctx.arc(dot.x, dot.y, currentRadius, 0, Math.PI * 2);
+        ctx.fillStyle = `rgba(255, 255, 255, ${currentOpacity})`;
+        if (dot.blur > 0) ctx.filter = `blur(${dot.blur}px)`;
+        ctx.fill();
+        ctx.filter = "none";
+      });
+
+      animationFrameId = requestAnimationFrame(draw);
+    };
+
+    const handleResize = () => {
+      cancelAnimationFrame(animationFrameId);
+      setup();
+      draw();
+    };
+
+    setup();
+    draw();
+    window.addEventListener("resize", handleResize);
+
+    return () => {
+      window.removeEventListener("resize", handleResize);
+      cancelAnimationFrame(animationFrameId);
+    };
+  }, []);
+
+  // Close dropdown on Escape / click outside
+  useEffect(() => {
+    if (!isModelDropdownOpen) return;
+
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === "Escape") setIsModelDropdownOpen(false);
+      if (e.key === "ArrowDown") {
+        e.preventDefault();
+        setActiveIndex((i) => Math.min(MODEL_OPTIONS.length - 1, i + 1));
+      }
+      if (e.key === "ArrowUp") {
+        e.preventDefault();
+        setActiveIndex((i) => Math.max(0, i - 1));
+      }
+      if (e.key === "Enter") {
+        e.preventDefault();
+        const opt = MODEL_OPTIONS[activeIndex];
+        if (opt) {
+          handleModelSelect(opt.id);
+          setIsModelDropdownOpen(false);
+          dropdownBtnRef.current?.focus();
+        }
+      }
+    };
+
+    const onClick = (e: MouseEvent) => {
+      const target = e.target as Node;
+      if (
+        dropdownRef.current &&
+        !dropdownRef.current.contains(target) &&
+        !dropdownBtnRef.current?.contains(target)
+      ) {
+        setIsModelDropdownOpen(false);
+      }
+    };
+
+    document.addEventListener("keydown", onKey);
+    document.addEventListener("mousedown", onClick);
+    return () => {
+      document.removeEventListener("keydown", onKey);
+      document.removeEventListener("mousedown", onClick);
+    };
+  }, [
+    isModelDropdownOpen,
+    activeIndex,
+    setIsModelDropdownOpen,
+    handleModelSelect,
+  ]);
+
+  // Recompute portal position on open + resize
+  const [, forceRerender] = useState(0);
+  useEffect(() => {
+    const onResize = () => forceRerender((x) => x + 1);
+    window.addEventListener("resize", onResize);
+    return () => window.removeEventListener("resize", onResize);
+  }, []);
+
+  // Compute portal style based on the whole button group (center + clamp + optional drop-up)
+  const portalStyle = useMemo(() => {
+    if (typeof window === "undefined") return {};
+    const anchor = wrapperRef.current || dropdownBtnRef.current;
+    if (!anchor) return {};
+
+    const rect = anchor.getBoundingClientRect();
+
+    const margin = 8;
+    const minWidth = 320;
+    const dropdownWidth = Math.max(rect.width, minWidth);
+
+    // Center
+    let left = Math.round(rect.left + rect.width / 2 - dropdownWidth / 2);
+    // Clamp to viewport
+    left = Math.min(
+      Math.max(margin, left),
+      window.innerWidth - dropdownWidth - margin
+    );
+
+    // Flip up if not enough space below
+    const spaceBelow = window.innerHeight - rect.bottom;
+    const spaceAbove = rect.top;
+    const estimatedItemH = 56; // rough item height
+    const estimatedPad = 16;
+    const estimatedHeight =
+      estimatedItemH * Math.min(MODEL_OPTIONS.length, 6) + estimatedPad;
+    const dropUp = spaceBelow < estimatedHeight && spaceAbove > spaceBelow;
+
+    const top = dropUp ? rect.top - estimatedHeight - 8 : rect.bottom + 8;
+
+    return {
+      position: "fixed" as const,
+      left: `${left}px`,
+      top: `${top}px`,
+      width: `${dropdownWidth}px`,
+      zIndex: 100,
+    };
+  }, []);
+
+  return (
+    <div className="relative flex flex-col items-center justify-center min-h-screen bg-gradient-to-br from-gray-900 via-slate-900 to-gray-900 text-white p-6 overflow-hidden">
+      {/* Background Canvas */}
+      <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(15,23,42,0.1)_0%,_rgba(15,23,42,0.4)_40%,_rgba(15,23,42,0.9)_100%)]" />
+
+      {/* Grid Overlay */}
+      <div className="absolute inset-0 z-5 opacity-[0.02] bg-[linear-gradient(rgba(255,255,255,0.1)_1px,transparent_1px),linear-gradient(90deg,rgba(255,255,255,0.1)_1px,transparent_1px)] bg-[size:50px_50px]" />
+
+      {/* Main Content */}
+      <div className="relative z-20 max-w-4xl w-full flex flex-col items-center">
+        {/* Logos */}
+        <div className="flex items-center justify-center mb-8 gap-5">
+          <a
+            href="https://www.liquid.ai/"
+            target="_blank"
+            rel="noopener noreferrer"
+            title="Liquid AI"
+            className="transform transition-all duration-300 hover:scale-105 hover:-translate-y-1"
+          >
+            <LiquidAILogo className="h-16 md:h-20 text-gray-300 hover:text-white drop-shadow-lg" />
+          </a>
+          <span className="text-gray-500 text-3xl font-extralight">×</span>
+          <a
+            href="https://huggingface.co/docs/transformers.js"
+            target="_blank"
+            rel="noopener noreferrer"
+            title="Transformers.js"
+            className="transform transition-all duration-300 hover:scale-105 hover:-translate-y-1"
+          >
+            <HfLogo className="h-16 md:h-20 text-gray-300 hover:text-white drop-shadow-lg" />
+          </a>
+          <span className="text-gray-500 text-3xl font-extralight">×</span>
+          <a
+            href="https://modelcontextprotocol.io/"
+            target="_blank"
+            rel="noopener noreferrer"
+            title="Model Context Protocol"
+            className="transform transition-all duration-300 hover:scale-105 hover:-translate-y-1"
+          >
+            <MCPLogo className="h-16 md:h-20 text-gray-300 hover:text-white drop-shadow-lg" />
+          </a>
+        </div>
+
+        {/* Hero */}
+        <div className="text-center mb-8 space-y-4">
+          <h1 className="text-5xl sm:text-6xl md:text-7xl font-black bg-gradient-to-r from-white via-gray-100 to-gray-300 bg-clip-text text-transparent tracking-tight leading-none">
+            LFM2 MCP
+          </h1>
+          <p className="text-lg sm:text-xl md:text-2xl text-gray-300 font-light leading-relaxed">
+            Run next-gen hybrid models in your browser with tools powered by the{" "}
+            <a
+              href="https://modelcontextprotocol.io/"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              <span className="text-indigo-400 font-medium">
+                Model Context Protocol (MCP)
+              </span>{" "}
+              enabling secure, real-time connections to remote servers.
+            </a>
+          </p>
+          <div className="w-24 h-1 bg-gradient-to-r from-indigo-500 to-purple-500 rounded-full mx-auto" />
+        </div>
+
+        {/* Description Cards */}
+        <div className="grid md:grid-cols-2 gap-6 text-gray-400 mb-10">
+          <div className="bg-white/5 backdrop-blur-sm rounded-xl p-6 border border-white/10">
+            <h3 className="text-white font-semibold mb-3 flex items-center">
+              <div className="w-2 h-2 bg-indigo-500 rounded-full mr-3" />
+              Model Context Protocol
+            </h3>
+            <p className="text-sm leading-relaxed">
+              Connect seamlessly to remote{" "}
+              <a
+                href="https://modelcontextprotocol.io/"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="text-indigo-400 hover:underline"
+              >
+                MCP servers
+              </a>{" "}
+              using streaming or SSE protocols with support for no-auth, basic
+              auth, and OAuth.
+            </p>
+          </div>
+
+          <div className="bg-white/5 backdrop-blur-sm rounded-xl p-6 border border-white/10">
+            <h3 className="text-white font-semibold mb-3 flex items-center">
+              <div className="w-2 h-2 bg-purple-500 rounded-full mr-3" />
+              Edge AI Technology
+            </h3>
+            <p className="text-sm leading-relaxed">
+              Powered by{" "}
+              <a
+                href="https://www.liquid.ai/"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="text-indigo-400 hover:underline"
+              >
+                Liquid AI’s
+              </a>{" "}
+              LFM2 hybrid models, optimized for on-device deployment and edge AI
+              scenarios.
+            </p>
+          </div>
+        </div>
+
+        <p className="text-gray-400 text-base sm:text-lg mb-10">
+          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.
+        </p>
+
+        {/* Action */}
+        <div className="text-center space-y-6">
+          <p className="text-gray-400 text-base sm:text-lg font-medium">
+            Select a model to load locally, and connect to a remote MCP server
+            to get started.
+          </p>
+
+          <div className="relative">
+            <div
+              ref={wrapperRef} // anchor for dropdown centering
+              className="flex rounded-2xl shadow-2xl overflow-hidden"
+            >
+              <button
+                onClick={isLoading ? undefined : loadSelectedModel}
+                disabled={isLoading}
+                className={`flex items-center justify-center font-bold transition-all text-lg flex-1 ${
+                  isLoading
+                    ? "bg-gray-700 text-gray-400 cursor-not-allowed"
+                    : "bg-gradient-to-r from-indigo-600 to-purple-600 hover:from-indigo-500 hover:to-purple-500 text-white shadow-lg hover:shadow-xl transform hover:scale-[1.01] active:scale-[0.99]"
+                }`}
+                aria-live="polite"
+                aria-busy={isLoading}
+                aria-label={
+                  isLoading
+                    ? `Loading ${model?.label ?? "model"} ${progress}%`
+                    : `Load ${model?.label ?? "model"}`
+                }
+              >
+                <div className="px-8 py-4">
+                  {isLoading ? (
+                    <div className="flex items-center">
+                      <div className="w-5 h-5 border-2 border-white/30 border-t-white rounded-full animate-spin" />
+                      <span className="ml-3 font-semibold">
+                        Loading... {progress}%
+                      </span>
+                    </div>
+                  ) : (
+                    <span className="font-semibold">Load {model?.label}</span>
+                  )}
+                </div>
+              </button>
+
+              <button
+                ref={dropdownBtnRef}
+                onClick={(e) => {
+                  if (!isLoading) {
+                    e.stopPropagation();
+                    setIsModelDropdownOpen(!isModelDropdownOpen);
+                    setActiveIndex(
+                      Math.max(
+                        0,
+                        MODEL_OPTIONS.findIndex((m) => m.id === selectedModelId)
+                      )
+                    );
+                  }
+                }}
+                onKeyDown={(e) => {
+                  if (isLoading) return;
+                  if (
+                    e.key === " " ||
+                    e.key === "Enter" ||
+                    e.key === "ArrowDown"
+                  ) {
+                    e.preventDefault();
+                    if (!isModelDropdownOpen) setIsModelDropdownOpen(true);
+                  }
+                }}
+                aria-haspopup="menu"
+                aria-expanded={isModelDropdownOpen}
+                aria-controls="model-dropdown"
+                aria-label="Select model"
+                className={`px-4 py-4 border-l border-white/20 transition-all ${
+                  isLoading
+                    ? "bg-gray-700 cursor-not-allowed"
+                    : "bg-gradient-to-r from-indigo-600 to-purple-600 hover:from-indigo-500 hover:to-purple-500 hover:shadow-lg transform hover:scale-[1.01] active:scale-[0.99]"
+                }`}
+                disabled={isLoading}
+              >
+                <ChevronDown
+                  size={20}
+                  className={`transition-transform duration-200 ${
+                    isModelDropdownOpen ? "rotate-180" : ""
+                  }`}
+                />
+              </button>
+            </div>
+
+            {/* Dropdown (Portal) */}
+            {isModelDropdownOpen &&
+              typeof document !== "undefined" &&
+              ReactDOM.createPortal(
+                <div
+                  id="model-dropdown"
+                  ref={dropdownRef}
+                  style={portalStyle}
+                  role="menu"
+                  aria-label="Model options"
+                  className="bg-gray-800/95 border border-gray-600/50 rounded-2xl shadow-2xl overflow-hidden animate-in slide-in-from-top-2 duration-200 dropdown-z30"
+                >
+                  {MODEL_OPTIONS.map((option, index) => {
+                    const selected = selectedModelId === option.id;
+                    const isActive = activeIndex === index;
+                    return (
+                      <button
+                        key={option.id}
+                        role="menuitem"
+                        aria-checked={selected}
+                        onMouseEnter={() => setActiveIndex(index)}
+                        onClick={() => {
+                          handleModelSelect(option.id);
+                          setIsModelDropdownOpen(false);
+                          dropdownBtnRef.current?.focus();
+                        }}
+                        className={`w-full px-6 py-4 text-left transition-all duration-200 relative group outline-none ${
+                          selected
+                            ? "bg-gradient-to-r from-indigo-600/50 to-purple-600/50 text-white border-l-4 border-indigo-400"
+                            : "text-gray-200 hover:bg-white/10 hover:text-white"
+                        } ${index === 0 ? "rounded-t-2xl" : ""} ${
+                          index === MODEL_OPTIONS.length - 1
+                            ? "rounded-b-2xl"
+                            : ""
+                        } ${isActive && !selected ? "bg-white/5" : ""}`}
+                      >
+                        <div className="flex items-center justify-between">
+                          <div>
+                            <div className="font-semibold text-lg">
+                              {option.label}
+                            </div>
+                            <div className="text-sm text-gray-400 mt-1">
+                              {option.size}
+                            </div>
+                          </div>
+                          {selected && (
+                            <div className="w-2 h-2 bg-indigo-400 rounded-full" />
+                          )}
+                        </div>
+                        {!selected && (
+                          <div className="absolute inset-0 bg-gradient-to-r from-indigo-500/10 to-purple-500/10 opacity-0 group-hover:opacity-100 transition-opacity rounded-2xl" />
+                        )}
+                      </button>
+                    );
+                  })}
+                </div>,
+                document.body
+              )}
+          </div>
+        </div>
+
+        {/* Error */}
+        {error && (
+          <div
+            role="alert"
+            className="bg-red-900/30 backdrop-blur-sm border border-red-500/50 rounded-2xl p-6 mt-8 max-w-md text-center"
+          >
+            <p className="text-red-200 mb-4 font-medium">Error: {error}</p>
+            <button
+              onClick={loadSelectedModel}
+              className="bg-gradient-to-r from-red-600 to-red-700 hover:from-red-500 hover:to-red-600 px-6 py-3 rounded-xl font-semibold transition-all transform hover:scale-105 active:scale-95 shadow-lg"
+            >
+              Try Again
+            </button>
+          </div>
+        )}
+      </div>
+
+      {/* Click-away fallback for touch devices */}
+      {isModelDropdownOpen && (
+        <div
+          className="fixed inset-0 z-40 bg-black/20"
+          onClick={(e) => {
+            const target = e.target as Node;
+            if (
+              dropdownRef.current &&
+              !dropdownRef.current.contains(target) &&
+              !dropdownBtnRef.current?.contains(target)
+            ) {
+              setIsModelDropdownOpen(false);
+            }
+          }}
+        />
+      )}
+    </div>
+  );
+};

src/components/MCPServerManager.tsx

@@ -0,0 +1,535 @@
+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>
+                </select>
+              </div>
+
+              <div>
+                <label className="block text-sm font-medium text-gray-300 mb-1">
+                  Authentication
+                </label>
+                <select
+                  value={newServer.auth?.type || "none"}
+                  onChange={(e) => {
+                    const authType = e.target.value;
+                    if (authType === "none") {
+                      setNewServer({ ...newServer, auth: undefined });
+                    } else {
+                      setNewServer({
+                        ...newServer,
+                        auth: {
+                          type: authType as "bearer" | "basic" | "oauth",
+                          ...(authType === "bearer" ? { token: "" } : {}),
+                          ...(authType === "basic"
+                            ? { username: "", password: "" }
+                            : {}),
+                          ...(authType === "oauth" ? { token: "" } : {}),
+                        },
+                      });
+                    }
+                  }}
+                  className="w-full bg-gray-600 text-white rounded px-3 py-2"
+                >
+                  <option value="none">No Authentication</option>
+                  <option value="bearer">Bearer Token</option>
+                  <option value="basic">Basic Auth</option>
+                  <option value="oauth">OAuth Token</option>
+                </select>
+              </div>
+
+              {/* Auth-specific fields */}
+              {newServer.auth?.type === "bearer" && (
+                <div>
+                  <label className="block text-sm font-medium text-gray-300 mb-1">
+                    Bearer Token
+                  </label>
+                  <input
+                    type="password"
+                    value={newServer.auth.token || ""}
+                    onChange={(e) =>
+                      setNewServer({
+                        ...newServer,
+                        auth: { ...newServer.auth!, token: e.target.value },
+                      })
+                    }
+                    className="w-full bg-gray-600 text-white rounded px-3 py-2"
+                    placeholder="your-bearer-token"
+                  />
+                </div>
+              )}
+
+              {newServer.auth?.type === "basic" && (
+                <>
+                  <div>
+                    <label className="block text-sm font-medium text-gray-300 mb-1">
+                      Username
+                    </label>
+                    <input
+                      type="text"
+                      value={newServer.auth.username || ""}
+                      onChange={(e) =>
+                        setNewServer({
+                          ...newServer,
+                          auth: {
+                            ...newServer.auth!,
+                            username: e.target.value,
+                          },
+                        })
+                      }
+                      className="w-full bg-gray-600 text-white rounded px-3 py-2"
+                      placeholder="username"
+                    />
+                  </div>
+                  <div>
+                    <label className="block text-sm font-medium text-gray-300 mb-1">
+                      Password
+                    </label>
+                    <input
+                      type="password"
+                      value={newServer.auth.password || ""}
+                      onChange={(e) =>
+                        setNewServer({
+                          ...newServer,
+                          auth: {
+                            ...newServer.auth!,
+                            password: e.target.value,
+                          },
+                        })
+                      }
+                      className="w-full bg-gray-600 text-white rounded px-3 py-2"
+                      placeholder="password"
+                    />
+                  </div>
+                </>
+              )}
+
+              {newServer.auth?.type === "oauth" && (
+                <div>
+                  <label className="block text-sm font-medium text-gray-300 mb-1">
+                    OAuth Authorization
+                  </label>
+                  <button
+                    className="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded mb-2"
+                    type="button"
+                    onClick={async () => {
+                      try {
+                        // Persist name and transport for OAuthCallback
+                        localStorage.setItem(
+                          STORAGE_KEYS.MCP_SERVER_NAME,
+                          newServer.name
+                        );
+                        localStorage.setItem(
+                          STORAGE_KEYS.MCP_SERVER_TRANSPORT,
+                          newServer.transport
+                        );
+                        const endpoints = await discoverOAuthEndpoints(
+                          newServer.url
+                        );
+
+                        if (!endpoints.clientId || !endpoints.redirectUri) {
+                          throw new Error(
+                            "Missing required OAuth configuration (clientId or redirectUri)"
+                          );
+                        }
+
+                        startOAuthFlow({
+                          authorizationEndpoint:
+                            endpoints.authorizationEndpoint,
+                          clientId: endpoints.clientId as string,
+                          redirectUri: endpoints.redirectUri as string,
+                          scopes: (endpoints.scopes || []) as string[],
+                        });
+                      } catch (err) {
+                        setNotification({
+                          message:
+                            "OAuth discovery failed: " +
+                            (err instanceof Error ? err.message : String(err)),
+                          type: "error",
+                        });
+                        setTimeout(
+                          () => setNotification(null),
+                          DEFAULTS.OAUTH_ERROR_TIMEOUT
+                        );
+                      }
+                    }}
+                  >
+                    Connect with OAuth
+                  </button>
+                  <p className="text-xs text-gray-400">
+                    You will be redirected to authorize this app with the MCP
+                    server.
+                  </p>
+                </div>
+              )}
+
+              <div className="flex items-center gap-2">
+                <input
+                  type="checkbox"
+                  id="enabled"
+                  checked={newServer.enabled}
+                  onChange={(e) =>
+                    setNewServer({ ...newServer, enabled: e.target.checked })
+                  }
+                  className="rounded"
+                />
+                <label htmlFor="enabled" className="text-sm text-gray-300">
+                  Auto-connect when added
+                </label>
+              </div>
+
+              <div className="flex gap-2">
+                <button
+                  onClick={handleAddServer}
+                  className="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded"
+                >
+                  Add Server
+                </button>
+                <button
+                  onClick={() => setShowAddForm(false)}
+                  className="bg-gray-600 hover:bg-gray-700 text-white px-4 py-2 rounded"
+                >
+                  Cancel
+                </button>
+              </div>
+            </div>
+          </div>
+        )}
+
+        {/* Server List */}
+        <div className="space-y-4">
+          <h3 className="text-lg font-semibold text-white">
+            Configured Servers
+          </h3>
+
+          {Object.values(mcpState.servers).length === 0 ? (
+            <div className="text-gray-400 text-center py-8">
+              No MCP servers configured. Add one to get started!
+            </div>
+          ) : (
+            Object.values(mcpState.servers).map((connection) => (
+              <div
+                key={connection.config.id}
+                className="bg-gray-700 rounded-lg p-4"
+              >
+                <div className="flex items-center justify-between">
+                  <div className="flex items-center gap-3">
+                    <div
+                      className={`w-3 h-3 rounded-full ${
+                        connection.isConnected ? "bg-green-400" : "bg-red-400"
+                      }`}
+                    />
+                    <div>
+                      <h4 className="text-white font-medium">
+                        {connection.config.name}
+                      </h4>
+                      <p className="text-gray-400 text-sm">
+                        {connection.config.url}
+                      </p>
+                      <p className="text-gray-500 text-xs">
+                        Transport: {connection.config.transport}
+                        {connection.config.auth &&
+                          ` • Auth: ${connection.config.auth.type}`}
+                        {connection.isConnected &&
+                          ` • ${connection.tools.length} tools available`}
+                      </p>
+                    </div>
+                  </div>
+
+                  <div className="flex items-center gap-2">
+                    {/* Test Connection */}
+                    <button
+                      onClick={() => handleTestConnection(connection.config)}
+                      disabled={testingConnection === connection.config.id}
+                      className="p-2 text-yellow-400 hover:text-yellow-300 disabled:opacity-50"
+                      title="Test Connection"
+                    >
+                      <TestTube size={16} />
+                    </button>
+
+                    {/* Connect/Disconnect */}
+                    <button
+                      onClick={() =>
+                        handleToggleConnection(
+                          connection.config.id,
+                          connection.isConnected
+                        )
+                      }
+                      className={`p-2 ${
+                        connection.isConnected
+                          ? "text-green-400 hover:text-green-300"
+                          : "text-gray-400 hover:text-gray-300"
+                      }`}
+                      title={connection.isConnected ? "Disconnect" : "Connect"}
+                    >
+                      {connection.isConnected ? (
+                        <Wifi size={16} />
+                      ) : (
+                        <WifiOff size={16} />
+                      )}
+                    </button>
+
+                    {/* Remove Server */}
+                    <button
+                      onClick={() => removeServer(connection.config.id)}
+                      className="p-2 text-red-400 hover:text-red-300"
+                      title="Remove Server"
+                    >
+                      <Trash2 size={16} />
+                    </button>
+                  </div>
+                </div>
+
+                {connection.lastError && (
+                  <div className="mt-2 text-red-400 text-sm">
+                    Error: {connection.lastError}
+                  </div>
+                )}
+
+                {connection.isConnected && connection.tools.length > 0 && (
+                  <div className="mt-3">
+                    <details className="text-sm">
+                      <summary className="text-gray-300 cursor-pointer">
+                        Available Tools ({connection.tools.length})
+                      </summary>
+                      <div className="mt-2 space-y-1">
+                        {connection.tools.map((tool) => (
+                          <div key={tool.name} className="text-gray-400 pl-4">
+                            • {tool.name} -{" "}
+                            {tool.description || "No description"}
+                          </div>
+                        ))}
+                      </div>
+                    </details>
+                  </div>
+                )}
+              </div>
+            ))
+          )}
+        </div>
+
+        {mcpState.error && (
+          <div className="mt-4 p-4 bg-red-900 border border-red-700 rounded-lg text-red-200">
+            <strong>Error:</strong> {mcpState.error}
+          </div>
+        )}
+
+        {notification && (
+          <div
+            className={`mt-4 p-4 border rounded-lg ${
+              notification.type === "success"
+                ? "bg-green-900 border-green-700 text-green-200"
+                : "bg-red-900 border-red-700 text-red-200"
+            }`}
+          >
+            {notification.message}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};

src/components/OAuthCallback.tsx

@@ -0,0 +1,140 @@
+import { useEffect, useState } from "react";
+import { useNavigate } from "react-router-dom";
+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...");
+  const navigate = useNavigate(); // Add this hook
+
+    useEffect(() => {
+    // Parse parameters from URL search params (OAuth providers send code in query string)
+    const parseHashParams = () => {
+      return new URLSearchParams(window.location.search);
+    };
+
+    const params = parseHashParams();
+    const code = params.get("code");
+    const state = params.get("state");
+    const error = params.get("error");
+
+    // Verify state parameter for CSRF protection
+    const savedState = localStorage.getItem('oauth_state');
+    if (state !== savedState) {
+      setStatus("Invalid state parameter. Possible CSRF attack.");
+      if (onError) onError(new Error("Invalid state parameter"));
+      return;
+    }
+
+    // Check for OAuth errors
+    if (error) {
+      const errorDescription = params.get("error_description") || error;
+      setStatus(`OAuth error: ${errorDescription}`);
+      if (onError) onError(new Error(errorDescription));
+      return;
+    }
+
+    // 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, // Add hash
+      })
+        .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) {
+            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;
+            
+            const serverConfig = {
+              id: `server_${Date.now()}`,
+              name: serverName,
+              url: mcpServerUrl,
+              enabled: true,
+              transport: serverTransport,
+              auth: {
+                type: "bearer" as const,
+                token: tokens.access_token,
+              },
+            };
+            
+            let servers: MCPServerConfig[] = [];
+            try {
+              const stored = localStorage.getItem(STORAGE_KEYS.MCP_SERVERS);
+              if (stored) servers = JSON.parse(stored);
+            } catch {}
+            
+            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
+            localStorage.removeItem(STORAGE_KEYS.MCP_SERVER_NAME);
+            localStorage.removeItem(STORAGE_KEYS.MCP_SERVER_TRANSPORT);
+            localStorage.removeItem(STORAGE_KEYS.OAUTH_MCP_SERVER_URL);
+          }
+          
+          // Clear OAuth state
+          localStorage.removeItem('oauth_state');
+          
+          setStatus("Authorization successful! Redirecting...");
+          if (onSuccess) onSuccess(tokens);
+          
+          // Use React Router navigation instead of window.location.replace
+          setTimeout(() => {
+            navigate("/", { replace: true });
+          }, 1000);
+        })
+        .catch((err) => {
+          setStatus("OAuth token exchange failed: " + err.message);
+          if (onError) onError(err);
+          // Clear OAuth state on error
+          localStorage.removeItem('oauth_state');
+        });
+    } else {
+      setStatus("Missing authorization code in callback URL.");
+      if (onError) onError(new Error("Missing authorization code"));
+    }
+  }, [serverUrl, onSuccess, onError, navigate]);
+
+  return (
+    <div className="flex items-center justify-center min-h-screen">
+      <div className="text-center">
+        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600 mx-auto mb-4"></div>
+        <p>{status}</p>
+      </div>
+    </div>
+  );
+};
+
+export default OAuthCallback;

src/components/ResultBlock.tsx

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

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

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

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

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

@@ -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/components/icons/MCPLogo.tsx

@@ -0,0 +1,35 @@
+import React from "react";
+
+const MCPLogo = ({
+  className = "",
+  ...props
+}: React.SVGProps<SVGSVGElement>) => (
+  <svg
+    viewBox="0 0 180 180"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    className={className}
+    {...props}
+  >
+    <path
+      d="M23.5996 85.2532L86.2021 22.6507C94.8457 14.0071 108.86 14.0071 117.503 22.6507C126.147 31.2942 126.147 45.3083 117.503 53.9519L70.2254 101.23"
+      stroke="currentColor"
+      strokeWidth="11.0667"
+      strokeLinecap="round"
+    />
+    <path
+      d="M70.8789 100.578L117.504 53.952C126.148 45.3083 140.163 45.3083 148.806 53.952L149.132 54.278C157.776 62.9216 157.776 76.9357 149.132 85.5792L92.5139 142.198C89.6327 145.079 89.6327 149.75 92.5139 152.631L104.14 164.257"
+      stroke="currentColor"
+      strokeWidth="11.0667"
+      strokeLinecap="round"
+    />
+    <path
+      d="M101.853 38.3013L55.553 84.6011C46.9094 93.2447 46.9094 107.258 55.553 115.902C64.1966 124.546 78.2106 124.546 86.8543 115.902L133.154 69.6025"
+      stroke="currentColor"
+      strokeWidth="11.0667"
+      strokeLinecap="round"
+    />
+  </svg>
+);
+
+export default MCPLogo;

src/config/constants.ts

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

src/constants/db.ts

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

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

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

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

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

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

@@ -1,13 +1 @@
-body {
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
-}
+@import "tailwindcss";

src/index.js

@@ -1,17 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import './index.css';
-import App from './App';
-import reportWebVitals from './reportWebVitals';
-
-const root = ReactDOM.createRoot(document.getElementById('root'));
-root.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>
-);
-
-// If you want to start measuring performance in your app, pass a function
-// to log results (for example: reportWebVitals(console.log))
-// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals();

src/main.tsx

@@ -0,0 +1,24 @@
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import { HashRouter, 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>
+    <HashRouter>
+      <Routes>
+        <Route 
+          path="/oauth/callback" 
+          element={
+            <OAuthCallback 
+              serverUrl={localStorage.getItem("oauth_mcp_server_url") || ""} 
+            />
+          } 
+        />
+        <Route path="/*" element={<App />} />
+      </Routes>
+    </HashRouter>
+  </StrictMode>
+);

src/reportWebVitals.js

@@ -1,13 +0,0 @@
-const reportWebVitals = onPerfEntry => {
-  if (onPerfEntry && onPerfEntry instanceof Function) {
-    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
-      getCLS(onPerfEntry);
-      getFID(onPerfEntry);
-      getFCP(onPerfEntry);
-      getLCP(onPerfEntry);
-      getTTFB(onPerfEntry);
-    });
-  }
-};
-
-export default reportWebVitals;

src/services/mcpClient.ts

@@ -0,0 +1,384 @@
+import { Client } from "@modelcontextprotocol/sdk/client/index.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 { MCP_SERVERS } from "../tools/mcp_servers";
+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();
+
+    // If no servers are present, load initial list from MCP_SERVERS (imported)
+    if (this.connections.size === 0) {
+      MCP_SERVERS.forEach((config) => {
+        this.addServer(config);
+      });
+    }
+  }
+
+  // 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);
+        });
+      }
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    } 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 "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();
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      } 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 "streamable-http":
+          transport = new StreamableHTTPClientTransport(url);
+          break;
+
+        case "sse":
+          transport = new SSEClientTransport(url);
+          break;
+
+        default:
+          throw new Error(`Unsupported transport: ${config.transport}`);
+      }
+
+      await client.connect(transport);
+      await client.close();
+      return true;
+    } catch (error) {
+      throw new Error(
+        `Connection test failed: ${
+          error instanceof Error ? error.message : "Unknown error"
+        }`
+      );
+    }
+  }
+
+  // Connect to all enabled servers
+  async connectAll(): Promise<void> {
+    const promises = Array.from(this.connections.entries())
+      .filter(
+        ([, connection]) => connection.config.enabled && !connection.isConnected
+      )
+      .map(([serverId]) =>
+        this.connectToServer(serverId).catch(() => {
+          // Handle auto-connection error silently
+        })
+      );
+
+    await Promise.all(promises);
+  }
+
+  // Disconnect from all servers
+  async disconnectAll(): Promise<void> {
+    const promises = Array.from(this.connections.keys()).map((serverId) =>
+      this.disconnectFromServer(serverId)
+    );
+
+    await Promise.all(promises);
+  }
+}

src/services/oauth.ts

@@ -0,0 +1,239 @@
+import {
+  discoverOAuthProtectedResourceMetadata,
+  discoverAuthorizationServerMetadata,
+  startAuthorization,
+  exchangeAuthorization,
+  registerClient,
+} from "@modelcontextprotocol/sdk/client/auth.js";
+import { secureStorage } from "../utils/storage";
+import { MCP_CLIENT_CONFIG, STORAGE_KEYS, DEFAULTS } from "../config/constants";
+// Utility to fetch .well-known/modelcontextprotocol for OAuth endpoints
+export async function discoverOAuthEndpoints(serverUrl: string) {
+  // ...existing code...
+  let resourceMetadata, authMetadata, authorizationServerUrl;
+  try {
+    resourceMetadata = await discoverOAuthProtectedResourceMetadata(serverUrl);
+    if (resourceMetadata?.authorization_servers?.length) {
+      authorizationServerUrl = resourceMetadata.authorization_servers[0];
+    }
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  } catch (e) {
+    // Fallback to direct metadata discovery if protected resource fails
+    authMetadata = await discoverAuthorizationServerMetadata(serverUrl);
+    authorizationServerUrl = authMetadata?.issuer || serverUrl;
+  }
+
+  if (!authorizationServerUrl) {
+    throw new Error("No authorization server found for this MCP server");
+  }
+
+  // Discover authorization server metadata if not already done
+  if (!authMetadata) {
+    authMetadata = await discoverAuthorizationServerMetadata(
+      authorizationServerUrl
+    );
+  }
+
+  if (
+    !authMetadata ||
+    !authMetadata.authorization_endpoint ||
+    !authMetadata.token_endpoint
+  ) {
+    throw new Error("Missing OAuth endpoints in authorization server metadata");
+  }
+
+  // If client_id is missing, register client dynamically
+  if (!authMetadata.client_id && authMetadata.registration_endpoint) {
+    // Determine token endpoint auth method
+    let tokenEndpointAuthMethod = "none";
+    if (
+      authMetadata.token_endpoint_auth_methods_supported?.includes(
+        "client_secret_post"
+      )
+    ) {
+      tokenEndpointAuthMethod = "client_secret_post";
+    } else if (
+      authMetadata.token_endpoint_auth_methods_supported?.includes(
+        "client_secret_basic"
+      )
+    ) {
+      tokenEndpointAuthMethod = "client_secret_basic";
+    }
+    const clientMetadata = {
+      redirect_uris: [
+        String(
+          authMetadata.redirect_uri ||
+            window.location.origin + "/#/oauth/callback"
+        ),
+      ],
+      client_name: MCP_CLIENT_CONFIG.NAME,
+      grant_types: ["authorization_code"],
+      response_types: ["code"],
+      token_endpoint_auth_method: tokenEndpointAuthMethod,
+    };
+    const clientInfo = await registerClient(authorizationServerUrl, {
+      metadata: authMetadata,
+      clientMetadata,
+    });
+    authMetadata.client_id = clientInfo.client_id;
+    if (clientInfo.client_secret) {
+      authMetadata.client_secret = clientInfo.client_secret;
+    }
+    // Persist client credentials for later use
+    localStorage.setItem(STORAGE_KEYS.OAUTH_CLIENT_ID, clientInfo.client_id);
+    if (clientInfo.client_secret) {
+      await secureStorage.setItem(STORAGE_KEYS.OAUTH_CLIENT_SECRET, clientInfo.client_secret);
+    }
+  }
+  if (!authMetadata.client_id) {
+    throw new Error(
+      "Missing client_id and registration not supported by authorization server"
+    );
+  }
+
+  // Step 3: Validate resource
+  const resource = resourceMetadata?.resource
+    ? new URL(resourceMetadata.resource)
+    : undefined;
+
+  // Persist endpoints, metadata, and MCP server URL for callback use
+  localStorage.setItem(
+    STORAGE_KEYS.OAUTH_AUTHORIZATION_ENDPOINT,
+    authMetadata.authorization_endpoint
+  );
+  localStorage.setItem(STORAGE_KEYS.OAUTH_TOKEN_ENDPOINT, authMetadata.token_endpoint);
+  localStorage.setItem(
+    STORAGE_KEYS.OAUTH_REDIRECT_URI,
+    (authMetadata.redirect_uri ||window.location.origin + "/#" + DEFAULTS.OAUTH_REDIRECT_PATH).toString()
+  );
+  localStorage.setItem(STORAGE_KEYS.OAUTH_MCP_SERVER_URL, serverUrl);
+  localStorage.setItem(
+    STORAGE_KEYS.OAUTH_AUTHORIZATION_SERVER_METADATA,
+    JSON.stringify(authMetadata)
+  );
+  if (resource) {
+    localStorage.setItem(STORAGE_KEYS.OAUTH_RESOURCE, resource.toString());
+  }
+  return {
+    authorizationEndpoint: authMetadata.authorization_endpoint,
+    tokenEndpoint: authMetadata.token_endpoint,
+    clientId: authMetadata.client_id,
+    clientSecret: authMetadata.client_secret,
+    scopes: authMetadata.scopes || [],
+    redirectUri:
+      authMetadata.redirect_uri || window.location.origin + "/#/oauth/callback",
+    resource,
+  };
+}
+
+// Start OAuth flow: redirect user to authorization endpoint
+export async function startOAuthFlow({
+  authorizationEndpoint,
+  clientId,
+  redirectUri,
+  scopes,
+  resource,
+}: {
+  authorizationEndpoint: string;
+  clientId: string;
+  redirectUri: string;
+  scopes?: string[];
+  resource?: URL;
+}) {
+  // Use Proof Key for Code Exchange (PKCE) and SDK to build the authorization URL
+  // Use persisted client_id if available
+  const persistedClientId = localStorage.getItem(STORAGE_KEYS.OAUTH_CLIENT_ID) || clientId;
+  const clientInformation = { client_id: persistedClientId };
+  // Retrieve metadata from localStorage if available
+  let metadata;
+  try {
+    const stored = localStorage.getItem(STORAGE_KEYS.OAUTH_AUTHORIZATION_SERVER_METADATA);
+    if (stored) metadata = JSON.parse(stored);
+  } catch {
+    console.warn("Failed to parse stored OAuth metadata, using defaults");
+  }
+  // Always pass resource from localStorage if not provided
+  let resourceParam = resource;
+  if (!resourceParam) {
+    const resourceStr = localStorage.getItem(STORAGE_KEYS.OAUTH_RESOURCE);
+    if (resourceStr) resourceParam = new URL(resourceStr);
+  }
+  const { authorizationUrl, codeVerifier } = await startAuthorization(
+    authorizationEndpoint,
+    {
+      metadata,
+      clientInformation,
+      redirectUrl: redirectUri,
+      scope: scopes?.join(" ") || undefined,
+      resource: resourceParam,
+    }
+  );
+  // Save codeVerifier in localStorage for later token exchange
+  localStorage.setItem(STORAGE_KEYS.OAUTH_CODE_VERIFIER, codeVerifier);
+  window.location.href = authorizationUrl.toString();
+}
+
+// Exchange code for token using MCP SDK
+export async function exchangeCodeForToken({
+  code,
+  redirectUri,
+}: {
+  serverUrl?: string;
+  code: string;
+  redirectUri: string;
+}) {
+  // Use only persisted credentials and endpoints for token exchange
+  const tokenEndpoint = localStorage.getItem(STORAGE_KEYS.OAUTH_TOKEN_ENDPOINT);
+  const redirectUriPersisted = localStorage.getItem(STORAGE_KEYS.OAUTH_REDIRECT_URI);
+  const resourceStr = localStorage.getItem(STORAGE_KEYS.OAUTH_RESOURCE);
+  const persistedClientId = localStorage.getItem(STORAGE_KEYS.OAUTH_CLIENT_ID);
+  const persistedClientSecret = await secureStorage.getItem(STORAGE_KEYS.OAUTH_CLIENT_SECRET);
+  const codeVerifier = localStorage.getItem(STORAGE_KEYS.OAUTH_CODE_VERIFIER);
+  if (!persistedClientId || !tokenEndpoint || !codeVerifier)
+    throw new Error(
+      "Missing OAuth client credentials or endpoints for token exchange"
+    );
+  const clientInformation: { client_id: string; client_secret?: string } = { client_id: persistedClientId };
+  if (persistedClientSecret) {
+    clientInformation.client_secret = persistedClientSecret;
+  }
+  // Retrieve metadata from localStorage if available
+  let metadata;
+  try {
+    const stored = localStorage.getItem(STORAGE_KEYS.OAUTH_AUTHORIZATION_SERVER_METADATA);
+    if (stored) metadata = JSON.parse(stored);
+  } catch {
+    console.warn("Failed to parse stored OAuth metadata, using defaults");
+  }
+  // Use SDK to exchange code for tokens
+  const tokens = await exchangeAuthorization(tokenEndpoint, {
+    metadata,
+    clientInformation,
+    authorizationCode: code,
+    codeVerifier,
+    redirectUri: redirectUriPersisted || redirectUri,
+    resource: resourceStr ? new URL(resourceStr) : undefined,
+  });
+  // Persist access token in localStorage and sync to mcp-servers
+  if (tokens && tokens.access_token) {
+    await secureStorage.setItem(STORAGE_KEYS.OAUTH_ACCESS_TOKEN, tokens.access_token);
+    try {
+      const serversStr = localStorage.getItem(STORAGE_KEYS.MCP_SERVERS);
+      if (serversStr) {
+        const servers = JSON.parse(serversStr);
+        for (const server of servers) {
+          if (
+            server.auth &&
+            (server.auth.type === "bearer" || server.auth.type === "oauth")
+          ) {
+            server.auth.token = tokens.access_token;
+          }
+        }
+        localStorage.setItem(STORAGE_KEYS.MCP_SERVERS, JSON.stringify(servers));
+      }
+    } catch (err) {
+      console.warn("Failed to sync token to mcp-servers:", err);
+    }
+  }
+  return tokens;
+}

src/setupTests.js

@@ -1,5 +0,0 @@
-// jest-dom adds custom jest matchers for asserting on DOM nodes.
-// allows you to do things like:
-// expect(element).toHaveTextContent(/react/i)
-// learn more: https://github.com/testing-library/jest-dom
-import '@testing-library/jest-dom';

src/tools/get_location.js

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

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

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

@@ -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/mcp_servers.ts

@@ -0,0 +1,18 @@
+import type { MCPServerConfig } from "../types/mcp";
+
+export const MCP_SERVERS: MCPServerConfig[] = [
+  {
+    id: "hf-transformers-demo-gitmcp",
+    name: "HuggingFace Transformers.js Documentation",
+    url: "https://gitmcp.io/huggingface/transformers.js",
+    enabled: true,
+    transport: "streamable-http",
+  },
+  {
+    id: "mcp-servers-docs",
+    name: "MCP Documentation",
+    url: "https://gitmcp.io/modelcontextprotocol/modelcontextprotocol",
+    enabled: true,
+    transport: "streamable-http",
+  },
+];

src/tools/open_webpage.js

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

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