接入你的智能体
發布者自己的指令。不是 PlugMCP 端點。
用我們的金鑰與日誌託管一份副本。
npx -y @21st-dev/[email protected]Claude Code 沒有本機指令的安裝連結。複製下方指令並在終端機中執行。
claude mcp add 21st-dev-magic -- npx -y @21st-dev/magic@0.2.3在終端機中執行。
{ "mcpServers": { "21st-dev-magic": { "command": "npx", "args": [ "-y", "@21st-dev/[email protected]" ] } }}claude_desktop_config.json
遠端 URL 還是本機指令？ 兩種安裝方式的差異
來自發布者
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.
Magic MCP is now the 21st MCP. This package is a compatibility proxy kept for old configs - new setups should use `npx @21st-dev/cli@latest init`. Setup: https://21st.dev/mcp
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.
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.
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.
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:
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.
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:
API_KEY_21ST under Plugins → Configure. Get a key at 21st.dev/mcp.grok plugin install 21st --trust (from the official xAI marketplace), then export API_KEY_21ST..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.
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.
Magic MCP is now the 21st MCP. This package is a compatibility proxy kept for old configs - new setups should use `npx @21st-dev/cli@latest init`. Setup: https://21st.dev/mcp
{ "mcpServers": { "21st-dev-magic": { "command": "npx", "args": [ "-y", "@21st-dev/[email protected]" ] } }}工具
尚無工具清單。遠端伺服器會在首次健康檢查後取得工具清單。
常見問題
在本頁複製適用於 Cursor、Claude Desktop、Claude Code 或 VS Code 的 stdio 設定。它使用發布者的安裝方式，而不是 PlugMCP 代理伺服器。
這筆記錄未列出必要的環境變數。
@21st Dev/magic 透過 stdio 在本機執行。
上次檢查時間：2026-11-14。 Magic MCP is now the 21st MCP. This package is a compatibility proxy kept for old configs - new setups should use `npx @21st-dev/cli@latest init`. Setup: https://21st.dev/mcp