/ ディレクトリ / プレイグラウンド / 21st.dev Magic MCP
● 公式 21st-dev ⚡ 即起動

21st.dev Magic MCP

作者 21st-dev · 21st-dev/magic-mcp

Generate beautiful React components inline — like v0, but inside your editor.

Magic MCP is 21st.dev's component generator: ask in plain English, get a production-quality React + Tailwind component returned inline. Works in Cursor, Claude Code, Windsurf — anywhere MCP runs.

なぜ使うのか

主な機能

ライブデモ

実際の動作

magic-mcp.replay ▶ 準備完了
0/0

インストール

クライアントを選択

~/Library/Application Support/Claude/claude_desktop_config.json  · Windows: %APPDATA%\Claude\claude_desktop_config.json
{
  "mcpServers": {
    "magic-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "@21st-dev/magic@latest"
      ]
    }
  }
}

Claude Desktop → Settings → Developer → Edit Config を開く。保存後、アプリを再起動。

~/.cursor/mcp.json · .cursor/mcp.json
{
  "mcpServers": {
    "magic-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "@21st-dev/magic@latest"
      ]
    }
  }
}

Cursor は Claude Desktop と同じ mcpServers スキーマを使用。プロジェクト設定はグローバルより優先。

VS Code → Cline → MCP Servers → Edit
{
  "mcpServers": {
    "magic-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "@21st-dev/magic@latest"
      ]
    }
  }
}

Cline サイドバーの MCP Servers アイコンをクリックし、"Edit Configuration" を選択。

~/.codeium/windsurf/mcp_config.json
{
  "mcpServers": {
    "magic-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "@21st-dev/magic@latest"
      ]
    }
  }
}

Claude Desktop と同じ形式。Windsurf を再起動して反映。

~/.continue/config.json
{
  "mcpServers": [
    {
      "name": "magic-mcp",
      "command": "npx",
      "args": [
        "-y",
        "@21st-dev/magic@latest"
      ]
    }
  ]
}

Continue はマップではなくサーバーオブジェクトの配列を使用。

~/.config/zed/settings.json
{
  "context_servers": {
    "magic-mcp": {
      "command": {
        "path": "npx",
        "args": [
          "-y",
          "@21st-dev/magic@latest"
        ]
      }
    }
  }
}

context_servers に追加。保存時に Zed がホットリロード。

claude mcp add magic-mcp -- npx -y @21st-dev/magic@latest

ワンライナー。claude mcp list で確認、claude mcp remove で削除。

ユースケース

実用的な使い方: 21st.dev Magic MCP

Generate a polished landing-page hero in under a minute

👤 Frontend engineers shipping fast ⏱ ~15 min intermediate

使うタイミング: You need a hero section right now and don't want to start from a blank file.

前提条件
  • Server/skill installed and authenticated — See repo README
フロー
  1. Search for inspiration
    Search 21st for hero sections that mix gradient + product screenshot.✓ コピーしました
    → 5–10 starter components
  2. Generate the final one
    Create a Hero component: dark gradient bg, headline 'Ship faster.' subhead 'AI for serious teams.' a primary CTA + secondary CTA, social proof row.✓ コピーしました
    → A complete tsx file using shadcn primitives

結果: A real production-shape component in one prompt.

注意点
  • Generated components assume shadcn primitives are installed — Generated components assume shadcn primitives are installed — run npx shadcn add button card first.
組み合わせ: filesystem · flyonui-mcp

組み合わせ

他のMCPと組み合わせて10倍の力を

magic-mcp + filesystem

Pair with filesystem for complementary capabilities

Use this server together with filesystem to complete a multi-step task.✓ コピーしました
magic-mcp + flyonui-mcp

Pair with flyonui-mcp for complementary capabilities

Use this server together with flyonui-mcp to complete a multi-step task.✓ コピーしました

ツール

このMCPが提供する機能

ツール入力呼び出すタイミングコスト
create_component description, framework Need a new UI component 21st credits
refine_component component_code, instruction Tweak an existing component 21st credits
search_components query Find a pre-made starting point 1 API call

コストと制限

運用コスト

APIクォータ
See provider docs for rate limits
呼び出しあたりのトークン
Varies by tool
金額
See repo README for pricing details
ヒント
Cache tool results and avoid repeated identical calls.

セキュリティ

権限、シークレット、影響範囲

認証情報の保管: Use environment variables; never commit secrets
データ送信先: Tool calls go to the provider's API as documented

トラブルシューティング

よくあるエラーと対処法

API key invalid

Get a key at 21st.dev/settings/api and set TWENTY_FIRST_API_KEY.

確認: search_components returns results
component uses missing shadcn import

Run npx shadcn add <component> for each unresolved import.

確認: Vite/Next builds cleanly

代替案

21st.dev Magic MCP 他との比較

代替案代わりに使う場面トレードオフ
v0.devYou prefer the v0 web UIOutside your editor; different style

その他

リソース

📖 GitHub の公式 README を読む

🐙 オープンな issue を見る

🔍 400以上のMCPサーバーとSkillsを見る