# 21st MCP

> Lets your agent search 21st.dev's library of React and Tailwind components, add their code to your project, and draft new UI with 21st AI.

21st.dev's own MCP server, formerly called Magic MCP. It connects your agent to 21st.dev's community library of React and Tailwind (shadcn-compatible) components, themes and templates, so it can find a piece that fits, fetch its code and write it into your project instead of building UI from scratch. With 21st AI turned on, it can also draft new UI from a prompt.

What you can do with it
- Search the library for components, themes and templates in plain words, such as "pricing table" or "animated hero"
- Fetch a component's full code and add it to your project
- Find UI inspiration, and brand logos as ready-to-paste JSX or TSX
- Keep bookmarks and bookmark lists, and work with your team's library
- Draft UI variants from a prompt with 21st AI
- Check your usage and whether 21st AI is on for your account

How it connects
21st.dev hosts it at https://21st.dev/api/mcp (streamable HTTP). Most agents send a free 21st.dev API key in the x-api-key header (Authorization: Bearer works too); make one at 21st.dev/settings/api-keys. Claude Desktop and Lovable sign in with OAuth instead, with no key to paste. Keys from the old Magic console were reset, so make a fresh one.

Plans
- Free: search is unlimited, and you can retrieve component code twice a day across the web, MCP and the CLI
- Builder, from $6 a month billed yearly: unlimited installs over MCP and the CLI
- Builder + AI, from $15 a month billed yearly: adds AI credits for 21st AI

Good to know
The tools your agent sees depend on your account: the generate tools only appear when 21st AI is enabled. Configs that still use the @21st-dev/magic package keep working, because it now forwards every call to this server. 21st.dev also offers a CLI (npx @21st-dev/cli) and a Claude Code plugin that bundle this server with its UI skills.

- Type: Plugin
- Made by: 21st
- Category: Design
- Formats: Remote MCP
- Version: 1.0.1
- Website: https://21st.dev/mcp
- Source: https://github.com/21st-dev/magic-mcp
- Page: https://pluginboard.ai/plugins/21st-mcp

## Works with

- ChatGPT
- Claude
- Muse
- Grok Bot
- Gemini
- Grok
- GitHub Copilot
- Cursor
- Claude Code
- Codex
- Antigravity
- Gemini CLI
- Replit
- OpenClaw
- OpenCode
- Hermes Agent

## Install

You'll need:

- `x-api-key` (required): Your 21st.dev API key from https://21st.dev/settings/api-keys. Authentication is required for discovery and tool calls. Generation tools are listed only when the account has hosted AI access.

Replace each `<NAME>` placeholder with your own value.

### ChatGPT

In ChatGPT on the web: Plugins → + → Add custom MCP server, then paste https://21st.dev/api/mcp under Connection. Business and Enterprise plans; Pro can add read-only servers.

### Claude

In Claude (web or desktop): Customize → Connectors → Add custom connector, then paste https://21st.dev/api/mcp

### Muse

In Muse: In a Muse chat, ask it to create a custom connector for the MCP server at https://21st.dev/api/mcp. Then tap Connect on the card it shows and sign in, or add your key.

### Grok Bot

In Grok Bot: In a chat with your Bot, say "Add this MCP server: https://21st.dev/api/mcp". It confirms the details with you and sets it up, and the tools are ready from your next message.

### Grok

In Grok on the web: At grok.com/connectors: New Connector → Custom, then enter https://21st.dev/api/mcp and sign in if it asks.

### GitHub Copilot

Add to VS Code: vscode:mcp/install?%7B%22name%22%3A%2221st-mcp%22%2C%22type%22%3A%22http%22%2C%22url%22%3A%22https%3A%2F%2F21st.dev%2Fapi%2Fmcp%22%7D

Copilot CLI:

```shell
copilot mcp add --transport http --header 'x-api-key: <x-api-key>' 21st-mcp https://21st.dev/api/mcp
```

### Cursor

Add to Cursor: cursor://anysphere.cursor-deeplink/mcp/install?name=21st-mcp&config=eyJ1cmwiOiJodHRwczovLzIxc3QuZGV2L2FwaS9tY3AiLCJoZWFkZXJzIjp7IngtYXBpLWtleSI6Ijx4LWFwaS1rZXk%2BIn19

Add to .cursor/mcp.json:

```json
{
  "mcpServers": {
    "21st-mcp": {
      "url": "https://21st.dev/api/mcp",
      "headers": {
        "x-api-key": "<x-api-key>"
      }
    }
  }
}
```

### Claude Code

Run in your terminal:

```shell
claude mcp add --transport http --header 'x-api-key: <x-api-key>' 21st-mcp https://21st.dev/api/mcp
```

### Codex

Run in your terminal:

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

### Antigravity

Add to ~/.gemini/config/mcp_config.json:

```json
{
  "mcpServers": {
    "21st-mcp": {
      "url": "https://21st.dev/api/mcp",
      "headers": {
        "x-api-key": "<x-api-key>"
      }
    }
  }
}
```

### Gemini CLI

Run in your terminal:

```shell
gemini mcp add --transport http --header 'x-api-key: <x-api-key>' 21st-mcp https://21st.dev/api/mcp
```

### Replit

In Replit: At replit.com/integrations, open MCP Servers → + Add MCP server, paste https://21st.dev/api/mcp (add any headers under Advanced settings), then click Test & save.

### OpenClaw

Run in your terminal:

```shell
openclaw mcp add 21st-mcp --url https://21st.dev/api/mcp --transport streamable-http
```

If it needs a key or sign-in: For https://21st.dev/api/mcp, add --header NAME=value for each header it needs, or --auth oauth and then run openclaw mcp login 21st-mcp.

### OpenCode

Run in your terminal:

```shell
opencode mcp add 21st-mcp --url https://21st.dev/api/mcp
```

If it needs a key: For https://21st.dev/api/mcp, add --header 'NAME=value' for each header it needs. Add --global to use it in every project.

### Hermes Agent

Run in your terminal:

```shell
hermes mcp add 21st-mcp --url https://21st.dev/api/mcp
```

Add to ~/.hermes/config.yaml:

```json
{
  "mcp_servers": {
    "21st-mcp": {
      "url": "https://21st.dev/api/mcp",
      "headers": {
        "x-api-key": "<x-api-key>"
      }
    }
  }
}
```

If it signs in with OAuth: If https://21st.dev/api/mcp asks you to sign in, add --auth oauth to the command, or auth: oauth to its entry.

---
From Pluginboard (https://pluginboard.ai).