Enables AI clients to search thousands of React and Tailwind components and generate new UI directly within your code editor.
Also known as 21st-dev/magic-mcp, @21st-dev/magic
- Stars
- 6,481
- Tools
- 1
- Downloads, 30 days
- 51,544
- Latest version
- —
- Last commit
- Sep 9, 2026
- License
- ISC
What is 21st MCP?
21st is an MCP server. Enables AI clients to search thousands of React and Tailwind components and generate new UI directly within your code editor. It exposes 1 tool, such as logo_search.
Summary generated from the project's README
About 21st MCP server
Searching for React and Tailwind components and generating new user interfaces directly within your code editor is what this server enables. Developers can use it to browse a vast catalog of components, themes, and templates or retrieve paid code to accelerate frontend development. It functions as a remote HTTP MCP server or a local stdio proxy, making it compatible with clients like Cursor, Claude, VS Code, Windsurf, and Grok Build.
To use the service, you must provide an API key via the API_KEY_21ST environment variable or through specific client configurations. The server provides tools such as search, get_component, and search_logo. If your account has AI access enabled, you can also utilize the generate and iterate_generation tools to create UI variants. This setup allows for a direct workflow where an AI agent can find inspiration and then build functional code based on your specific requirements.
What you can do with it
- 1Find UI inspirationAsk your AI agent to search the component catalog for specific design patterns or themes.
- 2Generate new UI componentsInstruct your coding assistant to create a new interface using the hosted generation tools.
- 3Search for logosRequest your agent to find specific logos to include in your application design.
- 4Refine existing designsProvide a prompt to an AI client to iterate on and improve a generated component.
Written from the project's README. Every use case is checked against a quote from it.
How to install 21st MCP
Formats verified 10 Nov 2026Install 21st MCP in Claude Code
$ claude mcp add magic-mcp -- npx -y @21st-dev/magicInstall 21st MCP in Cursor
~/.cursor/mcp.json
{
"mcpServers": {
"magic-mcp": {
"command": "npx",
"args": [
"-y",
"@21st-dev/magic"
]
}
}
}Install 21st MCP in VS Code
.vscode/mcp.json
{
"servers": {
"magic-mcp": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"@21st-dev/magic"
]
}
}
}Install 21st MCP in Claude Desktop
claude_desktop_config.json
{
"mcpServers": {
"magic-mcp": {
"command": "npx",
"args": [
"-y",
"@21st-dev/magic"
]
}
}
}Install 21st MCP in Codex
~/.codex/config.toml
[mcp_servers.magic-mcp] command = "npx" args = ["-y", "@21st-dev/magic"]
Install 21st MCP in Gemini CLI
~/.gemini/settings.json
{
"mcpServers": {
"magic-mcp": {
"command": "npx",
"args": [
"-y",
"@21st-dev/magic"
]
}
}
}21st MCP tools 1
Detected from the READMElogo_search
| logo_search | — |
Automated checks
Ran Nov 12, 2026Full report →Passed our automated checks. That is not a security audit: read the code and give the server the narrowest access it needs. How checks work
- Source repository linked and reachablePass
- Open source license (OSI)Pass
- Commit or release in the last yearPass
- Package name not close to a popular packagePass
- Remote endpoint uses HTTPSNot checked
- Destructive tools are labelledPass
- No hidden instructions to the modelPass
- No critical advisory in the package or its dependenciesNot checked
README
View on GitHubMagic MCP → 21st MCP
Magic MCP is now the 21st MCP. The Magic MCP server (
@21st-dev/magic) has been replaced by the unified 21st MCP, installed via the 21st CLI — setup at 21st.dev/mcp. This package remains published as a thin compatibility proxy so old configs keep working.
Install the 21st MCP (recommended)
npx @21st-dev/cli@latest init --client cursor # or: claude | vscode | windsurf | codex
Or add it manually — it is a plain HTTP MCP server:
{
"mcpServers": {
"21st": {
"url": "https://21st.dev/api/mcp",
"headers": { "x-api-key": "YOUR_21ST_API_KEY" }
}
}
}
Get an API key at 21st.dev/mcp.
Old Magic API keys were reset. Keys issued by the old Magic console no longer work anywhere. Generate a fresh key at 21st.dev/mcp.
What this package does now (v0.2.0+)
npx -y @21st-dev/magic@latest API_KEY="..." still works: since v0.2.0 it is a small stdio proxy that forwards every MCP message to the 21st MCP server. Existing mcp.json entries that reference @21st-dev/magic keep functioning — but they now speak to the same server as the 21st CLI, with the tools available to the authenticated account.
The API key is accepted in all the historical forms: positional API_KEY="...", --API_KEY=..., /API_KEY:..., -API_KEY ..., or the TWENTY_FIRST_API_KEY / API_KEY_21ST environment variables.
AI access
Builder component access does not enable hosted 21st AI. The server lists
generate and iterate_generation only when AI access is enabled. Check
get_usage.aiGenerationEnabled; this reports access, not the remaining AI
credit balance. With AI off, use search and get_component, then adapt the
code with your own coding agent. Existing drafts remain readable.
A cached or legacy generation call can return ai_subscription_required. Do
not retry until AI is enabled. Refresh the client tool list or reconnect after
enabling AI. The proxy forwards discovery to the server, so existing proxy
versions receive this behavior without an npm update.
server.json mirrors the official dev.21st/mcp registry listing. The registry
version is independent of this compatibility package version.
Old tool names → new tool names
The 21st MCP still accepts the legacy Magic tool names and translates them, so agents that remember the old names keep working. Prefer the new names:
| Legacy Magic tool | 21st MCP tool |
|---|---|
21st_magic_component_builder |
generate |
21st_magic_component_inspiration |
get_inspiration |
21st_magic_component_refiner |
generate (new generation from the refinement prompt) |
logo_search |
search_logo (one query per call) |
The current server exposes much more than the old four tools: catalog search across components/themes/templates, paid code retrieval, bookmarks, team libraries, UI generation with variants, profile management, and more. Connect and call tools/list to see the tools available to your account.
Install as a plugin
This repository is also packaged as an agent plugin (MCP server + a UI skill). You don't need to wait for any store — this repo IS a marketplace, add it directly:
# Claude Code
claude plugin marketplace add 21st-dev/magic-mcp # then: /plugin install 21st
# Grok Build
grok plugin marketplace add 21st-dev/magic-mcp && grok plugin install 21st --trust
# Codex CLI
codex plugin marketplace add 21st-dev/magic-mcp # then install "21st" from /plugins
Set your API key in the API_KEY_21ST variable (free key at 21st.dev/mcp).
Store listings:
- Cursor / Grok Bot — install "21st" from the Cursor Marketplace, then set your
API_KEY_21STunder Plugins → Configure. Get a key at 21st.dev/mcp. - Grok Build —
grok plugin install 21st --trust(from the official xAI marketplace), then exportAPI_KEY_21ST. - Claude Code — the repo carries a
.claude-plugin/manifest:/plugin installit from any marketplace that lists this repo, or load locally withclaude --plugin-dir .and exportAPI_KEY_21ST.
The plugin config expects the API key in the API_KEY_21ST variable in every client.
Links
- 21st MCP setup & API keys: https://21st.dev/mcp
- 21st CLI on npm: https://www.npmjs.com/package/@21st-dev/cli
- 21st.dev — discover, publish, and generate UI components: https://21st.dev
FAQ
Why did my old Magic MCP stop working?
The Magic backend (magic.21st.dev) was superseded by the unified 21st MCP, and all old API keys were reset for security. Update to a fresh key from 21st.dev/mcp — your existing @21st-dev/magic config will then work again through this compatibility proxy, though we recommend switching to npx @21st-dev/cli@latest init.
Is /ui still a thing?
Use natural language: ask your agent to search 21st for components (search), or use hosted UI generation (generate) when AI is enabled. The old /ui, /21 trigger phrases were a convention of the legacy tools' descriptions, not the protocol.
21st MCP questions
How do I add 21st MCP to Claude Code?
Run claude mcp add magic-mcp -- npx -y @21st-dev/magic in your terminal. Add --scope user to make it available in every project.
How do I add 21st MCP to Cursor?
Open ~/.cursor/mcp.json and add the server under mcpServers, using the Cursor config shown in the install section above.
What tools does 21st MCP provide?
It exposes 1 tool, including logo_search.
Why did my old Magic MCP stop working?
The Magic backend was replaced by the unified 21st MCP and all old API keys were reset. You can use a new key with the existing config via a compatibility proxy.
How can I check if AI generation is enabled?
You can check the get_usage.aiGenerationEnabled property to see if you have access to the generate and iterate_generation tools.
Can I still use the old Magic tool names?
Yes, the 21st MCP accepts legacy Magic tool names and translates them to the new tool names automatically.