What Is 21st MCP? Ready-Made UI Components for Your Assistant, Setup, Daily Limit and Pricing

You ask your coding assistant (Claude Code, Cursor and the like) for a component or a brand logo; 21st MCP searches the 21st.dev catalog for a ready-made React and Tailwind component, fetches its code and returns logos as JSX. It is 21st.dev's remote MCP server (formerly Magic MCP) at https://21st.dev/api/mcp; it requires an account and an API key, with no anonymous use. Search is free, but on a free account component code is limited to 2 per day across Web, MCP and CLI combined; unlimited code comes with Builder, and AI generation only with Builder + AI. Builder alone does not unlock AI.

What it does: Brings ready-made React components and logo code to your assistant
Type: MCP server (remote, hosted by 21st.dev)
Where: Claude Code, Cursor, VS Code, Codex, Devin
Account: Required; no anonymous use
Writes files?: No; returns the code to the assistant
Turkish: Not stated in the official documentation
Price: Free: 2 component codes a day; unlimited code $6/month

What does 21st MCP do?

MCP is the standard that lets AI programs connect to outside tools. 21st MCP opens the community component catalog on 21st.dev to your assistant: you say "search 21st for a pricing table", the assistant searches the catalog, fetches the code of the component you pick and adapts it to your project. The official documentation puts the catalog at roughly ten to twelve thousand components (the number varies between sources).

YouAsk for a component or a logo

AssistantClaude Code, Cursor, VS Code, Codex

21st MCP21st.dev's remote server

21st.dev catalogReact and Tailwind component code, logos

Returns the code to the assistant; it does not write files itself. 2 component codes a day on a free account.

Search for ready-made componentsWhat you get: Name, description, preview and install IDNeeds a connection Fetch a component's codeWhat you get: The component's full codeNeeds a connection

It also fetches a company's logo as paste-ready JSX (one brand per call) and, if AI access is enabled on your account, generates the interface you describe with 21st AI. The MCP server does not write your project files; it returns the code to the assistant, and the assistant writes it into the project.

Who it's for: people building interfaces with React and Tailwind (shadcn-compatible). If you don't write code, it is of no use to you.

How do you install 21st MCP?

First create a 21st.dev account and get an API key from https://21st.dev/mcp. Then install with a single command or by hand. The commands are taken verbatim from the official documentation.

Per client (cursor, claude, codex, vscode, devin)› npx @21st-dev/cli@latest init --client claude

The command prints the client's MCP configuration; add --write and it writes it, merging with your existing configuration. It does not generate the key; it leaves a placeholder and you paste the key in yourself.

MCP configuration (README)› { "mcpServers": { "21st": { "url": "https://21st.dev/api/mcp", "headers": { "x-api-key": "YOUR_21ST_API_KEY" } } } }

The README describes the server as a plain HTTP MCP server. There is also a read-only endpoint: https://21st.dev/api/mcp/readonly.

Add the plugin› claude plugin marketplace add 21st-dev/magic-mcp

Then type /plugin install 21st and put your API key in the API_KEY_21ST environment variable.

An open issue (issue #82, September 16, 2026) says the plugin skips the server in some Claude Code versions: the type field is missing from the .mcp.json file. If that happens, use the CLI route in the "One command" tab.

You can install the "21st" plugin from the Cursor Marketplace and enter the key under Plugins › Configure. For Codex:

Codex› codex plugin marketplace add 21st-dev/magic-mcp

Then install "21st" from /plugins in Codex. For Grok Build, the README gives a separate plugin command.

An old Magic MCP configuration may not work: old keys were reset. Get a new key from 21st.dev/mcp.

How do you use 21st MCP?

Once installed, write your request as usual and mention 21st. The assistant searches first (free), and when you pick one it fetches the code (on the free plan this counts toward the daily quota).

Search for a component"Search 21st for pricing table components and suggest the three best fits with their previews. Don't fetch the code yet."

Add the chosen one to the project"Fetch the code of the second component, adapt it to my project's color and font settings and add it under /components."

Get a logo"Use 21st to fetch the Stripe logo as JSX and add it to the footer."

Search from the terminal (free)› 21st search "pricing table"

See your remaining quota with 21st usage --json. The 2 daily credits are spent on fetching code, not on searching; search first, then fetch only the one you like.

Which programs does 21st MCP work with?

Claude CodeYes	CLI setup and a plugin route; the plugin has an open issue.
CursorYes	CLI and the Cursor Marketplace plugin.
VS CodeYes	CLI: init --client vscode.
CodexYes	CLI and a plugin command.
Devin (formerly Windsurf), Grok BuildYes	A devin option in the CLI; a plugin command for Grok in the documentation.
LovableUnclear	A tab appears on the page; the setup step is not clear in the official documentation.
ChatGPT, Claude webUnclear	The documentation describes OAuth in general; there is no 21st-specific step in it.

"Not in the documentation" does not mean it doesn't work. The list is compiled from the 21st documentation.

What does 21st MCP access, and what data leaves your machine?

Does it access your files?

It does not write files to your project. The server runs on 21st.dev; it returns the code to the assistant, and the assistant is the one that writes to the project.

Data sent out

Your search queries and your prompt go to the 21st.dev server. If you use the inspiration tool or the --context option, project design context may also be sent; exactly which data is sent is not clear in the official documentation.

Writes on the account side

There are tools for bookmarks, the team library and profile management. AI generation spends credits. A full list of tool names and the read/write split is not in the documentation.

Deleting

The documentation lists no delete action as an MCP tool. The CLI has commands that delete a component you published (21st delete ... --yes).

The old @21st-dev/magic relay, if it can't find its key, also reads the generic API_KEY environment variable and sends it to 21st.dev (in the source code: src/index.ts). If you have an old installation, make sure it isn't sharing another service's API_KEY variable this way, or switch to the new setup tool. No advisory is listed in GitHub Security Advisories. That does not mean "safe".

Is 21st MCP free? Plans and daily limit

Partly. On a free account, catalog and logo search are open; fetching, copying and installing component code is limited to 2 per day across Web, MCP and CLI combined. "Paid" is not a single tier: unlimited code comes with Builder, while AI generation is only in Builder + AI and Team + AI. Prices are in US dollars and apply when billed yearly.

Free$0

Catalog and logo search
2 component codes a day (combined)
Unlimited code
AI generation

Builder$6 /month (billed yearly)

Unlimited code and installs
AI credits

Builder + AI$15 /month (billed yearly)

Unlimited code
500, 1,000 or 2,000 credits a month
Extra 100 credits for $5

Team$7.50 /seat/month (yearly, 2-50 seats)

Central billing
Shared collection
Admin controls
AI (Team + AI is a separate option)

Source: the 21st pricing page and llms.txt. The page says "Cancel anytime. Payments are non-refundable." For commercial use, read the terms of service yourself. This is not legal advice.

Common problems and fixes

What happens	What to do
Old Magic MCP configuration stopped working, authentication error	Old keys were reset; get a new key from 21st.dev/mcp and put it in the configuration.
The generate and iterate tools are missing from the list, or an ai_subscription_required error	AI access is off on the account. Upgrade your plan and refresh the tool list; search and fetching components work without it.
Reported by users The Claude Code plugin is installed but the server doesn't show up	Open issue #82: the type field is missing from the plugin's .mcp.json file. Workaround: npx @21st-dev/cli@latest init --client claude.

How do you remove 21st MCP?

Revoke the key: on 21st.dev/mcp; according to the documentation, a revoked key returns 401 immediately.
In the client: delete the 21st entry from the MCP configuration; if you installed the plugin, uninstall it.
CLI session: run the 21st logout command.

Frequently asked questions

Are Magic MCP and 21st MCP the same thing?

Yes. The official documentation says Magic MCP is now 21st MCP. The old @21st-dev/magic package remains as a thin relay for backward compatibility, but since old keys were reset, you need a new key.

Is 21st MCP free?

Partly. Search and logo search are free; component code is limited to 2 per day on a free account. Unlimited code requires Builder ($6 a month billed yearly), and AI generation requires Builder + AI ($15 a month).

Can you use it without an account?

No. According to the documentation, every credential is tied to a 21st account; anonymous use is not supported.

Does it write components directly into my project?

No. The MCP server does not write project files; it returns the code to the assistant, and the assistant writes it into the project. Checking what was written is up to you.

Related guides

Grok Build

Lovable

ai-memory awwwards-animations

Brave Search MCP

Chrome DevTools MCP

Sources

Not clear in the official sources: Setup steps for Lovable, ChatGPT and Claude web · the full list of tools and the read/write split · project data sent to the server by the inspiration tool · Node.js version requirement · quarterly plan prices · Turkish lira pricing and a Turkish interface · terms of service · OSV scan. Each is noted in its section.