Magic MCP：自然言語でUIコンポーネントを即時生成 184

小编 · 2025-03-14

Magic MCP（Magic Component Platform）は、21st.devが開発したAI駆動のツールで、開発者が自然言語での記述を通じてモダンなUIコンポーネントを迅速に生成できるように支援します。Cursor、Windsurf、VS Codeなどの人気IDEと統合されており、ボタン、ナビゲーションバー、ログインフォームなどのインターフェース要素を生成できます。リアルタイムプレビューでコンポーネント効果を即座に確認でき、生成後のコードもいつでも修正可能です。

Magic MCP：自然言語でUIコンポーネントを即時生成

Magic MCPとは？

Magic MCP（Magic Magic Component Platform）は、21st.devが開発したAI駆動のツールで、開発者が自然言語での説明を通じてモダンなUIコンポーネントを迅速に生成できるように支援します。Cursor、WindSurf、VSCodeなどの人気のIDEと統合されており、ボタン、ナビゲーションバー、ログインフォームなどのUI要素を生成できます。リアルタイムプレビューにより、コンポーネントの効果を即座に確認でき、コード生成後もいつでも変更可能です。

Magic MCP：自然言語で説明してUIコンポーネントを即時生成.jpg

Magic MCPのコア機能

Magic MCPの中核機能は、自然言語での説明によってUIコンポーネントを生成することです。開発者はAI Agentのチャットボックスに説明を入力するだけで（例：/ui create a modern navigation bar with responsive design）、Magic MCPがその説明に基づいて完全なUIコンポーネントを即座に生成し、プロジェクトに追加します。

Magic MCPの主な特徴

AI駆動のUI生成：自然言語での説明でコンポーネントを作成でき、手動でコードを書く必要はありません。
複数IDE対応：以下を含む複数の人気IDEをサポートしています。
Cursor IDE：コマンドラインツール経由で統合。
WindSurf：設定ファイル経由で統合。
VSCode + Cline（Beta）：Cline拡張機能経由で統合。
モダンなコンポーネントライブラリ：21st.devのコンポーネントライブラリからインスピレーションを得た、多数の事前構築済み・カスタマイズ可能なコンポーネントを提供。
リアルタイムプレビュー：コンポーネント作成時に効果を即座に確認でき、手動で更新する必要はありません。
TypeScriptサポート：型安全な開発体験を提供し、モダンなフロントエンド開発に適しています。
SVGL統合：豊富なブランドアセットとロゴを提供し、プロフェッショナルなUIの迅速な構築を可能にします。
コンポーネント拡張：将来的にはAIによる既存コンポーネントの拡張、高度な機能やアニメーションの追加をサポート予定です。

Magic MCPの使用フロー

1. ニーズを説明

AI Agentのチャットボックスに/uiと入力し、希望するコンポーネントを説明します。例：/ui create a modern navigation bar with responsive design

2. コンポーネントを生成

Magic MCPが説明に基づいて完全なUIコンポーネントを生成します。生成されるコンポーネントは21st.devのコンポーネントライブラリのスタイルに準拠し、完全にカスタマイズ可能です。

3. プロジェクトに統合

生成されたコンポーネントは自動的にプロジェクトに追加され、すぐに使用を開始できます。すべてのコンポーネントは通常のReactコンポーネントと同様に編集・変更できます。

Magic MCPの適用シーン

迅速なプロトタイプ開発：自然言語でUIコンポーネントを迅速に生成し、時間を節約。
チームコラボレーション：チームメンバーとコンポーネントライブラリを共有し、開発効率を向上。
学習と実験：新しいUIデザインを迅速に試し、さまざまなデザインスタイルを探求。

Magic MCPのインストールと設定

Magic MCPを使用する前に、いくつかの設定が必要です。以下は各IDEのインストールと設定方法です。

Cursor IDE

npx -y @smithery/cli@latest run @21st-dev/magic-mcp --config "{\"TWENTY_FIRST_API_KEY\":\"your-api-key\"}"

WindSurf

~/.codeium/windsurf/mcp_config.jsonに以下の設定を追加します。

{
  "mcpServers": {
    "magic": {
      "command": "npx",
      "args": [
        "-y",
        "@smithery/cli@latest",
        "install",
        "@21st-dev/magic-mcp",
        "--client",
        "windsurf"
      ],
      "env": {
        "TWENTY_FIRST_API_KEY": "your-api-key"
      }
    }
  }
}

VSCode + Cline（Beta）

ClineのMCP設定に以下の内容を追加します。

{
  "mcpServers": {
    "magic": {
      "command": "npx",
      "args": [
        "-y",
        "@smithery/cli@latest",
        "install",
        "@21st-dev/magic-mcp",
        "--client",
        "cline"
      ],
      "env": {
        "TWENTY_FIRST_API_KEY": "your-api-key"
      }
    }
  }
}