AI Diagram & Prototype Generator
Enables generation of professional diagrams and interactive prototypes from natural language descriptions using multiple AI models. Supports creating draw.io diagrams, HTML prototypes, and styled mobile app interfaces with Apple HIG and WeChat Mini P
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 enables generation of professional diagrams and interactive prototypes from natural language descriptions using multiple ai models. supports creating draw.io diagrams, html prototypes, and styled mobi...
Enables generation of professional diagrams and interactive prototypes from natural language descriptions using multiple AI models. Supports creating draw.io diagrams, HTML prototypes, and styled mobile app interfaces with Apple HIG and WeChat Mini P
This server falls under the Developer Tools category on MCPgee, the world's largest MCP server directory with 33,000+ servers.
Features
- Enables generation of professional diagrams and interactive
Use Cases
Maintainer
Works with
Installation
Manual Installation
npx ai-diagram-prototype-generatorConfiguration
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 lets AI assistants create professional diagrams and interactive prototypes directly from natural language descriptions, saving them as files on disk. It supports generating draw.io XML diagrams, HTML web prototypes, and styled mobile app interfaces following Apple HIG and WeChat Mini Program design standards. The server connects to your choice of AI provider — ZhipuAI, OpenAI, or Google Gemini — to perform the actual generation, and outputs ready-to-open files for over a dozen diagram and prototype types.
Prerequisites
- Python 3.10 or higher with pip or uv package manager
- 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
- Sufficient disk space for generated diagram and prototype files
Clone the repository and set up a virtual environment
Clone the project and create an isolated Python environment to avoid dependency conflicts.
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/activate # Windows: .venv\Scripts\activateInstall Python dependencies
Install all required packages from the requirements file.
pip install -r requirements.txtConfigure your AI provider credentials
Copy the example environment file and fill in the API keys for your chosen provider. Set PROVIDER to one of: zhipuai, openai, or gemini.
cp .env.example .env
# Edit .env and set your provider and key, e.g.:
# PROVIDER=openai
# OPENAI_API_KEY=sk-xxxxxxxxxxxxxxxxxxxxxxxx
# OPENAI_MODEL=gpt-4oVerify available diagram types
Once the server is running, use the list_support_diagram_types tool to see all supported prompt IDs and output formats before generating your first diagram.
Configure Claude Desktop
Add the server to your Claude Desktop configuration. Point the command at the Python executable inside the virtual environment and pass the server script path.
{
"mcpServers": {
"diagram-generator": {
"command": "/path/to/AI-Diagram-Prototype-Generator-MCP-Server-/.venv/bin/python",
"args": ["/path/to/AI-Diagram-Prototype-Generator-MCP-Server-/server.py"],
"env": {
"PROVIDER": "openai",
"OPENAI_API_KEY": "sk-xxxxxxxxxxxxxxxxxxxxxxxx",
"OPENAI_MODEL": "gpt-4o"
}
}
}
}AI Diagram & Prototype Generator Examples
Client configuration
Claude Desktop configuration for the AI Diagram & Prototype Generator using OpenAI 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": "openai",
"OPENAI_API_KEY": "sk-xxxxxxxxxxxxxxxxxxxxxxxx",
"OPENAI_MODEL": "gpt-4o"
}
}
}
}Prompts to try
Example prompts that use the generate_diagram tool to create diagrams and prototypes.
- "Generate an architecture diagram for an e-commerce platform with a web frontend, mobile app, microservices backend, MySQL database, and Redis cache. Save it as ./output/ecommerce-arch.drawio"
- "Create an HTML prototype for a user registration flow with form validation. Save as ./output/register.html"
- "Generate an Apple-style mobile app interface for a fitness tracking app with a dashboard screen. Save as ./output/fitness-app.html"
- "List all supported diagram types so I can see what formats are available"Troubleshooting AI Diagram & Prototype Generator
generate_diagram fails with an API authentication error
Ensure the PROVIDER variable exactly matches one of zhipuai, openai, or gemini (lowercase), and that the corresponding API key variable (e.g. OPENAI_API_KEY) is set and valid. Restart the MCP client after updating .env.
Output directory does not exist and the file is not saved
Create the output directory before generating: mkdir -p ./output. The server writes files to the path you specify in the output_file parameter, so the directory must already exist.
list_support_diagram_types returns an empty list
The server may not have started correctly. Check that all dependencies installed without errors (pip install -r requirements.txt) and that you are using the virtual environment's Python, not the system Python.
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 enables generation of professional diagrams and interactive prototypes from natural language descriptions using multiple ai models. supports creating draw.io diagrams, html prototypes, and styled mobile app interfaces with apple hig and wechat mini p 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 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.