21st.dev Magic

21st.dev Magic is an MCP server for generating React UI components through 21st.dev. Its connected endpoint exposes 0 tools after the service is authorized.

Add to Longwave

Source

Install elsewhere

Install 21st.dev Magic

Choose a harness. These instructions connect to the hosted MCP endpoint shown on this page.

Claude Code

Run this in your terminal. It adds a user-scoped server; use --scope project instead if it should apply only to the current project.

terminal

claude mcp add --scope user --transport http --header 'x-api-key: env:API_KEY_21ST' magic https://21st.dev/api/mcp

Replace each YOUR_… value with the required secret before running the command.

Claude Desktop

Open Claude Desktop → Settings → Developer → Edit Config. Add this entry to claude_desktop_config.json, save it, then fully restart Claude Desktop.

claude_desktop_config.json

{
  "mcpServers": {
    "magic": {
      "url": "https://21st.dev/api/mcp",
      "headers": {
        "x-api-key": "env:API_KEY_21ST"
      }
    }
  }
}

Replace each YOUR_… value in the env block with the required secret.

Codex

Run this in the Codex CLI:

terminal

codex mcp add magic --url https://21st.dev/api/mcp

Codex stores the same server in ~/.codex/config.toml (or a trusted project’s .codex/config.toml):

~/.codex/config.toml

[mcp_servers.magic]
url = "https://21st.dev/api/mcp"
http_headers = { "x-api-key" = "env:API_KEY_21ST" }

Replace each YOUR_… value with the required secret.

Cursor

Add this to .cursor/mcp.json for the current project or ~/.cursor/mcp.json for all projects. Cursor resolves ${env:NAME} from your environment.

.cursor/mcp.json

{
  "mcpServers": {
    "magic": {
      "type": "streamable-http",
      "url": "https://21st.dev/api/mcp",
      "headers": {
        "x-api-key": "env:API_KEY_21ST"
      }
    }
  }
}

OpenCode

Add this server under the mcp object in opencode.json or opencode.jsonc. You can also run opencode mcp add and follow its prompts.

opencode.json

{
  "$schema": "https://opencode.ai/config.json",
  "mcp": {
    "magic": {
      "type": "remote",
      "url": "https://21st.dev/api/mcp",
      "enabled": true,
      "headers": {
        "x-api-key": "env:API_KEY_21ST"
      }
    }
  }
}

OpenCode resolves each {env:NAME} reference from your environment.

What it does

21st.dev Magic MCP is for generating a first React UI pass from a concrete request. The agent still owns the integration work; Magic supplies a component-generation operation.

Generate a React component from a description.
Provide a UI request and relevant project context.
Use the returned component in the agent's implementation flow.
Keep the 21st.dev credential in the server configuration.
Inspect the live function schema before generating code.

Skills that ship with it

The skill's default is to install a real catalog component, which ships with its dependencies and dark-mode support. It generates new UI when nothing in the catalog fits or the user asks for custom UI. Longwave installs it with the server, and each name below opens the skill's source.

21st UI Install UI components from 21st.dev, generate new ones, and fetch brand logos as SVG.

Questions people ask

Does Magic MCP need an API key?

Yes. The catalog entry declares a 21st.dev API key. Store it in the server environment and never paste it into a prompt.

How do I install Magic MCP?

Connect the hosted 21st.dev Magic endpoint through an MCP client and provide the required credential. The service authorization is separate from installing React components in your project.

How do I use Magic MCP in Cursor?

Add the hosted Magic connection to Cursor's MCP settings and configure the 21st.dev key securely. Cursor can request React UI generation after the endpoint authorizes the connection.

Can Magic MCP generate React components?

Yes. React component generation is the catalog entry's stated purpose. The live function schema shows the request fields accepted by this version.

Is Magic MCP from 21st.dev?

Yes. This entry is the 21st.dev Magic MCP connection. Its generated UI output still needs review and integration in the target repository.

Is Magic MCP free?

The MCP connection requires a 21st.dev credential, so do not assume that the service is free. Check the current 21st.dev plan and usage terms.

Can Claude Code use Magic MCP?

Claude Code can use the hosted connection when its MCP setup supports the endpoint and the 21st.dev credential is available to the server.

Generate the first UI pass, then make it yours.

Give the agent a component generator without pretending generated code is finished product work.

Download Longwave