1. Home
  2. 21st.dev Magic AI Agent
  3. 21st.dev Magic AI Agent for Claude Desktop: Setup & Config

Data as of

21st.dev Magic AI Agent for Claude Desktop: Setup & Config

Claude Desktop: 21st.dev Magic AI Agent turns natural-language requests into customizable UI components inside supported coding tools.

What you can do with 21st.dev Magic AI Agent in Claude Desktop

Generate customizable UI components in your editor with previews and 21st.dev design inspiration.

  • Generate a UI component from a description in an editor chat.
  • Customize generated React component styling and behavior.

Before you start: 21st.dev Magic AI Agent in Claude Desktop

  • Node.js, with the latest LTS recommended
  • A supported IDE or MCP client
  • An API key from the Magic console

This follows the README's manual VS Code server configuration. Other supported clients also have installation instructions. Named MCP tools are not stated in the README.

21st.dev Magic AI Agent Claude Desktop configuration

  1. Choose Claude Desktop configuration scope

    For 21st.dev Magic AI Agent, open macOS: ~/Library/Application Support/Claude/claude_desktop_config.json Windows: %APPDATA%\Claude\claude_desktop_config.json. Merge under mcpServers via Settings → Developer → Edit Config when available.

  2. Add 21st.dev Magic AI Agent to Claude Desktop

    Use the magic-mcp entry below in mcpServers. Keep 21st.dev Magic AI Agent's documented stdio connection fields and your other Claude Desktop entries.

  3. Check 21st.dev Magic AI Agent in Claude Desktop

    21st.dev Magic AI Agent: Fully quit and reopen Claude Desktop; check developer diagnostics.

Config file · macOS: ~/Library/Application Support/Claude/claude_desktop_config.json

Windows: %APPDATA%\Claude\claude_desktop_config.json

JSON
{
  "mcpServers": {
    "magic-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "@21st-dev/magic@latest"
      ],
      "env": {
        "API_KEY": "<your 21st.dev Magic API key>"
      }
    }
  }
}

Troubleshooting 21st.dev Magic AI Agent in Claude Desktop

  • Fully quit and reopen Claude Desktop for 21st.dev Magic AI Agent. If npx @21st-dev/magic@latest (Node.js/npm) is missing, check the desktop process's PATH, which may differ from your terminal.
  • In Claude Desktop's 21st.dev Magic AI Agent entry, check API_KEY. Keep secrets out of shared screenshots and repositories.
  • 21st.dev Magic AI Agent uses stdio here: Claude Desktop must keep the configured process running; protocol output belongs on stdout and diagnostics on stderr.
  • Known limitation: Requires an API key and a supported development environment.
  • Known limitation: The README labels the product beta and some enhancement features as coming soon.
  • Known limitation: Generation limits are mentioned without exact allowances.
  • General Claude Desktop troubleshooting lives in the /clients/claude-desktop guide.

21st.dev Magic AI Agent — details. Claude Desktop guide

Frequently asked questions

Claude Desktop loads 21st.dev Magic AI Agent from claude_desktop_config.json: ~/Library/Application Support/Claude/ on macOS, or %APPDATA%\Claude\ on Windows. Open it via Settings → Developer → Edit Config when available.

Claude Desktop's magic-mcp example uses stdio.

21st.dev Magic AI Agent's Claude Desktop configuration invokes npx @21st-dev/magic@latest (Node.js/npm).

Claude Desktop's 21st.dev Magic AI Agent example references API_KEY. Check these names if startup or authentication fails; the example alone does not distinguish required from optional values.

The documented workflow uses /ui followed by a component description in the agent chat, then invokes Magic through the editor.

Yes. Generated components are editable, including their presentation, functionality, and behavior.