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

Data as of

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

Claude Code: 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 Code

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.
  • Use SVGL logos and brand assets in interface work.

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

  • 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 Code configuration

  1. Choose Claude Code configuration scope

    For 21st.dev Magic AI Agent, open Project scope: .mcp.json at the repository root. Project JSON: merge into mcpServers; user scope: use the CLI.

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

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

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

    21st.dev Magic AI Agent: Inspect claude mcp list and /mcp status.

Config file · Project scope: .mcp.json at the repository root

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

CLI (POSIX shell)
claude mcp add-json --scope project 'magic-mcp' '{"type":"stdio","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 Code

  • If 21st.dev Magic AI Agent fails to start, check npx @21st-dev/magic@latest (Node.js/npm), the working directory, and Claude Code's selected scope; inspect claude mcp list and /mcp.
  • 21st.dev Magic AI Agent: check API_KEY; keep credentials out of shared .mcp.json.
  • 21st.dev Magic AI Agent uses stdio here: Claude Code 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 Code troubleshooting lives in the /clients/claude-code guide.

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

Frequently asked questions

Register 21st.dev Magic AI Agent with the displayed claude mcp add-json --scope project command, or merge the JSON into .mcp.json at the repository root.

Claude Code's magic-mcp example uses stdio.

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

Claude Code'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.

The feature list marks advanced component enhancement and animation improvements as coming soon.