MCPgee
MCPgee
MCPgeeMCPgee

Modao Proto

v1.0.0•Developer Tools•stable

Modao Proto MCP is a standalone MCP (Model Context Protocol) service designed to connect Modao Proto design tools with AI models.

modao-protomcpai-integration
Share:
65
Stars
0
Downloads
0
Weekly
0/5
View on GitHub

What is Modao Proto?

Modao Proto is a Model Context Protocol (MCP) server that allows AI assistants like Claude, Cursor, and VS Code to modao proto mcp is a standalone mcp (model context protocol) service designed to connect modao proto design tools with ai models.

Modao Proto MCP is a standalone MCP (Model Context Protocol) service designed to connect Modao Proto design tools with AI models.

This server falls under the Developer Tools category on MCPgee, the world's largest MCP server directory with 33,000+ servers.

Features

  • Modao Proto MCP is a standalone MCP (Model Context Protocol)

Use Cases

Connect Modao Proto design tools with AI models.
Manage design workflows through MCP.
Integrate design systems with AI agents.
modao-dev

Maintainer

LicenseISC
Languagetypescript
Versionv1.0.0
UpdatedMay 20, 2026
Statushealthy
Maintenanceactive

Works with

ClaudeOpenAIwindowsmacoslinux
View SourceBrowse All Servers

Installation

Manual Installation

npx modao-proto

Configuration

Configuration Details

Config File

claude_desktop_config.json

Performance

Response Metrics

Response Time< 200ms
ThroughputMedium

Resource Usage

Memory UsageLow
CPU UsageLow

How to Set Up and Use Modao Proto

Modao Proto MCP is a standalone MCP server that connects the Modao Proto design platform (modao.cc) with AI models, enabling assistants to generate complete HTML prototypes from natural language descriptions, expand brief design concepts into detailed specifications, and save generated designs directly to a user's Modao workspace. It is designed for UX designers and frontend developers who use Modao Proto for rapid prototyping and want to accelerate their workflow by describing UI ideas in plain language and having AI produce production-ready, responsive HTML layouts.

Prerequisites

  • Node.js installed on your system
  • A Modao account at modao.cc or modao.cc/ai
  • A valid Modao API access token (obtainable from your Modao account settings)
  • Sufficient Modao account credits for HTML generation operations
  • An MCP-compatible client such as Claude Desktop, Cursor, or Windsurf
1

Clone the repository and install dependencies

Clone the modao-proto-mcp repository and install the Node.js dependencies.

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

Build the project

Compile the TypeScript source to JavaScript.

npm run build
3

Obtain your API token

Log in to modao.cc, navigate to your account settings or the API section, and generate an access token. Keep this token secure as it authorizes all API operations.

4

Configure your MCP client

Add the Modao Proto MCP server to your client configuration. The --token flag is required; --url defaults to https://modao.cc.

{
  "mcpServers": {
    "modao-proto": {
      "command": "node",
      "args": ["/path/to/modao-proto-mcp/dist/index.js", "--token", "YOUR_API_TOKEN"]
    }
  }
}
5

Test with a simple HTML generation request

Ask your AI assistant to generate a simple UI prototype to verify the server is connected and your token is working.

Modao Proto Examples

Client configuration

Claude Desktop config for the Modao Proto MCP server with API token.

{
  "mcpServers": {
    "modao-proto": {
      "command": "node",
      "args": [
        "/path/to/modao-proto-mcp/dist/index.js",
        "--token", "YOUR_API_TOKEN_HERE"
      ]
    }
  }
}

Prompts to try

Example requests once the Modao Proto MCP server is connected.

- "Generate a modern login page with email and password fields, a 'forgot password' link, and a social login section"
- "Create a dashboard UI with a sidebar navigation, KPI cards at the top, and a data table below"
- "Expand this brief into a full design spec: mobile checkout flow with cart summary and payment form"
- "Generate the HTML for this design and save it to my Modao workspace"

Troubleshooting Modao Proto

Authentication error or 'invalid token' response from the API

Verify your API token is correct and has not expired. Generate a new token from your Modao account settings at modao.cc and update it in your MCP client configuration.

HTML generation fails with a credits or quota error

Each gen_html call consumes Modao account credits. Check your credit balance at modao.cc/ai. Purchase additional credits if needed, then retry the generation request.

Server fails to start with 'Cannot find module' errors

Make sure you ran 'npm run build' to compile the TypeScript source before starting the server. The dist/ directory must exist and contain index.js for the server to launch.

Frequently Asked Questions about Modao Proto

What is Modao Proto?

Modao Proto is a Model Context Protocol (MCP) server that modao proto mcp is a standalone mcp (model context protocol) service designed to connect modao proto design tools with ai models. It connects AI assistants to external tools and data sources through a standardized interface.

How do I install Modao Proto?

Follow the installation instructions on the Modao Proto GitHub repository. Clone the repo, install dependencies, and add the server config to your AI client.

Which AI clients work with Modao Proto?

Modao Proto works with all major MCP-compatible AI clients including Claude Desktop, Claude Code, Cursor, VS Code (GitHub Copilot), Windsurf, and Cline.

Is Modao Proto free to use?

Yes, Modao Proto is open source and available under the ISC license. You can use it freely in both personal and commercial projects.

Learn More About MCP Servers

Getting Started with MCP

Set up your first MCP server in minutes

MCP Setup Guide

Configure MCP in Claude, Cursor & VS Code

All MCP Tutorials

18+ hands-on guides for developers

MCP FAQ

40+ answers about Model Context Protocol

Modao Proto Alternatives — Similar Developer Tools Servers

Looking for alternatives to Modao Proto? Here are other popular developer tools servers you can use with Claude, Cursor, and VS Code.

Ecc

★ 188.2k

The agent harness performance optimization system. Skills, instincts, memory, security, and research-first development for Claude Code, Codex, Opencode, Cursor and beyond.

Javaguide

★ 155.8k

Java 面试 & 后端通用面试指南，覆盖计算机基础、数据库、分布式、高并发、系统设计与 AI 应用开发

Gemini CLI

★ 104.5k

A secure MCP server that wraps the Google Gemini CLI, allowing clients to query Gemini models using local OAuth sessions without requiring an API key. It provides tools for model interaction and diagnostics with built-in protection against command in

Awesome MCP Servers

★ 87.3k

⭐ Curated list of Model Context Protocol (MCP) servers - tools that extend Claude Desktop, Cursor, Windsurf, and other MCP clients with custom capabilities.

MCP Servers

★ 86.0k

Model Context Protocol Servers

CC Switch

★ 77.5k

A cross-platform desktop All-in-One assistant for Claude Code, Codex, OpenCode, OpenClaw, Gemini CLI & Hermes Agent. Only official website: ccswitch.io

Browse More Developer Tools MCP Servers

Explore all developer tools servers available in the MCPgee directory. Each server includes setup guides for Claude, Cursor, and VS Code.

Developer ToolsBrowse All Servers

Quick Config Preview

{ "mcpServers": { "modao-proto": { "command": "npx", "args": ["-y", "modao-proto"] } } }

Add this to your claude_desktop_config.json or .cursor/mcp.json

Read the full setup guide →

Ready to use Modao Proto?

Browse our complete directory of 33,000+ MCP servers, read setup guides for your editor, and start building with the Model Context Protocol.

33,000+ ServersFree & Open SourceStep-by-Step Guides
Explore All ServersRead Our Guides