Labsco
MCP SERVER

MasterGo Magic MCP

by mastergo-design

Pull a MasterGo design into code section by section instead of as one enormous DSL blob, then push a finished HTML file back into the design file.

Design Systems & UI Component LibrariesVerified
Summary
A large design file stops costing you a context window.

The primary read tool returns section metadata and totals first and contents only when you ask for a specific sectionIndex, which is the difference between browsing a design and pasting one. Assets follow the same rule: design-to-code lands SVG and image resources on disk under their resourcePath and returns a summary, and the finalisation pass swaps the placeholders back for character-exact SVG at write time. The full-DSL tool is still there as a fallback, with its own warning that it can exceed context limits on complex designs.

What it is

A MasterGo bridge that reads a design file as sections or as raw DSL, writes generated code and assets to disk, and sends local code back into the design.

What you get
  • A layout overview listing every section with its id, name, type, node count, a 20-character text preview and a page-absolute bounding box — or one section's contents when you name its index
  • The full DSL in a single response as the fallback path when the section view is unavailable
  • Design-to-code output written to disk: the returned code saved as HTML, SVG and image resources saved under their resourcePath, and only a summary returned to the session
  • Code-to-design: a local HTML file sent to MasterGo so hand-written code lands back in the design file
  • SVG extraction that walks PATH nodes, resolves their colour references and emits markup, paginated for files with many icons
  • A finalisation pass that replaces every @@SVG:{svgShortKey}@@ and text placeholder with character-exact data from the cache and writes the file to disk
  • Design data serialised as json, yaml or tree — tree encodes structural keys positionally and keeps repeated style values in one globalVars block, so designs with heavy style reuse cost the fewest tokens
  • Structured workflows for component and Flutter development, component documentation fetched from componentDocumentLinks, and site-level rules returned as markdown
Requirements

A MasterGo personal access token, generated under Security Settings in personal settings and passed as --token= or in MG_MCP_TOKEN, plus Node so npx can run the package. Two conditions decide whether calls come back with data at all: the account has to be Team Edition or higher, and the design file has to live in a Team Project — files in the draft box are not reachable. A hosted endpoint at https://mastergo.com/mcp/xf/sse takes the same token as a header instead. Some clients silently drop tools whose names carry two __ separators; --no-prefix registers them as getDsl rather than mcp__getDsl. ISC.

Setup effort

One command plus a key — npx @mastergo/magic-mcp --token=YOUR_TOKEN [--url=API_URL] [--rule=RULE_NAME] [--proxy=PROXY_URL] [--format=FORMAT] [--header "Key: Value"] [--debug] [--no-rule] [--no-prefix], then supply credentials