RELATED 01
plantuml-mcp
OFFICIAL SERVERPlantUML's own Java MCP server for checking, explaining and rendering PlantUML diagrams to SVG
8GitHub stars
20popularity score
MasterGo Magic MCP
Pulls layout data from MasterGo design files so an assistant can turn designs into code
Official · MasterGo TypeScript Remote (hosted) · Streamable HTTPLocal · stdio DesignDeveloper tools
74 popularity score ★ 288 ↓ 19k/wk
Connect your client
Remote (hosted)
Add in one click
Opens the app, which asks before it adds the server. Then replace each <NAME> in its settings with your value.
Or add it by command or config
CursorCursor's MCP configuration (mcp.json)
{
"mcpServers": {
"mastergo-magic-mcp": {
"type": "http",
"url": "https://mastergo.com/mcp/xf/sse",
"headers": {
"x-mg-useraccesstoken": "<YOUR_TOKEN>"
}
}
}
}Local (npm)
Add in one click
Opens the app, which asks before it adds the server. Then replace each <NAME> in its settings with your value.
Or add it by command or config
It needs MG_MCP_TOKEN, API_BASE_URL. Replace each <NAME> with your value.
Claude CodeTerminal
claude mcp add mastergo-magic -e MG_MCP_TOKEN=<MG_MCP_TOKEN> -e API_BASE_URL=<API_BASE_URL> -- npx -y @mastergo/magic-mcpClaude Desktopclaude_desktop_config.json
{
"mcpServers": {
"mastergo-magic": {
"command": "npx",
"args": [
"-y",
"@mastergo/magic-mcp"
],
"env": {
"MG_MCP_TOKEN": "<MG_MCP_TOKEN>",
"API_BASE_URL": "<API_BASE_URL>"
}
}
}
}Cursor~/.cursor/mcp.json
{
"mcpServers": {
"mastergo-magic": {
"command": "npx",
"args": [
"-y",
"@mastergo/magic-mcp"
],
"env": {
"MG_MCP_TOKEN": "<MG_MCP_TOKEN>",
"API_BASE_URL": "<API_BASE_URL>"
}
}
}
}VS Code.vscode/mcp.json
{
"servers": {
"mastergo-magic": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"@mastergo/magic-mcp"
],
"env": {
"MG_MCP_TOKEN": "<MG_MCP_TOKEN>",
"API_BASE_URL": "<API_BASE_URL>"
}
}
}
}Codex~/.codex/config.toml
[mcp_servers.mastergo-magic]
command = "npx"
args = ["-y", "@mastergo/magic-mcp"]
[mcp_servers.mastergo-magic.env]
MG_MCP_TOKEN = "<MG_MCP_TOKEN>"
API_BASE_URL = "<API_BASE_URL>"Gemini CLITerminal
gemini mcp add --scope user -e MG_MCP_TOKEN=<MG_MCP_TOKEN> -e API_BASE_URL=<API_BASE_URL> mastergo-magic npx -- -y @mastergo/magic-mcpSettings 8
MG_MCP_TOKEN |
Required: MasterGo personal access token (MASTERGO_API_TOKEN or --token also work). |
|---|---|
API_BASE_URL |
Required: MasterGo API address, such as https://mastergo.com (or --url); there is no working default. |
DEFAULT_FORMAT |
Optional: Default output format for design data: json, yaml or tree. |
MG_OUTPUT_ROOT |
Optional: Folder applyDesign may write into; defaults to the working directory. |
MG_NO_PREFIX |
Optional: Set to 1, true or yes to drop the mcp__ prefix from tool names. |
MG_EXTRA_HEADERS |
Optional: JSON object of extra HTTP headers to send to the API. |
RULES |
Optional: JSON array of design rules to apply. |
HTTPS_PROXY |
Optional: HTTP(S) proxy for API requests (--proxy takes priority). |
What it does
MasterGo Magic MCP is the MasterGo team's own server for its MasterGo design tool. Give it a link to a file or a layer and it fetches that design's structure from the MasterGo API: layout, styles, text, icons as SVG, component documentation links and page layer lists. An assistant then uses that data to rebuild the design as HTML or as Vue, React or Flutter components.
It runs on your machine over stdio through npx. A hosted endpoint at mastergo.com also exists, and it takes your personal access token in a header. Design-data tools can return JSON (the default), YAML or an experimental compact tree format, chosen per call or set for the whole session with --format or DEFAULT_FORMAT.
The README describes a handful of tools, but version 0.2.9 registers 12 (src/index.ts). They include getD2c and applyDesign, which write finished HTML and its image and SVG assets to disk, getComponentGenerator and getFlutterGenerator, which write workflow and asset files into a project folder, and C2d, which reads a local HTML file and sends it to MasterGo to sync code back into a design. Tool names carry an mcp__ prefix unless --no-prefix or MG_NO_PREFIX is set. mcp__getPageLayers keeps that prefix either way, because its name is fixed in the code.
What it needs
| To run it yourself | Node.js |
|---|
Node.js with npx. You need a MasterGo account on the Team Edition or higher, because the free personal edition is refused. Design files must sit in a Team Project, not in drafts. You also need a personal access token, generated under Security Settings in your MasterGo personal settings, and the API address (https://mastergo.com) passed as --url or API_BASE_URL.
Limits
Files in your draft box cannot be read, and free personal accounts get a "no permission" error. The README says --url defaults to http://localhost:3000. In v0.2.9 the code (src/utils/api.ts) has no default and stops at the first request if neither --url nor API_BASE_URL is set. In the code, MG_MCP_TOKEN and MASTERGO_API_TOKEN take precedence over --token. The tree output format is marked experimental. API calls time out after 30 seconds, or 120 seconds for the heavier calls, and C2d refuses files over 10 MB.
Who it suits
It suits front-end developers on a MasterGo team plan who want an assistant to turn designs into HTML, Vue, React or Flutter code using the design's real measurements, text and SVG icons. It is the maker's own server, but it only works with MasterGo: teams whose designs live in Figma or another tool need a server for that tool. People on the free MasterGo plan cannot use it. If you do not want files written to your machine, the hosted endpoint avoids a local install, but the file-writing tools then have nowhere local to save.
Tools 11 of 12
getDesignSections- Splits a large design into sections and returns each section's layout data
mcp__getPageLayers- Lists a page's layers with id, name, type, depth and parent
getDsl- Fetches the structured layout and style data for a file or layer
getD2c- Gets generated code for a design and saves the HTML and its images and SVGs to disk
C2d- Reads a local HTML file and sends it to MasterGo to update a design
getComponentLink- Fetches the component documentation that a design's data links to
getMeta- Returns file metadata and the design rules to follow when writing code
getComponentGenerator- Writes a Vue or React component workflow and specs into a project's .mastergo folder
getFlutterGenerator- Writes a Flutter build workflow, downloads assets and can register them in pubspec.yaml
extractSvg- Extracts the SVG markup of icons and vector shapes from a layer
applyDesign- Swaps placeholders in generated code for real SVGs and text, then writes the file