21st.dev Magic

官方

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

GitHub

5.6k

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

搜尋 21st.dev 目錄 — 使用 search 工具，描述您需要的內容來尋找元件、主題或模板。
從提示詞生成 UI 元件 — 要求一個符合描述的 React 元件，並透過 generate 接收可直接使用的程式碼。
獲取元件靈感 — 使用 get_inspiration 為特定使用案例擷取精選的元件範例。
查詢公司標誌 — 使用 search_logo 依公司名稱尋找 SVG 標誌（每次呼叫僅限一個查詢）。
擷取付費程式碼 — 存取您已透過平台購買的高級元件。

文件

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 環境變數。

舊工具名稱 → 新工具名稱

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 即可查看完整集合。

連結

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)，或生成新的 UI (generate)。舊有的 /ui、/21 觸發短語是舊版工具描述的慣例，而非協定的一部分。