AI Diagram Prototype Generator
AI Diagram & Prototype File Generator (MCP Server)
What is AI Diagram Prototype Generator?
AI Diagram Prototype Generator is a Model Context Protocol (MCP) server that allows AI assistants like Claude, Cursor, and VS Code to ai diagram & prototype file generator (mcp server)
AI Diagram & Prototype File Generator (MCP Server)
This server falls under the Developer Tools category on MCPgee, the world's largest MCP server directory with 33,000+ servers.
Features
- AI Diagram & Prototype File Generator (MCP Server)
Use Cases
Maintainer
Works with
Installation
Manual Installation
npx ai-diagram-prototype-generator-mcp-serverConfiguration
Configuration Details
claude_desktop_config.json
Performance
Response Metrics
Resource Usage
How to Set Up and Use AI Diagram Prototype Generator
AI Diagram Prototype Generator MCP Server provides AI assistants with the ability to generate professional diagrams and interactive prototype files directly from natural language descriptions, saving outputs to disk. It supports over a dozen diagram types including system architecture diagrams in draw.io XML format, HTML web prototypes, and styled mobile UI mockups following Apple HIG or WeChat Mini Program guidelines. The server connects to ZhipuAI, OpenAI, or Google Gemini as the backend AI provider for generation tasks.
Prerequisites
- Python 3.10 or higher with pip or uv package manager installed
- An API key from at least one supported provider: ZhipuAI (zhipuai.cn), OpenAI, or Google Gemini
- An MCP-compatible client such as Claude Desktop, Coze, or Dify
- Output directory created and writable for generated files
Clone the repository and create a virtual environment
Clone the project and set up an isolated Python environment.
git clone https://github.com/SimonUTD/AI-Diagram-Prototype-Generator-MCP-Server-.git
cd AI-Diagram-Prototype-Generator-MCP-Server-
python -m venv .venv
source .venv/bin/activateInstall dependencies
Install the required Python packages from requirements.txt.
pip install -r requirements.txtSet up environment variables for your AI provider
Copy the example .env file and configure your chosen AI provider and API key.
cp .env.example .env
# Edit .env — for Gemini:
# PROVIDER=gemini
# GEMINI_API_KEY=AIzaSyXXXXXXXXXXXXXXX
# GEMINI_MODEL=gemini-1.5-proCreate an output directory for generated files
The server writes generated diagrams and prototypes to the path you provide. Create the output directory in advance.
mkdir -p outputConfigure your MCP client
Add the server to your Claude Desktop configuration file, pointing to the virtual environment's Python binary.
{
"mcpServers": {
"diagram-generator": {
"command": "/path/to/.venv/bin/python",
"args": ["/path/to/AI-Diagram-Prototype-Generator-MCP-Server-/server.py"],
"env": {
"PROVIDER": "gemini",
"GEMINI_API_KEY": "AIzaSyXXXXXXXXXXXXXXX",
"GEMINI_MODEL": "gemini-1.5-pro"
}
}
}
}AI Diagram Prototype Generator Examples
Client configuration
Claude Desktop configuration for AI Diagram Prototype Generator using Google Gemini as the backend provider.
{
"mcpServers": {
"diagram-generator": {
"command": "/Users/you/projects/AI-Diagram-Prototype-Generator-MCP-Server-/.venv/bin/python",
"args": ["/Users/you/projects/AI-Diagram-Prototype-Generator-MCP-Server-/server.py"],
"env": {
"PROVIDER": "gemini",
"GEMINI_API_KEY": "AIzaSyXXXXXXXXXXXXXXX",
"GEMINI_MODEL": "gemini-1.5-pro"
}
}
}
}Prompts to try
Example prompts using the generate_diagram and list_support_diagram_types tools.
- "List all supported diagram types and output formats"
- "Generate a flowchart for the user registration process and save it as ./output/register-flow.drawio"
- "Create an Apple HIG-styled mobile app prototype for a task management app and save as ./output/tasks-app.html"
- "Generate a service blueprint for an online food delivery platform and save to ./output/delivery-blueprint.html"Troubleshooting AI Diagram Prototype Generator
generate_diagram returns an error about an unsupported prompt_id
Use list_support_diagram_types first to see valid prompt_id values (e.g. 'architecture', 'flowchart', 'apple_mobile'). Diagram type identifiers are case-sensitive and must match exactly.
Server fails to start — ModuleNotFoundError
Make sure you activated the virtual environment (source .venv/bin/activate) before installing dependencies, and that the command in your MCP config points to .venv/bin/python, not the system Python.
Generated draw.io file appears blank when opened
Ensure the output path in output_file uses an absolute path or a path relative to the server's working directory. Verify the output/ directory exists and is writable before calling generate_diagram.
Frequently Asked Questions about AI Diagram Prototype Generator
What is AI Diagram Prototype Generator?
AI Diagram Prototype Generator is a Model Context Protocol (MCP) server that ai diagram & prototype file generator (mcp server) It connects AI assistants to external tools and data sources through a standardized interface.
How do I install AI Diagram Prototype Generator?
Follow the installation instructions on the AI Diagram Prototype Generator GitHub repository. Clone the repo, install dependencies, and add the server config to your AI client.
Which AI clients work with AI Diagram Prototype Generator?
AI Diagram Prototype Generator works with all major MCP-compatible AI clients including Claude Desktop, Claude Code, Cursor, VS Code (GitHub Copilot), Windsurf, and Cline.
Is AI Diagram Prototype Generator free to use?
Yes, AI Diagram Prototype Generator is open source and available under the MIT license. You can use it freely in both personal and commercial projects.
AI Diagram Prototype Generator Alternatives — Similar Developer Tools Servers
Looking for alternatives to AI Diagram Prototype Generator? Here are other popular developer tools servers you can use with Claude, Cursor, and VS Code.
Ecc
★ 188.2kThe agent harness performance optimization system. Skills, instincts, memory, security, and research-first development for Claude Code, Codex, Opencode, Cursor and beyond.
Javaguide
★ 155.8kJava 面试 & 后端通用面试指南，覆盖计算机基础、数据库、分布式、高并发、系统设计与 AI 应用开发
Gemini CLI
★ 104.5kA secure MCP server that wraps the Google Gemini CLI, allowing clients to query Gemini models using local OAuth sessions without requiring an API key. It provides tools for model interaction and diagnostics with built-in protection against command in
Awesome MCP Servers
★ 87.3k⭐ Curated list of Model Context Protocol (MCP) servers - tools that extend Claude Desktop, Cursor, Windsurf, and other MCP clients with custom capabilities.
MCP Servers
★ 86.0kModel Context Protocol Servers
CC Switch
★ 77.5kA cross-platform desktop All-in-One assistant for Claude Code, Codex, OpenCode, OpenClaw, Gemini CLI & Hermes Agent. Only official website: ccswitch.io
Browse More Developer Tools MCP Servers
Explore all developer tools servers available in the MCPgee directory. Each server includes setup guides for Claude, Cursor, and VS Code.
Set Up AI Diagram Prototype Generator in Your Editor
Choose your AI client for step-by-step setup instructions.
Quick Config Preview
Add this to your claude_desktop_config.json or .cursor/mcp.json
Ready to use AI Diagram Prototype Generator?
Browse our complete directory of 33,000+ MCP servers, read setup guides for your editor, and start building with the Model Context Protocol.