MCP Directory

How to add 21st.dev Magic MCP to Claude Desktop

Generate beautiful, modern UI components from natural-language descriptions inside your IDE. Paste the config into ~/Library/Application Support/Claude/claude_desktop_config.json and restart Claude Desktop.

Last updated June 14, 2026 · 5.2k★ · stdio · apikey · official

Claude Desktop config for 21st.dev Magic MCP

npx @21st-dev/cli@latest install <client> --api-key <key>
{
  "mcpServers": {
    "21st-dev-magic-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "@21st-dev/magic@latest",
        "API_KEY=\"your-api-key\""
      ]
    }
  }
}

Setup steps

  1. 1Open Claude Desktop → Settings → Developer → Edit Config (this opens ~/Library/Application Support/Claude/claude_desktop_config.json).
  2. 2Paste the 21st.dev Magic MCP config below under the top-level "mcpServers" key.
  3. 3Fill in any placeholder secrets (API keys, paths) in the snippet.
  4. 4Save the file, then fully quit and reopen Claude Desktop.
  5. 5Open a chat and confirm 21st.dev Magic MCP's tools appear under the 🔌 tools menu.

Before you start

  • Node.js (latest LTS version recommended)
  • One of the supported IDEs: Cursor, Windsurf, or VSCode (with Cline extension)
  • A 21st.dev Magic API key generated at https://21st.dev/magic/console

What 21st.dev Magic MCP can do in Claude Desktop

21st_magic_component_builder

Creates a new, polished UI component from a natural-language description and adds it to your project (the `/ui` create workflow).

21st_magic_component_inspiration

Fetches UI component inspiration and pre-built, customizable components from the 21st.dev library.

21st_magic_component_refiner

Improves and refines existing UI components with advanced features and enhancements.

logo_search

Searches and integrates professional brand assets and logos via SVGL.

Security

Requires a 21st.dev Magic API key generated at https://21st.dev/magic/console. In the primary manual config the key is passed as a command-line argument (API_KEY="your-api-key"); the VS Code setup instead reads it from an env var via a prompted input. Magic AI Agent only writes or modifies files related to the components it generates.

21st.dev Magic MCP + Claude Desktop FAQ

Where is the Claude Desktop config file?

Claude Desktop reads MCP servers from ~/Library/Application Support/Claude/claude_desktop_config.json. Paste the 21st.dev Magic MCP config there under the "mcpServers" key and restart the client.

Is 21st.dev Magic MCP safe to use with Claude Desktop?

Requires a 21st.dev Magic API key generated at https://21st.dev/magic/console. In the primary manual config the key is passed as a command-line argument (API_KEY="your-api-key"); the VS Code setup instead reads it from an env var via a prompted input. Magic AI Agent only writes or modifies files related to the components it generates.

How does Magic AI Agent handle my codebase?

Magic AI Agent only writes or modifies files related to the components it generates. It follows your project's code style and structure and integrates with your existing codebase without affecting other parts of your application.

Can I customize the generated components?

Yes. All generated components are fully editable and come with well-structured code, so you can modify styling, functionality, and behavior like any other React component.

What happens if I run out of generations?

If you exceed your monthly generation limit you'll be prompted to upgrade your plan. You can upgrade at any time, and existing components remain fully functional.

View repo Full 21st.dev Magic MCP page