21st.dev Magic

公式

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

GitHub

5.6k

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

21st.devカタログを検索 — searchツールを使って必要なものを説明し、コンポーネント、テーマ、テンプレートを見つけます。
プロンプトからUIコンポーネントを生成 — 説明に合ったReactコンポーネントをリクエストし、generateで即座に使用可能なコードを受け取ります。
コンポーネントのインスピレーションを得る — get_inspirationで特定のユースケースに合わせた厳選コンポーネント例を取得します。
企業ロゴを検索 — search_logoを使って企業名からSVGロゴを見つけます（1回の呼び出しにつき1クエリ）。
有料コードを取得 — プラットフォームを通じて購入したプレミアムコンポーネントにアクセスします。

ドキュメント

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 環境変数。

古いツール名 → 新しいツール名

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 クエリ)

現在のサーバーは、古い 4 つのツールよりもはるかに多くの機能を公開しています: コンポーネント/テーマ/テンプレートのカタログ検索、有料コードの取得、ブックマーク、チームライブラリ、バリアント付き UI 生成、プロファイル管理など。接続して tools/list を呼び出し、完全なセットを確認してください。

リンク

21st MCP セットアップ & API キー: https://21st.dev/mcp
21st CLI on npm: 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)、新しい UI を生成するよう依頼します (generate)。古い /ui、/21 トリガーフレーズは、プロトコルではなく、従来のツールの説明の慣例でした。