Generate HTML Prototypes from Natural Language

Modao Proto MCP is a Model Context Protocol server for prototype generation, focused on three capabilities: HTML code generation, design description generation, and HTML import. It exposes three tools: gen_html generates complete HTML code from a user description, supporting modern design and responsive layout - it returns full HTML (from to </html>) including real image URLs and necessary CSS automatically included, plus a generated key for later import; gen_description expands a short design idea into a detailed design specification document, supporting pure-text requirements, reference-image requirements, or text-plus-reference-image requirements, and is meant to be used only when the user explicitly asks to expand their design requirements; and import_html saves HTML generated by gen_html into the user's personal space, primarily using the key returned by gen_html (an htmlString parameter exists as a fallback but usually isn't needed). Two documented workflows: a basic one (gen_html then import_html), and an extended one for more detailed design specs (gen_description first, then gen_html using that description as reference, then import_html). Its own changelog, currently at v1.3.7, shows the tool set evolving over four releases: v1.0.0 shipped gen_html alone; v1.1.0 added gen_description; v1.2.0 added import_html and the full generate-to-import workflow; and v1.3.7 optimized the import flow to use the key-based approach, simplified the overall workflow by removing an organize-file-tree feature, and rewrote the README to more accurately reflect actual functionality.

Use it when you want an AI assistant to generate a complete, styled HTML prototype from a plain-language description and save it directly into a Modao personal space, optionally first expanding a short idea into a fuller design spec via gen_description. It requires a Modao account and API token to function, obtained by logging into modao.cc or modao.cc/ai and creating a token under account settings, and gen_html specifically requires sufficient account credits - the source's own FAQ names insufficient credits as a documented failure mode for gen_html, fixable only by recharging on modao.cc/ai. It's scoped to HTML prototype generation and import into Modao's own space, not general web development or hosting elsewhere.

gen_html takes a required user_input description, for example "create a modern-style login page", and an optional reference string for extra context or style guidance, and returns complete HTML plus an import key. gen_description takes the same user_input and reference shape but returns an expanded design specification document instead of code. import_html takes a key, the recommended and primary parameter, sourced from a prior gen_html call, or, as a fallback, a raw htmlString. The project is built around a BaseTool abstract class - new tools are added by creating a class under src/tools/, extending BaseTool, implementing getToolDefinition() (the MCP tool spec) and execute() (the core logic), and registering the new tool in src/index.ts's initializeTools() method; helper methods validateRequiredArgs(), createErrorResult(), and formatApiError() handle parameter validation and error formatting consistently across tools.

Install dependencies with npm install and build with npm run build; run the server directly with node dist/index.js --token YOUR_API_TOKEN, adding --url to point at a non-default API host (default https://modao.cc) or --debug for verbose logging. For MCP clients, add a modao-proto-mcp entry running npx -y @modao-mcp/modao-proto-mcp with the token and url arguments - the same command works across Claude Desktop, Cursor, Windsurf, and Claude Code, each with its own config file location (Claude Desktop's claude_desktop_config.json varies by OS; Cursor's settings.json; Windsurf's ~/.windsurf/config.json; Claude Code's ~/.claude-code/config.json). Its generic client config, quoted verbatim:

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

Licensed MIT.

Developers or designers who want an AI assistant to turn a plain-language description into a complete, styled HTML prototype and save it straight into their Modao workspace, without hand-writing the HTML or manually managing the design-to-prototype handoff.