A side-by-side look at the Magic MCP and Primitiv MCP servers: transport, auth, tools, quality signals, and the config to install either one in Claude, Cursor, Windsurf or VS Code.
Verdict: choose Magic MCP for architecture & design work as a local process; choose Primitiv for architecture & design as a local process. You can also run both side by side in one mcpServers block.
TWENTY_FIRST_API_KEY, API_KEY_21ST.get_design_context, get_token, get_component.Rows where the two servers differ are marked.
| Spec | ||
|---|---|---|
| Category | Architecture & Design | Architecture & Design |
| Quality signal | 53/100 · Good | 65/100 · Great |
| Install command | Confirmed | Confirmed |
| Transport | Local subprocess (stdio) | Local subprocess (stdio) |
| Auth | API key required | No auth required |
| Pricing | Paid service | Free |
| Required env vars | TWENTY_FIRST_API_KEYAPI_KEY_21ST | None listed |
| Verified owner | Community listing | Community listing |
| GitHub stars | 6,138 | 21 |
| Directory activity | 16 views 1 installs 0 upvotes | 4 views 0 installs 0 upvotes |
| Tools | Not listed | 6 |
| Full listing | View Magic MCP | View Primitiv |
No tool names declared yet. Check the project README from the listing page.
get_design_contextGet tokens, components, conflicts, inferred rules, and violation count. Default (no category) returns a summary with counts. Pass `category: "all" \get_tokenLook up a specific token by name. Pass `category` to narrow search (e.g. `"colors"`, `"spacing"`, `"borderRadius"`); aliases like `"radius"` / `"z-index"` are normalized.get_componentLook up a specific component by name. Returns props, variants, source provenance, and `kind` — `component`, `screen`, `provider`, `icon`, or `other`, so agents reuse real UI and skip screens/providers/icons.get_conflictsGet conflicts between sources. Pass `type: "all" \get_inferred_rulesGet the design rules Primitiv has extracted from your codebase patterns. Pass `category` to filter.get_violationsList token-misuse violations — hardcoded literals in source that bypass the contract, with a suggested token when one fits. Pass `category: "all" \Paste either block (or both) into your client config, e.g. claude_desktop_config.json or ~/.cursor/mcp.json. We only show a config when the install command is confirmed.
{
"mcpServers": {
"21st-dev-magic-mcp": {
"command": "npx",
"args": [
"-y",
"@21st-dev/cli@latest"
],
"env": {
"TWENTY_FIRST_API_KEY": "YOUR_TWENTY_FIRST_API_KEY_HERE",
"API_KEY_21ST": "YOUR_API_KEY_21ST_HERE"
}
}
}
}
{
"mcpServers": {
"ai-by-design-primitiv": {
"command": "npx",
"args": [
"-y",
"@ai-by-design/primitiv"
]
}
}
}