Magic MCP → 21st MCP (互換性プロキシ)

概要 – 旧 Magic MCP サーバーの直接的な置き換えとして機能する、軽量な npm パッケージ (@21st-dev/magic-mcp) です。すべての MCP (Multi-Component Protocol) リクエストを新しい 21st MCP サービスに転送するだけで、21st CLI への移行を進めつつ、既存の構成をそのまま使い続けることができます。

---

仕組み

• このパッケージは stdio proxy です。npx @21st-dev/magic@latest API_KEY="…" を実行すると、JSON-RPC-like MCP メッセージを https://21st.dev/api/mcp にパイプします。
• 従来の API キーの提供方法 (位置引数、--API_KEY=、/API_KEY:、-API_KEY、または環境変数 TWENTY_FIRST_API_KEY / API_KEY_21ST) をサポートしています。
• 通信先のサーバーは 21st CLI が使用するものと同じであるため、以前に呼び出せたすべてのツール ( generate, iterate_generation, search, etc.) は、新しい名称で利用可能になります。

---

はじめに

# 推奨 – CLI を介して完全な 21st MCP をインストール
npx @21st-dev/cli@latest init --client cursor   # or claude | vscode | windsurf | codex

プロキシのみが必要な場合:

# プロキシのみをインストール
npx -y @21st-dev/magic@latest API_KEY="YOUR_21ST_API_KEY"

または、mcp.json 設定に手動でサーバーを追加:

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

注意: 旧 Magic API キーは使用できません。 https://21st.dev/mcp で新しいキーを生成してください。

---

AI アクセス

• アカウントに AI 生成機能が有効 (get_usage.aiGenerationEnabled) になっている場合のみ、サーバーは generate と iterate_generation ツールをリストアップします。
• AI なしでも、search, get_component, etc., を使用して、返されたドラフトに対して独自のコーディングエージェントを実行できます。
• 有料 AI サブスクリプションが必要な呼び出しは、ai_subscription_required を返します。AI が有効になるまで待機してから再試行してください。

---

旧ツールの名称マッピング

旧 Magic ツール	21st MCP ツール
21st_magic_component_builder	generate
21st_magic_component_inspiration	get_inspiration
21st_magic_component_refiner	generate (refine)
logo_search	search_logo

プロキシが自動的に旧名称を翻訳するため、既存のエージェントはそのまま機能し続けます。

---

プラグインとして使用

このリポジトリは、いくつかの AI アシスタント プラットフォーム向けのプラグイン マニフェストを提供しています:

• Claude Code – claude plugin marketplace add 21st-dev/magic-mcp の後、/plugin install 21st
• Grok Build – grok plugin marketplace add 21st-dev-magic-mcp && grok plugin install 21st --trust
• Cursor – Cursor Marketplace から