内容
# Magic 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](https://21st.dev/mcp). This package remains published as a thin compatibility proxy so old configs keep working.
## Install the 21st MCP (recommended)
```bash
npx @21st-dev/cli@latest init --client cursor # or: claude | vscode | windsurf | codex
```
Or add it manually — it is a plain HTTP MCP server:
```json
{
"mcpServers": {
"21st": {
"url": "https://21st.dev/api/mcp",
"headers": { "x-api-key": "YOUR_21ST_API_KEY" }
}
}
}
```
Get an API key at [21st.dev/mcp](https://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](https://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:
```bash
# 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](https://21st.dev/mcp)).
Store listings:
- **Cursor / Grok Bot** — install "21st" from the [Cursor Marketplace](https://cursor.com/marketplace), then set your `API_KEY_21ST` under **Plugins → Configure**. Get a key at [21st.dev/mcp](https://21st.dev/mcp).
- **Grok Build** — `grok plugin install 21st --trust` (from the official [xAI marketplace](https://github.com/xai-org/plugin-marketplace)), then export `API_KEY_21ST`.
- **Claude Code** — the repo carries a `.claude-plugin/` manifest: `/plugin install` it from any marketplace that lists this repo, or load locally with `claude --plugin-dir .` and export `API_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](https://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.
MCP 市场