模导-原型-MCP

Name: 模导-原型-MCP
Author: modao-dev

作者：modao-dev20 星标更新：2025-09-05

安装使用来源：spider==github.com

项目介绍

modao-proto-mcp

基于模型上下文协议的原型生成服务，专注于HTML代码生成、设计描述生成以及HTML导入功能。

功能特性

🚀 HTML代码生成 根据用户的描述生成完整的HTML代码，支持现代设计和响应式布局。
设计描述生成 根据用户的简要需求生成详细的规范文档。
📤 HTML导入 通过密钥将生成的HTML导入到用户的个人空间。
🛠️ MCP协议 完全兼容模型上下文协议标准。
🔧 可扩展性 容易添加新的工具和功能。
⚡ 高效处理 支持多种参数格式和错误处理机制。

安装

npm install

构建

npm run build

使用说明

启动服务

# 基本用法
node dist/index.js --token YOUR_API_TOKEN

# 指定API地址
node dist/index.js --token YOUR_API_TOKEN --url https://modao.cc

# 启用调试模式
node dist/index.js --token YOUR_API_TOKEN --debug

参数描述

--token API服务访问令牌（必需）
--url: API服务地址（可选，默认：https://modao.cc）
--debug 启用调试模式（可选）

MCP客户端配置

通用配置

适用于所有支持MCP的客户端：

{
  "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": "n
      "args": [
        "-y",
        "@modao-mcp/modao-proto-mcp",
        "--token=YOUR_TOKEN",
        "--url=https://modao.cc"
      ]
    }
  }
}

Cursor

在 settings.json 添加：

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

Windsurf

在 ~/.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

在 ~/.claude-code/config.json 中间添加：

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

常见问题

获取Token: 如果Token报告错误，请登录 modao.cc 或 modao.cc/ai，点击右上角的头像 → Token设置 → 创建Token

积分不足: 如果无法生成gen_html（积分不足），请前往 modao.cc/ai 充值积分

工具列表

1. gen_html

根据用户描述生成完整的HTML代码，支持现代设计和响应式布局。

功能描述:

根据用户的设计要求生成与描述匹配的HTML文件
支持多种设计风格和布局方法
返回完整的HTML代码，包括真实的图片URL
生成的HTML代码会自动包含必要的CSS样式

参数:

user_input 创建一个现代风格的登录页面，包含用户名和密码输入框
reference 使用Material Design风格，主色调为蓝色

返回内容:

完整的HTML代码（从<!DOCTYPE html>到</html>）
生成的密钥（用于后续导入操作）

示例:

{
  "name": "gen_html",
  "arguments": {
    "user_input": "创建一个现代风格的登录页面，包含用户名和密码输入框",
    "reference": "使用Material Design风格，主色调为蓝色"
  }
}

2. gen_description

根据用户的简要设计要求生成详细的规范文档。

功能描述:

将用户的简要设计想法扩展成详细的规范文档
支持纯文本请求、图像参考请求或文本+图像参考请求
当用户明确请求设计扩展时使用

参数:

user_input (字符串，必需): 用户的设计想法或需求描述
reference 需要支持筛选、排序和分页功能

示例:

{
  "name": "gen_description",
  "arguments": {
    "user_input": "电商产品列表页面",
    "reference": "需要支持筛选、排序和分页功能"
  }
}

3. import_html

将gen_html工具生成的HTML导入到用户的个人空间。

功能描述:

使用gen_html工具返回的密钥进行HTML导入操作
将生成的HTML内容保存到用户的个人空间
支持可选的HTML字符串参数作为备用方案

参数:

key 从gen_html工具响应中获得的密钥是导入操作的主要参数
htmlString

使用建议:

推荐使用gen_html工具返回的密钥进行导入
密钥参数包含了所有必要的导入信息，无需手动提供HTML内容

示例:

{
  "name": "import_html",
  "arguments": {
    "key": "从gen_html工具获取的key值"
  }
}

完整工作流

基本工作流

生成HTML: 使用 gen_html 工具根据需求生成HTML代码
导入HTML 使用 import_html 工具将生成的HTML导入到个人空间

扩展工作流

如果需要更详细的设计规范：

生成设计描述: 使用 gen_description 工具扩展设计要求
生成HTML 使用生成的设计描述作为参考，调用 gen_html 工具
导入HTML: 使用 import_html 工具将生成的内容保存到个人空间

完整示例:

# 1. 生成HTML（基础流程）
{
  "name": "gen_html",
  "arguments": {
    "user_input": "创建一个现代风格的登录页面，包含用户名和密码输入框"
  }
}

# 2. 导入HTML（使用返回的key）
{
  "name": "import_html",
  "arguments": {
    "key": "gen_html工具返回的key值"
  }
}

扩展示例（包括设计描述）:

# 1. 生成详细设计描述
{
  "name": "gen_description",
  "arguments": {
    "user_input": "电商产品列表页面",
    "reference": "需要支持筛选、排序和分页功能"
  }
}

# 2. 基于设计描述生成HTML
{
  "name": "gen_html",
  "arguments": {
    "user_input": "电商产品列表页面",
    "reference": "上一步生成的详细设计描述内容"
  }
}

# 3. 导入HTML
{
  "name": "import_html",
  "arguments": {
    "key": "gen_html工具返回的key值"
  }
}

项目结构

modao-proto-mcp/
├── src/
│   ├── tools/
│   │   ├── base-tool.ts       # 工具基类，提供通用功能
│   │   ├── gen-html.ts        # HTML生成工具
│   │   ├── gen-description.ts # 设计描述生成工具
│   │   └── import-html.ts     # HTML导入工具
│   ├── http-util.ts           # HTTP工具类，处理API请求
│   ├── types.d.ts             # TypeScript类型定义
│   └── index.ts               # MCP服务器主入口点
├── bin/
│   └── cli.js                 # 命令行执行文件
├── examples/                  # 使用示例和文档
├── scripts/                   # 构建和发布脚本
├── build.js                   # 项目构建配置
├── package.json              # 项目依赖和配置
├── tsconfig.json             # TypeScript配置
├── API.md                    # API详细文档
├── README.md                 # 英文README
└── README.zh-CN.md           # 中文README（本文件）

技术架构

用户请求 → MCP客户端 → MCP服务器 → HTTP工具类 → 后端API
                                              ↓
                     响应处理 ← 结果格式化 ← API响应

开发指南

添加新工具

创建实用程序类: 在 src/tools/ 目录下创建一个新的实用程序类文件
继承基类 继承 BaseTool 抽象类
实现所需的方法 根据上述信息，执行以下指令：您是一位专业的翻译人员，负责将中文内容翻译成英文内容。请帮我翻译原始内容
- getToolDefinition() MCP规范定义工具
- execute() 实现工具的核心功能逻辑
注册工具: 在 src/index.ts 的 initializeTools() 方法中注册新工具

工具开发示例

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: "工具功能描述",
      inputSchema: {
        type: "object",
        properties: {
          input_param: {
            type: "string",
            description: "参数描述"
          }
        },
        required: ["input_param"]
      }
    };
  }

  async execute(args: Record<string, any>): Promise<ToolResult> {
    // 实现工具逻辑
    const result = await this.httpUtil.post('/api/endpoint', args);
    return this.createSuccessResult(result.data);
  }
}

开发注意事项

参数验证 使用 validateRequiredArgs() 方法验证必需参数
错误处理 使用 createErrorResult() 和 formatApiError() 处理错误
HTTP请求: 通过 this.httpUtil 发送API请求
调试模式 使用 --debug 启用详细的日志输出

许可证

MIT许可证

贡献

欢迎提交Issues和Pull Requests！

更新日志

v1.3.7（当前版本）

通过使用密钥优化了HTML导入过程
📝 提升了工具描述和参数解释
🛠️ 简化了工作流，移除了组织文件树的功能
重写了README文档以更准确地反映实际功能
⚡ 提升了错误处理和参数验证机制

v1.2.0

📤 添加了HTML导入功能（import_html）
🔄 支持完整的HTML生成到导入工作流
🛠️ 提升了HTTP实用类和错误处理

v1.1.0

✨ 添加了设计描述生成功能（gen_description）
🚀 提升了HTML生成功能
🛠️ 提升了MCP协议兼容性
📚 添加了详细的用户文档

v1.0.0

🎉 初始版本发布
🚀 支持HTML代码生成（gen_html）
🛠️ 完全兼容模型上下文协议标准
📦 提供了完整的开发和构建工具链