Magic MCP (21st.dev) MCPサーバー
自然言語からUIコンポーネントを生成するMCPサーバー。エディタ内で「価格表を作って」と頼むとReactコンポーネントが届く。
spec — 基本情報
| github_stars | 5.4k |
|---|---|
| pricing | 無料枠あり / 有料プラン |
| os | mac / windows / linux |
| japanese | 非対応 |
| difficulty | 初級 |
| recommended | 開発フロー内でのUI部品の高速生成 |
概要
自然言語からUIコンポーネントを生成するMCPサーバー。エディタ内で「価格表を作って」と頼むとReactコンポーネントが届く。
v0のようなUI生成を、ブラウザに移動せずエディタの中で完結させるMCPサーバーです。開発の流れを止めずに「ヒーローセクションを作って」「この表をカードUIにして」が頼めるため、フロントエンド開発のリズムが変わります。
主な機能
- 自然言語からのUIコンポーネント生成
- モダンなデザインライブラリ準拠
- Cursor・Windsurf・Cline対応
料金
無料枠から始められ、必要に応じて有料プランに拡張できます。
- 無料枠あり / 有料プラン
※料金は変更される場合があります。最新の情報は公式サイトでご確認ください。
こんな人におすすめ
- 開発フロー内でのUI部品の高速生成
よくある質問
Q. v0と何が違いますか?
A. 体験の場所です。v0はWebサービス、Magicは自分のエディタ内。既存プロジェクトの文脈で使うならMagicが自然です。
Q. デザインの質は?
A. 21st.devのコンポーネント集の知見が使われており、素のAI生成より整った出力が期待できます。
代替ツール
glossary — わからない用語があったら
tags
related — 同カテゴリの人気エンティティ
Anthropic公式のMCPリファレンス実装集。Filesystem・Fetch・Memory・Git・Time等の基本サーバーを収録し、MCP開発の出発点になる。
Google公式のChrome DevTools MCPサーバー。パフォーマンス計測・ネットワーク解析・デバッグをAIから実行できる。
UpstashによるMCPサーバー。LLMのプロンプトにバージョン指定の最新ライブラリドキュメントとコード例を自動注入し、AIコーディングアシスタントの幻覚・古いAPIを根本から解消する。
Microsoft製の万能ファイル変換ツール。Word・Excel・PDF・画像などをAIが読みやすいMarkdownに変換する。MCPサーバー同梱。
数百のデータソースを横断して「1つのデータベースのように」AIから問い合わせられるデータ統合基盤。MCP対応。