21st.dev Magic

公式

最高の21st.devデザインエンジニアにインスパイアされた、洗練されたUIコンポーネントを作成します。

GitHub
5.9k
このMCPを試すスポンサー

21st Dev Magic MCPで何ができますか？

  • UIコンポーネントの生成 — AIアクセスが有効な場合、generateを使用してAIに新しいコンポーネントの作成を依頼し、自然言語プロンプトからバリエーションを生成します。
  • コンポーネントカタログの検索 — 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" }
    }
  }
}

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

古い Magic API キーはリセットされました。 旧 Magic コンソールで発行されたキーはどこでも使用できなくなりました。21st.dev/mcp で新しいキーを生成してください。

このパッケージが現在行うこと（v0.2.0+）

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

API キーは、これまでのすべての形式で受け付けられます：位置指定の API_KEY="..."、--API_KEY=...、/API_KEY:...、-API_KEY ...、または TWENTY_FIRST_API_KEY / API_KEY_21ST 環境変数。

AI アクセス

ビルダーコンポーネントへのアクセスは、ホスト型 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_buildergenerate
21st_magic_component_inspirationget_inspiration
21st_magic_component_refinergenerate（リファインメントプロンプトからの新規生成）
logo_searchsearch_logo（呼び出しごとに1つのクエリ）

現在のサーバーは、古い4つのツールよりもはるかに多くの機能を公開しています：コンポーネント/テーマ/テンプレートのカタログ検索、有料コード取得、ブックマーク、チームライブラリ、バリアント付き 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_KEY_21ST 変数に API キーを期待します。

リンク

FAQ

なぜ古い 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 トリガーフレーズは、プロトコルではなくレガシーツールの説明の慣例でした。