Using MasterGo MCP with Cursor to Generate Frontend Code from DSL

MasterGo recently released MCP Server, allowing Canvas data to be accessed in Cursor and enabling code generation via an Agent.

How to Generate a Token

Open MasterGo, click the avatar in the top‑right corner, go to Personal Settings → Security Settings, and generate a token.

Install MasterGo MCP

Using Cursor as an example, open Cursor, go to Preferences → MCP Configuration, and click “Add new global MCP Server”. This creates an mcp.json file where you paste the following configuration, replacing mg_token with the token you generated:

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

If you already have an MCP Server configured, simply add the MasterGo entry to your existing JSON.

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

Save the file and restart Cursor; the MasterGo MCP tools should appear if the installation succeeded.

MasterGo MCP Tools

The two main tools are getDSL and getComponentLink . DSL is the data structure of the MasterGo canvas, enabling AI to convert design data into code.

Generating Pages from DSL

Select the desired layer in the canvas and copy its container link.

Paste the link into Cursor and enable Agent mode.

Generate code, which triggers getDSL to fetch the layer’s DSL and then produce the corresponding HTML.

The generated HTML can be further transformed into framework‑specific code such as React, Vue, or Flutter because the DSL is platform‑agnostic.

Using getComponentLink

When you need component‑based code (e.g., Ant Design components) instead of plain HTML, attach component documentation links to the design layers. The AI will fetch these docs via getComponentLink and generate component code accordingly.

Example: after configuring a Button component’s documentation link, select the container, copy its link, and instruct the AI in Cursor to generate the front‑end component, resulting in Ant Design‑styled code.

Conclusion

This article introduces basic usage of MasterGo MCP, including token generation, MCP installation, and using getDSL and getComponentLink to produce front‑end code. Advanced scenarios could involve generating Tailwind CSS, CSS variables, or converting DSL to TypeScript JSX and further optimizing with large language models.