Magic (21st.dev UI Generator)

🚀 21世紀魔法AIエージェント

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を入力して必要なコンポーネントを記述します。
   • 例：/ui 現代的なレスポンシブナビゲーションバーを作成
2. 魔法を使って生成する
   • あなたのIDEがMagicを使用するように促します。
   • Magicが瞬時に美しいUIコンポーネントを構築します。
   • コンポーネントは21st.devライブラリを参考にしています。
3. シームレスな統合
   • コンポーネントが自動的にプロジェクトに追加されます。
   • 新しいUIコンポーネントをすぐに使用できます。
   • すべてのコンポーネントは完全にカスタマイズ可能です。

🚀 クイックスタート

前提条件

• Node.js（最新のLTSバージョンを推奨）
• サポートされているIDEのいずれか：
  • Cursor
  • Windsurf
  • VSCode（Cline拡張付き）

インストール

1. APIキーを生成する
   • Magicダッシュボードにアクセスします。
   • APIセクションに移動します。
   • 新しいAPIキーを生成します。
2. IDEの設定

Cursor IDE

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

Windsurf

~/.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のソースコード管理に追加します：

{
  "apiKeys": {
    "21st.dev": "your-api-key"
  }
}

🤝 コントリビューション

コントリビューションを歓迎します！Discordコミュニティに参加し、Magicエージェントの改善にご協力ください。ソースコードはGitHubで入手できます。

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

• Discordコミュニティ - アクティブなコミュニティに参加しましょう
• Twitter - 最新情報を追跡しましょう

⚠️ ベータ版告知

Magicエージェントは現在ベータ版です。この期間中はすべての機能が無料です。ごフィードバックとご理解をいただき、引き続きプラットフォームを改善していきます。

📄 ライセンス

MITライセンス

🙏 謝辞

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

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