Integrations

Offers community support and feedback through an official Discord server
Provides access to source code and contribution opportunities through GitHub
Requires Node.js as a prerequisite for installation and operation

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

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

🌟 特徴

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

🎯 仕組み

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

🚀 はじめに

前提条件

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

インストール

APIキーを生成する
- マジックダッシュボードにアクセスしてください
- APIセクションに移動する
- 新しいAPIキーを生成する
IDEセットアップ

カーソルIDE

npx -y @smithery/cli@latest run @21st-dev/magic-mcp --config "{\"TWENTY_FIRST_API_KEY\":\"your-api-key\"}"

ウィンドサーフィン

~/.codeium/windsurf/mcp_config.jsonに追加します:

{
  "mcpServers": {
    "magic": {
      "command": "npx",
      "args": [
        "-y",
        "@smithery/cli@latest",
        "install",
        "@21st-dev/magic-mcp",
        "--client",
        "windsurf"
      ],
      "env": {
        "TWENTY_FIRST_API_KEY": "your-api-key"
      }
    }
  }
}

VSCode + Cline（ベータ版）

Cline の MCP 構成に追加:

{
  "mcpServers": {
    "magic": {
      "command": "npx",
      "args": [
        "-y",
        "@smithery/cli@latest",
        "install",
        "@21st-dev/magic-mcp",
        "--client",
        "cline"
      ],
      "env": {
        "TWENTY_FIRST_API_KEY": "your-api-key"
      }
    }
  }
}

❓ よくある質問

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にアクセスしてください。

You must be authenticated.

A

security – no known vulnerabilities

F

license - not found

A

quality - confirmed to work

Tools

AI 駆動型ツールは、開発者が Cursor、Windsurf、VSCode などの一般的な IDE と統合し、自然言語による記述を通じて美しい UI コンポーネントを即座に作成するのに役立ちます。

Appeared in Searches

Resources for creating UI components