Magic MCP vs Mockups Gallery
A side-by-side look at the Magic MCP and Mockups Gallery 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 Mockups Gallery for architecture & design. You can also run both side by side in one mcpServers block.
Which MCP server should you choose?
Choose Magic MCP when
- You need dedicated capabilities in the Architecture & Design domain.
- You prefer a local stdio subprocess transport.
- Its auth model fits you: API key required.
- You have the keys it needs:
TWENTY_FIRST_API_KEY, API_KEY_21ST.
Choose Mockups Gallery when
- You need dedicated capabilities in the Architecture & Design domain.
- You want tools like
send_mockup, list_mockups, get_mockup.
Feature & specification comparison
Rows where the two servers differ are marked.
| Spec | ||
|---|---|---|
| Category | Architecture & Design | Architecture & Design |
| Quality signal | 53/100 · Good | 43/100 · Fair |
| Install command | Confirmed | Not confirmed yet |
| Transport | Local subprocess (stdio) | — |
| Auth | API key required | Not declared |
| Pricing | Paid service | Not declared |
| Required env vars | TWENTY_FIRST_API_KEYAPI_KEY_21ST | None listed |
| Verified owner | Community listing | Community listing |
| GitHub stars | 6,236 | 2 |
| Directory activity | 16 views 1 installs 0 upvotes | 0 views 0 installs 0 upvotes |
| Tools | Not listed | 8 |
| Full listing | View Magic MCP | View Mockups Gallery |
Tools & capabilities
Magic MCP tools
No tool names declared yet. Check the project README from the listing page.
Mockups Gallery tools 8
send_mockupSend HTML/SVG (raw string) or PNG/JPG (base64) to the gallery. Supports `parent` and `fold` (see Versions). Returns a gallery URL.list_mockupsList mockups reverse-chronologically, optionally filtered by project.get_mockupGet a specific mockup by UUID with view and gallery URLs, plus its version list. Curl the `view_url` to read the file content.update_mockupUpdate metadata (title, description, tags), or add a new version by supplying `content` (earlier versions are kept).split_versionSplit one version out of its design into its own standalone mockup — reverses a fold.delete_mockupDelete a mockup, or (with `version`) just one version — removes the DB record(s) and file(s) on disk.tag_mockupAdd or remove tags on an existing mockup.set_created_atChange the created date of a mockup (or one version). Useful for backdating uploads or reordering the timeline.
Ready-to-paste client configs
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.
Magic MCP
{
"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"
}
}
}
}
Mockups Gallery
No confirmed install command for Mockups Gallery yet — follow the setup steps linked from its listing page rather than a guessed package name.