Add HF deployment

.gitignore

@@ -1,4 +1,7 @@
 .env
 node_modules
 .github
-.gitignore
+.gitignore
+__pycache__/
+*.pyc
+dist/

README.md

@@ -6,11 +6,11 @@ MCP Blockly is a visual programming environment for building AI tools. Instead o
 
 MCP Blockly lets you build Model Context Protocol (MCP) servers using a block-based interface. You define what inputs your tool needs, add blocks that perform operations (calling APIs, parsing data, executing language models), and specify what your tool outputs. The system generates Python code from your block arrangement and provides a testing interface to verify your work.
 
-The interface has three main areas. The canvas on the left is where you build by dragging and connecting blocks. On the right are two tabs for working with your project: the Development tab for testing, and an AI Chat tab.
+The interface has three main areas. The canvas on the left is where you build by dragging and connecting blocks. On the right are two tabs for working with your project: the Testing tab, and an AI Assistant tab.
 
-In the Development tab, you see your generated Python code alongside a test interface. The interface automatically creates input fields matching your tool's parameters. After you arrange your blocks, click Refresh to update the test interface, enter values, and click Submit to run your code. Results appear in the output fields.
+In the Testing tab, you see your generated Python code alongside a test interface. The interface automatically creates input fields matching your tool's parameters. After you arrange your blocks, click Refresh to update the test interface, enter values, and click Submit to run your code. Results appear in the output fields.
 
-The AI Chat tab lets you build and refine your project through conversation. It understands your workspace and can turn natural instructions into real changes inside the editor.
+The AI Assistant tab lets you build and refine your project through conversation. It understands your workspace and can turn natural instructions into real changes inside the editor.
 
 The assistant can:
 - Create new blocks from plain language. Describe what you want to add, and it builds the correct structure automatically.  
@@ -51,7 +51,7 @@ After that, it will open a tab in your browser and you can start building!
 
 ## How It Works
 
-The system has three main components: the frontend Blockly editor, the backend Python services, and the AI Chat engine.
+The system has three main components: the frontend Blockly editor, the backend Python services, and the AI Assistant engine.
 
 When you arrange blocks in the editor, change listeners trigger code generation. The JavaScript generator traverses your block tree and outputs Python code that represents your workflow. Each block type has a corresponding generator function that knows how to output Python for that block. These functions compose recursively, building the complete function definition from your block arrangement. The generated code is sent to the backend via HTTP POST and stored in memory.
 
@@ -59,10 +59,10 @@ Blocks dynamically manage their input and output ports through Blockly's mutator
 
 Code execution happens in a sandboxed Python environment. User code is executed with restricted builtins and a clean state for each run. The system captures return values and displays them in the test interface.
 
-The AI Chat component is the sophisticated heart of the system. It continuously monitors the current workspace state and code. When you send a message, the system formats your entire block structure into a readable representation and includes it in the context sent to OpenAI. The model receives not just your question but a complete understanding of what you've built. The system includes a detailed system prompt that explains MCP concepts, the block syntax, and what actions the model can perform.
+The AI Assistant component is the sophisticated heart of the system. It continuously monitors the current workspace state and code. When you send a message, the system formats your entire block structure into a readable representation and includes it in the context sent to OpenAI. The model receives not just your question but a complete understanding of what you've built. The system includes a detailed system prompt that explains MCP concepts, the block syntax, and what actions the model can perform.
 
 Based on the model's response, the system recognizes three special commands: run to execute your MCP with sample inputs, delete to remove a block by ID, and create to add new blocks to your workspace. When the model issues these commands, they're executed immediately. For block modifications, the system uses Server-Sent Events to stream commands back to the frontend, which creates or deletes blocks in real time while you watch. This maintains real-time synchronization between the chat interface and the visual editor.
 
-The AI Chat can execute multiple actions per conversation turn. If the model decides it needs to run your code to see the result before suggesting improvements, it does that automatically. If it needs to delete a broken block and create a replacement, it performs both operations and then reports back with what happened. This looping continues for up to five consecutive iterations per user message, allowing the AI to progressively refine your blocks without requiring you to send multiple messages.
+The AI Assistant can execute multiple actions per conversation turn. If the model decides it needs to run your code to see the result before suggesting improvements, it does that automatically. If it needs to delete a broken block and create a replacement, it performs both operations and then reports back with what happened. This looping continues for up to five consecutive iterations per user message, allowing the AI to progressively refine your blocks without requiring you to send multiple messages.
 
 API keys are managed through environment variables set at runtime. The system uses Gradio to automatically generate user interfaces based on the function signatures in your generated code, creating input and output fields that match your tool's parameters.

project/chat.py

@@ -17,8 +17,9 @@ from colorama import Fore, Style
 # Initialize OpenAI client (will be updated when API key is set)
 client = None
 
-# Store API key in memory for this process
+# Store API keys in memory for this process
 stored_api_key = ""
+stored_hf_key = ""
 
 # Global variable to store the latest chat context
 latest_blockly_chat_code = ""
@@ -70,16 +71,23 @@ async def update_chat(request: Request):
 
 @app.post("/set_api_key_chat")
 async def set_api_key_chat(request: Request):
-    """Receive API key from frontend and store it"""
-    global stored_api_key
+    """Receive API keys from frontend and store them"""
+    global stored_api_key, stored_hf_key
     data = await request.json()
     api_key = data.get("api_key", "").strip()
+    hf_key = data.get("hf_key", "").strip()
     
-    # Store in memory and set environment variable for this process
-    stored_api_key = api_key
-    os.environ["OPENAI_API_KEY"] = api_key
+    # Store in memory and set environment variables for this process
+    if api_key:
+        stored_api_key = api_key
+        os.environ["OPENAI_API_KEY"] = api_key
+        print(f"[CHAT API KEY] Set OPENAI_API_KEY in chat.py environment")
+    
+    if hf_key:
+        stored_hf_key = hf_key
+        os.environ["HUGGINGFACE_API_KEY"] = hf_key
+        print(f"[CHAT HF KEY] Set HUGGINGFACE_API_KEY in chat.py environment")
     
-    print(f"[CHAT API KEY] Set OPENAI_API_KEY in chat.py environment")
     return {"success": True}
 
 def execute_mcp(mcp_call):
@@ -555,6 +563,111 @@ async def variable_result(request: Request):
     
     return {"received": True}
 
+def deploy_to_huggingface(space_name):
+    """Deploy the generated MCP code to a Hugging Face Space"""
+    global stored_hf_key
+    
+    if not stored_hf_key:
+        return "[DEPLOY ERROR] No Hugging Face API key configured. Please set it in File > Keys."
+    
+    try:
+        from huggingface_hub import HfApi
+    except ImportError:
+        return "[DEPLOY ERROR] huggingface_hub not installed. Run: pip install huggingface_hub"
+    
+    try:
+        api = HfApi(token=stored_hf_key)
+        
+        # Get username from token
+        user_info = api.whoami()
+        username = user_info["name"]
+        repo_id = f"{username}/{space_name}"
+        
+        print(f"[DEPLOY] Creating HF Space: {repo_id}")
+        
+        # Create the Space
+        api.create_repo(
+            repo_id=repo_id,
+            repo_type="space",
+            space_sdk="gradio",
+            private=False,
+        )
+        
+        print(f"[DEPLOY] Space created. Uploading files...")
+        
+        # Get the actual generated Python code from test.py (not the Blockly DSL)
+        python_code = ""
+        try:
+            resp = requests.get(f"http://127.0.0.1:{os.getenv('PORT', 8080)}/get_latest_code")
+            if resp.ok:
+                python_code = resp.json().get("code", "")
+        except Exception as e:
+            print(f"[DEPLOY WARN] Could not fetch Python code from test.py: {e}")
+        
+        if not python_code.strip():
+            return "[DEPLOY ERROR] No generated Python code available. Create and test your tool first."
+        
+        # Upload app.py with actual Python code
+        api.upload_file(
+            path_or_fileobj=python_code.encode(),
+            path_in_repo="app.py",
+            repo_id=repo_id,
+            repo_type="space",
+        )
+        
+        # Create requirements.txt
+        requirements_content = """gradio
+openai
+requests
+huggingface_hub
+"""
+        
+        api.upload_file(
+            path_or_fileobj=requirements_content.encode(),
+            path_in_repo="requirements.txt",
+            repo_id=repo_id,
+            repo_type="space",
+        )
+        
+        # Create README.md with proper YAML front matter
+        readme_content = f"""---
+title: {space_name.replace('-', ' ').title()}
+emoji: 🚀
+colorFrom: purple
+colorTo: blue
+sdk: gradio
+app_file: app.py
+pinned: false
+---
+
+# {space_name}
+
+This is an MCP (Model Context Protocol) tool created with [Blockly MCP Builder](https://github.com/owenkaplinsky/mcp-blockly).
+
+The tool has been automatically deployed to Hugging Face Spaces and is ready to use!
+
+## About
+Created using Blockly MCP Builder - a visual programming environment for building AI tools.
+"""
+        
+        api.upload_file(
+            path_or_fileobj=readme_content.encode("utf-8"),
+            path_in_repo="README.md",
+            repo_id=repo_id,
+            repo_type="space",
+        )
+        
+        space_url = f"https://huggingface.co/spaces/{repo_id}"
+        print(f"[DEPLOY SUCCESS] Space deployed: {space_url}")
+        
+        return f"[TOOL] Successfully deployed to Hugging Face Space!\n\n**Space URL:** {space_url}"
+        
+    except Exception as e:
+        print(f"[DEPLOY ERROR] {e}")
+        import traceback
+        traceback.print_exc()
+        return f"[DEPLOY ERROR] Failed to deploy: {str(e)}"
+
 def create_gradio_interface():
     # Hardcoded system prompt
     SYSTEM_PROMPT = f"""You are an AI assistant that helps users build **MCP servers** using Blockly blocks.
@@ -658,6 +771,19 @@ in one call.
 You will be given the current variables that are in the workspace. Like the blocks, you will see:
 
 `varId | varName`
+
+---
+
+### Deploying to Hugging Face Spaces
+
+Once the user has tested and is happy with their MCP tool, you can deploy it to a live Hugging Face Space using the `deploy_to_huggingface` tool.
+
+**To deploy:**
+1. Ask the user for a name for their Space (e.g., "my-tool")
+2. Call the `deploy_to_huggingface` tool with that name
+3. The tool will create a new Space, upload the code, and return a live URL
+
+The deployed Space will be public and shareable with others.
 """
     
     tools = [
@@ -729,6 +855,23 @@ You will be given the current variables that are in the workspace. Like the bloc
                 },
             }
         },
+        {
+            "type": "function",
+            "function": {
+                "name": "deploy_to_huggingface",
+                "description": "Deploy the generated MCP tool to a Hugging Face Space. Requires a Hugging Face API key to be set.",
+                "parameters": {
+                    "type": "object",
+                    "properties": {
+                        "space_name": {
+                            "type": "string",
+                            "description": "The name of the Hugging Face Space to create (e.g., 'my-tool')",
+                        },
+                    },
+                    "required": ["space_name"],
+                },
+            }
+        },
     ]
     
     def chat_with_context(message, history):
@@ -856,6 +999,12 @@ You will be given the current variables that are in the workspace. Like the bloc
                             tool_result = execute_mcp(mcp_call)
                             result_label = "MCP Execution Result"
                         
+                        elif function_name == "deploy_to_huggingface":
+                            space_name = function_args.get("space_name", "")
+                            print(Fore.YELLOW + f"Agent deploying to Hugging Face Space: `{space_name}`." + Style.RESET_ALL)
+                            tool_result = deploy_to_huggingface(space_name)
+                            result_label = "Deployment Result"
+                        
                         if tool_result:
                             print(Fore.YELLOW + f"[TOOL RESULT] {tool_result}" + Style.RESET_ALL)
                             
@@ -899,7 +1048,7 @@ You will be given the current variables that are in the workspace. Like the bloc
     # Create the standard ChatInterface
     demo = gr.ChatInterface(
         fn=chat_with_context,
-        title="Blockly MCP Chat",
+        title="AI Assistant",
     )
 
     return demo

project/dist/bundle.js.LICENSE.txt

@@ -1,5 +0,0 @@
-/**
- * @license
- * Copyright 2019 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */

project/dist/index.html

@@ -1,114 +0,0 @@
-<!doctype html><html><head><meta charset="utf-8"/><title>Blockly MCP Builder</title><script defer="defer" src="bundle.js"></script></head><body><div id="topBar"><div id="titleSection"><h1>Blockly MCP Builder</h1></div><div id="divider"></div><div id="menuSection"><div class="menuGroup"><button class="menuButton">File</button><div class="dropdown"><a href="#" id="newButton" class="dropdownItem" data-action="new">New</a> <a href="#" id="loadButton" class="dropdownItem" data-action="open">Open</a> <a href="#" id="saveButton" class="dropdownItem" data-action="download">Download Project</a> <a href="#" id="downloadCodeButton" class="dropdownItem" data-action="downloadCode">Download Code</a> <a href="#" id="settingsButton" class="dropdownItem" data-action="downloadCode">API Key</a></div></div><div class="menuGroup"><button class="menuButton">Edit</button><div class="dropdown"><a href="#" id="undoButton" class="dropdownItem" data-action="undo">Undo</a> <a href="#" id="redoButton" class="dropdownItem" data-action="redo">Redo</a> <a href="#" id="cleanWorkspace" class="dropdownItem" data-action="cleanup">Clean up</a></div></div><div class="menuGroup"><button class="menuButton">Examples</button><div class="dropdown"><a href="#" id="weatherButton" class="dropdownItem" data-action="undo">Weather API</a> <a href="#" id="factButton" class="dropdownItem" data-action="undo">Fact Checker</a></div></div></div><div id="githubLink"><a href="https://github.com/owenkaplinsky/mcp-blockly" target="_blank" rel="noopener noreferrer"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v 3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg></a></div></div><div id="pageContainer"><div id="outputPane"><div id="tabBar"><div class="tab active" data-tab="development">Development</div><div class="tab" data-tab="aichat">AI Chat</div></div><div id="developmentTab" class="tabContent active"><div id="chatContainer"><iframe src="/gradio-test" style="width: 100%; height: 100%; border: none;"></iframe></div><div class="verticalResizer"></div><pre id="generatedCode"><code></code></pre></div><div id="aichatTab" class="tabContent"><div id="gradioContainer"><iframe src="/gradio-chat" style="width: 100%; height: 100%; border: none;"></iframe></div><pre id="aichatCode" style="position: absolute; left: -9999px; width: 1px; height: 1px;"><code></code></pre></div></div><div class="resizer"></div><div id="blocklyDiv"></div></div><script>// Tab switching functionality
-    const tabs = document.querySelectorAll('.tab');
-    const tabContents = document.querySelectorAll('.tabContent');
-
-    tabs.forEach(tab => {
-      tab.addEventListener('click', () => {
-        const tabName = tab.getAttribute('data-tab');
-
-        // Remove active class from all tabs and contents
-        tabs.forEach(t => t.classList.remove('active'));
-        tabContents.forEach(content => content.classList.remove('active'));
-
-        // Add active class to clicked tab and corresponding content
-        tab.classList.add('active');
-        document.getElementById(tabName + 'Tab').classList.add('active');
-      });
-    });
-
-    // Horizontal resizer (output pane vs blockly)
-    const resizer = document.querySelector('.resizer');
-    const outputPane = document.getElementById('outputPane');
-    const pageContainer = document.getElementById('pageContainer');
-
-    let startX = 0;
-    let startWidth = 0;
-
-    function onPointerMove(e) {
-      const containerRect = pageContainer.getBoundingClientRect();
-      const containerWidth = containerRect.width;
-
-      const dx = e.clientX - startX;
-      let newWidthPx = startWidth + dx;
-
-      const minWidth = containerWidth * 0.2;
-      const maxWidth = containerWidth * 0.59;
-      newWidthPx = Math.max(minWidth, Math.min(maxWidth, newWidthPx));
-
-      const newPercent = (newWidthPx / containerWidth) * 100;
-      outputPane.style.flex = `0 0 ${newPercent}%`;
-    }
-
-    function onPointerUp() {
-      resizer.releasePointerCapture(activePointerId);
-      resizer.removeEventListener('pointermove', onPointerMove);
-      resizer.removeEventListener('pointerup', onPointerUp);
-      resizer.classList.remove('active');
-      document.body.style.cursor = '';
-      document.body.style.userSelect = '';
-    }
-
-    let activePointerId = null;
-
-    resizer.addEventListener('pointerdown', (e) => {
-      const rect = outputPane.getBoundingClientRect();
-      startX = e.clientX;
-      startWidth = rect.width;
-      activePointerId = e.pointerId;
-
-      resizer.classList.add('active');
-      document.body.style.cursor = 'col-resize';
-      document.body.style.userSelect = 'none';
-
-      resizer.setPointerCapture(activePointerId);
-      resizer.addEventListener('pointermove', onPointerMove);
-      resizer.addEventListener('pointerup', onPointerUp);
-    });
-
-    // Vertical resizer (gradio vs code)
-    const verticalResizer = document.querySelector('.verticalResizer');
-    const chatContainer = document.getElementById('chatContainer');
-    const generatedCode = document.getElementById('generatedCode');
-
-    let startY = 0;
-    let startHeight = 0;
-    let activePointerId2 = null;
-
-    function onVerticalPointerMove(e) {
-      const outputPaneRect = outputPane.getBoundingClientRect();
-      const outputPaneHeight = outputPaneRect.height;
-
-      const dy = e.clientY - startY;
-      let newHeightPx = startHeight + dy;
-
-      const minHeight = outputPaneHeight * 0.4;
-      const maxHeight = outputPaneHeight * 0.78;
-      newHeightPx = Math.max(minHeight, Math.min(maxHeight, newHeightPx));
-
-      const newPercent = (newHeightPx / outputPaneHeight) * 100;
-      chatContainer.style.flex = `0 0 ${newPercent}%`;
-    }
-
-    function onVerticalPointerUp() {
-      verticalResizer.releasePointerCapture(activePointerId2);
-      verticalResizer.removeEventListener('pointermove', onVerticalPointerMove);
-      verticalResizer.removeEventListener('pointerup', onVerticalPointerUp);
-      verticalResizer.classList.remove('active');
-      document.body.style.cursor = '';
-      document.body.style.userSelect = '';
-    }
-
-    verticalResizer.addEventListener('pointerdown', (e) => {
-      const rect = chatContainer.getBoundingClientRect();
-      startY = e.clientY;
-      startHeight = rect.height;
-      activePointerId2 = e.pointerId;
-
-      verticalResizer.classList.add('active');
-      document.body.style.cursor = 'row-resize';
-      document.body.style.userSelect = 'none';
-
-      verticalResizer.setPointerCapture(activePointerId2);
-      verticalResizer.addEventListener('pointermove', onVerticalPointerMove);
-      verticalResizer.addEventListener('pointerup', onVerticalPointerUp);
-    });</script><div id="apiKeyModal" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 9999; align-items: center; justify-content: center;"><div style="background: white; padding: 30px; border-radius: 10px; width: 90%; max-width: 500px; box-shadow: 0 10px 30px rgba(0,0,0,0.2);"><h2 style="margin-top: 0; margin-bottom: 20px; color: #333;">Settings</h2><label for="apiKeyInput" style="display: block; margin-bottom: 10px; color: #666; font-size: 14px;">OpenAI API Key:</label> <input type="password" id="apiKeyInput" style="width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 5px; font-size: 14px; box-sizing: border-box;" placeholder="sk-..."><p style="margin-top: 10px; color: #999; font-size: 12px;">Your API key will be stored securely for this session.</p><div style="margin-top: 20px; display: flex; justify-content: flex-end; gap: 10px;"><button id="cancelApiKey" style="padding: 10px 20px; background: #e5e7eb; border: none; border-radius: 5px; cursor: pointer; font-size: 14px;">Cancel</button> <button id="saveApiKey" style="padding: 10px 20px; background: #6366f1; color: white; border: none; border-radius: 5px; cursor: pointer; font-size: 14px;">Save</button></div></div></div></body></html>

project/src/generators/chat.js

@@ -28,7 +28,7 @@ export const forBlock = Object.create(null);
 /*
 
 This file is for the secondary code generator.
-It is not meant to be shown to the user, but rather to communicate the state of the workspace to an AI chat assistant in a simplistic text format.
+It is not meant to be shown to the user, but rather to communicate the state of the workspace to an AI Assistant assistant in a simplistic text format.
 
 */
 

project/src/index.html

@@ -20,7 +20,7 @@
           <a href="#" id="loadButton" class="dropdownItem" data-action="open">Open</a>
           <a href="#" id="saveButton" class="dropdownItem" data-action="download">Download Project</a>
           <a href="#" id="downloadCodeButton" class="dropdownItem" data-action="downloadCode">Download Code</a>
-          <a href="#" id="settingsButton" class="dropdownItem" data-action="downloadCode">API Key</a>
+          <a href="#" id="settingsButton" class="dropdownItem" data-action="downloadCode">API Keys</a>
         </div>
       </div>
 
@@ -54,8 +54,8 @@
   <div id="pageContainer">
     <div id="outputPane">
       <div id="tabBar">
-        <div class="tab active" data-tab="development">Development</div>
-        <div class="tab" data-tab="aichat">AI Chat</div>
+        <div class="tab active" data-tab="development">Testing</div>
+        <div class="tab" data-tab="aichat">AI Assistant</div>
       </div>
       <div id="developmentTab" class="tabContent active">
         <div id="chatContainer">
@@ -192,13 +192,20 @@
     });
   </script>
 
-  <!-- API Key Modal -->
+  <!-- Keys Modal -->
   <div id="apiKeyModal" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 9999; align-items: center; justify-content: center;">
     <div style="background: white; padding: 30px; border-radius: 10px; width: 90%; max-width: 500px; box-shadow: 0 10px 30px rgba(0,0,0,0.2);">
-      <h2 style="margin-top: 0; margin-bottom: 20px; color: #333;">Settings</h2>
-      <label for="apiKeyInput" style="display: block; margin-bottom: 10px; color: #666; font-size: 14px;">OpenAI API Key:</label>
-      <input type="password" id="apiKeyInput" style="width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 5px; font-size: 14px; box-sizing: border-box;" placeholder="sk-...">
-      <p style="margin-top: 10px; color: #999; font-size: 12px;">Your API key will be stored securely for this session.</p>
+      <h2 style="margin-top: 0; margin-bottom: 20px; color: #333;">API Keys</h2>
+      
+      <label for="apiKeyInput" style="display: block; margin-bottom: 10px; color: #666; font-size: 14px; font-weight: 500;">OpenAI API Key:</label>
+      <input type="password" id="apiKeyInput" style="width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 5px; font-size: 14px; box-sizing: border-box; margin-bottom: 5px;" placeholder="sk-...">
+      <p style="margin: 5px 0 15px 0; color: #999; font-size: 12px;">For the AI assistant and blocks' model calls.</p>
+      
+      <label for="hfKeyInput" style="display: block; margin-bottom: 10px; color: #666; font-size: 14px; font-weight: 500;">Hugging Face API Key:</label>
+      <input type="password" id="hfKeyInput" style="width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 5px; font-size: 14px; box-sizing: border-box; margin-bottom: 5px;" placeholder="hf_...">
+      <p style="margin: 5px 0 20px 0; color: #999; font-size: 12px;">For deploying your MCP server.</p>
+      
+      <p style="color: #999; font-size: 12px;">Your API keys will be stored securely for this session.</p>
       <div style="margin-top: 20px; display: flex; justify-content: flex-end; gap: 10px;">
         <button id="cancelApiKey" style="padding: 10px 20px; background: #e5e7eb; border: none; border-radius: 5px; cursor: pointer; font-size: 14px;">Cancel</button>
         <button id="saveApiKey" style="padding: 10px 20px; background: #6366f1; color: white; border: none; border-radius: 5px; cursor: pointer; font-size: 14px;">Save</button>

project/src/index.js

@@ -149,63 +149,72 @@ downloadCodeButton.addEventListener("click", () => {
   document.body.removeChild(element);
 });
 
-// Settings button and API Key Modal
+// Settings button and Keys Modal
 const settingsButton = document.querySelector('#settingsButton');
 const apiKeyModal = document.querySelector('#apiKeyModal');
 const apiKeyInput = document.querySelector('#apiKeyInput');
+const hfKeyInput = document.querySelector('#hfKeyInput');
 const saveApiKeyButton = document.querySelector('#saveApiKey');
 const cancelApiKeyButton = document.querySelector('#cancelApiKey');
 
 settingsButton.addEventListener("click", () => {
   apiKeyModal.style.display = 'flex';
   
-  // Load current API key from backend
+  // Load current API keys from backend
   fetch("/get_api_key", {
     method: "GET",
   })
   .then(response => response.json())
   .then(data => {
     apiKeyInput.value = data.api_key || '';
+    hfKeyInput.value = data.hf_key || '';
   })
   .catch(err => {
-    console.error("Error loading API key:", err);
+    console.error("Error loading API keys:", err);
   });
 });
 
 saveApiKeyButton.addEventListener("click", () => {
   const apiKey = apiKeyInput.value.trim();
+  const hfKey = hfKeyInput.value.trim();
 
-  // Validate OpenAI key format
-  if (!apiKey.startsWith("sk-") || apiKey.length < 40) {
-    alert("Invalid API key format. Please enter a valid OpenAI API key.");
+  // Validate OpenAI key format if provided
+  if (apiKey && (!apiKey.startsWith("sk-") || apiKey.length < 40)) {
+    alert("Invalid OpenAI API key format. Please enter a valid OpenAI API key (starts with 'sk-').");
     return;
   }
 
-  // Save API key to both backend servers (test.py and chat.py)
+  // Validate Hugging Face key format if provided
+  if (hfKey && (!hfKey.startsWith("hf_") || hfKey.length < 20)) {
+    alert("Invalid Hugging Face API key format. Please enter a valid Hugging Face API key (starts with 'hf_').");
+    return;
+  }
+
+  // Save API keys to both backend servers (test.py and chat.py)
   Promise.all([
     fetch("/set_api_key", {
       method: "POST",
       headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({ api_key: apiKey }),
+      body: JSON.stringify({ api_key: apiKey, hf_key: hfKey }),
     }),
     fetch("/set_api_key_chat", {
       method: "POST",
       headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({ api_key: apiKey }),
+      body: JSON.stringify({ api_key: apiKey, hf_key: hfKey }),
     })
   ])
   .then(async (responses) => {
     const results = await Promise.all(responses.map(r => r.json()));
     if (results.every(r => r.success)) {
-      alert('API key saved successfully');
+      alert('API keys saved successfully');
       apiKeyModal.style.display = 'none';
     } else {
-      alert('Failed to save API key to all services');
+      alert('Failed to save API keys to all services');
     }
   })
   .catch(err => {
-    console.error("Error saving API key:", err);
-    alert('Failed to save API key');
+    console.error("Error saving API keys:", err);
+    alert('Failed to save API keys');
   });
 });
 
@@ -1023,7 +1032,7 @@ const sendChatUpdate = async (chatCode, retryCount = 0) => {
   }
 };
 
-// Update function for the Chat generator (AI Chat tab)
+// Update function for the Chat generator (AI Assistant tab)
 const updateChatCode = () => {
   globalChatCode = chatGenerator.workspaceToCode(ws);
   const codeEl = document.querySelector('#aichatCode code');

project/test.py

@@ -16,7 +16,8 @@ app.add_middleware(
 )
 
 latest_blockly_code = ""
-stored_api_key = ""  # Store the API key in memory
+stored_api_key = ""  # Store the OpenAI API key in memory
+stored_hf_key = ""  # Store the Hugging Face API key in memory
 
 
 # Gets REAL Python code, not the LLM DSL
@@ -37,34 +38,47 @@ async def get_latest_code():
 
 @app.get("/get_api_key")
 async def get_api_key_endpoint():
-    """Get the current API key from memory"""
-    global stored_api_key
+    """Get the current API keys from memory"""
+    global stored_api_key, stored_hf_key
     api_key = stored_api_key or os.environ.get("OPENAI_API_KEY", "")
+    hf_key = stored_hf_key or os.environ.get("HUGGINGFACE_API_KEY", "")
     
-    # Mask the API key for security (show only first 7 and last 4 characters)
+    # Mask the API keys for security (show only first 7 and last 4 characters)
     if api_key and len(api_key) > 15:
-        masked_key = api_key[:7] + '...' + api_key[-4:]
+        masked_api_key = api_key[:7] + '...' + api_key[-4:]
     else:
-        masked_key = api_key if api_key else ""
+        masked_api_key = api_key if api_key else ""
     
-    return {"api_key": masked_key}
+    if hf_key and len(hf_key) > 15:
+        masked_hf_key = hf_key[:7] + '...' + hf_key[-4:]
+    else:
+        masked_hf_key = hf_key if hf_key else ""
+    
+    return {"api_key": masked_api_key, "hf_key": masked_hf_key}
 
 @app.post("/set_api_key")
 async def set_api_key_endpoint(request: Request):
-    """Save API key to environment variable"""
-    global stored_api_key
+    """Save API keys to environment variables"""
+    global stored_api_key, stored_hf_key
     data = await request.json()
     api_key = data.get("api_key", "").strip()
+    hf_key = data.get("hf_key", "").strip()
     
     try:
-        # Store in memory and set environment variable
-        stored_api_key = api_key
-        os.environ["OPENAI_API_KEY"] = api_key
+        # Store in memory and set environment variables
+        if api_key:
+            stored_api_key = api_key
+            os.environ["OPENAI_API_KEY"] = api_key
+            print(f"[API KEY] Set OPENAI_API_KEY in environment")
+        
+        if hf_key:
+            stored_hf_key = hf_key
+            os.environ["HUGGINGFACE_API_KEY"] = hf_key
+            print(f"[HF KEY] Set HUGGINGFACE_API_KEY in environment")
         
-        print(f"[API KEY] Set OPENAI_API_KEY in environment")
         return {"success": True}
     except Exception as e:
-        print(f"Error setting API key: {e}")
+        print(f"Error setting API keys: {e}")
         return {"success": False, "error": str(e)}
 
 
@@ -173,7 +187,7 @@ def execute_blockly_logic(user_inputs):
 
 
 def build_interface():
-    with gr.Blocks() as demo:
+    with gr.Blocks(title="Test MCP Server") as demo:
         # Create a fixed number of potential input fields (max 10)
         input_fields = []
         input_labels = []
@@ -194,7 +208,7 @@ def build_interface():
                 output_fields.append(out)
         
         with gr.Row():
-            submit_btn = gr.Button("Submit")
+            submit_btn = gr.Button("Test")
             refresh_btn = gr.Button("Refresh")
 
         def refresh_inputs():

requirements.txt

@@ -3,3 +3,6 @@ dotenv
 openai
 requests
 colorama
+huggingface_hub
+gradio_client
+mcp