Magic MCP

🚀 21世紀魔法人工知能エージェント

Magic Component Platform (MCP) は強力なAI駆動のツールで、開発者が自然言語での記述を通じて、迅速に現代的で美しいUIコンポーネントを作成することを支援します。人気のIDEとシームレスに統合され、UI開発をサポートするスムーズなワークフローを提供します。

✨ 主な機能

• AI駆動のUI生成：自然言語での記述を通じてUIコンポーネントを作成します。
• 多IDEサポート：
  • Cursor IDEとの統合
  • Windsurf のサポート
  • VSCode + Cline の統合（ベータ版）
• 現代的なコンポーネントライブラリ：21st.dev をインスピレーションとした、膨大な事前構築済みのカスタマイズ可能なコンポーネントライブラリにアクセスできます。
• リアルタイムプレビュー：作成したコンポーネントを即座に確認できます。
• TypeScriptサポート：型安全な開発を実現するため、TypeScriptを完全にサポートしています。
• SVGL統合：膨大で専門的なブランド資産とロゴライブラリを取得できます。
• コンポーネント拡張：既存のコンポーネントに高度な機能やアニメーションを追加できます（近日公開）。

🚀 クイックスタート

ワークフロー

1. エージェントに要件を伝える
   • AIエージェントのチャットで、/ui を入力し、必要なコンポーネントを記述します。
   • 例：「検索バーと結果リストを持つWebページを作成」と入力すると、対応するコードが生成されます。
2. リアルタイムフィードバックを取得する：IDE内で直接、コード構造とベストプラクティスに関する提案を受け取ります。
3. 開発プロセスを簡素化する：AIによって、フォーム検証、イベント処理、状態管理などの繰り返しコードを自動生成します。

📦 インストール

前提条件

• Node.js（バージョン12以上）
• npmまたはyarn
• サポートされているIDE（VSCode、IntelliJ IDEAなど）をインストールする

インストール方法

方法1：CLIツールを使用する

1. npmを通じてMagic CLIをインストールします。

npm install -g magic-cli

2. プロジェクトディレクトリでMagicプロジェクトを初期化します。

magic init

3. 指示に従って設定を完了し、必要なIDEとプラグインを選択します。

方法2：手動で設定する

1. 圧縮ファイルをダウンロードして解凍します。
2. 環境変数を設定します（オプション）。
3. 必要な依存ライブラリを手動でインストールします。

📚 ドキュメント

よくある質問

• Q：Magic Agentは私のコードをどのように処理しますか？ A：プロジェクト構造とコードのコンテキストを分析し、IDE内でリアルタイムフィードバックと提案を提供しますが、直接ファイルを変更することはありません。
• Q：生成されたコンポーネントをカスタマイズできますか？ A：もちろんです！生成されたコンポーネントは標準のHTML、CSS、JavaScriptを使用しているため、必要に応じて自由に変更できます。
• Q：使用制限はありますか？ A：現在はベータ段階であり、すべての機能は無料で使用できます。当社は引き続きプラットフォームを改善していきます。

開発情報

プロジェクト構造

src/
├── components/    # カスタムコンポーネントを格納
│   └── Button.vue
├── pages/        # ページコンポーネントを格納
│   └── Home.vue
└── App.vue       # メインアプリケーションファイル

主要コンポーネント

• WelcomeOnboarding：新しいユーザーのオンボーディングフロー
• MagicExtension：核心機能拡張モジュール
• ComponentGenerator：コンポーネントを生成するメインロジック

🤝 コントリビューションガイド

私たちは、あらゆるコントリビューションを歓迎します！Discordコミュニティに参加し、フィードバックを提供し、Magic Agentの改善にご協力ください。ソースコードはGitHubにホストされています。

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

• Discordコミュニティ - 活発なコミュニティに参加しましょう。
• Twitter - 最新情報を入手するためにフォローしましょう。

⚠️ 重要提示

Magic Agentは現在ベータ段階です。この期間中はすべての機能が無料で利用できます。フィードバックと理解をいただき、ありがとうございます。当社は引き続きプラットフォームを最適化していきます。

📄 ライセンス

MITライセンス

🙏 謝辞

• ベータテスターとコミュニティメンバーに感謝します。
• Cursor、Windsurf、Clineチームの協力に特別な感謝を申し上げます。
• 21st.dev との協力により、コンポーネントのアイデアを得ることができました。
• SVGL がブランド資産の統合を提供してくれました。

詳細な情報については、Discordコミュニティに参加するか、21st.dev/magic をご覧ください。