MCP Blockly
AI that makes MCP servers with block-code.
How do we build a bridge between these two worlds?
This was the central question that led to the creation of MCP Blockly, my submission for the MCP's 1st Birthday Hackathon. It is a full visual environment for creating real Model Context Protocol (MCP) servers with block based logic, but with a powerful twist: an integrated AI assistant that collaborates with you, not just for you.
Most educational tools demonstrate concepts passively. Vibe coding, while powerful, can often feel like magic to a beginner. It's easy to lean entirely on an AI assistant without gaining any real understanding. This often drops newcomers into an unfamiliar world where they rely on generated code that feels like a black box, not something they can reason about.
MCP Blockly takes a different approach. Studies consistently show that students develop deeper understanding and longer term retention when they learn by doing. Our goal was to create an active, hands on environment that applies this idea to real world AI development.
MCP Blockly provides a transparent, structured environment that shows how each block fits into the overall logic. The interface is simple: you drag and drop blocks into the workspace to define your MCP server's inputs, logic, and outputs. As you build, the system instantly generates clean, production ready Python code.
When students first start off with tools like scratch, they gain conceptual understanding of how code generally works. They learn about statements and values, functions, and more. This project is the next step between Scratch and AI tools: it helps build conceptual understanding for how MCP servers work, an emerging, vital tool for AI development.
But the true innovation is the AI Assistant. This is not just a chatbot; it's a collaborator that can see, understand, and edit the visual workspace alongside you. This makes the assistant a guide rather than a crutch, helping learners develop genuine intuition about MCP development.
To allow an AI to interact with a visual, block based UI, we had to solve a unique problem. We did it in three key steps.
1. The "Language" of Blocks: A Custom DSL
First, we created a custom Domain Specific Language (DSL). This DSL translates the visual state of the workspace, every block and every connection, into a structured text format that the AI can read and understand. A simple text block might look like this to the agent:
↿ block_id_123 ↾ text(inputs(TEXT: "hello"))
This representation gives the AI a perfect, machine readable map of your program's logic.
2. The Agentic Reasoning Loop
When you give the assistant a goal, like "Create a server that checks if a number is positive, negative, or zero", it follows a multi step reasoning loop:
3. Real Tool Deployment
This loop allows the agent to perform incredibly complex tasks. It can build nested logic, manage variables, and even handle errors. Once your tool is complete, you can ask the assistant to deploy it for you. It will:
This entire workflow, from a plain English idea to a live, cloud hosted MCP server, can happen in minutes, all guided by the AI.
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.
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.
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.
AI that makes MCP servers with block-code.