An AI server for generating HTML prototypes that transforms natural language descriptions into fully-featured HTML code with modern design and responsive layout, integrated with the Modao workspace.

Installation

Installation via NPM

npm install

Build

npm run build

Run Server

node dist/index.js --token YOUR_API_TOKEN

Run with Custom URL

node dist/index.js --token YOUR_API_TOKEN --url https://modao.cc

Run with Debug Mode

node dist/index.js --token YOUR_API_TOKEN --debug

Configuration

Claude Desktop

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

Cursor

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

Windsurf

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

Claude Code

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

Available Tools

Tool	Description
gen_html	Generates complete HTML code based on user descriptions, supports modern design and responsive layout
gen_description	Generates detailed documents with technical design requirements based on user requirements
import_html	Imports generated HTML into the user's personal workspace using the key from gen_html

Capabilities

• HTML code generation with modern design and responsive layout
• Design description generation for detailed specifications
• HTML import to personal workspace
• Full compatibility with Model Context Protocol
• Extensible architecture for adding new tools
• Multiple parameter formats and error handling

Environment Variables

Required

• token - API service access token (required)

Optional

• url - API service URL (optional, defaults to https://modao.cc)
• debug - enable debug mode (optional)

Usage Examples

Create a modern login page with username and password fields

Generate a product list page for an online store with filtering, sorting, and pagination features

Create a responsive landing page with a hero section and capability cards

Notes

Requires a token from modao.cc (login → avatar → token settings → create token). If gen_html doesn't work due to insufficient credits, top up your balance at modao.cc/ai. Supports both basic workflow (generate → import) and extended workflow (describe → generate → import).