Overview

Modao Proto MCP Server is a small server that implements the Model Context Protocol (MCP) to turn natural-language prompts into responsive HTML prototypes and synchronize them with a Modao workspace. It acts as a bridge between language models and a design workspace: you send a description of a page or component, and the server returns a modern, responsive HTML layout plus metadata needed for instant sync to Modao.

This server is useful for developers and product teams who want to iterate UI concepts quickly. Instead of manually building a rough HTML mock, you can describe the layout, content, and interactions in plain English and get a working prototype that can be previewed, edited, or pushed into a Modao project for further design refinement.

Features

Convert plain-language prompts into responsive HTML prototypes
Output includes HTML, CSS, and structured component metadata
Optional instant synchronization with a Modao workspace
Simple HTTP API for integration with scripts, tools, or UIs
Configurable model provider and environment via environment variables
Local development with Node/Docker support

Installation / Configuration

Clone the repository and install dependencies:

git clone https://github.com/modao-dev/modao-proto-mcp.git
cd modao-proto-mcp
npm install

Environment variables (create a .env file or export them in your environment):

PORT=3000
OPENAI_API_KEY=sk-...
MODAO_API_TOKEN=mdx-...
MODAO_WORKSPACE_ID=workspace_123
MODEL_PROVIDER=openai     # optional: provider identifier used by the server

Run locally:

npm start
# or
node index.js

Docker (build and run):

docker build -t modao-proto-mcp .
docker run -p 3000:3000 \
  -e OPENAI_API_KEY="${OPENAI_API_KEY}" \
  -e MODAO_API_TOKEN="${MODAO_API_TOKEN}" \
  modao-proto-mcp

Configuration notes:

OPENAI_API_KEY (or equivalent) is required if the server uses an external LLM provider.
MODAO_API_TOKEN and MODAO_WORKSPACE_ID are required for Modao workspace synchronization.
PORT sets the HTTP server port.

Available Resources

GitHub repository: https://github.com/modao-dev/modao-proto-mcp
Local API endpoints (example — see your server for exact routes)
- POST /api/generate — generate HTML prototype from a prompt
- POST /api/sync — push generated prototype to Modao workspace
- GET /api/status — health/status of the MCP server

Example endpoint table:

Endpoint	Method	Description
/api/generate	POST	Convert a prompt to HTML/CSS and component metadata
/api/sync	POST	Send generated assets to a Modao workspace (requires auth)
/api/status	GET	Return running status and configuration summary

API Examples

Generate a prototype (curl):

curl -X POST http://localhost:3000/api/generate \
  -H "Content-Type: application/json" \
  -d '{
    "prompt": "Create a modern landing page with hero, features grid, and footer. Use blue accents and a sign-up CTA.",
    "viewport": "desktop"
  }'

Sample JSON response:

{
  "html": "<!doctype html>...",
  "css": "/* compiled css */",
  "components": [
    { "id": "hero", "type": "section", "props": { "title": "..." } },
    { "id": "features", "type": "grid", "props": { "items": 3 } }
  ],
  "previewUrl": "http://localhost:3000/previews/abc123"
}

Sync to Modao (curl):

curl -X POST http://localhost:3000/api/sync \
  -H "Authorization: Bearer ${MODAO_API_TOKEN}" \
  -H "Content-Type: application/json" \
  -d '{
    "workspaceId": "workspace_123",
    "prototype": { "html": "...", "css": "...", "components": [...] }
  }'

Use Cases

Rapid prototyping: Turn product briefs or Jira tickets into clickable HTML prototypes to validate layout and flow before a full implementation.
Design handoff: Generate structured component metadata that designers can import into Modao to continue iterations and produce higher-fidelity designs.
Content-driven pages: Provide content writers or product managers a way to generate landing pages from a copy brief, then tweak the output in Modao.
Automation pipelines: Integrate the MCP server into CI scripts to generate preview pages for feature branches or design experiments automatically.
Learning and demos: Use the server in workshops or demos to show how language models can produce practical UI outputs and integrate with design tools.

Concrete example scenarios:

“Product manager writes: ‘Hero with large headline, 3 feature cards, testimonial carousel, sign-up button.’ Use the server to generate HTML, share a preview link in Slack, and then sync to the Modao workspace for designers.”
“Frontend developer uses the server to scaffold several variants of a pricing table from short prompts, compares outputs, and selects the best for production refinement.”

Tips for Developers

Start with small, specific prompts to get predictable structure and iterate from there.
Use the previewUrl returned by /api/generate to inspect the output quickly before syncing to Modao.
Keep the Modao API token scoped and secure; treat it like any other service credential.
If you plan to customize model behavior, check the server configuration for model parameters (temperature, max tokens) and adapt them to your use case.

For full implementation details and the latest updates, consult the repository at https://github.com/modao-dev/modao-proto-mcp.

Modao Proto MCP Server: AI HTML Prototype Generator