Add local API env

project/chat.py

@@ -2,22 +2,14 @@ import os
 from fastapi import FastAPI, Request
 from fastapi.middleware.cors import CORSMiddleware
 from openai import OpenAI
-from dotenv import load_dotenv
 import uvicorn
 import gradio as gr
 
+# Initialize OpenAI client (will be updated when API key is set)
+client = None
 
-# Load environment variables
-load_dotenv()
-
-# Initialize OpenAI client
-api_key = os.getenv("OPENAI_API_KEY")
-if api_key:
-    client = OpenAI(api_key=api_key)
-else:
-    print("Warning: OPENAI_API_KEY not found in environment variables.")
-    print("Chat functionality will be limited.")
-    client = None
+# Store API key in memory for this process
+stored_api_key = ""
 
 # Global variable to store the latest chat context
 latest_blockly_chat_code = ""
@@ -41,6 +33,20 @@ async def update_chat(request: Request):
     print("\n[FASTAPI] Updated Blockly chat code:\n", latest_blockly_chat_code)
     return {"code": latest_blockly_chat_code}
 
+@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
+    data = await request.json()
+    api_key = data.get("api_key", "").strip()
+    
+    # Store in memory and set environment variable for this process
+    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")
+    return {"success": True}
+
 def create_gradio_interface():
     # Hardcoded system prompt
     SYSTEM_PROMPT = """You are an AI assistant created to help with Blockly MCP tasks. Users can create MCP (multi-context-protocol) servers
@@ -61,8 +67,20 @@ When the user asks questions or talks about their project, don't talk like a rob
 are doing, state the goal or things. Remember, that info is just for you and you need to speak normally to the user."""
     
     def chat_with_context(message, history):
-        if not client:
-            return "OpenAI API key not configured. Please set OPENAI_API_KEY in your .env file."
+        # Check if API key is set and create/update client
+        global client, stored_api_key
+        
+        # Use stored key or check environment
+        api_key = stored_api_key or os.environ.get("OPENAI_API_KEY")
+        
+        if api_key and (not client or (hasattr(client, 'api_key') and client.api_key != api_key)):
+            try:
+                client = OpenAI(api_key=api_key)
+            except Exception as e:
+                return f"Error initializing OpenAI client: {str(e)}"
+        
+        if not client or not api_key:
+            return "OpenAI API key not configured. Please set it in File > Settings in the Blockly interface."
         
         # Get the chat context from the global variable
         global latest_blockly_chat_code

project/src/index.html

@@ -18,7 +18,9 @@
         <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</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>
 
@@ -189,6 +191,20 @@
       verticalResizer.addEventListener('pointerup', onVerticalPointerUp);
     });
   </script>
+
+  <!-- API Key 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>
+      <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/index.js

@@ -84,7 +84,7 @@ saveButton.addEventListener("click", () => {
   const state = Blockly.serialization.workspaces.save(ws);
   const stateString = JSON.stringify(state);
 
-  var filename = "mcpBlockly.txt";
+  var filename = "mcpBlockly_project.txt";
   var element = document.createElement('a');
 
   element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(stateString));
@@ -95,6 +95,87 @@ saveButton.addEventListener("click", () => {
   document.body.removeChild(element);
 });
 
+// Download Code button
+const downloadCodeButton = document.querySelector('#downloadCodeButton');
+downloadCodeButton.addEventListener("click", () => {
+  // Get the current generated code
+  const codeEl = document.querySelector('#generatedCode code');
+  const code = codeEl ? codeEl.textContent : '';
+  
+  if (!code) {
+    alert('No code to download');
+    return;
+  }
+
+  var filename = "mcp_generated.py";
+  var element = document.createElement('a');
+  
+  element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(code));
+  element.setAttribute('download', filename);
+  element.style.display = 'none';
+  document.body.appendChild(element);
+  element.click();
+  document.body.removeChild(element);
+});
+
+// Settings button and API Key Modal
+const settingsButton = document.querySelector('#settingsButton');
+const apiKeyModal = document.querySelector('#apiKeyModal');
+const apiKeyInput = document.querySelector('#apiKeyInput');
+const saveApiKeyButton = document.querySelector('#saveApiKey');
+const cancelApiKeyButton = document.querySelector('#cancelApiKey');
+
+settingsButton.addEventListener("click", () => {
+  apiKeyModal.style.display = 'flex';
+  
+  // Load current API key from backend
+  fetch("http://127.0.0.1:7860/get_api_key", {
+    method: "GET",
+  })
+  .then(response => response.json())
+  .then(data => {
+    apiKeyInput.value = data.api_key || '';
+  })
+  .catch(err => {
+    console.error("Error loading API key:", err);
+  });
+});
+
+saveApiKeyButton.addEventListener("click", () => {
+  const apiKey = apiKeyInput.value;
+  
+  // Save API key to both backend servers (test.py and chat.py)
+  Promise.all([
+    fetch("http://127.0.0.1:7860/set_api_key", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ api_key: apiKey }),
+    }),
+    fetch("http://127.0.0.1:7861/set_api_key_chat", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ api_key: apiKey }),
+    })
+  ])
+  .then(async (responses) => {
+    const results = await Promise.all(responses.map(r => r.json()));
+    if (results.every(r => r.success)) {
+      alert('API key saved successfully');
+      apiKeyModal.style.display = 'none';
+    } else {
+      alert('Failed to save API key to all services');
+    }
+  })
+  .catch(err => {
+    console.error("Error saving API key:", err);
+    alert('Failed to save API key');
+  });
+});
+
+cancelApiKeyButton.addEventListener("click", () => {
+  apiKeyModal.style.display = 'none';
+});
+
 const weatherText = `{"workspaceComments":[{"height":120,"width":479,"id":"XI5[EHp-Ow+kinXf6n5y","x":51.234375,"y":-83,"text":"Gets temperature of location with a latitude and a longitude.\\n\\nThe API requires a minimum of one decimal point to work."}],"blocks":{"languageVersion":0,"blocks":[{"type":"create_mcp","id":")N.HEG1x]Z/,k#TeWr,S","x":50,"y":50,"deletable":false,"extraState":{"inputCount":2,"inputNames":["latitude","longitude"],"inputTypes":["integer","integer"],"outputCount":1,"outputNames":["output0"],"outputTypes":["string"],"toolCount":0},"inputs":{"X0":{"block":{"type":"input_reference_latitude","id":"]3mj!y}qfRt+!okheU7L","deletable":false,"extraState":{"ownerBlockId":")N.HEG1x]Z/,k#TeWr,S"},"fields":{"VARNAME":"latitude"}}},"X1":{"block":{"type":"input_reference_longitude","id":"Do/{HFNGSd.!;POiKS?D","deletable":false,"extraState":{"ownerBlockId":")N.HEG1x]Z/,k#TeWr,S"},"fields":{"VARNAME":"longitude"}}},"R0":{"block":{"type":"in_json","id":"R|j?_8s^H{l0;UZ-oQt3","fields":{"NAME":"temperature_2m"},"inputs":{"JSON":{"block":{"type":"in_json","id":"X=M,R1@7bRjJVZIPi[qD","fields":{"NAME":"current"},"inputs":{"JSON":{"block":{"type":"call_api","id":"^(.vyM.yni08S~c1EBm=","fields":{"METHOD":"GET"},"inputs":{"URL":{"shadow":{"type":"text","id":"}.T;_U_OsRS)B_y09p % { ","fields":{"TEXT":""}},"block":{"type":"text_replace","id":"OwH9uERJPTGQG!UER#ch","inputs":{"FROM":{"shadow":{"type":"text","id":"ya05#^ 7 % UbUeXX#eDSmH","fields":{"TEXT":"{latitude}"}}},"TO":{"shadow":{"type":"text","id":": _ZloQuh9c-MNf-U]!k5","fields":{"TEXT":""}},"block":{"type":"input_reference_latitude","id":"?%@)3sErZ)}=#4ags#gu","extraState":{"ownerBlockId":")N.HEG1x]Z/,k#TeWr,S"},"fields":{"VARNAME":"latitude"}}},"TEXT":{"shadow":{"type":"text","id":"w@zsP)m6:WjkUp,ln3$x","fields":{"TEXT":""}},"block":{"type":"text_replace","id":"ImNPsvzD7r^+1MJ%IirV","inputs":{"FROM":{"shadow":{"type":"text","id":"%o(3rro?WLIFpmE0#MMM","fields":{"TEXT":"{longitude}"}}},"TO":{"shadow":{"type":"text","id":"Zpql-%oJ_sdSi | r |* er | ","fields":{"TEXT":""}},"block":{"type":"input_reference_longitude","id":"WUgiJP$X + zY#f$5nhnTX","extraState":{"ownerBlockId":") N.HEG1x]Z /, k#TeWr, S"},"fields":{"VARNAME":"longitude"}}},"TEXT":{"shadow":{"type":"text","id":", (vw$o_s7P = b4P; 8]}yj","fields":{"TEXT":"https://api.open-meteo.com/v1/forecast?latitude={latitude}&longitude={longitude}&current=temperature_2m,wind_speed_10m"}}}}}}}}}}}}}}}}}}}}]}}`;
 weatherButton.addEventListener("click", () => {
   try {
@@ -140,8 +221,13 @@ const updateCode = () => {
   const call = `def llm_call(prompt, model):
   from openai import OpenAI
   import os
-
-  client = OpenAI(api_key=os.getenv("OPENAI_API_KEY"))
+  
+  api_key = os.environ.get("OPENAI_API_KEY")
+  
+  if not api_key:
+    return "Error: OpenAI API key not configured. Please set it in File > Settings"
+  
+  client = OpenAI(api_key=api_key)
 
   messages = [{"role": "user", "content": prompt}]
 

project/test.py

@@ -3,7 +3,7 @@ from fastapi.middleware.cors import CORSMiddleware
 import gradio as gr
 import uvicorn
 import re
-from dotenv import load_dotenv
+import os
 
 app = FastAPI()
 
@@ -15,9 +15,8 @@ app.add_middleware(
     allow_headers=["*"],
 )
 
-load_dotenv()
-
 latest_blockly_code = ""
+stored_api_key = ""  # Store the API key in memory
 
 
 @app.post("/update_code")
@@ -28,12 +27,48 @@ async def update_code(request: Request):
     print("\n[FASTAPI] Updated Blockly code:\n", latest_blockly_code)
     return {"ok": True}
 
+@app.get("/get_api_key")
+async def get_api_key_endpoint():
+    """Get the current API key from memory"""
+    global stored_api_key
+    api_key = stored_api_key or os.environ.get("OPENAI_API_KEY", "")
+    
+    # Mask the API key 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:]
+    else:
+        masked_key = api_key if api_key else ""
+    
+    return {"api_key": masked_key}
+
+@app.post("/set_api_key")
+async def set_api_key_endpoint(request: Request):
+    """Save API key to environment variable"""
+    global stored_api_key
+    data = await request.json()
+    api_key = data.get("api_key", "").strip()
+    
+    try:
+        # Store in memory and set environment variable
+        stored_api_key = api_key
+        os.environ["OPENAI_API_KEY"] = api_key
+        
+        print(f"[API KEY] Set OPENAI_API_KEY in environment")
+        return {"success": True}
+    except Exception as e:
+        print(f"Error setting API key: {e}")
+        return {"success": False, "error": str(e)}
+
 
 def execute_blockly_logic(user_inputs):
-    global latest_blockly_code
+    global latest_blockly_code, stored_api_key
     if not latest_blockly_code.strip():
         return "No Blockly code available"
 
+    # Ensure API key is set in environment before executing
+    if stored_api_key:
+        os.environ["OPENAI_API_KEY"] = stored_api_key
+
     result = ""
 
     # More comprehensive filtering of Gradio-related code
@@ -232,5 +267,5 @@ demo = build_interface()
 app = gr.mount_gradio_app(app, demo, path="/")
 
 if __name__ == "__main__":
-    print("[BOOT] Running Gradio+FastAPI combo on http://127.0.0.1:8000")
-    uvicorn.run(app, host="0.0.0.0", port=8000)
+    print("[BOOT] Running Gradio+FastAPI combo on http://127.0.0.1:7860")
+    uvicorn.run(app, host="0.0.0.0", port=7860)

project/webpack.config.js

@@ -1,59 +1,43 @@
-const path = require('path');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
+const path = require('path');
 
-// Base config that applies to either development or production mode.
-const config = {
+module.exports = {
   entry: './src/index.js',
   output: {
-    // Compile the source files into a bundle.
-    filename: 'bundle.js',
     path: path.resolve(__dirname, 'dist'),
+    filename: 'bundle.js',
     clean: true,
   },
-  // Enable webpack-dev-server to get hot refresh of the app.
-  devServer: {
-    static: './build',
-  },
   module: {
     rules: [
       {
-        // Load CSS files. They can be imported into JS files.
         test: /\.css$/i,
         use: ['style-loader', 'css-loader'],
       },
+      {
+        test: /\.js$/,
+        exclude: /node_modules/,  // Exclude all node_modules from source map processing
+        use: ["source-map-loader"],
+        enforce: "pre"
+      }
     ],
   },
   plugins: [
-    // Generate the HTML index page based on our template.
-    // This will output the same index page with the bundle we
-    // created above added in a script tag.
     new HtmlWebpackPlugin({
-      template: 'src/index.html',
+      template: './src/index.html',
     }),
   ],
-};
-
-module.exports = (env, argv) => {
-  if (argv.mode === 'development') {
-    // Set the output path to the `build` directory
-    // so we don't clobber production builds.
-    config.output.path = path.resolve(__dirname, 'build');
-
-    // Generate source maps for our code for easier debugging.
-    // Not suitable for production builds. If you want source maps in
-    // production, choose a different one from https://webpack.js.org/configuration/devtool
-    config.devtool = 'eval-cheap-module-source-map';
-
-    // Include the source maps for Blockly for easier debugging Blockly code.
-    config.module.rules.push({
-      test: /(blockly\/.*\.js)$/,
-      use: [require.resolve('source-map-loader')],
-      enforce: 'pre',
-    });
-
-    // Ignore spurious warnings from source-map-loader
-    // It can't find source maps for some Closure modules and that is expected
-    config.ignoreWarnings = [/Failed to parse source map/];
-  }
-  return config;
-};
+  devServer: {
+    static: {
+      directory: path.join(__dirname, 'public'),
+    },
+    compress: true,
+    port: 8081,
+    hot: true,
+    open: true,
+  },
+  resolve: {
+    extensions: ['.js', '.json', '.css'],
+  },
+  devtool: 'source-map',
+};