21st MCP

Searches the 21st.dev catalog of React components and returns their code, with optional UI generation.

Needs a 21st API key. Create one at 21st.dev and set it as API_KEY_21ST in your environment.

Before you start

Formerly Magic MCP. Keys from the old Magic console no longer work, so create a new one.
Search is free. Retrieving component code and generating UI with 21st AI are paid.

MCP server setup

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

Add to .mcp.json. Set API_KEY_21ST in your environment, then start Claude Code in the project and approve the 21st server when asked.

Agent setup prompt

Paste this into a coding agent to set 21st MCP up in the client you use.

Set up 21st MCP (https://21st.dev/mcp) for the AI client I use with this project.

MCP server "21st":
- Remote Streamable HTTP endpoint: https://21st.dev/api/mcp
- Needs a 21st API key, sent in the x-api-key header. Ask me to create it at https://21st.dev/mcp and set API_KEY_21ST in my environment. Reference API_KEY_21ST from the config instead of the value.
- Config file per client: Claude Code: .mcp.json; Cursor: .cursor/mcp.json; VS Code: .vscode/mcp.json; Codex: ~/.codex/config.toml.

Before you start:
- Formerly Magic MCP. Keys from the old Magic console no longer work, so create a new one.
- Search is free. Retrieving component code and generating UI with 21st AI are paid.

Steps:
1. Ask which client I use if you can't tell.
2. For Claude Code, Cursor, VS Code, or Codex, add the "21st" server to that client's config file, using its documented format. Keep every server and setting already in the file.
3. Reload the client, finish any sign-in, and confirm the server's tools are listed.

Never write a secret value into a config file or ask me to paste one into this chat. If anything here differs from the provider's guide, follow the guide.