「21st-dev Magic」MCP サーバーとは？

21st-dev Magic MCP サーバーは、開発者が自然言語による説明だけで美しくモダンな UI コンポーネントを即座に作成できるよう設計されたAI駆動プラットフォームです。AIアシスタントと開発環境の橋渡し役となり、シームレスなUI生成、リアルタイムプレビュー、プロフェッショナルなブランドアセットやロゴの統合を実現します。Cursor、Windsurf、VSCode、Cline など主要な IDE をサポートし、ユーザーは求めるUIを記述するだけで、Magic MCP サーバーが洗練されたカスタマイズ可能なコンポーネントをプロジェクトへ直接生成・挿入します。繰り返し作業の自動化やAIによる創造性を日常開発に取り入れ、開発者の生産性向上を目指します。

プロンプト一覧

提供リポジトリのドキュメントには明示的なプロンプトテンプレートは記載されていません。

リソース一覧

提供リポジトリのドキュメントには明示的なリソースは記載されていません。

ツール一覧

提供リポジトリのドキュメントや server.py（または同等ファイル）には明示的なツールの記載はありません。

この MCP サーバーのユースケース

• AI駆動のUI生成: 自然言語で記述するだけでモダンなUIコンポーネントを即座に生成。ボイラープレートやデザイン作業の大幅な短縮を実現します。
• コンポーネント拡張: 既存のUIコンポーネントへ高度な機能やアニメーションを追加（近日対応予定）。反復開発を効率化します。
• ブランドアセット統合: プロフェッショナルなブランドアセットやロゴを簡単にフロントエンドへ統合し、デザインの一貫性とプロフェッショナリズムを維持します。
• リアルタイムプレビュー: 作成中のコンポーネントを即時にプレビュー可能。素早いプロトタイピングやフィードバックループを実現します。
• マルチIDE対応: Cursor、Windsurf、VSCode、Cline など複数 IDE で同じAI UI生成ワークフローを利用でき、一貫した開発体験を提供します。

セットアップ手順

Windsurf

1. 前提条件: Node.js（最新のLTS）をインストールします。
2. APIキー取得: 21st.dev Magic コンソール から生成します。
3. 設定ファイルを開く: ~/.codeium/windsurf/mcp_config.json を編集します。
4. Magic MCP サーバーを追加:

   {
     "mcpServers": {
       "@21st-dev/magic": {
         "command": "npx",
         "args": ["-y", "@21st-dev/magic@latest", "API_KEY=\"your-api-key\""]
       }
     }
   }
   

5. 保存して Windsurf を再起動 し、変更を適用します。

APIキーの安全な管理: 設定で環境変数を利用してください:

{
  "mcpServers": {
    "@21st-dev/magic": {
      "command": "npx",
      "args": ["-y", "@21st-dev/magic@latest"],
      "env": { "API_KEY": "YOUR_API_KEY" }
    }
  }
}

Claude

1. 前提条件: Node.js（最新のLTS）をインストールします。
2. APIキー取得: 21st.dev Magic コンソール から生成します。
3. 設定ファイルを開く: ~/.claude/mcp_config.json を編集します。
4. Magic MCP サーバーを追加:

   {
     "mcpServers": {
       "@21st-dev/magic": {
         "command": "npx",
         "args": ["-y", "@21st-dev/magic@latest", "API_KEY=\"your-api-key\""]
       }
     }
   }
   

5. 保存して Claude を再起動 し、変更を適用します。

APIキーの安全な管理:

{
  "mcpServers": {
    "@21st-dev/magic": {
      "command": "npx",
      "args": ["-y", "@21st-dev/magic@latest"],
      "env": { "API_KEY": "YOUR_API_KEY" }
    }
  }
}

Cursor

1. 前提条件: Node.js（最新のLTS）をインストールします。
2. APIキー取得: 21st.dev Magic コンソール から生成します。
3. 設定ファイルを開く: ~/.cursor/mcp.json を編集します。
4. Magic MCP サーバーを追加:

   {
     "mcpServers": {
       "@21st-dev/magic": {
         "command": "npx",
         "args": ["-y", "@21st-dev/magic@latest", "API_KEY=\"your-api-key\""]
       }
     }
   }
   

5. 保存して Cursor を再起動 し、変更を適用します。

APIキーの安全な管理:

{
  "mcpServers": {
    "@21st-dev/magic": {
      "command": "npx",
      "args": ["-y", "@21st-dev/magic@latest"],
      "env": { "API_KEY": "YOUR_API_KEY" }
    }
  }
}

Cline

1. 前提条件: Node.js（最新のLTS）をインストールします。
2. APIキー取得: 21st.dev Magic コンソール から生成します。
3. 設定ファイルを開く: ~/.cline/mcp_config.json を編集します。
4. Magic MCP サーバーを追加:

   {
     "mcpServers": {
       "@21st-dev/magic": {
         "command": "npx",
         "args": ["-y", "@21st-dev/magic@latest", "API_KEY=\"your-api-key\""]
       }
     }
   }
   

5. 保存して Cline を再起動 し、変更を適用します。

APIキーの安全な管理:

{
  "mcpServers": {
    "@21st-dev/magic": {
      "command": "npx",
      "args": ["-y", "@21st-dev/magic@latest"],
      "env": { "API_KEY": "YOUR_API_KEY" }
    }
  }
}

この MCP をフロー内で使う方法

FlowHunt での MCP 利用方法

MCP サーバーを FlowHunt ワークフローに統合するには、まず MCP コンポーネントをフローに追加し、AI エージェントに接続します。

MCP コンポーネントをクリックして設定パネルを開きます。system MCP 設定セクションで、以下の JSON 形式で MCP サーバー情報を入力します。

{
  "magic-mcp": {
    "transport": "streamable_http",
    "url": "https://yourmcpserver.example/pathtothemcp/url"
  }
}

設定が完了すると、AI エージェントはこの MCP をツールとして利用でき、すべての機能・能力にアクセス可能となります。"magic-mcp" をご自身の MCP サーバー名に、URL も適切なものに書き換えてください。

概要

リポジトリに Roots サポートの記載はありません。

所感

21st-dev Magic MCP サーバーは、複数プラットフォームでのインストール・セットアップに関する優れたドキュメント、明確な実用例、アクティブなユーザー層を持っています。一方で、MCP プロンプトやリソース、ツール、Roots や Sampling などの高度な MCP 概念の明示的な記載がなく、上級者や統合開発者には透明性がやや不足しています。

MCP スコア

評価: 6/10

21st-dev Magic MCP サーバーは使いやすさや導入の容易さ、アクティビティで高得点ですが、高度な技術情報や公開ドキュメントでの明示的な MCP プリミティブの不足により減点となっています。