AI Diagram & Prototype Generator

You are using an AI-powered MCP server that automatically generates diagrams and interactive prototypes from natural language. It supports multiple AI models, outputs Draw.io or HTML, and can be integrated with MCP-compatible assistants for seamless, scalable diagram and prototype creation.

How to use

Interact with your MCP client by issuing clear prompts that specify what you want to generate, the output format, and where to save it. You can request architecture diagrams, flowcharts, UI/UX prototypes, or style-specific app prototypes. Use the designated prompt id to define the diagram type and choose the file type to determine the output format. Then supply a descriptive description and an output path.

How to install

Prerequisites: Python 3.10 or newer, a Python package manager (pip), and an MCP-enabled AI client (such as Coze, Dify, or other compatible agents).

# 1. Clone the project
git clone https://github.com/SimonUTD/AI-Diagram-Prototype-Generator-MCP-Server-.git
cd AI-Diagram-Prototype-Generator-MCP-Server-

# 2. (Recommended) create and activate a virtual environment
python -m venv .venv
source .venv/bin/activate  # on Windows, use `.venv\Scripts\activate`

# 3. Install dependencies
pip install -r requirements.txt

Configuration and usage details

Configuration is done primarily through environment variables and MCP client settings. You can place values in a local environment file and then override as needed for specific clients. The recommended provider is chosen via PROVIDER and can be one of zhipuai, openai, or gemini. You also provide API keys for the chosen services and optional model settings to tailor generation behavior.

# 1. Copy the template
cp .env.example .env

# 2. Edit .env with your preferences
PROVIDER="zhipuai"
ZHIPUAI_API_KEY="your_zhipuai_api_key_here"
OPENAI_API_KEY="your_openai_api_key_here"
GEMINI_API_KEY="your_gemini_api_key_here"

# Optional per-service defaults
ZHIPUAI_MODEL="glm-4-flash"
ZHIPUAI_MODEL_MAX_TOKENS="131072"

Security and best practices

Keep API keys in secure storage and prefer the local environment file as the primary configuration source. Do not paste keys directly into MCP client configurations. Use separate credentials for development and production environments and apply least-privilege access where possible.

Examples of common tasks

Use the MCP client to request a technical architecture diagram saved as a Draw.io file, or generate a styled UI/UX prototype in HTML. You can also generate domain-specific diagrams like user journeys or service blueprints by selecting the corresponding prompt_id and file_type.

Advanced usage with MCP client configuration

If you want to run the MCP server locally and connect through a client, you can define a dedicated MCP server configuration in your client’s setup, for example to start the server and point it at the mcp_server.py script. The configuration includes the command, any necessary arguments, and environment variables for the provider and models.

Available tools

generate_diagram

Generate a diagram or prototype based on a specified intent and format using the MCP server.

list_support_diagram_types

List all supported prompt_id and file_type combinations for diagram generation.