21st.dev Magic AI Agent

Magic MCP → 21st MCP

Magic MCP は 21st MCP になりました。 Magic MCP サーバー（@21st-dev/magic）は、21st CLI からインストールする統合版の 21st MCP に置き換えられました。セットアップは 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 サーバーに転送します。@21st-dev/magic を参照する既存の mcp.json エントリは引き続き機能します。ただし、現在は 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（1 回の呼び出しにつき 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 キーを設定する必要があります。

リンク

• 21st MCP のセットアップと API キー：https://21st.dev/mcp
• npm の 21st CLI：https://www.npmjs.com/package/@21st-dev/cli
• 21st.dev — UI コンポーネントの検索、公開、生成：https://21st.dev

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 というトリガーフレーズは、旧ツールの説明で使われていた慣習であり、プロトコルの一部ではありません。