Generate HTML Prototypes from Natural Language

modao-proto-mcp

A prototype generation service based on Model Context Protocol, focused on HTML code generation, design description generation, and HTML import functionality.

Features

• 🚀 HTML Code Generation: Generate complete HTML code based on user descriptions, supporting modern design and responsive layouts
• 📝 Design Description Generation: Generate detailed design specification documents based on user brief requirements
• 📤 HTML Import: Import generated HTML to user personal space via key
• 🛠️ MCP Protocol: Fully compatible with Model Context Protocol standard
• 🔧 Extensible: Easy to add new tools and features
• ⚡ Efficient Processing: Support multiple parameter formats and error handling mechanisms

Installation

npm install

Build

npm run build

Usage

Starting the Service

# Basic usage
node dist/index.js --token YOUR_API_TOKEN

# Specify API address
node dist/index.js --token YOUR_API_TOKEN --url https://modao.cc

# Enable debug mode
node dist/index.js --token YOUR_API_TOKEN --debug

Parameter Reference

• --token: Access token for API service (required)
• --url: API service address (optional, default: https://modao.cc)
• --debug: Enable debug mode (optional)

MCP Client Configuration

Generic Configuration

Applicable to all MCP-compatible clients:

{
  "mcpServers": {
    "modao-proto-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "@modao-mcp/modao-proto-mcp",
        "--token=YOUR_TOKEN",
        "--url=https://modao.cc"
      ]
    }
  }
}

Claude Desktop

Windows: %APPDATA%\Claude\claude_desktop_config.json
macOS: ~/Library/Application Support/Claude/claude_desktop_config.json
Linux: ~/.config/claude/claude_desktop_config.json

{
  "mcpServers": {
    "modao-proto-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "@modao-mcp/modao-proto-mcp",
        "--token=YOUR_TOKEN",
        "--url=https://modao.cc"
      ]
    }
  }
}

Cursor

Add to settings.json:

{
  "mcp.servers": {
    "modao-proto-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "@modao-mcp/modao-proto-mcp",
        "--token=YOUR_TOKEN",
        "--url=https://modao.cc"
      ]
    }
  }
}

Windsurf

Add to ~/.windsurf/config.json:

{
  "mcp": {
    "servers": {
      "modao-proto-mcp": {
        "command": "npx",
        "args": [
          "-y",
          "@modao-mcp/modao-proto-mcp",
          "--token=YOUR_TOKEN",
          "--url=https://modao.cc"
        ]
      }
    }
  }
}

Claude Code

Add to ~/.claude-code/config.json:

{
  "mcpServers": {
    "modao-proto-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "@modao-mcp/modao-proto-mcp",
        "--token=YOUR_TOKEN",
        "--url=https://modao.cc"
      ]
    }
  }
}

FAQ

Getting a Token: If you encounter a token error, please log in to modao.cc or modao.cc/ai, click the avatar in the top right corner → Token Settings → Create Token

Insufficient Credits: If gen_html cannot generate (insufficient credits), please go to modao.cc/ai to recharge credits

Tools List

1. gen_html

Generate complete HTML code based on user descriptions, supporting modern design and responsive layouts.

Description:

• Generate HTML files that match user design requirements
• Support multiple design styles and layout methods
• Return complete HTML code with real image URLs
• Generated HTML code automatically includes necessary CSS styles

Parameters:

• user_input (string, required): User design requirement description, e.g., 'Create a modern-style login page'
• reference (string, optional): Optional reference information or context

Return Content:

• Complete HTML code (from <!DOCTYPE html> to </html>)
• Generated key (for subsequent import operations)

Example:

{
  "name": "gen_html",
  "arguments": {
    "user_input": "Create a modern-style login page with username and password input fields",
    "reference": "Use Material Design style with blue as the primary color"
  }
}

2. gen_description

Generate detailed design specification documents based on user brief design requirements.

Description:

• Expand user brief design ideas into detailed design specifications
• Support pure text requirements, reference image requirements, or text + reference image requirements
• Use only when user explicitly requests design requirement expansion

Parameters:

• user_input (string, required): User design idea or requirement description
• reference (string, optional): Optional reference information or context

Example:

{
  "name": "gen_description",
  "arguments": {
    "user_input": "E-commerce product list page",
    "reference": "Need to support filtering, sorting, and pagination features"
  }
}

3. import_html

Import HTML generated through the gen_html tool to user personal space.

Description:

• Use the key returned by gen_html tool for HTML import operation
• Save generated HTML content to user personal space
• Support optional HTML string parameter as backup option

Parameters:

• key (string, recommended): Key parameter obtained from gen_html tool response, this is the main parameter for import operation
• htmlString (string, optional): Optional HTML string content, usually not needed

Usage Recommendations:

• Recommended to use the key parameter returned by gen_html tool for import
• The key parameter contains all necessary import information, no need to manually provide HTML content

Example:

{
  "name": "import_html",
  "arguments": {
    "key": "Key value obtained from gen_html tool"
  }
}

Complete Workflow

Basic Workflow

1. Generate HTML: Use gen_html tool to generate HTML code based on requirements
2. Import HTML: Use import_html tool to import generated HTML to personal space

Extended Workflow

If more detailed design specifications are needed:

1. Generate Design Description: Use gen_description tool to expand design requirements
2. Generate HTML: Use generated design description as reference, call gen_html tool
3. Import HTML: Use import_html tool to save to personal space

Complete Example:

# 1. Generate HTML (basic workflow)
{
  "name": "gen_html",
  "arguments": {
    "user_input": "Create a modern-style login page with username and password input fields"
  }
}

# 2. Import HTML (using returned key)
{
  "name": "import_html",
  "arguments": {
    "key": "Key value returned by gen_html tool"
  }
}

Extended Example (with design description):

# 1. Generate detailed design description
{
  "name": "gen_description",
  "arguments": {
    "user_input": "E-commerce product list page",
    "reference": "Need to support filtering, sorting, and pagination features"
  }
}

# 2. Generate HTML based on design description
{
  "name": "gen_html",
  "arguments": {
    "user_input": "E-commerce product list page",
    "reference": "Detailed design description content from previous step"
  }
}

# 3. Import HTML
{
  "name": "import_html",
  "arguments": {
    "key": "Key value returned by gen_html tool"
  }
}

Project Structure

modao-proto-mcp/
├── src/
│   ├── tools/
│   │   ├── base-tool.ts       # Base tool class providing common functionality
│   │   ├── gen-html.ts        # HTML generation tool
│   │   ├── gen-description.ts # Design description generation tool
│   │   └── import-html.ts     # HTML import tool
│   ├── http-util.ts           # HTTP utility class for handling API requests
│   ├── types.d.ts             # TypeScript type definitions
│   └── index.ts               # MCP server main entry point
├── bin/
│   └── cli.js                 # Command line execution file
├── examples/                  # Usage examples and documentation
├── scripts/                   # Build and publish scripts
├── build.js                   # Project build configuration
├── package.json              # Project dependencies and configuration
├── tsconfig.json             # TypeScript configuration
├── API.md                    # Detailed API documentation
├── README.md                 # English README
└── README.zh-CN.md           # Chinese README

Technical Architecture

User Request → MCP Client → MCP Server → HTTP Utility → Backend API
                                                    ↓
                     Response Handling ← Result Formatting ← API Response

Development Guide

Adding New Tools

1. Create Tool Class: Create a new tool class file in src/tools/ directory
2. Inherit Base Class: Inherit from BaseTool abstract class
3. Implement Required Methods:
   • getToolDefinition(): Define tool MCP specification
   • execute(): Implement tool core functionality logic
4. Register Tool: Register new tool in initializeTools() method in src/index.ts

Tool Development Example

import { Tool } from '@modelcontextprotocol/sdk/types.js';
import { BaseTool } from './base-tool.js';
import { ToolResult } from '../types.js';

export class MyNewTool extends BaseTool {
  getToolDefinition(): Tool {
    return {
      name: "my_new_tool",
      description: "Tool functionality description",
      inputSchema: {
        type: "object",
        properties: {
          input_param: {
            type: "string",
            description: "Parameter description"
          }
        },
        required: ["input_param"]
      }
    };
  }

  async execute(args: Record<string, any>): Promise<ToolResult> {
    // Implement tool logic
    const result = await this.httpUtil.post('/api/endpoint', args);
    return this.createSuccessResult(result.data);
  }
}

Development Notes

1. Parameter Validation: Use validateRequiredArgs() method to validate required parameters
2. Error Handling: Use createErrorResult() and formatApiError() for error handling
3. HTTP Requests: Send API requests through this.httpUtil
4. Debug Mode: Use --debug parameter to enable detailed logging