blockly-mcp-common-palette

English

MCP Blockly Studio

• time-line.md Detalles y white paper.
• (github) Repo
• Web (gh-pages) Editor Showcase
• Web (gh-pages) Editor Blockly

A visual programming environment for creating Model Context Protocol (MCP) applications using Google’s Blockly.

Demo https://jsanchezamai.github.io/blockly-mcp-common-palette

Overview

MCP Blockly Studio provides a block-based approach to building applications that follow the Model Context Protocol specification. The project uses the MCP TypeScript SDK to create compatible servers, clients, and other components.

Users can:

• Create MCP servers with various resources and tools
• Build clients that interact with MCP servers
• Configure different transport types (stdio, streamable HTTP)
• Implement authentication, notifications, and prompts
• Test with built-in tutorial projects
• Export generated JavaScript code

Tutorial Projects

MCP Blockly Studio includes several tutorial projects:

1. Echo Server: A basic MCP server that echoes messages sent by clients
2. Weather Client: An MCP client that connects to a weather service API
3. Task Assistant: A task management server with OAuth authentication
4. Image Generator: A server that generates images with progress notifications

Getting Started

1. Clone this repository
2. Run npm install to install dependencies
3. Run npm run start to launch the development server
4. Select a tutorial project from the dropdown or create your own from scratch
5. Modify the blocks in the workspace
6. View the generated JavaScript code in the editor panel
7. Download the code using the “Download Code” button

Project Structure

File time-line.md is main changeLog to get overall view of the project. At folder PROMPT_HISTORY there is stored the in deep theory for the timeline.

• src/ - Source code for the application
  • blocks/ - Custom Blockly block definitions
  • toolbox-mcp/ - MCP-specific toolbox categories
  • generators/ - Code generators for translating blocks to JavaScript
• PICS/ - Project screenshots and images
• mcp-ts-sdk/ - MCP TypeScript SDK (included as a dependency)

Built With

• Blockly
• Monaco Editor
• MCP TypeScript SDK
• Webpack

Community Contributions

MCP Blockly Studio is an open-source project and we welcome community contributions! Here are some ways you can help:

• Report bugs by opening issues on our GitHub repository
• Suggest new features that would make the tool more useful
• Submit pull requests to fix issues or add capabilities
• Create tutorials showing how to build MCP applications with our tool
• Fork the project to create your own specialized version

We’re especially interested in contributions that:

• Add new block types for MCP functionality
• Improve code generation
• Enhance the UI/UX
• Add more examples and tutorials
• Improve documentation

Check our open issues to find good starting points for contribution!

License

This project is licensed under the GNU General Public License v3.0 - see the LICENSE file for details.

This site is open source. Improve this page.