add mcp support

package.json

@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "@huggingface/transformers": "^3.7.1",
+    "@modelcontextprotocol/sdk": "^1.17.3",
     "@monaco-editor/react": "^4.7.0",
     "@tailwindcss/vite": "^4.1.11",
     "idb": "^8.0.3",

src/App.tsx

@@ -6,8 +6,18 @@ import React, {
   useMemo,
 } from "react";
 import { openDB, type IDBPDatabase } from "idb";
-import { Play, Plus, Zap, RotateCcw, Settings, X } from "lucide-react";
+import {
+  Play,
+  Plus,
+  Zap,
+  RotateCcw,
+  Settings,
+  X,
+  PanelRightClose,
+  PanelRightOpen,
+} from "lucide-react";
 import { useLLM } from "./hooks/useLLM";
+import { useMCP } from "./hooks/useMCP";
 
 import type { Tool } from "./components/ToolItem";
 
@@ -31,14 +41,15 @@ import ToolCallIndicator from "./components/ToolCallIndicator";
 import ToolItem from "./components/ToolItem";
 import ResultBlock from "./components/ResultBlock";
 import ExamplePrompts from "./components/ExamplePrompts";
+import { MCPServerManager } from "./components/MCPServerManager";
 
 import { LoadingScreen } from "./components/LoadingScreen";
 
 interface RenderInfo {
   call: string;
-  result?: any;
+  result?: unknown;
   renderer?: string;
-  input?: Record<string, any>;
+  input?: Record<string, unknown>;
   error?: string;
 }
 
@@ -71,7 +82,7 @@ async function getDB(): Promise<IDBPDatabase> {
 
 const App: React.FC = () => {
   const [systemPrompt, setSystemPrompt] = useState<string>(
-    DEFAULT_SYSTEM_PROMPT,
+    DEFAULT_SYSTEM_PROMPT
   );
   const [isSystemPromptModalOpen, setIsSystemPromptModalOpen] =
     useState<boolean>(false);
@@ -82,10 +93,12 @@ const App: React.FC = () => {
   const [isGenerating, setIsGenerating] = useState<boolean>(false);
   const isMobile = useMemo(isMobileOrTablet, []);
   const [selectedModelId, setSelectedModelId] = useState<string>(
-    isMobile ? "350M" : "1.2B",
+    isMobile ? "350M" : "1.2B"
   );
   const [isModelDropdownOpen, setIsModelDropdownOpen] =
     useState<boolean>(false);
+  const [isMCPManagerOpen, setIsMCPManagerOpen] = useState<boolean>(false);
+  const [isToolsPanelVisible, setIsToolsPanelVisible] = useState(false);
   const chatContainerRef = useRef<HTMLDivElement>(null);
   const debounceTimers = useRef<Record<number, NodeJS.Timeout>>({});
   const toolsContainerRef = useRef<HTMLDivElement>(null);
@@ -100,7 +113,15 @@ const App: React.FC = () => {
     clearPastKeyValues,
   } = useLLM(selectedModelId);
 
+  // MCP integration
+  const {
+    getMCPToolsAsOriginalTools,
+    callMCPTool,
+    connectAll: connectAllMCPServers,
+  } = useMCP();
+
   const loadTools = useCallback(async (): Promise<void> => {
+    console.log("loadTools called - this should only happen on startup");
     const db = await getDB();
     const allTools: Tool[] = await db.getAll(STORE_NAME);
     if (allTools.length === 0) {
@@ -111,7 +132,7 @@ const App: React.FC = () => {
           code,
           enabled: true,
           isCollapsed: false,
-        }),
+        })
       );
       const tx = db.transaction(STORE_NAME, "readwrite");
       await Promise.all(defaultTools.map((tool) => tx.store.put(tool)));
@@ -120,11 +141,30 @@ const App: React.FC = () => {
     } else {
       setTools(allTools.map((t) => ({ ...t, isCollapsed: false })));
     }
-  }, []);
+  }, []); // Remove the dependency that was causing the loop
+
+  // Separate effect for MCP tools to avoid dependency cycles
+  useEffect(() => {
+    console.log(
+      "MCP tools effect triggered - checking if this happens frequently"
+    );
+    const mcpTools = getMCPToolsAsOriginalTools();
+    setTools((prevTools) => {
+      // Remove old MCP tools and add new ones to avoid duplicates
+      const nonMcpTools = prevTools.filter(
+        (tool) => !tool.code?.includes("mcpServerId:")
+      );
+      return [...nonMcpTools, ...mcpTools];
+    });
+  }, [getMCPToolsAsOriginalTools]);
 
   useEffect(() => {
     loadTools();
-  }, [loadTools]);
+    // Connect to MCP servers on startup
+    connectAllMCPServers().catch((error) => {
+      console.error("Failed to connect to MCP servers:", error);
+    });
+  }, [loadTools, connectAllMCPServers]);
 
   useEffect(() => {
     if (chatContainerRef.current) {
@@ -202,16 +242,16 @@ const App: React.FC = () => {
   const toggleToolCollapsed = (id: number): void => {
     setTools(
       tools.map((tool) =>
-        tool.id === id ? { ...tool, isCollapsed: !tool.isCollapsed } : tool,
-      ),
+        tool.id === id ? { ...tool, isCollapsed: !tool.isCollapsed } : tool
+      )
     );
   };
 
   const expandTool = (id: number): void => {
     setTools(
       tools.map((tool) =>
-        tool.id === id ? { ...tool, isCollapsed: false } : tool,
-      ),
+        tool.id === id ? { ...tool, isCollapsed: false } : tool
+      )
     );
   };
 
@@ -238,21 +278,107 @@ const App: React.FC = () => {
     const toolToUse = tools.find((t) => t.name === name && t.enabled);
     if (!toolToUse) throw new Error(`Tool '${name}' not found or is disabled.`);
 
+    // Check if this is an MCP tool
+    const isMCPTool = toolToUse.code?.includes("mcpServerId:");
+    if (isMCPTool) {
+      // Extract MCP server ID and tool name from the code
+      const mcpServerMatch = toolToUse.code?.match(/mcpServerId: "([^"]+)"/);
+      const mcpToolMatch = toolToUse.code?.match(/toolName: "([^"]+)"/);
+
+      if (mcpServerMatch && mcpToolMatch) {
+        const serverId = mcpServerMatch[1];
+        const toolName = mcpToolMatch[1];
+
+        // Convert positional and keyword args to a single args object
+        const { functionCode } = extractFunctionAndRenderer(toolToUse.code);
+        const schema = generateSchemaFromCode(functionCode);
+        const paramNames = Object.keys(schema.parameters.properties);
+
+        const args: Record<string, unknown> = {};
+
+        // Map positional args
+        for (
+          let i = 0;
+          i < Math.min(positionalArgs.length, paramNames.length);
+          i++
+        ) {
+          args[paramNames[i]] = positionalArgs[i];
+        }
+
+        // Map keyword args
+        Object.entries(keywordArgs).forEach(([key, value]) => {
+          args[key] = value;
+        });
+
+        // Call MCP tool
+        const mcpResult = await callMCPTool(serverId, toolName, args);
+        console.log("Raw MCP result:", mcpResult);
+
+        // Extract the actual content from MCP result
+        if (mcpResult.content && mcpResult.content.length > 0) {
+          // If there's text content, use that
+          const textContent = mcpResult.content.find((c) => c.text);
+          if (textContent && textContent.text) {
+            console.log("Using text content:", textContent.text);
+
+            // Try to handle double-encoded JSON
+            let content = textContent.text;
+            try {
+              // First, try to parse as JSON to see if it's a JSON string
+              const parsed = JSON.parse(content);
+              if (typeof parsed === "string") {
+                // If the parsed result is still a string, it was double-encoded
+                console.log("Detected double-encoded JSON, parsing again");
+                content = parsed;
+              } else {
+                // If it parsed to an object/array directly, use the original string
+                console.log("Using original text content");
+              }
+            } catch {
+              // If first parse fails, use original content
+              console.log("Using original text content (parse failed)");
+            }
+
+            return content;
+          }
+
+          // Otherwise, return the first content item's data or the full content array
+          const firstContent = mcpResult.content[0];
+          if (firstContent.data !== undefined) {
+            console.log("Using data content:", firstContent.data);
+            return JSON.stringify(firstContent.data);
+          }
+
+          // Fallback to the full content array
+          console.log("Using full content array:", mcpResult.content);
+          return JSON.stringify(mcpResult.content);
+        }
+
+        // If no content, return the full result
+        console.log("No content found, returning full result:", mcpResult);
+        return JSON.stringify(mcpResult);
+      }
+    }
+
+    // Handle local tools as before
     const { functionCode } = extractFunctionAndRenderer(toolToUse.code);
     const schema = generateSchemaFromCode(functionCode);
     const paramNames = Object.keys(schema.parameters.properties);
 
-    const finalArgs: any[] = [];
+    const finalArgs: unknown[] = [];
     const requiredParams = schema.parameters.required || [];
 
     for (let i = 0; i < paramNames.length; ++i) {
       const paramName = paramNames[i];
       if (i < positionalArgs.length) {
         finalArgs.push(positionalArgs[i]);
-      } else if (keywordArgs.hasOwnProperty(paramName)) {
+      } else if (Object.prototype.hasOwnProperty.call(keywordArgs, paramName)) {
         finalArgs.push(keywordArgs[paramName]);
       } else if (
-        schema.parameters.properties[paramName].hasOwnProperty("default")
+        Object.prototype.hasOwnProperty.call(
+          schema.parameters.properties[paramName],
+          "default"
+        )
       ) {
         finalArgs.push(schema.parameters.properties[paramName].default);
       } else if (!requiredParams.includes(paramName)) {
@@ -265,12 +391,12 @@ const App: React.FC = () => {
     const bodyMatch = functionCode.match(/function[^{]+\{([\s\S]*)\}/);
     if (!bodyMatch) {
       throw new Error(
-        "Could not parse function body. Ensure it's a standard `function` declaration.",
+        "Could not parse function body. Ensure it's a standard `function` declaration."
       );
     }
     const body = bodyMatch[1];
     const AsyncFunction = Object.getPrototypeOf(
-      async function () {},
+      async function () {}
     ).constructor;
     const func = new AsyncFunction(...paramNames, body);
     const result = await func(...finalArgs);
@@ -278,7 +404,7 @@ const App: React.FC = () => {
   };
 
   const executeToolCalls = async (
-    toolCallContent: string,
+    toolCallContent: string
   ): Promise<RenderInfo[]> => {
     const toolCalls = extractPythonicCalls(toolCallContent);
     if (toolCalls.length === 0)
@@ -296,23 +422,31 @@ const App: React.FC = () => {
           ? extractFunctionAndRenderer(toolUsed.code)
           : { rendererCode: undefined };
 
+        console.log("Tool renderer info:", {
+          toolName: toolUsed?.name,
+          hasRenderer: !!rendererCode,
+          rendererCode,
+        });
+
         let parsedResult;
         try {
           parsedResult = JSON.parse(result);
+          console.log("Parsed result in executeToolCalls:", parsedResult);
         } catch {
           parsedResult = result;
+          console.log("Failed to parse result, using as string:", result);
         }
 
-        let namedParams: Record<string, any> = Object.create(null);
+        let namedParams: Record<string, unknown> = Object.create(null);
         if (parsedCall && toolUsed) {
           const schema = generateSchemaFromCode(
-            extractFunctionAndRenderer(toolUsed.code).functionCode,
+            extractFunctionAndRenderer(toolUsed.code).functionCode
           );
           const paramNames = Object.keys(schema.parameters.properties);
           namedParams = mapArgsToNamedParams(
             paramNames,
             parsedCall.positionalArgs,
-            parsedCall.keywordArgs,
+            parsedCall.keywordArgs
           );
         }
 
@@ -322,6 +456,15 @@ const App: React.FC = () => {
           renderer: rendererCode,
           input: namedParams,
         });
+
+        console.log("RenderInfo created:", {
+          call,
+          result: parsedResult,
+          renderer: rendererCode,
+          hasRenderer: !!rendererCode,
+          resultType: typeof parsedResult,
+          isArray: Array.isArray(parsedResult),
+        });
       } catch (error) {
         const errorMessage = getErrorMessage(error);
         results.push({ call, error: errorMessage });
@@ -334,7 +477,7 @@ const App: React.FC = () => {
     if (!input.trim() || !isReady) return;
 
     const userMessage: Message = { role: "user", content: input };
-    let currentMessages: Message[] = [...messages, userMessage];
+    const currentMessages: Message[] = [...messages, userMessage];
     setMessages(currentMessages);
     setInput("");
     setIsGenerating(true);
@@ -366,7 +509,7 @@ const App: React.FC = () => {
               };
               return updated;
             });
-          },
+          }
         );
 
         currentMessages.push({ role: "assistant", content: response });
@@ -425,7 +568,7 @@ const App: React.FC = () => {
         console.error("Failed to save system prompt:", error);
       }
     },
-    [],
+    []
   );
 
   const loadSelectedModel = useCallback(async (): Promise<void> => {
@@ -434,7 +577,7 @@ const App: React.FC = () => {
     } catch (error) {
       console.error("Failed to load model:", error);
     }
-  }, [selectedModelId, loadModel]);
+  }, [loadModel]);
 
   const loadSelectedModelId = useCallback(async (): Promise<void> => {
     try {
@@ -484,7 +627,7 @@ const App: React.FC = () => {
         console.error("Failed to save selected model ID:", error);
       }
     },
-    [],
+    []
   );
 
   useEffect(() => {
@@ -535,7 +678,7 @@ const App: React.FC = () => {
               };
               return updated;
             });
-          },
+          }
         );
 
         currentMessages.push({ role: "assistant", content: response });
@@ -587,7 +730,11 @@ const App: React.FC = () => {
         />
       ) : (
         <div className="flex h-screen text-white">
-          <div className="w-1/2 flex flex-col p-4">
+          <div
+            className={`flex flex-col p-4 transition-all duration-300 ${
+              isToolsPanelVisible ? "w-1/2" : "w-full"
+            }`}
+          >
             <div className="flex items-center justify-between mb-4">
               <div className="flex items-center gap-3">
                 <h1 className="text-3xl font-bold text-gray-200">
@@ -618,6 +765,28 @@ const App: React.FC = () => {
                 >
                   <Settings size={16} />
                 </button>
+                <button
+                  onClick={() => setIsMCPManagerOpen(true)}
+                  className="h-10 flex items-center px-3 py-2 rounded-lg font-bold transition-colors bg-blue-600 hover:bg-blue-700 text-sm"
+                  title="Manage MCP Servers"
+                >
+                  🌐
+                </button>
+                <button
+                  onClick={() => setIsToolsPanelVisible(!isToolsPanelVisible)}
+                  className="h-10 flex items-center px-3 py-2 rounded-lg font-bold transition-colors bg-gray-600 hover:bg-gray-700 text-sm"
+                  title={
+                    isToolsPanelVisible
+                      ? "Hide Tools Panel"
+                      : "Show Tools Panel"
+                  }
+                >
+                  {isToolsPanelVisible ? (
+                    <PanelRightClose size={16} />
+                  ) : (
+                    <PanelRightOpen size={16} />
+                  )}
+                </button>
               </div>
             </div>
 
@@ -643,7 +812,7 @@ const App: React.FC = () => {
                     );
                   } else if (msg.role === "assistant") {
                     const isToolCall = msg.content.includes(
-                      "<|tool_call_start|>",
+                      "<|tool_call_start|>"
                     );
 
                     if (isToolCall) {
@@ -652,7 +821,7 @@ const App: React.FC = () => {
                       const hasError =
                         isCompleted &&
                         (nextMessage as ToolMessage).renderInfo.some(
-                          (info) => !!info.error,
+                          (info) => !!info.error
                         );
 
                       return (
@@ -680,7 +849,7 @@ const App: React.FC = () => {
                   } else if (msg.role === "tool") {
                     const visibleToolResults = msg.renderInfo.filter(
                       (info) =>
-                        info.error || (info.result != null && info.renderer),
+                        info.error || (info.result != null && info.renderer)
                     );
 
                     if (visibleToolResults.length === 0) return null;
@@ -698,7 +867,9 @@ const App: React.FC = () => {
                                   <ResultBlock error={info.error} />
                                 ) : (
                                   <ToolResultRenderer
-                                    result={info.result}
+                                    result={
+                                      info.result as import("./types/mcp").MCPToolResult
+                                    }
                                     rendererCode={info.renderer}
                                     input={info.input}
                                   />
@@ -745,35 +916,37 @@ const App: React.FC = () => {
             </div>
           </div>
 
-          <div className="w-1/2 flex flex-col p-4 border-l border-gray-700">
-            <div className="flex justify-between items-center mb-4">
-              <h2 className="text-2xl font-bold text-teal-400">Tools</h2>
-              <button
-                onClick={addTool}
-                className="flex items-center bg-teal-600 hover:bg-teal-700 text-white font-bold py-2 px-4 rounded-lg transition-colors"
+          {isToolsPanelVisible && (
+            <div className="w-1/2 flex flex-col p-4 border-l border-gray-700 transition-all duration-300">
+              <div className="flex justify-between items-center mb-4">
+                <h2 className="text-2xl font-bold text-teal-400">Tools</h2>
+                <button
+                  onClick={addTool}
+                  className="flex items-center bg-teal-600 hover:bg-teal-700 text-white font-bold py-2 px-4 rounded-lg transition-colors"
+                >
+                  <Plus size={16} className="mr-2" /> Add Tool
+                </button>
+              </div>
+              <div
+                ref={toolsContainerRef}
+                className="flex-grow bg-gray-800 rounded-lg p-4 overflow-y-auto space-y-3"
               >
-                <Plus size={16} className="mr-2" /> Add Tool
-              </button>
-            </div>
-            <div
-              ref={toolsContainerRef}
-              className="flex-grow bg-gray-800 rounded-lg p-4 overflow-y-auto space-y-3"
-            >
-              {tools.map((tool) => (
-                <ToolItem
-                  key={tool.id}
-                  tool={tool}
-                  onToggleEnabled={() => toggleToolEnabled(tool.id)}
-                  onToggleCollapsed={() => toggleToolCollapsed(tool.id)}
-                  onExpand={() => expandTool(tool.id)}
-                  onDelete={() => deleteTool(tool.id)}
-                  onCodeChange={(newCode) =>
-                    handleToolCodeChange(tool.id, newCode)
-                  }
-                />
-              ))}
+                {tools.map((tool) => (
+                  <ToolItem
+                    key={tool.id}
+                    tool={tool}
+                    onToggleEnabled={() => toggleToolEnabled(tool.id)}
+                    onToggleCollapsed={() => toggleToolCollapsed(tool.id)}
+                    onExpand={() => expandTool(tool.id)}
+                    onDelete={() => deleteTool(tool.id)}
+                    onCodeChange={(newCode) =>
+                      handleToolCodeChange(tool.id, newCode)
+                    }
+                  />
+                ))}
+              </div>
             </div>
-          </div>
+          )}
         </div>
       )}
 
@@ -819,6 +992,12 @@ const App: React.FC = () => {
           </div>
         </div>
       )}
+
+      {/* MCP Server Manager Modal */}
+      <MCPServerManager
+        isOpen={isMCPManagerOpen}
+        onClose={() => setIsMCPManagerOpen(false)}
+      />
     </div>
   );
 };

src/components/ResultBlock.tsx

@@ -1,21 +1,144 @@
 import type React from "react";
+import { useState } from "react";
 
-const ResultBlock: React.FC<{ error?: string; result?: any }> = ({
+type JsonValue = string | number | boolean | null | JsonObject | JsonArray;
+type JsonObject = { [key: string]: JsonValue };
+type JsonArray = JsonValue[];
+
+const isJsonString = (str: string): boolean => {
+  if (typeof str !== "string") return false;
+  const trimmed = str.trim();
+
+  // Check if it looks like JSON (starts with { or [)
+  if (!trimmed.startsWith("{") && !trimmed.startsWith("[")) return false;
+
+  try {
+    const parsed = JSON.parse(trimmed);
+    // Ensure it's actually an object or array, not just a primitive
+    console.log("JSON parse successful:", parsed);
+    return typeof parsed === "object" && parsed !== null;
+  } catch (error) {
+    console.log("JSON parse failed:", error);
+    return false;
+  }
+};
+
+const JsonCollapsible: React.FC<{ data: JsonValue; isString?: boolean }> = ({
+  data,
+  isString = false,
+}) => {
+  const [isCollapsed, setIsCollapsed] = useState(true);
+
+  let jsonData: JsonValue;
+  try {
+    jsonData = isString ? JSON.parse(data as string) : data;
+  } catch {
+    // If parsing fails, display as string
+    return (
+      <pre className="text-sm text-gray-300 whitespace-pre-wrap overflow-auto">
+        {String(data)}
+      </pre>
+    );
+  }
+
+  const isObject = typeof jsonData === "object" && jsonData !== null;
+
+  if (!isObject) {
+    return <span className="text-gray-300">{JSON.stringify(jsonData)}</span>;
+  }
+
+  const keys = Object.keys(jsonData as JsonObject);
+  const preview = Array.isArray(jsonData)
+    ? `[${jsonData.length} items]`
+    : `{${keys.length} keys}`;
+
+  return (
+    <div className="json-collapsible">
+      <button
+        onClick={() => setIsCollapsed(!isCollapsed)}
+        className="flex items-center gap-1 text-blue-400 hover:text-blue-300 transition-colors text-sm font-mono"
+      >
+        <span
+          className="transform transition-transform duration-200"
+          style={{
+            transform: isCollapsed ? "rotate(-90deg)" : "rotate(0deg)",
+          }}
+        >
+          ▼
+        </span>
+        {isCollapsed ? preview : Array.isArray(jsonData) ? "[" : "{"}
+      </button>
+      {!isCollapsed && (
+        <div className="ml-4 mt-1">
+          <pre className="text-sm text-gray-300 whitespace-pre-wrap overflow-auto">
+            {JSON.stringify(jsonData, null, 2)}
+          </pre>
+          <div className="text-blue-400 font-mono text-sm">
+            {Array.isArray(jsonData) ? "]" : "}"}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+const ResultBlock: React.FC<{ error?: string; result?: unknown }> = ({
   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"
+}) => {
+  console.log("ResultBlock component rendered with:", {
+    error,
+    result,
+    type: typeof result,
+  });
+
+  const renderContent = () => {
+    console.log("ResultBlock Debug:", {
+      result,
+      type: typeof result,
+      isString: typeof result === "string",
+      isArray: Array.isArray(result),
+      startsWithBracket:
+        typeof result === "string" && result.trim().startsWith("["),
+      isJsonString: typeof result === "string" ? isJsonString(result) : false,
+    });
+
+    // Handle objects and arrays directly
+    if (typeof result === "object" && result !== null) {
+      console.log("Rendering as object/array with JsonCollapsible");
+      return <JsonCollapsible data={result as JsonValue} />;
     }
-  >
-    {error ? <p className="text-red-300 text-sm">Error: {error}</p> : null}
-    <pre className="text-sm text-gray-300 whitespace-pre-wrap overflow-auto mt-2">
-      {typeof result === "object" ? JSON.stringify(result, null, 2) : result}
-    </pre>
-  </div>
-);
+
+    // Handle string that might be JSON
+    if (typeof result === "string") {
+      const trimmed = result.trim();
+      if (isJsonString(trimmed)) {
+        console.log("Rendering string as JSON with JsonCollapsible");
+        return <JsonCollapsible data={trimmed} isString={true} />;
+      }
+    }
+
+    // Fallback to plain text display
+    console.log("Rendering as plain text fallback");
+    return (
+      <pre className="text-sm text-gray-300 whitespace-pre-wrap overflow-auto">
+        {String(result)}
+      </pre>
+    );
+  };
+
+  return (
+    <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}
+      <div className="mt-2">{renderContent()}</div>
+    </div>
+  );
+};
 
 export default ResultBlock;

src/components/ToolResultRenderer.tsx

@@ -1,10 +1,11 @@
 import React from "react";
 import ResultBlock from "./ResultBlock";
+import type { MCPToolResult } from "../types/mcp";
 
 const ToolResultRenderer: React.FC<{
-  result: any;
+  result: MCPToolResult;
   rendererCode?: string;
-  input?: any;
+  input?: unknown;
 }> = ({ result, rendererCode, input }) => {
   if (!rendererCode) {
     return <ResultBlock result={result} />;
@@ -25,10 +26,34 @@ const ToolResultRenderer: React.FC<{
       const { createElement: h, Fragment } = React;
       const JSXComponent = ${componentCode};
       return JSXComponent(input, output);
-      `,
+      `
     );
 
     const element = componentFunction(React, input || {}, result);
+
+    // For object results, also show the formatted JSON below the custom renderer
+    if (typeof result === "object" && result !== null) {
+      return (
+        <div>
+          {element}
+          <div className="mt-3 space-y-3">
+            <div>
+              <h4 className="text-sm font-medium text-gray-300 mb-2">
+                Request
+              </h4>
+              <ResultBlock result={input || {}} />
+            </div>
+            <div>
+              <h4 className="text-sm font-medium text-gray-300 mb-2">
+                Response
+              </h4>
+              <ResultBlock result={result} />
+            </div>
+          </div>
+        </div>
+      );
+    }
+
     return element;
   } catch (error) {
     return (

src/constants/models.ts

@@ -2,4 +2,9 @@ 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)" },
+  {
+    id: "gemma-270m",
+    label: "Gemma-3-270M",
+    size: "270M parameters",
+  },
 ];

src/hooks/useLLM.ts

@@ -13,11 +13,11 @@ interface LLMState {
 }
 
 interface LLMInstance {
-  model: any;
-  tokenizer: any;
+  model: unknown;
+  tokenizer: unknown;
 }
 
-let moduleCache: {
+const moduleCache: {
   [modelId: string]: {
     instance: LLMInstance | null;
     loadingPromise: Promise<LLMInstance> | null;
@@ -36,14 +36,20 @@ export const useLLM = (modelId?: string) => {
   const loadingPromiseRef = useRef<Promise<LLMInstance> | null>(null);
 
   const abortControllerRef = useRef<AbortController | null>(null);
-  const pastKeyValuesRef = useRef<any>(null);
+  const pastKeyValuesRef = useRef<unknown>(null);
 
   const loadModel = useCallback(async () => {
     if (!modelId) {
       throw new Error("Model ID is required");
     }
 
-    const MODEL_ID = `onnx-community/LFM2-${modelId}-ONNX`;
+    // Handle different model types
+    let MODEL_ID: string;
+    if (modelId === "gemma-270m") {
+      MODEL_ID = "onnx-community/gemma-3-270m-it-ONNX";
+    } else {
+      MODEL_ID = `onnx-community/LFM2-${modelId}-ONNX`;
+    }
 
     if (!moduleCache[modelId]) {
       moduleCache[modelId] = {
@@ -99,7 +105,7 @@ export const useLLM = (modelId?: string) => {
             progress.file.endsWith(".onnx_data")
           ) {
             const percentage = Math.round(
-              (progress.loaded / progress.total) * 100,
+              (progress.loaded / progress.total) * 100
             );
             setState((prev) => ({ ...prev, progress: percentage }));
           }
@@ -150,7 +156,7 @@ export const useLLM = (modelId?: string) => {
     async (
       messages: Array<{ role: string; content: string }>,
       tools: Array<any>,
-      onToken?: (token: string) => void,
+      onToken?: (token: string) => void
     ): Promise<string> => {
       const instance = instanceRef.current;
       if (!instance) {
@@ -196,7 +202,7 @@ export const useLLM = (modelId?: string) => {
 
       return response;
     },
-    [],
+    []
   );
 
   const clearPastKeyValues = useCallback(() => {

vite.config.ts

@@ -5,4 +5,14 @@ import tailwindcss from "@tailwindcss/vite";
 // https://vite.dev/config/
 export default defineConfig({
   plugins: [react(), tailwindcss()],
+  server: {
+    proxy: {
+      "/api/mcp": {
+        target: "https://api.shreyas.natoma.dev",
+        changeOrigin: true,
+        secure: true,
+        rewrite: (path) => path.replace(/^\/api\/mcp/, "/mcp"),
+      },
+    },
+  },
 });