StackMCP

Set up Magic MCP (21st.dev) in Claude Code

Generate professional React and Tailwind UI components using 21st.dev's component library and AI builder from your editor.

1

Locate the config file

Claude Code reads MCP server configuration from the following file:

~/.claude.json

Create this file if it does not already exist.

2

Add the configuration

You can configure Magic MCP (21st.dev) using the CLI command or by editing the config file directly.

Option A: CLI command

bash
claude mcp add magic-mcp -e TWENTY_FIRST_API_KEY=YOUR_TWENTY_FIRST_API_KEY -- npx -y @21st-dev/magic

Option B: Config file

json
{
  "mcpServers": {
    "magic-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "@21st-dev/magic"
      ],
      "env": {
        "TWENTY_FIRST_API_KEY": "YOUR_TWENTY_FIRST_API_KEY"
      }
    }
  }
}
3

Set up environment variables

Magic MCP (21st.dev) requires the following environment variables:

TWENTY_FIRST_API_KEYRequired

21st.dev API key

4

Verify it works

Restart Claude Code. Magic MCP (21st.dev) should appear in your MCP server list with 4 tools available.

This server adds approximately 2,060 tokens to your context window for tool definitions.

Set up Magic MCP (21st.dev) in other editors

CursorVS CodeWindsurfClaude DesktopContinue
← Back to Magic MCP (21st.dev)