Magic MCP vs Melta UI

A side-by-side look at the Magic MCP and Melta UI MCP servers: transport, auth, tools, quality signals, and the config to install either one in Claude, Cursor, Windsurf or VS Code.

Magic MCP logoMagic MCPArchitecture & Design · Local subprocess (stdio)Create crafted UI components inspired by the best 21st.dev design engineers.53GoodAuth: api key requiredMelta UI logoMelta UILegal · Local subprocess (stdio)AI-Ready design system MCP: melta UI tokens, component contracts, 99 rules, check_html self-verify69GreatAuth: not declared

Verdict: choose Magic MCP for architecture & design work as a local process; choose Melta UI for legal as a local process. You can also run both side by side in one mcpServers block.

Which MCP server should you choose?

Magic MCP logoChoose 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.
Explore Magic MCP

Melta UI logoChoose Melta UI when

  • You need dedicated capabilities in the Legal domain.
  • You prefer a local stdio subprocess transport.
  • You want tools like get_token, get_component, check_rule.
Explore Melta UI

Feature & specification comparison

Rows where the two servers differ are marked.

SpecMagic MCP logoMagic MCPMelta UI logoMelta UI
CategoryArchitecture & DesignLegal
Quality signal53/100 · Good69/100 · Great
Install commandConfirmedConfirmed
TransportLocal subprocess (stdio)Local subprocess (stdio)
AuthAPI key requiredNot declared
PricingPaid serviceNot declared
Required env varsTWENTY_FIRST_API_KEYAPI_KEY_21STNone listed
Verified ownerCommunity listingCommunity listing
GitHub stars6,209202
Directory activity 16 views 1 installs 0 upvotes 4 views 0 installs 0 upvotes
ToolsNot listed6

Tools & capabilities

Magic MCP tools

No tool names declared yet. Check the project README from the listing page.

Melta UI tools 6

  • get_tokenGet a design token by dot-path. Returns the token object with its value and class mapping.
  • get_componentGet component metadata including variants, sizes, accessibility requirements, HTML sample, per-state specs (stateSpecs: disabled/loading/open/empty etc. — each with delta class strings + aria changes), and anatomy parts (overlay/container/th etc. with element/roles/class). Prefer these structured fields over inferring states from the HTML sample.
  • check_ruleCheck class strings against this design system's prohibition rules. Returns violations with reasons and alternatives.
  • check_htmlLint a full HTML/JSX source against melta-ui rules — the same checks as CI and the PostToolUse hook (class rules + html-attr rules + composition rules for HTML). Use this AFTER generating UI code to self-verify before presenting it. Response always includes coverage info (manual rules cannot be auto-checked).
  • searchSearch across tokens and components by keyword. Matches against names, values, class strings, and descriptions. Returns up to 20 results (truncated flag when more matched).
  • get_rulesGet melta-ui prohibition rules from rules.json (107 total). Use this to retrieve manual/contextual rules that check_rule cannot auto-detect. Supports filtering by category, severity, or detector.

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 (Claude Desktop / Cursor)
{
  "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"
      }
    }
  }
}

Melta UI

mcpServers (Claude Desktop / Cursor)
{
  "mcpServers": {
    "melta-ui": {
      "command": "npx",
      "args": [
        "-y",
        "melta-ds-mcp"
      ]
    }
  }
}

Frequently asked questions

Magic MCP is categorized under Architecture & Design and uses a local stdio subprocess. Melta UI belongs to Legal and uses a local stdio subprocess. Pick Magic MCP for architecture & design work and Melta UI for legal.

Copy the mcpServers block from the config section on this page into your client's config (for example claude_desktop_config.json or ~/.cursor/mcp.json), then fully restart the client.

Magic MCP is listed as a paid service. Auth: api key required. Melta UI has no declared pricing — check the project's own site. If a server needs environment variables such as API keys, define them under the env key in your client's MCP config.

Yes. MCP clients support multiple servers: add 21st-dev-magic-mcp and melta-ui as separate keys in the same mcpServers object, and your assistant will call tools from either one.

On AllMCPs, Magic MCP has a quality signal of 53/100 (Good) with 16 views, 1 installs and 6,209 GitHub stars. Melta UI has 69/100 (Great) with 4 views, 0 installs and 202 GitHub stars.