2D

21st-dev/magic-mcp

Developer tools公式

このページは AI により自動翻訳されています。技術的な詳細は原文をご確認ください。 原文を見る

6323 stars 510 forks 品質 85 トレンド 57ISC

v0のようなものですが、カーソル/Claudeコード/Windsurfで10,000+のReact/Tailwindコンポーネントを検索し、AIで新しいUIを作成し、編集者から直接自分のUIを公開できます。

概要

Magic Component Platform(MCP)は、開発者が自然言語の説明を通じて美しくモダンなUIコンポーネントを瞬時に作成できる強力なAI駆動ツールです。人気のIDEとシームレスに統合され、UI開発のための効率的なワークフローを提供します。 - : 自然言語でUIコンポーネントを記述して作成 - : - カーソルIDE統合 - Windsurfサポート - VSCodeサポート - VSCode + Cline統合(ベータ版) - : 21世紀にインスパイアされた多数の事前構築されたカスタマイズ可能なコンポーネントへのアクセス。

概要(AI 翻訳)

Magic MCPは現在21番目のMCPです。 Magic MCPサーバー(@21st-dev/magic)は統一された21st MCPに置き換えられました。これは21st CLI経由でインストールされ、21st.dev/mcp に設定されました。このパッケージは薄型互換プロキシとして公開されており、古い設定が引き続き動作します。

21代MCPのインストール(推奨)

あるいは手動で追加することもできます — これは単なるHTTP MCPサーバーです:

21st.dev/mcp でAPIキーを取得してください。

古いMagic APIキーがリセットされました。 古いMagicコンソールで発行されたキーはどこでも使えません。21st.dev/mcp 時に新しいキーを生成してください。

このパッケージが現在何をするのか(v0.2.0+)

npx -y @21st-dev/magic@latest API_KEY="..."はまだ動作します。v0.2.0以降は、すべてのMCPメッセージを21番目のMCPサーバーに転送する小さなstdioプロキシとなっています。既存のmcp.jsonエントリで@21st-dev/magicを参照しているものは引き続き機能しますが、21番目のCLIと同じサーバーと通信し、認証済みアカウントで利用可能なツールも使われています。

APIキーは、位置変数API_KEY="..."、--API_KEY=...、/API_KEY:...、-API_KEY ...、またはTWENTY_FIRST_API_KEY / API_KEY_21ST環境変数など、すべての過去の形態で受け入れられます。

AIアクセス

ビルダーコンポーネントアクセスはホストされた21世紀のAIを有効にしません。

このページは AI により自動翻訳されています。技術的な詳細は原文をご確認ください。

README

以下は原文 README の抜粋です。原文を見る。

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. This package remains published as a thin compatibility proxy so old configs keep working.

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.

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)
GitHub で README 全文を見る

インストール

npx @21st-dev/cli@latest init --client cursor # or: claude | vscode | windsurf | codex
MCP 初心者?mcpskill.org のガイドから始めましょう →

設定

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