MCP.so
Sign In

Mastergo Magic Mcp

@mastergo-design

About Mastergo Magic Mcp

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

Config

Add this server to your MCP-compatible client using the configuration below.

{
  "mcpServers": {
    "mastergo-magic-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "@mastergo/magic-mcp",
        "--token=your_token",
        "--url=https://mastergo.com/"
      ],
      "env": {
        "NPM_CONFIG_REGISTRY": "https://registry.npmjs.org/"
      }
    }
  }
}

Tools

12

the current version is 0.2.8

BEFORE calling this tool, CHECK the layerId: - If layerId has NO colon and no digits (e.g. "M", or any short non-numeric id), it is likely a PAGE-level id, NOT a layer id. Page-level ids return EMPTY from this tool (they cannot be enumerated via /container). → STOP. Call mcp__getPageLayers with the same fileId+layerId first to enumerate the real layer_ids, then restore each one individually. - Only proceed with THIS tool when layerId looks like a real layer id (contains a colon and digits, e.g. "802:02364", "453:6855"). This check is MANDATORY when the user's URL contains ?page_id= (not ?layer_id=). If you ignore this and call this tool with a page-level id, the server will return an error redirecting you to mcp__getPageLayers anyway — so save the round-trip and call getPageLayers first. [PRIMARY] This is the main tool for all designs. Operates in TWO modes: Mode 1 — Get layout overview (sectionIndex NOT provided): Returns the list of all sections with id, name, type, nodeCount, textPreview (first TEXT node, 20 chars max), and a page-absolute bounding box (x, y, width, height) for each section, plus totalSections and totalNodes. Also returns rootMetadata (root layer width/height/name/type/fill) when available. rootContainer CSS properties for the page wrapper. splitContainers for large page regions that were split into child sections. Use this FIRST to understand the design scope. The per-section bbox tells you exactly where each section sits inside the root container — use it for absolute positioning when generating code. Example: { "fileId": "123", "layerId": "456:789" } Mode 2 — Get section DSL (sectionIndex provided): Returns the full DSL for ONE specific section. - PATH nodes carry a `svgShortKey` field (a short sequential ID like `S0#0`, `S0#1`). The SVG markup is NOT in the DSL. Place `@@SVG:{svgShortKey}@@` where each icon goes, then call `mcp__applyDesign` at the end to inject the real high-precision SVG. NEVER hand-write `<path d="...">`. - CRITICAL: After generating the complete code with all `@@SVG:{svgShortKey}@@` placeholders, call `mcp__applyDesign` to replace them with real SVG. Skipping this WILL cause missing icons. - INSTANCE nodes with a `_variantProps` object carry semantic state labels. Compare these across sibling instances to determine active/selected/hovered states — do NOT default to the first item. CRITICAL — sectionIndex is SINGULAR: the parameter is sectionIndex (a SINGLE integer per call). There is NO plural sectionIndices parameter — passing an array will be rejected with an error. To fetch multiple sections you MUST make multiple calls, each with one sectionIndex. IMPORTANT workflow: 1. First call WITHOUT sectionIndex to get the section list with node counts. 2. Then call WITH sectionIndex=0, then sectionIndex=1, ... up to totalSections-1 — ONE sectionIndex per call. 3. YOU MUST REQUEST ALL SECTIONS. Do NOT skip any section index — missing sections WILL cause missing content. 4. textPreview helps distinguish same-looking sections: "系统信息", "权限设置", "基本设置" — all may have nodeCount=3 and empty name but DIFFERENT textPreview. They are individual menu items, NOT duplicates. 5. Fetch sections in batches of 3-5 CONCURRENT calls (3-5 separate single-sectionIndex calls in parallel), wait for all results, then send the next batch. Each call has exactly one sectionIndex. 6. After fetching all sections, generate code with `@@SVG:{svgShortKey}@@` placeholders for every PATH node, then call `mcp__applyDesign` to inject real SVG. 7. Count your requests. If totalSections=48, you must make exactly 48 sectionIndex calls (each with a SINGLE integer). Keep a checklist and do NOT stop early. 8. Generate the complete HTML with all SVG placeholders, then call `mcp__applyDesign` as the FINAL step. DO NOT call mcp__getDsl after completing this workflow — all data is already provided. If this tool returns an error (e.g. old server), fall back to mcp__getDsl. You can provide either: 1. fileId and layerId d…

List ALL layers under a given page (or any container layer) of a MasterGo design file. This is the ENUMERATION step of the multi-layer restoration workflow — it only lists layer_ids; it does NOT restore designs. **Workflow (enumerate → build URLs → restore one by one):** 1. Call this tool with the page_id / parent layerId to get the full layer list. 2. Pick the top-level restorable layers from the result (FRAME/COMPONENT/INSTANCE at depth 0/1). For each, build a URL: https://mastergo.com/file/{fileId}?layer_id={id} (URL-encode the id, e.g. 802:02364 → 802%3A02364). 3. Restore them SEQUENTIALLY — take one layer_id, run the full single-layer restoration (mcp__getDesignSections → fetch all sections → mcp__applyDesign), write its HTML to its OWN separate .html file (a complete standalone document with <!DOCTYPE html>/<head>/<body>), THEN move to the next. Do NOT batch-restore. Do NOT merge multiple layers into one HTML file — ONE layer = ONE standalone .html file. You can provide either: 1. fileId and layerId directly (layerId = the page's layerId, i.e. page_id), or 2. a short link (like https://{domain}/goto/LhGgBAK) The returned layer list is lightweight: each entry has id, name, type, depth, parentId, childrenCount, width, height. It does NOT contain DSL/styles/SVG paths — use the section or DSL tools to restore each layer. NOTE: This tool cannot enumerate a document's PAGE list from a fileId alone — you must already know a page_id / layerId to pass in. The synthetic page_id=M returns empty (page data not available via this API); use a real layer_id URL in that case.

[FALLBACK] Use only when mcp__getDesignSections is unavailable or returns an error. This returns the FULL DSL in one response — may be large and exceed context limits for complex designs. Prefer mcp__getDesignSections as the primary tool for all designs. You can provide either: 1. fileId and layerId directly, or 2. a short link (like https://{domain}/goto/LhGgBAK) This tool returns the raw DSL data that you can then parse and analyze. Use the optional 'format' parameter (json/yaml/tree, defaults to json) to control the serialization. This tool also returns the rules you must follow when generating code. The DSL data can also be used to transform and generate code for different frameworks.

使用此工具从 MasterGo 获取 D2C 数据,并在本地落盘: 1)将返回的 code 写入 html; 2)将返回的 svg / image 资源按 resourcePath 落盘到对应目录; 3)返回落盘摘要,避免把大体积资源塞进上下文。

使用此工具将代码文件发送到 MasterGo MCP 服务进行 C2D(代码转设计)处理,将用户代码同步到设计稿。 参数说明: - filePath:HTML 文件的完整路径(如 /path/to/file.html),工具会自动读取文件内容并发送给后端。 - fileId: 不提供 shortLink 时至少需要 fileId。layerId 不是必填,没有就不要传。 - layerId: 可选。图层 ID(只读取 URL 参数 layer_id)。不传或解析不到则仅按 file 维度同步;pageid/page_id 不会被当作 layerId。 - shortLink:可选,短链接形式(例如 https://{domain}/goto/xxxx)。 注意事项:只允许使用 URL 中的 layer_id 参数作为 layerId,严禁将 pageid/page_id 等任何页面 ID 当作 layerId。 如果短链接或 URL 中没有解析出 layer_id,则不传 layerId。 工具会读取 filePath 指定文件的内容,并传给后端,附带 fileId 与可选的 layerId。

When the data returned by mcp__getDsl contains a non-empty componentDocumentLinks array, this tool is used to sequentially retrieve URLs from the componentDocumentLinks array and then obtain component documentation data. The returned document data is used for you to generate frontend code based on components.

Use this tool when the user intends to build a complete website or needs to obtain high-level site configuration information. You must provide a fileld and layerld to identify the specific design element. This tool returns the rules and results of the site and page. The rules is a markdown file, you must follow the rules and use the results to analyze the site and page.

Users need to actively call this tool to get the component development workflow. When Generator is mentioned, please actively call this tool. This tool provides a structured workflow for component development following best practices. You must provide an absolute rootPath of workspace to save workflow files.

Users need to actively call this tool to get the Flutter component development workflow. When Flutter Generator or Flutter Component is mentioned, please actively call this tool. This tool provides a structured workflow for Flutter component development following best practices. It includes MasterGo DSL to Flutter Widget mapping rules, screen adaptation with flutter_screenutil, and feature-based architecture guidance. It also downloads all image resources from the design file to local disk, rewrites CSS and DSL references to point at Flutter asset paths, and generates an asset manifest. You must provide an absolute rootPath of workspace to save workflow files.

Extract SVG data from MasterGo design files. This tool retrieves the DSL from a design layer, finds all PATH nodes (typically inside INSTANCE/icon components), resolves their color references, and generates SVG markup strings. You can provide either: 1. fileId and layerId directly, or 2. a short link (like https://{domain}/goto/LhGgBAK) Pagination: When there are many icons, use the first call without "page" to get totalCount. Then call again with page=0, page=1, etc. (page starts at 0, pageSize defaults to 20, max 100). If hasMore is false, you've fetched all pages.

Finalize generated design code: replace ALL placeholders (SVG icons + long text) with real high-precision data from the design cache, then write the final file directly to disk. WHAT it does: 1. Replaces every `@@SVG:{svgShortKey}@@` placeholder with the real high-precision `<svg>` markup from the SVG cache (character-for-character exact, no rounding). 2. Replaces every `T{sectionIndex}|{nodeId}` text placeholder with the real long text from the text cache. 3. Detects fabricated (hand-written) `<path d="...">` that were NOT injected via placeholders — reports them as errors. 4. Writes the finalized code directly to `{outDir}/{outputFileName}` on disk. CRITICAL — outDir is MANDATORY: Always provide outDir so the finalized code is written directly to disk. This ensures the server-injected data reaches the file WITHOUT any LLM re-processing. Do NOT copy the code back into your response and re-output it — that causes precision loss. The file written by this tool IS the final deliverable. PLACEHOLDER FORMATS: - SVG icons: `@@SVG:{svgShortKey}@@` — svgShortKey comes from the PATH node's svgShortKey field in the section DSL. Example: <span class="icon">@@SVG:S0#0@@</span> - Long text: `T{sectionIndex}|{nodeId}` — appears in TEXT nodes whose text was too long for inline DSL. Example: <p>T3|1:1234:5678</p> The server escapes the injected data according to the `targetLang` parameter: - `html` (default, also for Vue templates): place the placeholder in element content (`<span>@@SVG:S0#0@@</span>`, `<p>T3|1:2</p>`). SVG is inserted as-is; long text is HTML-escaped (& < >). - `dart` (Flutter): place the placeholder inside a single-quoted string literal (`SvgPicture.string('@@SVG:S0#0@@')`, `Text('T3|1:2')`). SVG/text are escaped for that string (\ ' newline). Pass `targetLang: "dart"`. Pick targetLang to match the code you generated, and place placeholders in that language's standard position shown above. You can provide either: 1. fileId and layerId directly, or 2. a short link (like https://{domain}/goto/LhGgBAK) IMPORTANT: Call this tool with the COMPLETE code string. After the tool writes the file, you are DONE — do NOT output or edit the code further.

Overview

What is Mastergo Magic Mcp?

Mastergo Magic Mcp is a standalone MCP (Model Context Protocol) service that connects MasterGo design tools with AI models. It enables AI models to directly retrieve DSL (Domain Specific Language) data from MasterGo design files, allowing AI-powered design-to-code workflows.

How to use Mastergo Magic Mcp?

Run the service directly with npx @mastergo/magic-mcp --token=YOUR_TOKEN. You can also configure it via environment variables or install it through the Smithery marketplace. The server integrates with MCP clients such as Claude Desktop, Cursor, Cline, Open Code, and LINGMA. Obtain a MasterGo personal access token from your account Security Settings (Team Edition or higher required). Design files must be placed in Team Projects, not the draft box.

Key features of Mastergo Magic Mcp

  • Retrieves DSL data from MasterGo design files
  • Runs directly with npx, no external dependencies
  • Supports multiple output formats: json, yaml, tree
  • Works with short links for design files
  • Supports HTTP/HTTPS proxy and custom headers
  • Debug mode for detailed error information

Use cases of Mastergo Magic Mcp

  • Extract SVG from a design layer and preview in HTML
  • Restore a design to code (e.g., Vue or React components)
  • Restore a design and save as an HTML file
  • Generate structured component development workflows
  • Retrieve component documentation from links

FAQ from Mastergo Magic Mcp

What token is required to use Mastergo Magic Mcp?

You need a MasterGo personal access token (MG_MCP_TOKEN). Generate it in your MasterGo account Security Settings. The token is passed via --token or the MG_MCP_TOKEN environment variable.

Does Mastergo Magic Mcp require a paid MasterGo account?

Yes, the tool requires a Team Edition or higher MasterGo account. Personal free accounts do not support MCP tool access.

Can Mastergo Magic Mcp access files in the draft box?

No. Design files must be placed in Team Projects. Files in the draft box cannot be accessed via MCP tools.

What output formats does Mastergo Magic Mcp support?

The design-data tools support three formats: json (default), yaml, and tree. The format can be set per call via a format parameter or globally via --format / DEFAULT_FORMAT. All formats round-trip without data loss.

How can I install Mastergo Magic Mcp via Smithery?

Visit the Smithery Marketplace page for Mastergo Magic Mcp, click "Connect" or "Install", select your MCP client (e.g., Claude Desktop, Cursor), and follow the prompts to complete configuration.

Frequently asked questions

What token is required to use Mastergo Magic Mcp?

You need a MasterGo personal access token (`MG_MCP_TOKEN`). Generate it in your MasterGo account Security Settings. The token is passed via `--token` or the `MG_MCP_TOKEN` environment variable.

Does Mastergo Magic Mcp require a paid MasterGo account?

Yes, the tool requires a **Team Edition** or higher MasterGo account. Personal free accounts do not support MCP tool access.

Can Mastergo Magic Mcp access files in the draft box?

No. Design files must be placed in **Team Projects**. Files in the draft box cannot be accessed via MCP tools.

What output formats does Mastergo Magic Mcp support?

The design-data tools support three formats: `json` (default), `yaml`, and `tree`. The format can be set per call via a `format` parameter or globally via `--format` / `DEFAULT_FORMAT`. All formats round-trip without data loss.

How can I install Mastergo Magic Mcp via Smithery?

Visit the Smithery Marketplace page for Mastergo Magic Mcp, click "Connect" or "Install", select your MCP client (e.g., Claude Desktop, Cursor), and follow the prompts to complete configuration.

Comments

More Other MCP servers