21st.dev Magic

官方

根據最佳21st.dev設計工程師的靈感，創建精心製作的UI組件。

GitHub

5.9k

試用此 MCP贊助

你可以用 21st Dev Magic MCP 做什麼？

生成 UI 元件 — 在啟用 AI 存取時，要求您的 AI 使用 generate 建立新元件，從自然語言提示中產生變體。
搜尋元件目錄 — 使用 search 在 21st.dev 中尋找元件、主題或範本，然後透過 get_component 取得完整程式碼。
精煉既有設計 — 透過 generate 從精煉提示請求新的生成，並沿用您先前的草稿脈絡。
取得付費程式碼 — 當您的帳戶已啟用付費存取時，透過 get_component 要求取得進階元件程式碼。
檢查 AI 存取狀態 — 查詢 get_usage 以確認 aiGenerationEnabled 是否為 true，再嘗試進行託管生成。

文件

Magic MCP → 21st MCP

Magic MCP 現在已成為 21st MCP。 Magic MCP 伺服器（@21st-dev/magic）已被統一的 21st MCP 取代，透過 21st CLI 安裝 — 設定請見 21st.dev/mcp。此套件仍以輕量相容性代理的形式發布，讓舊設定能繼續運作。

安裝 21st MCP（建議）

npx @21st-dev/cli@latest init --client cursor   # or: claude | vscode | windsurf | codex

或手動新增 — 它是一個標準的 HTTP MCP 伺服器：

{
  "mcpServers": {
    "21st": {
      "url": "https://21st.dev/api/mcp",
      "headers": { "x-api-key": "YOUR_21ST_API_KEY" }
    }
  }
}

在 21st.dev/mcp 取得 API 金鑰。

舊版 Magic API 金鑰已重設。 舊版 Magic 主控台發出的金鑰已無法在任何地方使用。請在 21st.dev/mcp 產生新的金鑰。

此套件現在的功能（v0.2.0+）

npx -y @21st-dev/magic@latest API_KEY="..." 仍然可用：自 v0.2.0 起，它是一個小型 stdio 代理，將每個 MCP 訊息轉發到 21st MCP 伺服器。現有的 mcp.json 條目若參照 @21st-dev/magic 仍可正常運作 — 但它們現在連線到與 21st CLI 相同的伺服器，並可使用已驗證帳戶可用的工具。

API 金鑰可透過所有歷史形式接受：位置參數 API_KEY="..."、--API_KEY=...、/API_KEY:...、-API_KEY ...，或 TWENTY_FIRST_API_KEY / API_KEY_21ST 環境變數。

AI 存取

Builder 元件存取不會啟用託管的 21st AI。伺服器僅在啟用 AI 存取時列出 generate 和 iterate_generation。請檢查 get_usage.aiGenerationEnabled；這會回報存取狀態，而非剩餘的 AI 額度。若 AI 關閉，請使用 search 和 get_component，然後用你自己的編碼代理調整程式碼。現有的草稿仍可讀取。

快取或舊版的生成呼叫可能回傳 ai_subscription_required。在 AI 啟用前請勿重試。啟用 AI 後，請重新整理客戶端工具清單或重新連線。代理會將探索請求轉發到伺服器，因此現有的代理版本無需 npm 更新即可獲得此行為。

server.json 鏡像官方的 dev.21st/mcp 註冊表清單。註冊表版本與此相容性套件版本無關。

舊工具名稱 → 新工具名稱

21st MCP 仍接受舊版 Magic 工具名稱並進行轉譯，因此記住舊名稱的代理仍可運作。建議優先使用新名稱：

舊版 Magic 工具	21st MCP 工具
`21st_magic_component_builder`	`generate`
`21st_magic_component_inspiration`	`get_inspiration`
`21st_magic_component_refiner`	`generate`（從精煉提示產生新版本）
`logo_search`	`search_logo`（每次呼叫一個查詢）

目前的伺服器提供的功能遠多於舊版四個工具：跨元件／主題／模板的目錄搜尋、付費程式碼擷取、書籤、團隊函式庫、含變體的 UI 生成、個人資料管理等等。連線並呼叫 tools/list 以查看你的帳戶可用的工具。

安裝為外掛

此儲存庫也打包為代理外掛（MCP 伺服器 + UI 技能）。你無需等待任何商店 — 此儲存庫本身就是一個市集，直接新增：

# 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

在 API_KEY_21ST 變數中設定你的 API 金鑰（在 21st.dev/mcp 取得免費金鑰）。

商店清單：

Cursor / Grok Bot — 從 Cursor Marketplace 安裝「21st」，然後在 Plugins → Configure 下設定你的 API_KEY_21ST。在 21st.dev/mcp 取得金鑰。
Grok Build — grok plugin install 21st --trust（來自官方 xAI marketplace），然後匯出 API_KEY_21ST。
Claude Code — 此儲存庫帶有 .claude-plugin/ 清單：從任何列出此儲存庫的市集 /plugin install 它，或使用 claude --plugin-dir . 在本機載入，並匯出 API_KEY_21ST。

外掛設定預期 API 金鑰位於每個用戶端的 API_KEY_21ST 變數中。

連結

21st MCP 設定與 API 金鑰：https://21st.dev/mcp
npm 上的 21st CLI：https://www.npmjs.com/package/@21st-dev/cli
21st.dev — 探索、發布和生成 UI 元件：https://21st.dev

常見問題

為什麼我的舊版 Magic MCP 停止運作了？ Magic 後端（magic.21st.dev）已被統一的 21st MCP 取代，且所有舊版 API 金鑰已因安全考量重設。請從 21st.dev/mcp 更新為新的金鑰 — 你現有的 @21st-dev/magic 設定將可透過此相容性代理再次運作，不過我們建議改用 npx @21st-dev/cli@latest init。

/ui 還存在嗎？ 使用自然語言：請你的代理搜尋 21st 上的元件（search），或在 AI 啟用時使用託管的 UI 生成（generate）。舊的 /ui、/21 觸發詞是舊版工具描述中的慣例，而非協定的一部分。