21st.dev マジックAIエージェント

MCPバナー

Magic Component Platform（MCP）は、自然言語による記述を通じて、美しくモダンなUIコンポーネントを瞬時に作成できる、強力なAI駆動型ツールです。主要なIDEとシームレスに統合され、UI開発のための効率的なワークフローを提供します。

🌟 特徴

AIを活用したUI生成:自然言語で記述してUIコンポーネントを作成する
マルチIDEサポート:
- カーソルIDE統合
- ウィンドサーフィンサポート
- VSCodeサポート
- VSCode + Cline統合（ベータ版）
モダンコンポーネントライブラリ: 21st.devに触発された、事前に構築されたカスタマイズ可能なコンポーネントの膨大なコレクションにアクセスできます。
リアルタイムプレビュー: 作成したコンポーネントをすぐに確認できます
TypeScript サポート: 型安全な開発のための完全な TypeScript サポート
SVGL統合: プロフェッショナルなブランドアセットとロゴの膨大なコレクションへのアクセス
コンポーネントの強化: 高度な機能とアニメーションで既存のコンポーネントを改善します (近日公開)

Related MCP server: 21st.dev Magic AI Agent

🎯 仕組み

エージェントに必要なことを伝える
- AIエージェントのチャットで/uiと入力し、探しているコンポーネントを説明するだけです。
- 例: /ui create a modern navigation bar with responsive design
魔法で創造しよう
- IDEはMagicを使用するように促します
- マジックは洗練されたUIコンポーネントを瞬時に構築します
- コンポーネントは21st.devのライブラリからインスピレーションを得ています
シームレスな統合
- コンポーネントはプロジェクトに自動的に追加されます
- 新しいUIコンポーネントをすぐに使い始めましょう
- すべてのコンポーネントは完全にカスタマイズ可能

🚀 はじめに

前提条件

Node.js (最新の LTS バージョンを推奨)
サポートされている IDE の 1 つ:
- カーソル
- ウィンドサーフィン
- VSCode（Cline拡張機能付き）

インストール

APIキーを生成する
- 21st.dev マジックコンソールにアクセス
- 新しいAPIキーを生成する
インストール方法を選択

方法 1: CLI インストール (推奨)

IDE 用に MCP をインストールして構成するためのコマンドは 1 つだけです。

npx @21st-dev/cli@latest install <client> --api-key <key>

サポートされているクライアント: cursor、windsurf、cline、claude

方法2: 手動設定

手動で設定したい場合は、IDE の MCP 構成ファイルに以下を追加します。

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

設定ファイルの場所:

カーソル: ~/.cursor/mcp.json
ウィンドサーフィン: ~/.codeium/windsurf/mcp_config.json
クライン: ~/.cline/mcp_config.json
クロード: ~/.claude/mcp_config.json

方法3: VS Codeのインストール

ワンクリックでインストールするには、以下のいずれかのインストールボタンをクリックします。

VS CodeでNPXを使ってインストールする VS Code Insiders で NPX を使用してインストールする

VS Codeの手動セットアップ

まず、ワンクリックインストールの場合は上記のインストールボタンをご確認ください。手動インストールの場合は、以下の手順に従ってください。

VS Codeのユーザー設定（JSON）ファイルに、以下のJSONブロックを追加します。Ctrl Ctrl + Shift + Pを押してPreferences: Open User Settings (JSON)と入力することで実行できます。

{
  "mcp": {
    "inputs": [
      {
        "type": "promptString",
        "id": "apiKey",
        "description": "21st.dev Magic API Key",
        "password": true
      }
    ],
    "servers": {
      "@21st-dev/magic": {
        "command": "npx",
        "args": ["-y", "@21st-dev/magic@latest"],
        "env": {
          "API_KEY": "${input:apiKey}"
        }
      }
    }
  }
}

オプションとして、ワークスペース内の.vscode/mcp.jsonというファイルに追加することもできます。

{
  "inputs": [
    {
      "type": "promptString",
      "id": "apiKey",
      "description": "21st.dev Magic API Key",
      "password": true
    }
  ],
  "servers": {
    "@21st-dev/magic": {
      "command": "npx",
      "args": ["-y", "@21st-dev/magic@latest"],
      "env": {
        "API_KEY": "${input:apiKey}"
      }
    }
  }
}

❓ よくある質問

Magic AI Agent はコードベースをどのように処理しますか?

Magic AI Agentは、生成するコンポーネントに関連するファイルのみを書き込みまたは変更します。プロジェクトのコードスタイルと構造に従い、アプリケーションの他の部分に影響を与えることなく、既存のコードベースとシームレスに統合されます。

生成されたコンポーネントをカスタマイズできますか?

はい！生成されたすべてのコンポーネントは完全に編集可能で、適切に構造化されたコードが付属しています。コードベース内の他のReactコンポーネントと同様に、スタイル、機能、動作を変更できます。

世代が足りなくなったらどうなりますか?

月間生成上限を超えた場合、プランのアップグレードを促すメッセージが表示されます。いつでもアップグレードして、コンポーネントの生成を継続できます。既存のコンポーネントは引き続き完全に機能します。

新しいコンポーネントはどれくらい早く 21st.dev のライブラリに追加されますか?

作者はいつでも21st.devにコンポーネントを公開でき、Magic Agentはすぐにそれらにアクセスできます。つまり、コミュニティから提供される最新のコンポーネントとデザインパターンに常にアクセスできるということです。

コンポーネントの複雑さに制限はありますか?

Magic AI Agentは、シンプルなボタンから複雑なインタラクティブフォームまで、さまざまな複雑さのコンポーネントを処理できます。ただし、最良の結果を得るには、非常に複雑なUIを、より小さく管理しやすいコンポーネントに分割することをお勧めします。

🛠️ 開発

プロジェクト構造

mcp/
├── app/
│   └── components/     # Core UI components
├── types/             # TypeScript type definitions
├── lib/              # Utility functions
└── public/           # Static assets

主要コンポーネント

IdeInstructions : さまざまな IDE のセットアップ手順
ApiKeySection : APIキー管理インターフェース
WelcomeOnboarding : 新規ユーザー向けのオンボーディングフロー

🤝 貢献する

貢献を歓迎します！ Discordコミュニティに参加してフィードバックを提供し、Magic Agentの改善にご協力ください。ソースコードはGitHubで公開されています。

👥 コミュニティとサポート

Discordコミュニティ- 活発なコミュニティに参加しましょう
Twitter - 最新情報はフォローしてください

⚠️ ベータ版のお知らせ

Magic Agentは現在ベータ版です。期間中はすべての機能を無料でご利用いただけます。プラットフォームの改善にご協力いただき、皆様からのフィードバックに感謝いたします。

📝 ライセンス

MITライセンス

🙏 謝辞

ベータテスターとコミュニティメンバーに感謝します
Cursor、Windsurf、Clineチームの協力に感謝します。
コンポーネントのインスピレーションを得るための21st.devとの統合
ロゴとブランド資産の統合のためのSVGL

詳細については、 Discord コミュニティに参加するか、 21st.dev/magicにアクセスしてください。

Magic Component Platform (MCP)