Magic MCP Server (21st.dev)
Magic MCPサーバーでClaude連携・UIコンポーネント自動生成を実現
npx @21st-dev/magic概要
Magic MCP Serverの設定方法と使い方。
21st.devが提供するUIコンポーネント生成サービス「Magic」をClaudeから操作できるMCPサーバー。
React・Tailwind CSSベースのUIコンポーネントの自動生成、コンポーネントの検索・参照、デザイントークンの活用が可能。
ClaudeとMagic MCPサーバー連携により、フロントエンド開発でのコンポーネント作成やデザインシステムの構築を自動化できる。
21st.devのコンポーネントライブラリを参照しながらClaudeが高品質なUIを即座に生成できる点が特徴。
設定方法はAPIキーを環境変数に設定するだけでシンプルに完結する。
料金・APIキー情報
料金
不明APIキー
🔑 必要🔑 APIキーの取得方法
- 1
https://21st.dev にアクセスしてアカウントを作成
- 2
ダッシュボードの「Settings」→「API Keys」でAPIキーを取得
- 3
表示されたAPIキーをコピーして保存する（再表示不可のため必ず保存すること）
こんな使い方ができます
「ダークモード対応のナビゲーションバーを作って」とClaudeに指示してコンポーネントを即時生成させられる
既存のデザインシステムに合ったUIコンポーネントをClaudeに自動生成させられる
21st.devのコンポーネントライブラリから最適な実装を検索・取得できる
Tailwind CSSベースのフォーム・カード・モーダルなどをClaudeに高速で作成させられる
セットアップ手順
- 1
21st.dev（21st.dev）にアクセスしてアカウントを作成・ログインする
- 2
ダッシュボードの「API Keys」からAPIキーを発行・コピーする
- 3
ターミナルで以下のコマンドを実行してClaude Codeに追加する：claude mcp add magic -e MAGIC_API_KEY=your-api-key-here -- npx -y @21st-dev/magic
設定ファイル
コピー前に確認
21st.devアカウントおよびAPIキー必須。
claude mcp add magic -e MAGIC_API_KEY=your-api-key-here -- npx -y @21st-dev/magic