Squash commits

.gitattributes

@@ -1,2 +1,4 @@
 # Auto detect text files and perform LF normalization
 * text=auto
+thumbnail.jpg filter=lfs diff=lfs merge=lfs -text
+thumbnail.png filter=lfs diff=lfs merge=lfs -text

Dockerfile

@@ -1,27 +1,34 @@
 # syntax=docker/dockerfile:1
-FROM python:3.11-slim
+FROM node:20-slim
 
-# Avoid interactive prompts
 ENV DEBIAN_FRONTEND=noninteractive \
+    PYTHONDONTWRITEBYTECODE=1 \
     PYTHONUNBUFFERED=1 \
+    VENV_PATH=/opt/venv \
     PORT=7860
 
-WORKDIR /app
-
-# System deps (curl for health checks/logs if needed)
+# Python + venv (avoid PEP 668 system install issues)
 RUN apt-get update && apt-get install -y --no-install-recommends \
-    curl ca-certificates && \
+    python3 python3-venv ca-certificates curl && \
     rm -rf /var/lib/apt/lists/*
 
-# Install Python deps first (better layer caching)
+RUN python3 -m venv $VENV_PATH
+ENV PATH="$VENV_PATH/bin:$PATH"
+
+WORKDIR /app
+
+# Python deps
 COPY requirements.txt .
 RUN pip install --no-cache-dir -r requirements.txt
 
-# Copy the application
-COPY . .
+# Node deps
+WORKDIR /app/project
+COPY project/package*.json ./
+RUN npm install
+
+# App source
+COPY project .
 
-# Expose the Space port
 EXPOSE 7860
 
-# Start the unified server (FastAPI + Gradio mounts)
-CMD ["python", "project/unified_server.py"]
+CMD ["npm", "start"]

README.md

@@ -1,79 +1,97 @@
+---
+title: MCP Blockly
+emoji: 🧩
+colorFrom: purple
+colorTo: blue
+sdk: docker
+pinned: true
+tags:
+- mcp-in-action-track-creative
+- mcp-in-action-track-consumer
+- OpenAI
+- Blockly
+- Education
+- MCP
+short_description: AI that makes MCP servers with block-code.
+---
+
 # MCP Blockly
 
-MCP Blockly is a visual programming environment for building real MCP servers without dealing with Python syntax or configuration. It brings the clarity of block-based logic into AI development, allowing newcomers and experienced builders alike to design, test, and refine MCP tools through a clean drag-and-connect workflow. Every block you place generates runnable Python code instantly, so you can focus on structure and behavior while the system manages the boilerplate.
+MCP Blockly introduces a new kind of MCP development experience: a block-based Gradio 6 MCP server builder, powered by an autonomous AI agent that can understand your entire workspace, reason about the structure of your MCP tool, and act on it directly. It is one of the first publicly available AI agents that can perform multi-step editing using block-code. Give it a goal and it creates a plan, modifies or rebuilds your logic, tests the tool with real inputs, and checks the results. This is far beyond suggestion driven assistance. The agent can create blocks, repair or remove broken logic, construct complex nested structures, and even deploy the finished MCP server for you. While the interface feels familiar (intentionally resembling Scratch), the result is a visual editor that becomes a fully interactive and agent powered development platform.
 
-## What This Does
+Most educational tools demonstrate concepts passively, but MCP Blockly supports learning through an active, hands-on environment. Studies consistently show that students develop deeper understanding and longer term retention when they learn by doing, and MCP Blockly applies this idea by letting users experiment with real MCP logic while having an AI partner that can step in when needed, show alternative structures, edit the workspace to illustrate concepts, or help the learner understand how a tool should be built.
+
+Vibe coding makes it easy to lean entirely on an AI assistant without gaining any real understanding, but in the context of MCP servers this often drops beginners, especially those coming from Scratch, into an unfamiliar world where they rely on generated code that feels like magic rather than something they can reason about. MCP Blockly takes a different approach by letting the AI work with you in a transparent, structured environment that shows how each block fits into the overall logic. This makes the assistant a guide rather than a crutch and helps learners develop genuine intuition about MCP development instead of staying dependent on vibe coded projects they don't understand.
 
-MCP Blockly lets you build Model Context Protocol (MCP) servers using a block-based interface, perfect for students and newcomers stepping into AI development. The core building happens on the visual canvas. You define your MCP inputs, arrange your logic with blocks, and choose what your server will return. Every change you make is reflected in live Python code on the side. The generator handles function signatures and MCP boilerplate automatically, so you never have to worry about syntax or configuration. Everything stays valid and synchronized.
+This project uses the **OpenAI Responses API** for easy MCP integration, along with their excellent proprietary models which help the agent make smarter decisions.
 
-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.
+You can read the announcement post [on LinkedIn](https://www.linkedin.com/feed/update/urn:li:activity:7399566358813790209/), along with the [article](https://huggingface.co/blog/MCP-1st-Birthday/mcp-blockly) about the project!
 
-Once your blocks are in place, the Development panel makes testing simple. It automatically generates input fields based on your parameters, so you can run the MCP server logic instantly. You enter values, submit, and see the outputs appear. This kind of immediate feedback helps learners understand how data flows through their tool and builds intuition about how AI tools work.
+## YouTube Video (click on image)
 
-The AI Assistant tab lets you build and refine your project through conversation. It understands your workspace and becomes a natural part of how you learn and explore the MCP ecosystem.
+[![Video Thumbnail](thumbnail.png)](https://www.youtube.com/watch?v=5oj-2uIZpb0)
 
-The assistant can:
-- Create new blocks from plain language. Describe what you want to accomplish, and it builds the correct structure automatically.  
-- Delete or replace existing blocks without disrupting the rest of your layout.  
-- Create and name variables that become immediately usable in your workspace.  
-- Run your MCP tool with real inputs and show the actual outputs for testing.  
-- Build nested block structures, such as inserting expressions or operations inside other blocks.  
-- Explain concepts and guide you step by step through the creation process.  
-- Perform multi-step changes and executions, refining your setup one step at a time.  
+### Setup
 
-It works live and responds quickly, keeping your workspace synchronized with every instruction. This combination of hands-on building with conversational guidance bridges the gap between visual coding and real AI workflows. Taking things one step at a time leads to more accurate and reliable results as you learn.
+The system needs one API key (OpenAI API provided for free):
 
-The File menu handles creating new projects, opening existing ones, and downloading your work. You can download just the generated Python code or the entire project as a JSON file. The Edit menu provides standard undo, redo, and a cleanup button to reorganize blocks. The Examples menu includes pre-built projects you can load to understand how to structure your own.
+- **Hugging Face API Key**: Allows you to deploy your MCP server as a real, live Gradio 6 MCP server on Hugging Face Spaces. The system creates a new Space and uploads your tool automatically. Once deployed, the tool acts as a real MCP endpoint that other AI systems can call. Without this key, you can build and test your tool in this space, but you will not be able to deploy unless you manually upload the generated code.
 
-### API Keys
+Set this key through the welcome menu, or `File > API Keys` before using features that depend on it!
 
-The system has two optional but recommended API keys:
+## What This Does
 
-**OpenAI API Key**: Enables the AI Assistant: your guide through the learning process. The assistant helps you build blocks, fix mistakes, explain concepts, and explore MCP development interactively. Without it, you can still create and test blocks manually.
+MCP Blockly lets you build Gradio 6 MCP servers using a block based interface, perfect for students and newcomers stepping into AI development. The core building happens in the workspace: you define your MCP inputs, arrange your logic with blocks, and choose what your server will return. Every change you make is reflected in live Python code on the side. The generator handles function signatures and MCP boilerplate automatically, so you never have to worry about syntax or configuration. Everything stays valid and synchronized.
 
-**Hugging Face API Key**: Allows you to deploy your MCP as a real, live server on Hugging Face Spaces. This is a practical way to learn how AI tools work in production. The system creates a new Space and uploads your tool automatically. The Space becomes a real MCP server that other AI systems can connect to and call natively. Without it, you can build and test locally but won't be able to deploy unless you manually create a space and upload the generated `app.py` file.
+The interface has three main areas. The workspace on the right is where you build by dragging and connecting blocks. On the left are two tabs for working with your project: the Testing tab, and an AI Assistant tab.
 
-Set these keys through Settings before using features that depend on them. Both are optional: you can build and test tools without either key, but certain features won't be available.
+Additionally, there are 3 dropdowns in the top bar to aid you in development. The File menu handles creating new projects, opening existing ones, and downloading your work. You can download just the generated Python code or the entire project as a JSON file. The Edit menu provides standard undo, redo, and a cleanup button to reorganize blocks. The Examples menu includes pre-built projects you can load to understand how to structure your own.
 
-The toolbox contains blocks for common operations: calling language models, making HTTP requests, extracting data from JSON, manipulating text, performing math, and working with lists. You connect these blocks to build your workflow.
+Once your blocks are in place, the Testing tab makes testing simple. Once you refresh it, it automatically generates input fields based on your parameters, so you can run the MCP server logic instantly. You enter values, submit, and see the outputs appear. This kind of immediate feedback helps learners understand how data moves through their tool and builds intuition about how AI tools work.
 
-## Installation
+The AI Assistant tab lets you build and refine your project through conversation. You can think of it as a conversational partner that helps you shape your MCP tool step by step. It's always there to explain concepts or code to you, help you develop your tool, and ensure your code runs without issues.
+The assistant can help you:
+- Create or adjust your blocks.
+- Introduce variables and expressions when you need them.
+- Deploy your completed Gradio 6 MCP server to Hugging Face Spaces.
+- Call the deployed tool to verify that everything works end to end.
+- And much more!
 
-Clone the repository and install dependencies.
+The assistant is meant to collaborate with you, not to take over. It may occasionally misunderstand complex structures, and you can always correct or rearrange blocks manually. This keeps the experience grounded and aligned with learning and exploration.
 
-```bash
-git clone https://github.com/owenkaplinsky/mcp-blockly.git
-cd mcp-blockly/project
-pip install -r ../requirements.txt
-npm install
-```
+<div style="display:flex; gap:32px; align-items:flex-start;">
+  <img src="https://cdn-uploads.huggingface.co/production/uploads/68965fe809f27a491d9f5852/XebJEOohCUcSbCLYYUacJ.gif" />
+  <img src="https://cdn-uploads.huggingface.co/production/uploads/68965fe809f27a491d9f5852/MdS5XHiAqhAxafGV-BTiJ.gif" />
+</div>
 
-## Running Locally
+## Why This Matters
 
-Start the application with:
+The goal of MCP Blockly is to empower the next generation of AI builders. By providing an environment that is both powerful and transparent, we can do more than just help people build tools; we can help them understand *how* they are built.
 
-```bash
-npm start
-```
+When a learner sees the AI assistant construct a program block by block, they are not just getting a solution: they are getting a live, narrated demonstration of the logical steps required to solve a problem. They can intervene at any time, modify the blocks themselves, and use the interactive testing tab to see how their changes affect the outcome.
 
-After that, it will open a tab in your browser and you can start building!
+This creates a powerful feedback loop that builds true, lasting intuition. It's a new way to learn, a new way to build, and a small step toward making the incredible power of AI accessible to everyone.
 
 ## How It Works
 
-The system has three main components: the frontend Blockly editor, the backend Python services, and the AI Assistant engine.
+This project expands Blockly with brand new features designed to make MCP development smoother and more intuitive. These changes range from enabling a smoother user experience, along with low-level hooks to allow the AI agent to perform its actions.
+
+### Backend
+
+The core mechanism is a recursive Python code generator. When you connect blocks, the system walks through your structure and compiles it into Python code. Text blocks produce string literals, math operations produce arithmetic expressions, conditionals produce if/elif/else branches, and loops produce iteration logic. Your top-level MCP block becomes a function with typed parameters and return values.
 
-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.
+When you test your tool, the generated code gets sent to a backend service that handles local testing and execution. It spins up a thread and parses your function signature, sees what types your parameters are, and generates input fields accordingly. Finally, it displays your results in the Gradio UI.
 
-Blocks dynamically manage their input and output ports through Blockly's mutator system. When you modify a block to add or remove parameters, the mutator updates both the visual shape and the internal state that tracks how many inputs and outputs exist. Each input and output has metadata about its name and type. When a user defines inputs on their main function block, the system creates invisible reference blocks for each input parameter. These reference blocks appear as connectable outputs that other blocks can use. During code generation, these references translate to variable names in the Python function signature and body.
+All of this runs through one unified web interface. The frontend communicates with both backends over HTTP for regular operations and Server-Sent Events for real-time AI updates. Your API keys are stored in localStorage and used to authenticate requests to OpenAI and Hugging Face during your session. They are never saved in the Python backend nor printed, and are immediately disposed of after being used.
 
-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.
+### AI Assistant
 
-Based on the model's response, the system recognizes four special commands: run to execute your MCP with sample inputs, delete to remove a block by ID, create to add new blocks to your workspace, and deploy_to_huggingface to publish your tool as a live server. 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 assistant works by reading your workspace in a custom domain-specific language (DSL) created for this project, allowing for the AI to interact with a normally UI-based environment. Each block gets a unique ID marked with special delimiters, and its structure is described as nested function calls. For example, a text block might look like `↿ abc123 ↾ text(inputs(TEXT: "hello"))`, telling the AI what the block does and how it's configured. When you send a message, the AI receives your entire workspace in this format as context. It understands what operations are possible: it can construct new blocks described in the same nested syntax, request existing blocks be deleted by their ID, create variables, and more. These requests come back to your browser as instructions, which are executed immediately to update the visual workspace.
 
-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 ten consecutive iterations per user message, allowing the AI to progressively refine your blocks without requiring you to send multiple messages.
+The agent does not simply think of blocks individually: it understands the complete structure of the workspace, including multi-branch blocks such as conditionals and nested logic constructs. For example, when the DSL describes an `if` block, the agent knows that it contains a condition input, a `do` branch, and an `else` branch, each of which expects different kinds of sub-blocks. The agent can independently modify any of these branches, insert new blocks into the correct slot, or replace just one part of a larger structure while preserving the rest. This structural awareness lets the assistant work reliably with arbitrarily deep or complex logic, because it always understands which positions in the workspace are valid targets for a given operation.
 
-When you're ready to share your MCP tool, you can deploy it directly to Hugging Face Spaces. Once deployed, the tool becomes a real MCP server that can be called by any AI system supporting the MCP protocol. The AI Assistant in MCP Blockly can immediately use your deployed tool—just ask it to call your MCP and it will invoke the actual live server.
+The assistant follows a multi-step planning pipeline whenever it works on the project. Each request begins with a high-level plan, followed by pseudocode, then a concrete checklist of operations. The agent executes each operation one at a time, updating its understanding of the workspace after every change by rereading the DSL. This loop continues for several iterations until the goal is complete or no further progress can be made. Because the assistant evaluates the workspace after each modification, it can adapt to new block layouts, recover from earlier mistakes, and take long sequences of small steps that ultimately create or transform complex logic. This approach often allows the agent to reliably perform edits that would be impossible to express in a single instruction.
 
-The agent also monitors your Space's build status. Build typically takes 1-2 minutes. Once the Space reaches RUNNING status, all the tools you defined in your blocks become available for the AI to call natively. If you send a message while the Space is still building, the AI will let you know to wait a moment before your MCP tools become available.
+MCP Blockly includes an error-catching layer that lets the AI correct its own mistakes while editing your workspace. If the assistant tries to place a block where it can't go, tries to use a tool incorrectly, or writes incorrect commands, the system returns a structured error that the agent reads and adapts to in the next step. It can retry operations, adjust its plan, and repair the workspace without always requiring the user to intervene. This allows multi-step goals to complete even when the initial attempt wasn't perfect.
 
-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.
+When deployment happens, the latest generated Python code is packaged with its dependencies and uploaded to Hugging Face Spaces. The system waits for the space to build (typically 1-2 minutes), then registers it as a live MCP server. From that point, the AI can call your deployed Gradio 6 MCP server directly with real data, getting results from the production version rather than the local one.

project/chat.py

@@ -12,6 +12,7 @@ import json
 import uuid
 import time
 from colorama import Fore, Style
+import logging
 from huggingface_hub import HfApi
 from collections import defaultdict
 from typing import Dict, Any
@@ -71,7 +72,7 @@ def wait_for_result(request_id, request_type, session_id, timeout=8, id_field='r
     start_time = time.time()
     check_interval = 0.05
     results_buffer = []  # Buffer for results we read but don't match
-    queue = results_queues[session_id]
+    results_queue = results_queues[session_id]
     
     while time.time() - start_time < timeout:
         # Check if we have buffered results that match
@@ -83,13 +84,13 @@ def wait_for_result(request_id, request_type, session_id, timeout=8, id_field='r
         
         # Try to get a new result from queue
         try:
-            result = queue.get_nowait()
+            result = results_queue.get_nowait()
             # Check if this is our result
             if (result.get(id_field) == request_id and 
                 result.get('request_type') == request_type):
                 # Put back any buffered results we collected
                 for buffered in results_buffer:
-                    queue.put(buffered)
+                    results_queue.put(buffered)
                 results_buffer = []
                 return result
             else:
@@ -102,7 +103,7 @@ def wait_for_result(request_id, request_type, session_id, timeout=8, id_field='r
     
     # Timeout - put back any buffered results
     for buffered in results_buffer:
-        queue.put(buffered)
+        results_queue.put(buffered)
     
     raise TimeoutError(f"No response received for {request_type} request {request_id} after {timeout} seconds")
 
@@ -270,6 +271,12 @@ def replace_block(block_id, command, session_id):
         session_id = require_session_id(session_id)
         print(f"[REPLACE REQUEST] Attempting to replace block {block_id} with: {command}")
         
+        # Check if trying to replace create_mcp block
+        if command.strip().startswith("create_mcp("):
+            error_msg = "[TOOL] Cannot replace the create_mcp block. The main MCP block cannot be replaced. You can only edit its inputs/outputs using the edit_mcp tool."
+            print(f"[REPLACE BLOCKED] Attempt to replace create_mcp block blocked: {error_msg}")
+            return error_msg
+        
         # Generate a unique request ID
         request_id = str(uuid.uuid4())
         
@@ -300,9 +307,28 @@ def replace_block(block_id, command, session_id):
 
 # Unified Server-Sent Events endpoint for all workspace operations
 @app.get("/unified_stream")
-async def unified_stream(session_id: str = None):
-    session_id = require_session_id(session_id)
-    print(f"[UNIFIED STREAM] Connected with session_id: {session_id}")
+async def unified_stream(session_id: str = None, request: Request = None):
+    # Diagnostics before enforcing session
+    q_sid = None
+    c_sid = None
+    hdr_sid = None
+    root_path = None
+    try:
+        if request:
+            q_sid = request.query_params.get("session_id")
+            c_sid = request.cookies.get("mcp_blockly_session_id")
+            hdr_sid = request.headers.get("x-session-id") or request.headers.get("session-id")
+            root_path = request.scope.get("root_path")
+    except Exception:
+        pass
+
+    # Prefer the explicit argument but log everything we saw
+    logging.getLogger("chat_unified_stream").info(
+        f"[unified_stream] arg_sid={session_id}, query_sid={q_sid}, cookie_sid={c_sid}, header_sid={hdr_sid}, root_path={root_path}"
+    )
+
+    session_id = require_session_id(session_id or q_sid or c_sid or hdr_sid)
+    print("[UNIFIED STREAM] Client connected")
     
     async def clear_sent_request(sent_requests, request_key, delay):
         """Clear request_key from sent_requests after delay seconds"""
@@ -365,15 +391,15 @@ async def unified_stream(session_id: str = None):
 @app.get("/results_stream")
 async def results_stream(session_id: str = None):
     session_id = require_session_id(session_id)
-    print(f"[RESULTS STREAM] Connected with session_id: {session_id}")
+    print("[RESULTS STREAM] Client connected")
     
     async def event_generator():
-        queue = results_queues[session_id]
+        results_queue = results_queues[session_id]
         while True:
             try:
                 # Check if there are any results to send
-                if not queue.empty():
-                    result_data = queue.get_nowait()
+                if not results_queue.empty():
+                    result_data = results_queue.get_nowait()
                     yield f"data: {json.dumps(result_data)}\n\n"
                 else:
                     # Send a heartbeat every 30 seconds to keep connection alive
@@ -406,18 +432,18 @@ async def request_result(request: Request):
         block_id = data.get("block_id")
         success = data.get("success")
         error = data.get("error")
-        print(f"[RESULT RECEIVED] type={request_type}, block_id={block_id}, success={success}, error={redact_secrets(str(error))}, session_id={session_id}")
+        print(f"[RESULT RECEIVED] type={request_type}, block_id={block_id}, success={success}, error={redact_secrets(str(error))}")
     elif request_type == "variable":
         request_id = data.get("request_id")
         variable_id = data.get("variable_id")
         success = data.get("success")
         error = data.get("error")
-        print(f"[RESULT RECEIVED] type={request_type}, request_id={request_id}, success={success}, error={redact_secrets(str(error))}, variable_id={variable_id}, session_id={session_id}")
+        print(f"[RESULT RECEIVED] type={request_type}, request_id={request_id}, success={success}, error={redact_secrets(str(error))}, variable_id={variable_id}")
     elif request_type in ("create", "replace", "edit_mcp"):
         request_id = data.get("request_id")
         success = data.get("success")
         error = data.get("error")
-        print(f"[RESULT RECEIVED] type={request_type}, request_id={request_id}, success={success}, error={redact_secrets(str(error))}, session_id={session_id}")
+        print(f"[RESULT RECEIVED] type={request_type}, request_id={request_id}, success={success}, error={redact_secrets(str(error))}")
     
     # Put directly in per-session results queue
     results_queues[session_id].put(data)
@@ -527,7 +553,7 @@ The tool has been automatically deployed to Hugging Face Spaces and is ready to
         session_deploy_state[session_id]["deployment_message"] = (
             "Your MCP tool is being built on Hugging Face Spaces. This usually takes 1-2 minutes. Once it's ready, you'll be able to use the MCP tools defined in your blocks."
         )
-        print(f"[MCP] Registered MCP server (session {session_id}): {space_url}")
+        print(f"[MCP] Registered MCP server at {space_url}")
         
         return f"[TOOL] Successfully deployed to Hugging Face Space!\n\n**Space URL:** {space_url}"
         
@@ -538,9 +564,25 @@ The tool has been automatically deployed to Hugging Face Spaces and is ready to
         return f"[DEPLOY ERROR] Failed to deploy: {str(e)}"
 
 def create_gradio_interface():
+    # Define suggested prompts (emoji + short label -> longer full prompt)
+    suggested_prompts = [
+        {
+            "label": "🤔 Explain features",
+            "value": "Hi! I'm new here. Can you explain what things you can do for me?"
+        },
+        {
+            "label": "💡 Brainstorm tools",
+            "value": "I'm not sure what I should build... do you have any ideas?"
+        },
+        {
+            "label": "🐛 Debug Issue",
+            "value": "My code isn't working as expected. Why do you think that is?"
+        }
+    ]
+    
     # Hardcoded system prompt
 
-    SYSTEM_PROMPT = f"""You are an AI assistant that helps users build **MCP servers** using Blockly blocks.
+    SYSTEM_PROMPT = f"""You are an AI assistant that helps users build **Model Context Protocol (MCP) servers** using Blockly blocks.
 
     You'll receive the workspace state in this format:
     `↿ blockId ↾ block_name(inputs(input_name: value))`
@@ -750,6 +792,21 @@ def create_gradio_interface():
 
     ---
 
+    ## Important info
+
+    Sometimes the user will ask questions about the environment you're in:
+    - Creating a new project, opening a project, downloading the project code (the Python), and downloading the project (the blocks) are under the file dropdown
+    - Right click on the workspace or go under edit dropdown to undo, redo, and clean up the workspace
+    - Under the examples dropdown there is a weather API and fact checker MCP demo
+    - Testing tab on the left side is for testing your MCP live with inputs and getting outputs
+    - AI Chat tab (you) is toggleable (switch between testing and ai chat)
+
+    If you don't know, just say so. But if these questions answer it, use these answers naturally.
+
+     Additionally, never suggest project ideas that use APIs.
+
+    ---
+
     ## REQUIRED PLANNING PHASE BEFORE ANY TOOL CALL
 
     Before creating or deleting any blocks, always begin with a *Planning Phase*:
@@ -785,7 +842,11 @@ def create_gradio_interface():
 
     5. Perform the actions in order without asking for approval or asking to wait for intermediate results.
     
-    6. Before stopping, you must confirm that every single output slot of the MCP block is filled. You must explicitly confirm this and if not all output slots are filled in, you must do so immediately."""
+    6. Before stopping, you must confirm that every single output slot of the MCP block is filled. You must explicitly confirm this and if not all output slots are filled in, you must do so immediately.
+    
+    ---
+    
+    When coding, NEVER try to assume or guess ANY APIs. You must have the user provide you with exact API info and tell them exactly how to get it, if you need API stuff. Don't guess, ever. Additionally, never suggest project ideas that use APIs."""
     tools = [
         {
             "type": "function",
@@ -948,6 +1009,10 @@ def create_gradio_interface():
         if request and not hf_token:
             hf_token = request.headers.get("x-hf-key") or request.cookies.get("mcp_hf_key")
 
+        # TEMPORARY FREE API KEY
+        if not openai_key:
+            openai_key = os.getenv("OPENAI_API_KEY")
+
         if not openai_key:
             yield "OpenAI API key not configured. Please set it in File > Keys in the Blockly interface."
             return
@@ -963,11 +1028,44 @@ def create_gradio_interface():
         context = session_chat_state.get(session_id, {}).get("code", "")
         vars = session_chat_state.get(session_id, {}).get("vars", "")
         
-        # Convert history to OpenAI format
+        # Convert history (supports legacy tuples and newer ChatMessage/dict formats)
         input_items = []
-        for human, ai in history:
-            input_items.append({"role": "user", "content": human})
-            input_items.append({"role": "assistant", "content": ai})
+        if history:
+            for item in history:
+                # Gradio 6 ChatMessage-like objects (duck-typed)
+                if hasattr(item, "role") and hasattr(item, "content"):
+                    # item.content is a list of parts; flatten text parts
+                    texts = []
+                    for part in item.content or []:
+                        if isinstance(part, dict) and "text" in part:
+                            texts.append(part["text"])
+                        else:
+                            texts.append(getattr(part, "text", str(part)))
+                    content = "\n".join(t for t in texts if t)
+                    if content:
+                        input_items.append({"role": item.role, "content": content})
+                    continue
+
+                # Gradio serialized dict form
+                if isinstance(item, dict) and "role" in item and "content" in item:
+                    texts = []
+                    for part in item.get("content") or []:
+                        if isinstance(part, dict) and "text" in part:
+                            texts.append(part["text"])
+                        else:
+                            texts.append(str(part))
+                    content = "\n".join(t for t in texts if t)
+                    if content:
+                        input_items.append({"role": item["role"], "content": content})
+                    continue
+
+                    # Legacy tuple/list (user, assistant)
+                if isinstance(item, (tuple, list)) and len(item) >= 2:
+                    human, ai = item[0], item[1]
+                    if human:
+                        input_items.append({"role": "user", "content": human})
+                    if ai:
+                        input_items.append({"role": "assistant", "content": ai})
         
         # Build instructions
         instructions = SYSTEM_PROMPT
@@ -1186,7 +1284,6 @@ def create_gradio_interface():
                                         placement_type == "input" and 
                                         input_name and 
                                         input_name.startswith("R")):
-                                        is_first_output_attempt = True
                                         # Mark that we've attempted an output block in this conversation
                                         first_output_block_attempted = True
                                         # Return warning instead of creating the block
@@ -1201,7 +1298,7 @@ def create_gradio_interface():
                                             print(Fore.YELLOW + f"Agent created block with command `{command}`, type: {placement_type}, blockID: `{blockID}`." + Style.RESET_ALL)
                                         if input_name:
                                             print(Fore.YELLOW + f"  Input name: {input_name}" + Style.RESET_ALL)
-                                        tool_result = create_block(command, blockID, placement_type, input_name)
+                                        tool_result = create_block(command, blockID, placement_type, input_name, session_id=session_id)
                                         result_label = "Create Operation"
                         
                         elif function_name == "create_variable":
@@ -1249,7 +1346,7 @@ def create_gradio_interface():
                     # Tell model to respond to tool result
                     current_prompt = "The tool has been executed with the result shown above. Please respond appropriately."
                     
-                    continue  # Continue the main loop
+                    continue
                 
                 else:
                     if ai_response:
@@ -1259,7 +1356,7 @@ def create_gradio_interface():
                     
                     yield accumulated_response
                     break
-                
+
             except Exception as e:
                 if accumulated_response:
                     yield f"{accumulated_response}\n\nError in iteration {current_iteration}: {str(e)}"
@@ -1273,9 +1370,11 @@ def create_gradio_interface():
             yield accumulated_response
 
 
-    # Attach to Gradio ChatInterface
+    # Attach to Gradio ChatInterface with suggested prompts
     demo = gr.ChatInterface(
         fn=chat_with_context,
+        examples=[prompt["value"] for prompt in suggested_prompts],
+        example_labels=[prompt["label"] for prompt in suggested_prompts],
     )
 
     return demo
@@ -1287,4 +1386,4 @@ def get_chat_gradio_interface():
 
 if __name__ == "__main__":
     demo = create_gradio_interface()
-    app = gr.mount_gradio_app(app, demo, path="/")
+    app = gr.mount_gradio_app(app, demo, path="/", show_error=False)

project/src/generators/python.js

@@ -108,9 +108,9 @@ forBlock['create_mcp'] = function (block, generator) {
 
   // Create the main function definition
   if (typedInputs.length > 0) {
-    code += `def create_mcp(${typedInputs.join(', ')}):\n  out_amt = ${returnValues.length}\n  out_names = ${JSON.stringify(block.outputNames_ || [])}\n  out_types = ${JSON.stringify(block.outputTypes_ || [])}\n\n${body}${returnStatement}\n`;
+    code += `def create_mcp(${typedInputs.join(', ')}):\n  in_types = ${JSON.stringify(block.inputTypes_ || [])}\n  out_amt = ${returnValues.length}\n  out_names = ${JSON.stringify(block.outputNames_ || [])}\n  out_types = ${JSON.stringify(block.outputTypes_ || [])}\n\n${body}${returnStatement}\n`;
   } else {
-    code += `def create_mcp():\n  out_amt = ${returnValues.length}\n  out_names = ${JSON.stringify(block.outputNames_ || [])}\n  out_types = ${JSON.stringify(block.outputTypes_ || [])}\n\n${body || ''}${returnStatement}`;
+    code += `def create_mcp():\n  in_types = ${JSON.stringify(block.inputTypes_ || [])}\n  out_amt = ${returnValues.length}\n  out_names = ${JSON.stringify(block.outputNames_ || [])}\n  out_types = ${JSON.stringify(block.outputTypes_ || [])}\n\n${body || ''}${returnStatement}`;
   }
 
   // Map Python types to Gradio components for inputs
@@ -402,4 +402,4 @@ forBlock['cast_as'] = function (block, generator) {
   // Generate code to cast value to the specified type
   const code = `${type}(${value})`;
   return [code, Order.FUNCTION_CALL];
-};
+};

project/src/index.html

@@ -4,6 +4,23 @@
 <head>
   <meta charset="utf-8" />
   <title>MCP Blockly</title>
+  <style>
+    @keyframes pulseOutline {
+      0% {
+        box-shadow: 0 0 0 0 rgba(255, 255, 255, 1);
+      }
+      75% {
+        box-shadow: 0 0 0 10px rgba(255, 255, 255, 0);
+      }
+      100% {
+        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
+      }
+    }
+    
+    .flash-button {
+      animation: pulseOutline 1s ease-out infinite;
+    }
+  </style>
 </head>
 
 <body>
@@ -59,14 +76,24 @@
       </div>
       <div id="developmentTab" class="tabContent active">
         <div id="chatContainer">
-          <iframe src="/gradio-test" style="width: 100%; height: 100%; border: none;"></iframe>
+          <iframe
+            id="gradioTestFrame"
+            data-base-src="/gradio-test"
+            src="about:blank"
+            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>
+          <iframe
+            id="gradioChatFrame"
+            data-base-src="/gradio-chat"
+            src="about:blank"
+            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>
@@ -192,24 +219,71 @@
     });
   </script>
 
-  <!-- Keys Modal -->
-  <div id="apiKeyModal"
+  <!-- Welcome Modal -->
+  <div id="welcomeModal"
     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;">API Keys</h2>
+      style="background: white; padding: 30px; border-radius: 10px; width: 90%; max-width: 700px; box-shadow: 0 10px 30px rgba(0,0,0,0.2); max-height: 90vh; overflow-y: auto; position: relative;">
+      <h2 style="margin-top: 0; margin-bottom: 10px; color: #333;">Welcome to MCP Blockly</h2>
+      <p style="margin: 0 0 20px 0; color: #666; font-size: 14px;">Get started with visual programming for AI tools.</p>
+
+      <!-- YouTube Video Embed -->
+      <div style="margin-bottom: 25px;">
+        <iframe width="100%" height="315" src="https://www.youtube.com/embed/5oj-2uIZpb0" 
+          style="border: none; border-radius: 5px;" 
+          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
+          allowfullscreen></iframe>
+      </div>
+
+      <!-- API Keys Section -->
+      <h3 style="margin-top: 25px; margin-bottom: 15px; color: #333; font-size: 16px; font-weight: 600;">🎉 Free API</h3>
+      <p style="margin: 5px 0 15px 0; color: #27ae60; font-size: 12px; font-weight: 500;">Using a free API key for OpenAI. Get started immediately!</p>
 
-      <label for="apiKeyInput"
+      <!-- TEMPORARY FREE API KEY -->
+      <!-- <label for="welcomeApiKeyInput"
         style="display: block; margin-bottom: 10px; color: #666; font-size: 14px; font-weight: 500;">OpenAI API
         Key:</label>
-      <input type="password" id="apiKeyInput"
+      <input type="password" id="welcomeApiKeyInput"
         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>
+      <p style="margin: 5px 0 20px 0; color: #999; font-size: 12px;">For AI-powered features and code generation.</p> -->
 
-      <label for="hfKeyInput"
+      <label for="welcomeHfKeyInput"
         style="display: block; margin-bottom: 10px; color: #666; font-size: 14px; font-weight: 500;">Hugging Face API
         Key:</label>
+      <input type="password" id="welcomeHfKeyInput"
+        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; margin-bottom: 20px;">Your API keys will be stored securely for this session.</p>
+
+      <div style="display: flex; justify-content: flex-end; align-items: center; gap: 15px;">
+        <div style="display: flex; align-items: center; gap: 6px;">
+          <label for="dontShowWelcomeAgain" style="color: #666; font-size: 12px; cursor: pointer; margin: 0;">Don't show me this again</label>
+          <input type="checkbox" id="dontShowWelcomeAgain" style="cursor: pointer; width: 16px; height: 16px;">
+        </div>
+        <div style="display: flex; gap: 10px;">
+          <button id="skipTutorialButton"
+            style="padding: 10px 20px; background: #e5e7eb; border: none; border-radius: 5px; cursor: pointer; font-size: 14px;">Skip Tutorial</button>
+          <button id="saveWelcomeApiKey"
+            style="padding: 10px 20px; background: #6366f1; color: white; border: none; border-radius: 5px; cursor: pointer; font-size: 14px;">Start Tutorial</button>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- 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;">API Keys</h2>
+      <p style="margin: 0 0 20px 0; color: #27ae60; font-size: 12px; font-weight: 500;">🎉 Using a free OpenAI API key. Only Hugging Face key needed below if deploying.</p>
+
+      <label for="hfKeyInput"
+        style="display: block; margin-bottom: 10px; color: #666; font-size: 14px; font-weight: 500;">Hugging Face API
+        Key (suggested):</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_...">
@@ -224,6 +298,17 @@
       </div>
     </div>
   </div>
+
+  <!-- Tutorial Popups -->
+  <div id="tutorialPopup"
+    style="display: none; position: fixed; background: white; padding: 20px; border-radius: 8px; box-shadow: 0 4px 20px rgba(0,0,0,0.3); z-index: 10000; max-width: 280px; border: 2px solid #6366f1; top: 0; left: 0;">
+    <h3 id="tutorialTitle" style="margin: 0 0 10px 0; color: #333; font-size: 14px; font-weight: 600;"></h3>
+    <p id="tutorialBody" style="margin: 0 0 15px 0; color: #666; font-size: 12px; line-height: 1.4;"></p>
+    <div style="display: flex; justify-content: flex-end;">
+      <button id="tutorialSkipButton"
+        style="padding: 6px 12px; background: #e5e7eb; border: none; border-radius: 4px; cursor: pointer; font-size: 12px;">Exit Tutorial</button>
+    </div>
+  </div>
 </body>
 
-</html>
+</html>

project/src/index.js

@@ -9,6 +9,22 @@ import '@blockly/toolbox-search';
 import DarkTheme from '@blockly/theme-dark';
 import './index.css';
 
+// Determine the correct base path when running behind HF proxy (/proxy/... or /spaces/...)
+const getBasePath = () => {
+  const p = window.location.pathname || "";
+  if (p.startsWith("/proxy/")) {
+    const parts = p.split("/").filter(Boolean); // proxy/owner/space[/...]
+    return "/" + parts.slice(0, 3).join("/");
+  }
+  if (p.startsWith("/spaces/")) {
+    const parts = p.split("/").filter(Boolean); // spaces/owner/space[/...]
+    return "/" + parts.slice(0, 3).join("/");
+  }
+  return "";
+};
+
+const basePath = getBasePath();
+
 // Session ID Handling
 function getOrCreateSessionId() {
   const STORAGE_KEY = "mcp_blockly_session_id";
@@ -30,7 +46,30 @@ const sessionId = getOrCreateSessionId();
 window.sessionId = sessionId;
 console.log("[SESSION] Using sessionId:", sessionId);
 // Share session id with other mounted apps (e.g., Gradio tester) via cookie
-document.cookie = `mcp_blockly_session_id=${sessionId}; path=/; SameSite=Lax`;
+const sameSite = window.location.protocol === "https:" ? "None" : "Lax";
+const secure = window.location.protocol === "https:" ? "; Secure" : "";
+const maxAge = 60 * 60 * 24 * 7; // one week
+document.cookie = `mcp_blockly_session_id=${sessionId}; path=/; Max-Age=${maxAge}; SameSite=${sameSite}${secure}`;
+
+// Ensure embedded Gradio iframes receive the session id even when third-party cookies are blocked
+function attachSessionToIframes() {
+  const frames = [
+    document.getElementById("gradioTestFrame"),
+    document.getElementById("gradioChatFrame"),
+  ];
+
+  frames.forEach((frame) => {
+    if (!frame) return;
+    const baseSrc = frame.dataset.baseSrc || frame.getAttribute("src") || "";
+    if (!baseSrc) return;
+    // Prefix proxy base when iframe src is absolute-from-root
+    const resolvedBaseSrc = baseSrc.startsWith("/") ? `${basePath}${baseSrc}` : baseSrc;
+    const joiner = baseSrc.includes("?") ? "&" : "?";
+    frame.src = `${resolvedBaseSrc}${joiner}session_id=${encodeURIComponent(sessionId)}&__theme=dark`;
+  });
+}
+
+attachSessionToIframes();
 
 // Register the blocks and generator with Blockly
 Blockly.common.defineBlocks(blocks);
@@ -144,7 +183,7 @@ downloadCodeButton.addEventListener("click", () => {
 // Settings button and Keys Modal
 const settingsButton = document.querySelector('#settingsButton');
 const apiKeyModal = document.querySelector('#apiKeyModal');
-const apiKeyInput = document.querySelector('#apiKeyInput');
+// const apiKeyInput = document.querySelector('#apiKeyInput');  // TEMP: No OpenAI key input field
 const hfKeyInput = document.querySelector('#hfKeyInput');
 const saveApiKeyButton = document.querySelector('#saveApiKey');
 const cancelApiKeyButton = document.querySelector('#cancelApiKey');
@@ -155,18 +194,25 @@ const HF_KEY_STORAGE = "mcp_blockly_hf_key";
 const loadStoredKeys = () => {
   const storedOpenAI = window.localStorage.getItem(OPENAI_KEY_STORAGE) || "";
   const storedHF = window.localStorage.getItem(HF_KEY_STORAGE) || "";
-  apiKeyInput.value = storedOpenAI;
-  hfKeyInput.value = storedHF;
+  // apiKeyInput.value = storedOpenAI;  // TEMP: No OpenAI key input field
+  if (hfKeyInput) {
+    hfKeyInput.value = storedHF;
+  }
 };
 
 settingsButton.addEventListener("click", () => {
-  loadStoredKeys();
+  if (hfKeyInput) {
+    loadStoredKeys();
+  } else {
+    console.warn("[Settings] HF key input not found in DOM");
+  }
   apiKeyModal.style.display = 'flex';
 });
 
 saveApiKeyButton.addEventListener("click", () => {
-  const apiKey = apiKeyInput.value.trim();
-  const hfKey = hfKeyInput.value.trim();
+  // const apiKey = apiKeyInput.value.trim();  // TEMP: No OpenAI key input field
+  const apiKey = "";  // TEMP: Using free API key, OpenAI field disabled
+  const hfKey = hfKeyInput?.value.trim() || "";
 
   // Validate OpenAI key format if provided
   if (apiKey && (!apiKey.startsWith("sk-") || apiKey.length < 40)) {
@@ -185,7 +231,7 @@ saveApiKeyButton.addEventListener("click", () => {
   window.localStorage.setItem(HF_KEY_STORAGE, hfKey);
 
   // Share keys with backend via cookies (per-request, not stored server-side)
-  const cookieOpts = "path=/; SameSite=Lax";
+  const cookieOpts = "path=/; SameSite=None; Secure";
   if (apiKey) {
     document.cookie = `mcp_openai_key=${encodeURIComponent(apiKey)}; ${cookieOpts}`;
   } else {
@@ -205,11 +251,488 @@ cancelApiKeyButton.addEventListener("click", () => {
   apiKeyModal.style.display = 'none';
 });
 
-const weatherText = '{"workspaceComments":[{"height":80,"width":477,"id":"XI5[EHp-Ow+kinXf6n5y","x":52.674375,"y":-52.760000000000005,"text":"Gets temperature of location with a latitude and a longitude."}],"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":["string","string"],"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","inputs":{"NAME":{"block":{"type":"text","id":"@Z+@U^@8c0gQYj}La`PY","fields":{"TEXT":"temperature_2m"}}},"JSON":{"block":{"type":"in_json","id":"X=M,R1@7bRjJVZIPi[qD","inputs":{"NAME":{"block":{"type":"text","id":"OMr~`#kG$3@k`YPDHbzH","fields":{"TEXT":"current"}}},"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}"}},"block":{"type":"text","id":"6CX#+wo9^x+vZ`LRt5ms","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}"}},"block":{"type":"text","id":"`p!s8dQ7e~?0JvofyB-{","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"}}}}}}}}}}}}}}}}}}}}]}}';
+// Welcome Modal Setup
+const welcomeModal = document.querySelector('#welcomeModal');
+// TEMPORARY FREE API KEY - welcomeApiKeyInput removed from DOM
+// const welcomeApiKeyInput = document.querySelector('#welcomeApiKeyInput');
+const welcomeHfKeyInput = document.querySelector('#welcomeHfKeyInput');
+const saveWelcomeApiKeyButton = document.querySelector('#saveWelcomeApiKey');
+const skipTutorialButton = document.querySelector('#skipTutorialButton');
+const dontShowWelcomeAgainCheckbox = document.querySelector('#dontShowWelcomeAgain');
+
+const WELCOME_DISMISSED_COOKIE = "mcp_blockly_welcome_dismissed";
+
+const getCookieValue = (name) => {
+  const value = `; ${document.cookie}`;
+  const parts = value.split(`; ${name}=`);
+  if (parts.length === 2) return parts.pop().split(';').shift();
+  return null;
+};
+
+const loadWelcomeStoredKeys = () => {
+  // TEMPORARY FREE API KEY
+  // const storedOpenAI = window.localStorage.getItem(OPENAI_KEY_STORAGE) || "";
+  const storedHF = window.localStorage.getItem(HF_KEY_STORAGE) || "";
+  // TEMPORARY FREE API KEY - welcomeApiKeyInput removed from DOM
+  // welcomeApiKeyInput.value = storedOpenAI;
+  welcomeHfKeyInput.value = storedHF;
+};
+
+const showWelcomeModal = () => {
+  loadWelcomeStoredKeys();
+  dontShowWelcomeAgainCheckbox.checked = false;
+  welcomeModal.style.display = 'flex';
+};
+
+const hideWelcomeModal = () => {
+  welcomeModal.style.display = 'none';
+  if (dontShowWelcomeAgainCheckbox.checked) {
+    const maxAge = 60 * 60 * 24 * 365; // one year
+    const sameSite = window.location.protocol === "https:" ? "None" : "Lax";
+    const secure = window.location.protocol === "https:" ? "; Secure" : "";
+    document.cookie = `${WELCOME_DISMISSED_COOKIE}=true; path=/; Max-Age=${maxAge}; SameSite=${sameSite}${secure}`;
+  }
+};
+
+saveWelcomeApiKeyButton.addEventListener("click", () => {
+  // TEMPORARY FREE API KEY
+  // const apiKey = welcomeApiKeyInput.value.trim();
+  const apiKey = ""; // TEMPORARY FREE API KEY - using free API
+  const hfKey = welcomeHfKeyInput.value.trim();
+
+  // TEMPORARY FREE 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;
+  // }
+
+  // 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 locally
+  window.localStorage.setItem(OPENAI_KEY_STORAGE, apiKey);
+  window.localStorage.setItem(HF_KEY_STORAGE, hfKey);
+
+  // Share keys with backend via cookies (per-request, not stored server-side)
+  const cookieOpts = "path=/; SameSite=None; Secure";
+  // TEMPORARY FREE API KEY
+  // if (apiKey) {
+  //   document.cookie = `mcp_openai_key=${encodeURIComponent(apiKey)}; ${cookieOpts}`;
+  // } else {
+  //   document.cookie = `mcp_openai_key=; Max-Age=0; ${cookieOpts}`;
+  // }
+  document.cookie = `mcp_openai_key=; Max-Age=0; ${cookieOpts}`; // TEMPORARY FREE API KEY - clear free API cookie
+  if (hfKey) {
+    document.cookie = `mcp_hf_key=${encodeURIComponent(hfKey)}; ${cookieOpts}`;
+  } else {
+    document.cookie = `mcp_hf_key=; Max-Age=0; ${cookieOpts}`;
+  }
+
+  hideWelcomeModal();
+  
+  // Trigger the tutorial flow
+  tutorialEnabled = true;
+  completedTutorialStepIndex = -1;
+  examplesJustFlashed = false;
+  checkAndFlashExamplesButton();
+});
+
+skipTutorialButton.addEventListener("click", () => {
+  tutorialEnabled = false;
+  hideWelcomeModal();
+});
+
+// Show welcome modal on first visit
+const welcomeDismissed = getCookieValue(WELCOME_DISMISSED_COOKIE);
+console.log('[Welcome] Cookie value:', welcomeDismissed);
+if (!welcomeDismissed) {
+  // Delay showing welcome to ensure page is fully loaded
+  setTimeout(() => {
+    console.log('[Welcome] Showing welcome modal');
+    showWelcomeModal();
+  }, 100);
+} else {
+  console.log('[Welcome] Welcome modal dismissed, skipping');
+}
+
+const weatherText = '{"workspaceComments":[{"height":80,"width":477,"id":"XI5[EHp-Ow+kinXf6n5y","x":51.0743994140625,"y":-53.56000305175782,"text":"Gets temperature of location with a latitude and a longitude."}],"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":["float","float"],"outputCount":1,"outputNames":["output0"],"outputTypes":["float"],"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":"cast_as","id":"vKz#fsrWMW(M9*:3Pv;2","fields":{"TYPE":"float"},"inputs":{"VALUE":{"block":{"type":"in_json","id":"R|j?_8s^H{l0;UZ-oQt3","inputs":{"NAME":{"block":{"type":"text","id":"@Z+@U^@8c0gQYj}La`PY","fields":{"TEXT":"temperature_2m"}}},"JSON":{"block":{"type":"in_json","id":"X=M,R1@7bRjJVZIPi[qD","inputs":{"NAME":{"block":{"type":"text","id":"OMr~`#kG$3@k`YPDHbzH","fields":{"TEXT":"current"}}},"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}"}},"block":{"type":"text","id":"6CX#+wo9^x+vZ`LRt5ms","fields":{"TEXT":"{latitude}"}}},"TO":{"shadow":{"type":"text","id":": _ZloQuh9c-MNf-U]!k5","fields":{"TEXT":""}},"block":{"type":"cast_as","id":"qXXp2GSF;@+ssDvHN={+","fields":{"TYPE":"str"},"inputs":{"VALUE":{"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}"}},"block":{"type":"text","id":"`p!s8dQ7e~?0JvofyB-{","fields":{"TEXT":"{longitude}"}}},"TO":{"shadow":{"type":"text","id":"Zpql-%oJ_sdSi | r |* er | ","fields":{"TEXT":""}},"block":{"type":"cast_as","id":"T5r7Y,;]kq2wClH)JUf8","fields":{"TYPE":"str"},"inputs":{"VALUE":{"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"}}}}}}}}}}}}}}}}}}}}}}}]}}';
+let examplesJustFlashed = false;
+let selectedExample = null; // Track which example was selected
+let tutorialEnabled = false; // Track if tutorial is enabled
+
+// Tutorial popup management
+const tutorialStepOrder = ['examples', 'refresh', 'test', 'aiAssistant', 'send'];
+let completedTutorialStepIndex = -1;
+const getTutorialStepIndex = (step) => tutorialStepOrder.indexOf(step);
+const hasCompletedStepOrBeyond = (step) => {
+  const idx = getTutorialStepIndex(step);
+  return idx !== -1 && completedTutorialStepIndex >= idx;
+};
+const markTutorialStepComplete = (step) => {
+  const idx = getTutorialStepIndex(step);
+  if (idx > completedTutorialStepIndex) {
+    completedTutorialStepIndex = idx;
+  }
+};
+let currentTutorialStep = null;
+const tutorialPopup = document.getElementById('tutorialPopup');
+const tutorialTitle = document.getElementById('tutorialTitle');
+const tutorialBody = document.getElementById('tutorialBody');
+const tutorialSkipButton = document.getElementById('tutorialSkipButton');
+console.log('[TUTORIAL] Popup elements:', { tutorialPopup, tutorialTitle, tutorialBody, tutorialSkipButton });
+
+const tutorialContent = {
+  examples: {
+    title: '1/5 Try an Example',
+    body: 'Click on one of the example workflows to get started quickly.'
+  },
+  refresh: {
+    title: '2/5 Refresh Info',
+    body: 'Click the Refresh button to update the inputs and outputs of your MCP server.'
+  },
+  test: {
+    title: '3/5 Run Your Test',
+    get body() {
+      if (selectedExample === 'weather') {
+        return 'Enter a latitude (-90 to 90) and longitude (-180 to 80), then press Test to get the current temperature at that location!';
+      } else if (selectedExample === 'fact') {
+        return 'Enter a claim you want to verify, then press Test to check if it\'s true!';
+      }
+      return 'Enter some values in your MCP inputs, and press the Test button to see its output.';
+    }
+  },
+  aiAssistant: {
+    title: '4/5 Get AI Guidance',
+    body: 'After your output is generated, switch to the AI Assistant tab to chat with the integrated agent.'
+  },
+  send: {
+    title: '5/5 Send a Message',
+    body: 'Try using one of the three suggested prompts (click on one of the buttons), or write one of your own!'
+  }
+};
+
+const showTutorialPopup = (step, targetElement) => {
+  console.log('[TUTORIAL] showTutorialPopup called for step:', step, 'element:', targetElement);
+  if (!tutorialContent[step]) {
+    console.log('[TUTORIAL] Content not found for step:', step);
+    return;
+  }
+  
+  currentTutorialStep = step;
+  tutorialTitle.textContent = tutorialContent[step].title;
+  // Handle both regular string body and getter function
+  const bodyContent = typeof tutorialContent[step].body === 'function' 
+    ? tutorialContent[step].body() 
+    : tutorialContent[step].body;
+  tutorialBody.textContent = bodyContent;
+  tutorialPopup.style.display = 'block';
+  console.log('[TUTORIAL] Popup display set to block');
+  
+  // Position the popup next to the target element
+  if (targetElement) {
+    setTimeout(() => {
+      const rect = targetElement.getBoundingClientRect();
+      const popupWidth = 280;
+      const popupHeight = 150; // Approximate height
+      const spacing = 25;
+      console.log('[TUTORIAL] Target element rect:', rect, 'window:', window.innerWidth, 'x', window.innerHeight);
+      
+      let top = rect.top;
+      let left = rect.right + spacing;
+      
+      // Priority 1: Try to place to the right
+      if (left + popupWidth > window.innerWidth) {
+        // Priority 2: Try to place below
+        left = rect.left;
+        top = rect.bottom + spacing;
+        
+        if (top + popupHeight > window.innerHeight) {
+          // Priority 3: Place to the left
+          left = rect.left - popupWidth - spacing;
+          top = rect.top;
+        }
+      }
+      
+      console.log('[TUTORIAL] Setting popup position to top:', top, 'left:', left);
+      tutorialPopup.style.top = `${top}px`;
+      tutorialPopup.style.left = `${left}px`;
+    }, 50);
+  }
+};
+
+const hideTutorialPopup = () => {
+  tutorialPopup.style.display = 'none';
+  currentTutorialStep = null;
+};
+
+tutorialSkipButton.addEventListener('click', () => {
+  // Stop the tutorial and remove all flashing indicators (including inside iframes)
+  tutorialEnabled = false;
+  examplesJustFlashed = false;
+  document.querySelectorAll('.flash-button').forEach(el => el.classList.remove('flash-button'));
+  const iframes = document.querySelectorAll('iframe');
+  for (const iframe of iframes) {
+    try {
+      const doc = iframe.contentDocument || iframe.contentWindow.document;
+      doc?.querySelectorAll('.flash-button').forEach(el => el.classList.remove('flash-button'));
+    } catch (e) {
+      // Ignore cross-origin frames
+    }
+  }
+  hideTutorialPopup();
+});
+
+const loadSendButtonFlash = () => {
+  if (!tutorialEnabled) return;
+  // Find send button in the chat iframe (it's the button with just an SVG icon)
+  let sendBtn = null;
+  let iframeDoc = null;
+  
+  console.log('[TUTORIAL] Looking for send button in iframes');
+  const iframes = document.querySelectorAll('iframe');
+  for (const iframe of iframes) {
+    try {
+      iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
+      if (iframeDoc) {
+        // Look for send button - it's the one with SVG viewBox="0 0 22 24"
+        const buttons = iframeDoc.querySelectorAll('button');
+        console.log('[TUTORIAL] Found', buttons.length, 'buttons in iframe');
+        for (let btn of buttons) {
+          // Look for the button with the send SVG (has viewBox="0 0 22 24")
+          if (btn.innerHTML.includes('viewBox="0 0 22 24"')) {
+            console.log('[TUTORIAL] Found send button with SVG!');
+            sendBtn = btn;
+            break;
+          }
+        }
+        if (sendBtn) break;
+      }
+    } catch (e) {
+      // Cannot access iframe, continue
+      console.log('[TUTORIAL] Cannot access iframe:', e);
+    }
+  }
+  
+  console.log('[TUTORIAL] Send button found?', !!sendBtn);
+  if (sendBtn && iframeDoc) {
+    // Inject CSS if needed
+    const styleId = 'send-flash-style';
+    if (!iframeDoc.getElementById(styleId)) {
+      const style = iframeDoc.createElement('style');
+      style.id = styleId;
+      style.textContent = `
+        @keyframes pulseOutline {
+          0% {
+            box-shadow: 0 0 0 0 rgba(255, 255, 255, 1);
+          }
+          75% {
+            box-shadow: 0 0 0 10px rgba(255, 255, 255, 0);
+          }
+          100% {
+            box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
+          }
+        }
+        
+        .flash-button {
+          animation: pulseOutline 1s ease-out infinite !important;
+        }
+      `;
+      iframeDoc.head.appendChild(style);
+    }
+    
+    sendBtn.classList.add('flash-button');
+    showTutorialPopup('send', sendBtn);
+    
+    // Watch for when the send button gets removed/replaced (which happens when message is sent)
+    const observer = new MutationObserver((mutations) => {
+      console.log('[TUTORIAL] Send button DOM changed - message was sent');
+      hideTutorialPopup();
+      observer.disconnect();
+    });
+    
+    // Observe the button's parent for changes (including removal/replacement)
+    if (sendBtn.parentElement) {
+      observer.observe(sendBtn.parentElement, {
+        childList: true,
+        subtree: true
+      });
+    }
+  }
+};
+
+const loadAiAssistantTabFlash = () => {
+  if (!tutorialEnabled || hasCompletedStepOrBeyond('aiAssistant')) return;
+  const aiTab = document.querySelector('[data-tab="aichat"]');
+  if (aiTab) {
+    aiTab.classList.add('flash-button');
+    showTutorialPopup('aiAssistant', aiTab);
+    
+    // Remove flash on click
+    const removeFlash = () => {
+      aiTab.classList.remove('flash-button');
+      aiTab.removeEventListener('click', removeFlash);
+      markTutorialStepComplete('aiAssistant');
+      hideTutorialPopup();
+      // After AI Assistant tab is clicked, flash the send button
+      setTimeout(() => {
+        loadSendButtonFlash();
+      }, 100);
+    };
+    aiTab.addEventListener('click', removeFlash);
+  }
+};
+
+const loadExamplesButtonFlash = () => {
+  if (!tutorialEnabled || hasCompletedStepOrBeyond('examples')) return;
+  const examplesButton = Array.from(document.querySelectorAll('.menuButton')).find(btn => btn.textContent === 'Examples');
+  console.log('[TUTORIAL] Examples button found:', examplesButton);
+  if (examplesButton) {
+    examplesButton.classList.add('flash-button');
+    examplesJustFlashed = true;
+    console.log('[TUTORIAL] Showing examples popup');
+    showTutorialPopup('examples', examplesButton);
+  } else {
+    console.log('[TUTORIAL] Examples button NOT found');
+  }
+};
+
+const loadTestButtonFlash = (testBtn, iframeDoc) => {
+  if (!tutorialEnabled || hasCompletedStepOrBeyond('test') || !testBtn || !iframeDoc) return;
+  if (testBtn && iframeDoc) {
+    testBtn.classList.add('flash-button');
+    showTutorialPopup('test', testBtn);
+    
+    // Remove flash on click
+    const removeFlash = () => {
+      testBtn.classList.remove('flash-button');
+      testBtn.removeEventListener('click', removeFlash);
+      markTutorialStepComplete('test');
+      hideTutorialPopup();
+      // Proceed to the next step
+      loadAiAssistantTabFlash();
+    };
+    testBtn.addEventListener('click', removeFlash);
+  }
+};
+
+const loadRefreshButtonFlash = () => {
+  if (!tutorialEnabled || hasCompletedStepOrBeyond('refresh')) return;
+  let refreshBtn = null;
+  let testBtn = null;
+  let iframeDoc = null;
+  
+  // Check iframes for the Refresh and Test buttons
+  const iframes = document.querySelectorAll('iframe');
+  for (const iframe of iframes) {
+    try {
+      iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
+      if (iframeDoc) {
+        const iframeButtons = iframeDoc.querySelectorAll('button');
+        
+        // Try to find Refresh and Test buttons in this iframe
+        for (let btn of iframeButtons) {
+          if (btn.textContent.includes('Refresh') || btn.innerHTML.includes('Refresh')) {
+            refreshBtn = btn;
+          }
+          if (btn.textContent.includes('Test') && btn.classList.contains('secondary')) {
+            testBtn = btn;
+          }
+          if (refreshBtn && testBtn) break;
+        }
+        
+        if (refreshBtn && testBtn) break;
+      }
+    } catch (e) {
+      // Cannot access iframe, continue
+    }
+  }
+  
+  if (refreshBtn && iframeDoc) {
+    // Inject CSS into the iframe if needed
+    const styleId = 'refresh-flash-style';
+    if (!iframeDoc.getElementById(styleId)) {
+      const style = iframeDoc.createElement('style');
+      style.id = styleId;
+      style.textContent = `
+        @keyframes pulseOutline {
+          0% {
+            box-shadow: 0 0 0 0 rgba(255, 255, 255, 1);
+          }
+          75% {
+            box-shadow: 0 0 0 10px rgba(255, 255, 255, 0);
+          }
+          100% {
+            box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
+          }
+        }
+        
+        .flash-button {
+          animation: pulseOutline 1s ease-out infinite !important;
+        }
+      `;
+      iframeDoc.head.appendChild(style);
+    }
+    
+    refreshBtn.classList.add('flash-button');
+    showTutorialPopup('refresh', refreshBtn);
+    
+    // Remove flash on click
+    const removeFlash = () => {
+      refreshBtn.classList.remove('flash-button');
+      refreshBtn.removeEventListener('click', removeFlash);
+      markTutorialStepComplete('refresh');
+      hideTutorialPopup();
+      // After Refresh is clicked, flash the Test button
+      if (testBtn) {
+        loadTestButtonFlash(testBtn, iframeDoc);
+      }
+    };
+    refreshBtn.addEventListener('click', removeFlash);
+  } else {
+    // Retry after a delay if button not found yet
+    setTimeout(loadRefreshButtonFlash, 1000);
+  }
+};
+
+const checkAndFlashExamplesButton = () => {
+  console.log('[TUTORIAL] checkAndFlashExamplesButton called, tutorialEnabled:', tutorialEnabled, 'examplesJustFlashed:', examplesJustFlashed);
+  if (!tutorialEnabled) {
+    console.log('[TUTORIAL] Tutorial disabled, skipping');
+    return;
+  }
+  if (hasCompletedStepOrBeyond('examples')) {
+    console.log('[TUTORIAL] Examples step already completed, skipping');
+    return;
+  }
+  if (!examplesJustFlashed) {
+    // Flash the examples button immediately
+    console.log('[TUTORIAL] About to call loadExamplesButtonFlash');
+    loadExamplesButtonFlash();
+  }
+};
+
 weatherButton.addEventListener("click", () => {
   try {
+    selectedExample = 'weather';
     const fileContent = JSON.parse(weatherText);
     Blockly.serialization.workspaces.load(fileContent, ws);
+    const shouldHandleTutorial = tutorialEnabled && !hasCompletedStepOrBeyond('examples');
+    if (shouldHandleTutorial) {
+      // Example loaded - stop flashing Examples button and move to Refresh
+      const examplesButton = Array.from(document.querySelectorAll('.menuButton')).find(btn => btn.textContent === 'Examples');
+      if (examplesButton) {
+        examplesButton.classList.remove('flash-button');
+      }
+      hideTutorialPopup();
+      examplesJustFlashed = false;
+      markTutorialStepComplete('examples');
+      // Flash refresh button when example is selected
+      loadRefreshButtonFlash();
+    }
   } catch (error) {
     console.error("Error loading weather.txt contents:", error);
   }
@@ -218,8 +741,22 @@ weatherButton.addEventListener("click", () => {
 const factText = "{\"workspaceComments\":[{\"height\":66,\"width\":575,\"id\":\"x/Z2E2Oid(4||-pQ)h*;\",\"x\":51.00000000000023,\"y\":-35.76388082917071,\"text\":\"A fact checker that uses a searching LLM to verify the validity of a claim.\"}],\"blocks\":{\"languageVersion\":0,\"blocks\":[{\"type\":\"create_mcp\",\"id\":\"yScKJD/XLhk)D}qn2TW:\",\"x\":50,\"y\":50,\"deletable\":false,\"extraState\":{\"inputCount\":1,\"inputNames\":[\"prompt\"],\"inputTypes\":[\"string\"],\"outputCount\":1,\"outputNames\":[\"result\"],\"outputTypes\":[\"string\"],\"toolCount\":0},\"inputs\":{\"X0\":{\"block\":{\"type\":\"input_reference_prompt\",\"id\":\"-r%M-[oX1]?RxxF_V(V@\",\"deletable\":false,\"extraState\":{\"ownerBlockId\":\"yScKJD/XLhk)D}qn2TW:\"},\"fields\":{\"VARNAME\":\"prompt\"}}},\"R0\":{\"block\":{\"type\":\"llm_call\",\"id\":\"m/*D8ZBx;QZlUN*aw15U\",\"fields\":{\"MODEL\":\"gpt-4o-search-preview-2025-03-11\"},\"inputs\":{\"PROMPT\":{\"block\":{\"type\":\"text_join\",\"id\":\"e@#`RVKXpIZ9__%zUK]`\",\"extraState\":{\"itemCount\":3},\"inputs\":{\"ADD0\":{\"block\":{\"type\":\"text\",\"id\":\"M3QD})k`FXiizaF,gA{9\",\"fields\":{\"TEXT\":\"Verify whether the following claim: \\\"\"}}},\"ADD1\":{\"block\":{\"type\":\"input_reference_prompt\",\"id\":\"B4.LNZ0es`RFM0Xi@SL:\",\"extraState\":{\"ownerBlockId\":\"yScKJD/XLhk)D}qn2TW:\"},\"fields\":{\"VARNAME\":\"prompt\"}}},\"ADD2\":{\"block\":{\"type\":\"text\",\"id\":\"Ng!fFR+xTMdmgWZv6Oh{\",\"fields\":{\"TEXT\":\"\\\" is true or not. Return one of the following values: \\\"True\\\", \\\"Unsure\\\", \\\"False\\\", and nothing else. You may not say anything but one of these answers no matter what.\"}}}}}}}}}}}]}}"
 factButton.addEventListener("click", () => {
   try {
+    selectedExample = 'fact';
     const fileContent = JSON.parse(factText);
     Blockly.serialization.workspaces.load(fileContent, ws);
+    const shouldHandleTutorial = tutorialEnabled && !hasCompletedStepOrBeyond('examples');
+    if (shouldHandleTutorial) {
+      // Example loaded - stop flashing Examples button and move to Refresh
+      const examplesButton = Array.from(document.querySelectorAll('.menuButton')).find(btn => btn.textContent === 'Examples');
+      if (examplesButton) {
+        examplesButton.classList.remove('flash-button');
+      }
+      hideTutorialPopup();
+      examplesJustFlashed = false;
+      markTutorialStepComplete('examples');
+      // Flash refresh button when example is selected
+      loadRefreshButtonFlash();
+    }
   } catch (error) {
     console.error("Error loading weather.txt contents:", error);
   }
@@ -790,7 +1327,9 @@ function parseInputs(inputStr) {
 
 // Set up unified SSE connection for all workspace operations
 const setupUnifiedStream = () => {
-  const eventSource = new EventSource(`/unified_stream?session_id=${sessionId}`);
+  const esUrl = `${basePath}/unified_stream?session_id=${sessionId}`;
+  console.log("[SSE] Opening unified_stream", esUrl);
+  const eventSource = new EventSource(esUrl);
   const processedRequests = new Set(); // Track processed requests
 
   eventSource.onmessage = (event) => {
@@ -894,7 +1433,7 @@ const setupUnifiedStream = () => {
 
         // Send result back to backend immediately
         console.log('[SSE] Sending edit MCP result:', { request_id: data.request_id, success, error });
-        fetch('/request_result', {
+        fetch(`${basePath}/request_result`, {
           method: 'POST',
           headers: { 'Content-Type': 'application/json' },
           body: JSON.stringify({
@@ -1028,7 +1567,7 @@ const setupUnifiedStream = () => {
 
         // Send result back to backend
         console.log('[SSE] Sending replace block result:', { request_id: data.request_id, success, error, block_id: blockId });
-        fetch('/request_result', {
+        fetch(`${basePath}/request_result`, {
           method: 'POST',
           headers: { 'Content-Type': 'application/json' },
           body: JSON.stringify({
@@ -1077,7 +1616,7 @@ const setupUnifiedStream = () => {
 
         // Send result back to backend immediately
         console.log('[SSE] Sending deletion result:', { block_id: data.block_id, success, error });
-        fetch('/request_result', {
+        fetch(`${basePath}/request_result`, {
           method: 'POST',
           headers: { 'Content-Type': 'application/json' },
           body: JSON.stringify({
@@ -1271,7 +1810,7 @@ const setupUnifiedStream = () => {
           block_id: blockId
         });
 
-        fetch('/request_result', {
+        fetch(`${basePath}/request_result`, {
           method: 'POST',
           headers: { 'Content-Type': 'application/json' },
           body: JSON.stringify({
@@ -1324,7 +1863,7 @@ const setupUnifiedStream = () => {
           variable_id: variableId
         });
 
-        fetch('/request_result', {
+        fetch(`${basePath}/request_result`, {
           method: 'POST',
           headers: { 'Content-Type': 'application/json' },
           body: JSON.stringify({
@@ -1524,7 +2063,7 @@ demo.launch(mcp_server=True)
     codeEl.textContent = code;
   }
 
-  fetch("/update_code", {
+  fetch(`${basePath}/update_code`, {
     method: "POST",
     headers: { "Content-Type": "application/json" },
     body: JSON.stringify({ session_id: sessionId, code }),
@@ -1545,7 +2084,7 @@ let globalVarString = '';
 // Function to check if chat backend is available
 const checkChatBackend = async () => {
   try {
-    const response = await fetch("/update_chat", {
+    const response = await fetch(`${basePath}/update_chat`, {
       method: "POST",
       headers: { "Content-Type": "application/json" },
       body: JSON.stringify({
@@ -1579,7 +2118,7 @@ const processChatUpdateQueue = () => {
 // Send chat update with retry logic
 const sendChatUpdate = async (chatCode, retryCount = 0) => {
   try {
-    const response = await fetch("/update_chat", {
+    const response = await fetch(`${basePath}/update_chat`, {
       method: "POST",
       headers: { "Content-Type": "application/json" },
       body: JSON.stringify({

project/test.py

@@ -79,8 +79,10 @@ def _worker_exec(code_str, inputs, queue, openai_key=None, hf_key=None):
 
         exec(code_str, env)
         if "create_mcp" in env:
-            sig = inspect.signature(env["create_mcp"])
+            func = env["create_mcp"]
+            sig = inspect.signature(func)
             params = list(sig.parameters.values())
+            in_types = getattr(func, "in_types", [])
 
             typed_args = []
             for i, arg in enumerate(inputs):
@@ -90,23 +92,28 @@ def _worker_exec(code_str, inputs, queue, openai_key=None, hf_key=None):
                     typed_args.append(None)
                     continue
 
-                anno = params[i].annotation
+                target_type = in_types[i] if i < len(in_types) else params[i].annotation
                 try:
-                    if anno == int:
+                    if target_type in (int, "int", "integer"):
                         typed_args.append(int(arg))
-                    elif anno == float:
+                    elif target_type in (float, "float"):
                         typed_args.append(float(arg))
-                    elif anno == bool:
-                        typed_args.append(bool(arg) if isinstance(arg, bool) else str(arg).lower() in ("true", "1"))
-                    elif anno == list:
-                        try:
-                            typed_args.append(ast.literal_eval(arg))
-                        except Exception:
-                            typed_args.append([arg])
-                    elif anno == str or anno == inspect._empty:
+                    elif target_type in (bool, "bool", "boolean"):
+                        typed_args.append(bool(arg) if isinstance(arg, bool) else str(arg).lower() in ("true", "1", "yes"))
+                    elif target_type in (list, "list"):
+                        if isinstance(arg, list):
+                            typed_args.append(arg)
+                        else:
+                            try:
+                                typed_args.append(ast.literal_eval(arg))
+                            except Exception:
+                                typed_args.append([arg])
+                    elif target_type in ("any", "Any"):
+                        typed_args.append(arg)
+                    elif target_type == inspect._empty:
                         typed_args.append(str(arg))
                     else:
-                        typed_args.append(arg)
+                        typed_args.append(str(arg))
                 except Exception:
                     typed_args.append(arg)
 
@@ -132,14 +139,14 @@ async def update_code(request: Request):
     data = await request.json()
     session_id = require_session_id(data)
     latest_blockly_code[session_id] = data.get("code", "")
-    logger.info(f"[update_code] Stored code for session {session_id}; length={len(latest_blockly_code[session_id])}")
+    logger.info(f"[update_code] Stored code; length={len(latest_blockly_code[session_id])}")
     return {"ok": True}
 
 # Sends the latest code to chat.py so that the agent will be able to use the MCP
 @app.get("/get_latest_code")
 async def get_latest_code(request: Request):
     session_id = require_session_id(dict(session_id=request.query_params.get("session_id")))
-    logger.info(f"[get_latest_code] Returning code for session {session_id}; length={len(latest_blockly_code.get(session_id, ''))}")
+    logger.info(f"[get_latest_code] Returning code; length={len(latest_blockly_code.get(session_id, ''))}")
     return {"code": latest_blockly_code.get(session_id, "")}
 
 def execute_blockly_logic(user_inputs, session_id, openai_key=None, hf_key=None):
@@ -148,7 +155,7 @@ def execute_blockly_logic(user_inputs, session_id, openai_key=None, hf_key=None)
     """
     if not session_id:
         return "No session_id provided to execute code."
-    logger.info(f"[execute_blockly_logic] session={session_id}; inputs={user_inputs}")
+    logger.info(f"[execute_blockly_logic] executing; inputs={user_inputs}")
     code_for_session = latest_blockly_code.get(session_id, "")
     if not code_for_session.strip():
         return "No Blockly code available"
@@ -194,7 +201,7 @@ def execute_blockly_logic(user_inputs, session_id, openai_key=None, hf_key=None)
     if p.is_alive():
         p.terminate()
         p.join()
-        logger.error(f"[execute_blockly_logic] timeout for session {session_id}")
+        logger.error("[execute_blockly_logic] timeout")
         return "Error: Execution timed out"
 
     if q.empty():
@@ -222,15 +229,17 @@ def build_interface():
                 c_sid = None
 
             sid = q_sid or c_sid
-            logger.info(
-                f"[init_session] query_sid={q_sid}, cookie_sid={c_sid}, chosen={sid}"
-            )
+            logger.info("[init_session] session resolved")
             if not sid:
                 logger.error("Gradio test interface loaded without session_id (neither query param nor cookie); refresh/process will be no-ops.")
             return sid
 
         demo.load(init_session, inputs=None, outputs=[session_state], queue=False)
 
+        def hide_all_fields():
+            # Hide everything after initial mount so they don't flash visible
+            return [gr.update(visible=False, value="") for _ in input_fields + output_fields]
+
         # Create a fixed number of potential input fields (max 10)
         input_fields = []
         input_labels = []
@@ -239,7 +248,8 @@ def build_interface():
         with gr.Accordion("MCP Inputs", open=True):
             for i in range(10):
                 # Create inputs that can be shown/hidden
-                txt = gr.Textbox(label=f"Input {i+1}", visible=False)
+                # Gradio 6 lazy-renders hidden components; start visible so they mount, then hide via refresh updates
+                txt = gr.Textbox(label=f"Input {i+1}", visible=True)
                 input_fields.append(txt)
                 input_group_items.append(txt)
 
@@ -247,7 +257,8 @@ def build_interface():
         
         with gr.Accordion("MCP Outputs", open=True):
             for i in range(10):
-                out = gr.Textbox(label=f"Output {i+1}", visible=False, interactive=False)
+                # Start visible to force mount; refresh updates will hide/show appropriately
+                out = gr.Textbox(label=f"Output {i+1}", visible=True, interactive=False)
                 output_fields.append(out)
         
         with gr.Row():
@@ -260,42 +271,57 @@ def build_interface():
                 return [gr.update(visible=False, value="") for _ in input_fields + output_fields]
             import re
             code_str = latest_blockly_code.get(session_id, "")
-            logger.info(f"[refresh_inputs] session={session_id}; code length={len(code_str)}")
+            logger.info(f"[refresh_inputs] code length={len(code_str)}")
+
+            def normalize_type_name(type_name):
+                if not type_name:
+                    return "string"
+                if isinstance(type_name, str):
+                    type_name_lower = type_name.lower()
+                    if "int" in type_name_lower:
+                        return "integer"
+                    if "float" in type_name_lower:
+                        return "float"
+                    if "list" in type_name_lower:
+                        return "list"
+                    if "bool" in type_name_lower:
+                        return "boolean"
+                    if "any" in type_name_lower:
+                        return "any"
+                return "string"
 
             # Look for the create_mcp function definition
-            pattern = r'def create_mcp\((.*?)\):'
-            match = re.search(pattern, code_str)
+            # Allow multiline function signatures
+            pattern = r'def\s+create_mcp\s*\((.*?)\)\s*:'
+            match = re.search(pattern, code_str, re.DOTALL)
 
             params = []
+            # Prefer explicit in_types if present
+            in_types_match = re.search(r'in_types\s*=\s*(\[.*?\])', code_str, re.DOTALL)
+            in_types = []
+            if in_types_match:
+                try:
+                    in_types = ast.literal_eval(in_types_match.group(1))
+                except Exception:
+                    in_types = []
+
             if match:
                 params_str = match.group(1)
                 if params_str.strip():
                     # Parse parameters to extract names and types
-                    for param in params_str.split(','):
+                    for idx, param in enumerate(params_str.split(',')):
                         param = param.strip()
-                        if ':' in param:
-                            name, type_hint = param.split(':')
-                            type_hint = type_hint.strip()
-                            # Convert Python type hints to display names
-                            if 'int' in type_hint:
-                                display_type = 'integer'
-                            elif 'float' in type_hint:
-                                display_type = 'float'
-                            elif 'list' in type_hint:
-                                display_type = 'list'
-                            elif 'bool' in type_hint:
-                                display_type = 'boolean'
-                            else:
-                                display_type = 'string'
-                            params.append({
-                                'name': name.strip(),
-                                'type': display_type
-                            })
-                        else:
-                            params.append({
-                                'name': param,
-                                'type': 'string'
-                            })
+                        name = param.split(':')[0].strip() if param else param
+                        # Prefer in_types entry, fall back to annotation parsing
+                        display_type = normalize_type_name(in_types[idx] if idx < len(in_types) else None)
+                        if ':' in param and (not in_types or idx >= len(in_types)):
+                            _, type_hint = param.split(':')
+                            display_type = normalize_type_name(type_hint.strip())
+
+                        params.append({
+                            'name': name,
+                            'type': display_type
+                        })
 
             # Detect output count (out_amt = N)
             out_amt_match = re.search(r'out_amt\s*=\s*(\d+)', code_str)
@@ -368,6 +394,10 @@ def build_interface():
                 openai_key = request.headers.get("x-openai-key") or request.cookies.get("mcp_openai_key")
                 hf_key = request.headers.get("x-hf-key") or request.cookies.get("mcp_hf_key")
 
+            # TEMPORARY FREE API KEY
+            if not openai_key:
+                openai_key = os.getenv("OPENAI_API_KEY")
+
             result = execute_blockly_logic(inputs, session_id, openai_key=openai_key, hf_key=hf_key)
 
             # Get output types to determine how to format the result
@@ -418,6 +448,14 @@ def build_interface():
             queue=False
         )
 
+        # After mount, hide all fields so they don't stay visible until refreshed
+        demo.load(
+            hide_all_fields,
+            inputs=None,
+            outputs=input_fields + output_fields,
+            queue=False
+        )
+
     return demo
 
 

project/unified_server.py

@@ -5,13 +5,17 @@ import gradio as gr
 import uvicorn
 import os
 import sys
+import logging
 
 # Ensure local modules are importable
 sys.path.insert(0, os.path.dirname(os.path.abspath(__file__)))
 import test
 import chat
 
-app = FastAPI()
+app = FastAPI(
+    # Respect Hugging Face Spaces reverse proxy path/prefix when present
+    root_path=os.environ.get("SPACE_ROOT_PATH", "")
+)
 
 app.add_middleware(
     CORSMiddleware,
@@ -32,8 +36,15 @@ async def update_chat_route(request: Request):
 
 @app.get("/unified_stream")
 async def unified_stream_route(request: Request):
-    session_id = request.query_params.get("session_id")
-    return await chat.unified_stream(session_id=session_id)
+    # Diagnostics: log what we see at the unified server layer
+    q_sid = request.query_params.get("session_id")
+    c_sid = request.cookies.get("mcp_blockly_session_id")
+    hdr_sid = request.headers.get("x-session-id") or request.headers.get("session-id")
+    root_path = request.scope.get("root_path")
+    logging.getLogger("unified_server").info(
+        f"[unified_stream_route] query_sid={q_sid}, cookie_sid={c_sid}, header_sid={hdr_sid}, root_path={root_path}"
+    )
+    return await chat.unified_stream(session_id=q_sid, request=request)
 
 @app.post("/request_result")
 async def request_result_route(request: Request):
@@ -83,4 +94,12 @@ if __name__ == "__main__":
     print(f"[UNIFIED] running on http://127.0.0.1:{port}")
     print(f"- /gradio-test")
     print(f"- /gradio-chat")
-    uvicorn.run(app, host="0.0.0.0", port=port, log_level="critical")
+    uvicorn.run(
+        app,
+        host="0.0.0.0",
+        port=port,
+        log_level="critical",
+        # Tell Uvicorn to trust proxy headers so scheme becomes https on HF Spaces
+        proxy_headers=True,
+        forwarded_allow_ips="*",
+    )