How do I use modao-prototype-mcp?

1. Click on "Install Server". 2. Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state. 3. In the chat, type @ followed by the MCP server name and your instructions, e.g., "@modao-prototype-mcp export prototype https://modao.cc/proto/abc/sharing?view_mode=read_only&screen=def" That's it! The server will respond to your query, and you can continue using it as needed. Here is a step-by-step guide with screenshots.

modao-prototype-mcp

by stackJx

Overview Schema Related Servers Score Discussions

JavaScript

Hybrid

modao-prototype-mcp

一个用于读取墨刀 read-only 原型链接并导出「目录 + 图片」的 MCP Server。

示例链接格式：

https://modao.cc/proto/your-project-id/sharing?view_mode=read_only&screen=your-screen-id

安装与构建

cd /root/book/modao-prototype-mcp
npm install
npm run build
npm test

本环境已有 /usr/bin/google-chrome，导出器会优先使用系统 Chrome；如果你的机器没有 Chrome，可以安装 Playwright 浏览器：

npx playwright install chromium

Related MCP server: lilFetch

MCP 配置示例

把下面配置加入支持 MCP 的客户端配置中：

{
  "mcpServers": {
    "modao-prototype": {
      "command": "node",
      "args": ["/root/book/modao-prototype-mcp/dist/index.js"]
    }
  }
}

远程 MCP 服务

除了默认的 stdio 模式，也可以启动远程 HTTP 服务，适合部署到服务器后让支持远程 MCP 的客户端连接。

cd /root/book/modao-prototype-mcp
npm run build
HOST=0.0.0.0 PORT=3000 MCP_TOKEN="替换成你的密钥" npm run start:http

环境变量：

HOST：监听地址，默认 0.0.0.0。
PORT：监听端口，默认 3000。
MCP_TOKEN：可选。设置后，远程 MCP 请求必须带 Authorization: Bearer <MCP_TOKEN>；不设置时适合本机或内网临时测试。

远程端点：

健康检查：GET http://<host>:3000/health
新版 Streamable HTTP MCP：http://<host>:3000/mcp
旧版 SSE MCP：GET http://<host>:3000/sse，消息投递到 /messages?sessionId=...

客户端如果支持远程 MCP，一般配置为：

{
  "mcpServers": {
    "modao-prototype-remote": {
      "url": "http://服务器地址:3000/mcp",
      "headers": {
        "Authorization": "Bearer 替换成你的密钥"
      }
    }
  }
}

如果放到公网，建议在前面加 Nginx/Caddy/Cloudflare 做 HTTPS 反代，并始终设置 MCP_TOKEN。

MCP 工具

工具名：export_modao_prototype

输入：

{
  "url": "https://modao.cc/proto/your-project-id/sharing?view_mode=read_only&screen=your-screen-id",
  "outputDir": "/root/book/modao-prototype-mcp/exports/modao-sample",
  "headless": true,
  "timeoutMs": 45000,
  "startDirectory": 1,
  "maxDirectories": 6
}

输出目录包含：

manifest.json：页面清单、源链接、导出时间、图片路径。
catalog.md：可阅读的页面目录，包含图片预览链接。
result.json：和 MCP 返回一致的机器可读结果。
images/**/*.png：每个原型页面截图；如果识别到墨刀左侧目录，会按目录分组保存。

CLI 本地验证

默认导出为高清模式：会遍历左侧目录，进入 view_mode=device&canvasId=... 后逐页截图。

npm run export -- "https://modao.cc/proto/your-project-id/sharing?view_mode=read_only&screen=your-screen-id" exports/modao-sample-hq

如果一次性导出全部目录在当前环境里运行过久，可以分批导出：

# 第 1-6 个目录
npm run export -- "https://modao.cc/proto/your-project-id/sharing?view_mode=read_only&screen=your-screen-id" exports/modao-hq-01-06 --start-directory 1 --max-directories 6

# 第 7-12 个目录
npm run export -- "https://modao.cc/proto/your-project-id/sharing?view_mode=read_only&screen=your-screen-id" exports/modao-hq-07-12 --start-directory 7 --max-directories 6

# 第 13-18 个目录
npm run export -- "https://modao.cc/proto/your-project-id/sharing?view_mode=read_only&screen=your-screen-id" exports/modao-hq-13-18 --start-directory 13 --max-directories 6

可选参数：

--headed：显示浏览器窗口，便于调试登录、验证码或加载问题。
--timeout-ms N：设置加载超时毫秒数。
--start-directory N：从左侧第 N 个目录开始导出，1 表示第一个目录。
--max-directories N：最多导出 N 个目录，适合高清模式分批执行。

行为说明

会尝试从页面链接、data-screen-id、data-screen 等 DOM 线索提取页面列表。
如果墨刀总览页暴露 canvas_title_<canvasId>，会进入 view_mode=device&canvasId=... 逐页截图，输出更清晰的原型图。
如果墨刀页面没有暴露目录，至少会导出 URL 当前 screen= 指向的页面。
截图优先尝试原型画布区域，找不到画布时使用整页截图。

更新已导出的图片

如果已经导出过 manifest.json 和 images/**/*.png，可以使用 MCP 新工具 update_modao_export_images 原地更新图片。

工具名：update_modao_export_images

输入示例：

{
  "outputDir": "/root/book/modao-prototype-mcp/exports/modao-all-directories-hq-final",
  "mode": "missing",
  "force": false,
  "headless": true,
  "timeoutMs": 45000
}

更新模式：

mode: "missing"：默认模式，只更新缺失、空文件或损坏的 PNG。
mode: "all"：全量刷新，覆盖 manifest.json 中列出的所有图片。
force: true：无论 mode 是什么，都按全量刷新执行。

安全策略：

每张图片先截图到临时文件。
临时文件通过 PNG 检查后才覆盖原图。
单张截图失败时保留旧图，并在 update-report.json 中记录失败原因。

CLI 本地验证：

# 只补缺失/损坏图片
npm run update -- exports/modao-all-directories-hq-final

# 全量刷新所有已拉取图片
npm run update -- exports/modao-all-directories-hq-final --mode all

# force 等同全量刷新
npm run update -- exports/modao-all-directories-hq-final --force

更新后输出：

update-report.json：记录总页数、更新/跳过/失败数量，以及每张图片的状态。

远程下载模式

远程 MCP 不能直接写入使用者电脑上的路径。为远程使用场景，服务新增工具：

export_modao_prototype_download

这个工具不需要传 outputDir。服务会把导出结果保存到服务器的远程导出根目录，并返回可下载链接。

启动远程服务时建议设置公网地址：

cd /root/book/modao-prototype-mcp
npm run build
HOST=0.0.0.0 PORT=3001 \
PUBLIC_BASE_URL="http://203.0.113.10:3001" \
REMOTE_EXPORT_ROOT="/root/book/modao-prototype-mcp/exports/remote" \
MCP_TOKEN="替换成你的密钥" \
npm run start:http

远程 MCP 客户端配置：

{
  "mcpServers": {
    "modao-prototype-remote": {
      "url": "http://203.0.113.10:3001/mcp",
      "headers": {
        "Authorization": "Bearer 替换成你的密钥"
      }
    }
  }
}

调用 export_modao_prototype_download：

{
  "url": "https://modao.cc/proto/xxx/sharing?view_mode=read_only&screen=xxx",
  "name": "招聘系统原型",
  "headless": true,
  "timeoutMs": 45000
}

返回结果会包含：

zipUrl：完整导出包下载链接
catalogUrl：页面目录下载/预览链接
manifestUrl：页面清单 JSON 下载链接
resultUrl：导出结果 JSON 下载链接

示例：

{
  "exportId": "zhao-pin-xi-tong-yuan-xing-20260622-102030",
  "zipUrl": "http://203.0.113.10:3001/download/zhao-pin-xi-tong-yuan-xing-20260622-102030.zip",
  "catalogUrl": "http://203.0.113.10:3001/download/zhao-pin-xi-tong-yuan-xing-20260622-102030/catalog.md",
  "manifestUrl": "http://203.0.113.10:3001/download/zhao-pin-xi-tong-yuan-xing-20260622-102030/manifest.json",
  "resultUrl": "http://203.0.113.10:3001/download/zhao-pin-xi-tong-yuan-xing-20260622-102030/result.json"
}

Available Tools

3 tools

export_modao_prototypeC

读取墨刀 read-only 原型链接，导出页面目录和 PNG 截图。

ParametersJSON Schema

Name	Required	Description
`url`	Yes	墨刀 read-only 分享链接
`headless`	No	是否使用无头浏览器，默认 true
`outputDir`	Yes	导出目录，包含 manifest.json、catalog.md、result.json 和 images/*.png
`timeoutMs`	No	页面加载和浏览器启动超时时间，单位毫秒
`maxDirectories`	No	最多导出多少个左侧目录，用于高清模式分批导出
`startDirectory`	No	从第几个左侧目录开始导出，1 表示第一个目录

TDQS

C2.9/5.0

Behavior2/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

With no annotations, the description should disclose behavior beyond basic function. It does not mention potential side effects (e.g., network usage, browser automation), timeout behavior, or what happens on failure. The headless parameter is hinted but not explained.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness4/5

Is the description appropriately sized, front-loaded, and free of redundancy?

The description is a single sentence with no redundancy. However, it is in Chinese which may limit understanding for English-speaking agents. Still, it is concise and front-loaded.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness2/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

The description is too minimal for a tool with 6 parameters and no output schema. It does not explain the output files (manifest.json, catalog.md, etc.) nor error handling. The complexity warrants more detail.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Schema description coverage is 100%, so the baseline is 3. The description adds minimal value beyond the schema—only reiterating the overall purpose. It does not clarify parameter interactions or provide examples.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose4/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description clearly states the action (export) and resource (Modao prototype link), and specifies the output (page directory and PNG screenshots). However, it does not differentiate from sibling tools like export_modao_prototype_download or update_modao_export_images.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines2/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

No guidance on when to use this tool versus alternatives, or prerequisites. The description lacks explicit context for appropriate usage, which is needed given the presence of sibling tools.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

export_modao_prototype_downloadB

远程友好的墨刀导出：服务端保存导出结果并返回 zip、catalog、manifest 下载链接。

ParametersJSON Schema

Name	Required	Description
`url`	Yes	墨刀 read-only 分享链接
`name`	No	导出名称，可选；用于生成下载目录名
`headless`	No	是否使用无头浏览器，默认 true
`timeoutMs`	No	页面加载和浏览器启动超时时间，单位毫秒
`maxDirectories`	No	最多导出多少个左侧目录，用于高清模式分批导出
`startDirectory`	No	从第几个左侧目录开始导出，1 表示第一个目录

TDQS

B3.1/5.0

Behavior3/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

No annotations are provided, so the description carries the full burden. It discloses that results are saved on the server and download links are returned, but does not mention authentication, rate limits, destructive potential, or other behavioral nuances. For a read-like export tool, this is minimal but adequate.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness4/5

Is the description appropriately sized, front-loaded, and free of redundancy?

The description is a single concise sentence that front-loads the core purpose. It avoids verbosity, though it could be more structured for clarity.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness2/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

With 6 parameters and no output schema or annotations, the description is too brief. It does not explain return values, parameter interactions, or how the download links work, leaving the agent underinformed.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Schema coverage is 100%, so the input schema already describes each parameter. The description adds no additional meaning beyond stating the core function, meeting the baseline without enhancement.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose4/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description clearly states the tool exports Modao prototypes in a remote-friendly manner, with server-side saving and download link returns. However, it does not differentiate from sibling tools 'export_modao_prototype' and 'update_modao_export_images'.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines2/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

There is no explicit guidance on when to use this tool versus alternatives. The description implies usage for remote-friendly server-side export, but lacks when-not or exclusion criteria.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

update_modao_export_imagesC

读取已有墨刀导出目录的 manifest.json，原地更新已拉取过的 PNG 图片。

ParametersJSON Schema

Name	Required	Description	Default
`mode`	No	all 全量覆盖更新；missing 只更新缺失或损坏图片	missing
`force`	No	为 true 时等同 mode=all，强制刷新所有图片
`headless`	No	是否使用无头浏览器，默认 true
`outputDir`	Yes	已有墨刀导出目录，必须包含 manifest.json
`timeoutMs`	No	页面加载和浏览器启动超时时间，单位毫秒

TDQS

C2.9/5.0

Behavior2/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

With no annotations, the description must fully disclose behavior. It mentions updating PNGs in place, but does not clarify whether updates are destructive, how errors (e.g., missing manifest) are handled, or what the 'force' and 'mode' parameters actually do in practice. The description covers the basic action but omits important behavioral traits.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness4/5

Is the description appropriately sized, front-loaded, and free of redundancy?

The description is a single, concise sentence that efficiently conveys the core purpose. While it could benefit from more structure (e.g., bullet points for clarity), it avoids wasted words.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness2/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

For a tool with 5 parameters, no output schema, and no annotations, the description is too minimal. It does not explain preconditions (e.g., valid manifest.json), return values, or how parameters like 'headless' affect behavior. The agent lacks sufficient context to invoke the tool correctly in diverse scenarios.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

All parameters have descriptions in the schema (100% coverage), so the baseline is 3. The tool description does not add any additional meaning beyond the schema; it only restates the overall action.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose4/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description clearly states the tool reads a manifest.json and updates PNG images in an existing Modao export directory. The verb-resource pairing is specific, and the tool name implies an update action, distinguishing it from sibling export tools.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines2/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

No guidance is provided on when to use this tool versus alternatives (e.g., re-running export tools). The description implies it is for updating already-pulled images, but explicit context on prerequisites or exclusions is missing.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

Install Server

RayrunBuild, deploy, and operate MCP servers without becoming an infrastructure team.ray.runAd

TDQS

A3.6/5.0

Disambiguation5/5

Each tool targets a distinct operation: immediate export, server-side download export, and updating existing images. There is no functional overlap between them.

Naming Consistency5/5

All tools follow a consistent verb_modao_noun pattern (export_modao_prototype, export_modao_prototype_download, update_modao_export_images), with clear verb prefixes.

Tool Count5/5

Three tools is appropriate for the specialized domain of prototype export and image updates. The count is neither too few nor excessive.

Completeness5/5

The tool set covers the core workflow: initial export (two modes for flexibility) and subsequent image updates. No obvious gaps for the stated purpose.

Maintenance

ActivityStale

ResponsivenessSyncing

Resources

GitHub Repository

Need Help?

Related Servers

Unclaimed servers have limited discoverability.

Looking for Admin?

If you are the server author, to access and configure the admin panel.

Related MCP Connectors

url2image A
com.url2image
Capture batches of public web pages in a real browser and download the screenshots as a zip.
Browser Automation Web Scraping
51
Rendex: Rendering API for Images, PDFs & Content Extraction A
io.github.copperline-labs
Render HTML, Markdown, or URLs to images, PDF, or branded artifacts; extract and watch pages.
Browser Automation Web Scraping Multimedia Processing
1327
webpage-to-pdf A
org.urltopdf
Convert any public webpage to a PDF. Single narrow tool, not a bloated PDF toolkit.
Browser Automation Web Scraping
12
screenshot A
com.apiscreenshot
Screenshot any URL/HTML as PNG/JPEG/WebP, or read it as clean Markdown/text for LLMs.
Browser Automation Image & Video Processing
2

Related MCP Servers

Doc Scraper MCP Server
Web Scraping Documentation Access
askjohngeorge
F
license
Not graded
quality
D
maintenance
Converts web-based documentation into markdown format using jina.ai's conversion service, allowing users to scrape documentation from any URL and save it as markdown files.
Updated a year ago (2025-05-03 19:15 UTC)
10
lilFetch
Web Scraping Browser Automation Developer Tools
jphdevsf
F
license
Not graded
quality
D
maintenance
Scrapes webpages and converts them to clean Markdown using browser automation, ideal for creating READMEs, documentation, or processing dynamic web content.
Updated 9 months ago (2025-12-10 20:21 UTC)
axure-mcp-server
Web Scraping Developer Tools Content Management Systems
six-ben
A
license
B
quality
D
maintenance
Extracts text, image links, and structural content from public Axure share pages to enable AI-powered prototype summarization. It features multi-page crawling and OCR fallback to process image-only designs for downstream LLM analysis.
Updated 6 months ago (2026-03-10 10:39 UTC)
3
23
11
MIT
io.github.wmarceau/md-to-pdf
Developer Tools Workplace & Productivity
MarceauSolutions
A
license
Not graded
quality
D
maintenance
Converts markdown files into professional PDF documents with automatic table of contents and interactive navigation.
Updated 8 months ago (2026-01-14 15:01 UTC)
8
MIT

Latest Blog Posts

Who's Calling? MCP Hosts Are an Identity Blind Spot (And the Spec Knows It)
By Om-Shree-0709 on July 25, 2026.
mcp
Agent Identity
OAuth 2.1
Your AI Chatbot Just Exposed Your CEO's Salary to an Intern
By Om-Shree-0709 on July 2, 2026.
Agent Identity
MCP Security
OAuth Delegation
Why MCP Servers Need Execution Sandboxing (And Why Your Current Stack Isn't Enough)
By Om-Shree-0709 on June 30, 2026.
Agentic Ai
Prompt Injection
WebAssembly

MCP directory API

We provide all the information about MCP servers via our MCP API.

curl -X GET 'https://glama.ai/api/mcp/v1/servers/stackJx/modao-prototype-mcp'

If you have feedback or need assistance with the MCP directory API, please join our Discord server