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

👁 MCPバナー

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

🌟 特徴

• AIを活用したUI生成:自然言語で記述してUIコンポーネントを作成する

• マルチIDEサポート:

  • カーソルIDE統合

  • ウィンドサーフィンサポート

  • VSCode + Cline統合（ベータ版）

• モダン コンポーネント ライブラリ: 21st.devに触発された、あらかじめ構築されたカスタマイズ可能なコンポーネントの膨大なコレクションにアクセスできます。

• リアルタイムプレビュー: 作成したコンポーネントをすぐに確認できます

• TypeScript サポート: 型安全な開発のための完全な TypeScript サポート

• SVGL統合: プロフェッショナルなブランドアセットとロゴの膨大なコレクションへのアクセス

• コンポーネントの強化: 高度な機能とアニメーションで既存のコンポーネントを改善します (近日公開)

Related MCP server: 21st.dev Magic AI Agent

🎯 仕組み

1. エージェントに必要なことを伝える

   • AIエージェントのチャットで/uiと入力し、探しているコンポーネントを説明するだけです。

   • 例: /ui create a modern navigation bar with responsive design

2. 魔法で創造しよう

   • IDEはマジックを使うように促します

   • マジックは洗練されたUIコンポーネントを瞬時に構築します

   • コンポーネントは21st.devのライブラリからインスピレーションを得ています

3. シームレスな統合

   • コンポーネントはプロジェクトに自動的に追加されます

   • 新しいUIコンポーネントをすぐに使い始めましょう

   • すべてのコンポーネントは完全にカスタマイズ可能

🚀 はじめに

前提条件

• Node.js (最新の LTS バージョンを推奨)

• サポートされている IDE の 1 つ:

  • カーソル

  • ウィンドサーフィン

  • VSCode（Cline拡張機能付き）

インストール

1. APIキーを生成する

   • マジックダッシュボードにアクセスしてください

   • APIセクションに移動する

   • 新しいAPIキーを生成する

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

Maintenance

Resources

• GitHub Repository
Need Help?Related Servers

Tools

• 21st_magic_component_builderA
• 21st_magic_component_inspirationC
• logo_searchA