Magic Mcp

It's like v0, but in your Cursor / Claude Code / Windsurf: search 10,000+ React/Tailwind components, generate new UI with AI, and publish your own — right from your editor. Magic MCP is now the 21st MCP; this package keeps old configs working. Setup: 21st.dev/mcp

開源上線中

0 0

加入到你的工具

加入 Cursor 加入 VS Code

Claude Code：在終端機執行這行指令

claude mcp add --transport http 21st https://21st.dev/api/mcp --header 'x-api-key: YOUR_X_API_KEY'

Claude Desktop 與其他工具：把這段貼到設定檔

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

加入後需要填入： x-api-key

依據專案 README 裡的設定範例產生。按鈕會開啟你電腦上的應用程式，加入前它會先請你確認。

這個遠端伺服器要先登入或提供金鑰才會列出工具，所以這裡無法顯示。

安裝

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

claude plugin marketplace add 21st-dev/magic-mcp # then: /plugin install 21st

取自專案的 README。執行前請先確認它會做什麼。

README 掃描安全

README 要你執行的指令中，沒有發現有風險的內容。

我們只掃描 README，不掃描程式碼。沒有發現問題不代表一定安全。掃描方式

Magic Mcp 的替代方案

同類型中主題重疊最多的項目，星數多的排前面。

Reactive Resume

A one-of-a-kind resume builder that keeps your privacy in mind. Completely secure, customizable, portable, open-source and free forever. Try it out today!

46k