AIコーディングエージェントのコラボレーション開発 ～ v0/Bolt/Lovable/Cursor/Windsurf/Devin/etc. ～ 2025/2/27 祭り AI Code Agents 1 MK(Masayuki Kawakita)

2025/2/27 祭り AI Code Agents 2 氏名：MK (Masayuki Kawakita) プロフィール：  システムエンジニア  LLM関連研究(出力性能最大化、自然言語探索最適 化、AI Safety、JailBreaking対策/Guardrail)  AIツールを使ってスモールプロダクト開発  Love Anthropic その他：  Anthropic Constitutional Classifiers TestでLevel4 までクリア。もし日本でLevel5をクリアした人がい たらお話させてください。 ※Level5をクリアした人は世界で7人のみ。Level4 クリアは40人。  ニーズがあれば、私が行ったJailbreakingの手法に ついて解説を行います。 自己紹介

2025/2/27 祭り AI Code Agents 3 やあ、Aさん。最近SNSで『2025年はエージェントの年 だ』とかいう投稿がバズってるの見かけたけど、あれ何か 知ってる？ エンジニア Aさん 営業担当 Iさん そうね、今エンジニア界隈は特にコーディングに強いAI エージェントの話でもちきりよ。ソースコード生成から テストやドキュメント作成まで多くのタスクがAIによっ て自動化されつつあるの。 そ、そうなんだ！？コーディングに強いAIエージェントって 例えばGitHub Copilotとかかな？それは聞いたことあるよ。 GitHub Copilotも今となってはAIコーディングエージェ ントの一種として考えても間違ってはいないわね。 でも、他にも色々な種類があって、有名どころだけでも 10個以上のツールがあるわよ。 有名どころだけでも10個以上もあるの！？ それぞれ何が違うの？ えらく関心があるわね。そうだ、最近社内に導入し た”MK Bot”を使って、AIコーディングエージェントに ついて調べてもらおうかしら。 (そりゃぁ、AIの波に乗り遅れ たくないからね) オフィスでの AさんとIさんの会話

2025/2/27 祭り AI Code Agents 4 ・・・ 調査が完了しました。 MK Bot 製品思想 × 得意領域 開発規模× 対応可能領域 ノーコード志向/ Webサービス型 開発効率化志向/エディター拡張型 UI/フロントエンド 開発向け ロジック/ バックエンド開発向け Cursor Windsurf Void Editor Lovable Bolt.new Aider Claude Code Cline v0 Replit GitHub Copilot 汎用タスク型 特定タスク特化型 小規模開発向け (迅速なMVP・プロト タイプ開発が得意) 大規模開発向け (大規模コードベース理解 に強い/様々なツールと 連携・統合可能) Cursor Windsurf Void Editor Lovable Bolt.new Aider Claude Code Cline v0 Replit GitHub Copilot Devin  Devin    以下は一例であるが、各AIコーディングエージェントには特色があり、タスクによって 向き不向きがあったり、何をどこまで自動化できるのかという点も大きく異なる。

2025/2/27 祭り AI Code Agents 5 フェーズ 最適ツール 次点ツール (1) 要件定義・計画 Devin：大規模や複雑な要件を論理的に整理 Claude Code：セキュリティ・規制要件の検討と分析 GitHub Copilot：要件からのコード構造予測と技術的実現性の検証 Lovable.dev：自然言語から概念整理とデザイン要件の視覚化 Replit：チーム間での要件共有と初期検証 (2) デザイン・ プロトタイプ開発 v0：ビジュアル最優先のUI試作に特化 Lovable.dev：コンポーネントベースのUI設計と直感的なビジュアル編集 Windsurf：Figmaデザインとコードの自動変換、チームでの協同デザイン Bolt.new：フロント+仮バックでMVP迅速化 Replit：リアルタイムプレビューとコラボレーション機能 Void Editor：軽量で直感的なUI編集 GitHub Copilot：プロトタイプコード迅速生成 (3) フロントエンド開発 v0：UIを高品質に作り込みたい場合 Lovable.dev：モバイルファーストデザインとリアルタイムプレビュー Windsurf：チーム全体でのフロントエンド効率的構築 Cursor：既存コード改修や最適化が速い Void Editor：直感的なインターフェースでコード編集効率化 GitHub Copilot：コンポーネント実装の高速化 Replit：ブラウザベースの即時プレビュー (4) バックエンド開発 Cursor：中規模API/拡張に柔軟対応 Aider：APIエンドポイント設計と実装の自動化 Cline：コマンドラインからの高速バックエンド構築 GitHub Copilot：データ処理ロジックの効率的実装 Bolt.new：MVPレベルのAPI高速実装 Claude Code：セキュリティ面含めたバックエンド分析 Replit：サーバーサイド処理の即時検証 Devin：特に複雑な大規模バックエンド構築の場合のみ (5) テスト・品質保証 Devin：TDDアプローチや大規模テストカバレッジ Claude Code：セキュリティテスト、脆弱性検出 Aider：既存コードからのテスト自動生成 Windsurf：CascadeによるCodebase全体を俯瞰したテストコード自動生成 Cursor：単体～統合テストのテンプレ生成 GitHub Copilot：テストケース自動生成と網羅性向上 Void Editor：テストコードの効率的編集 (6) デプロイメント・ 運用 Bolt.new/Lovable.dev：ブラウザでワンクリックデプロイ Replit：クラウドへの即時デプロイと運用監視 Devin：複雑なCI/CD自動化が必要な場合 (7) 保守・改善 Windsurf：大規模コードベースの理解と継続的改善 Cursor：日常のバグ修正、拡張に迅速対応 GitHub Copilot：コード品質向上と最新パターン適用 Void Editor：保守作業の効率化と視認性向上 Claude Code：ドキュメント更新とセキュリティ監査 Aider：既存コードベースの理解と修正提案 Devin：大規模リファクタリングが必要な場合 【参考】開発フェーズ別AIコーディングエージェントの最適な使い分け

2025/2/27 祭り AI Code Agents 6 なるほど、各AIコーディングエージェントごとに得意領域 やできることが結構違うんだね。 エンジニア Aさん 営業担当 Iさん そうね、各開発工程やタスクの内容に応じて、最適なAI エージェントを採用し、組み合わせて使っていくことが 業務効率化の鍵になると思うわ。 そういうことなんだね。あれ……？AIエージェントを組み合 わせて使うことってできるの？1つのAIエージェントで開発 したソースコードは、そのAIエージェント内でしか管理でき ないものだと思ってたけど。 確かに中にはそういったAIコーディングエージェント サービスもあるわ。でも、大半はGitHubなどのリポジ トリ(Git)ホスティングサービスやGitなどのバージョン 管理システムを利用することで、実質的にAIエージェン ト間で共同開発することも可能よ。 なるほど。それじゃぁAIコーディングエージェント同士で コラボレーション開発ができるってわけだね。 ……。まぁいいわ。次のページでは、現在私のプロジェ クトで取り入れている、MK Botから提案された 方法を紹介するわ。 AさんとIさんの 会話の続き

コードレビュー/自動テスト /ドキュメント作成/etc. 各種開発 各種開発 デザインを単 一HTMLファ イルに変換 UI・デザイン 作成 2025/2/27 祭り AI Code Agents 7 ローカル 環境 GitHub (リモート リポジトリ) Web サービス ローカル リポジトリ ソース コード ソース コード ソース コード ソース コード DL UL プロジェクト 雛形開発 ソース コード DL ULまたはプロンプト にHMTL貼り付け GitHub連携&push リポジトリ インポート (Bolt to GitHub) DL Commit 読み込み Commit リモートリポジトリとして設定 リポジトリ インポート 各AIコーディングエージェントソースコード連携

自動テスト /CI /PR作成 ロジック 中心開発 各種開発 2025/2/27 祭り AI Code Agents 8 ローカル 環境 GitHub (リモート リポジトリ) Web サービス ローカル リポジトリ ソース コード コードレビュー /テストコード生成 /PR作成 ソース コード フロントエンド 中心開発 リポジトリ インポート (Bolt to GitHub) DL Commit 読み込み リモートリポジトとして設定 各AIコーディングエージェントのコラボレーション開発フロー Aブランチ メイン ブランチ 同期(双方向連携) Bブランチ Cブランチ MCP ローカルリポジトリ 経由でPush リポジトリ 双方向連携 (各ブランチを適宜読み込み) Commit

2025/2/27 祭り AI Code Agents 9 稲妻ボタンを クリックするとGitHub のリポジトリが Bolt.newで開かれる Bolt.newで作成したプ ログラムを自分の GitHubアカウントのリ ポジトリにPushするこ とができる。 【注意事項】  この拡張機能は、Bolt.newとGitHubで実質的な接続を行っているわけではない点に注意が必要。  GitHubリポジトリからインポートはできるものの、その後そのリポジトリへPushしたり、Fetch/Pullはでき ない。また、Pushする場合は、毎回新規リポジトリが作成されてしまう。  そのため、Bolt.newで編集を行ったソースコードは、ローカル環境にダウンロードし、ローカルリポジトリか らリモートリポジトリへCommit/Pushしなくてはならない。 【参考】Bolt.newでGitHubリポジトリをインポートする方法(2/3)

2025/2/27 祭り AI Code Agents 10 デモ動画 【参考】Bolt.newでGitHubリポジトリをインポートする方法(3/3)

2025/2/27 祭り AI Code Agents 11 【ご参考】Lovableにローカルのソースコードをアップロードする方法(1/2)

2025/2/27 祭り AI Code Agents 12 【ご参考】Lovableにローカルのソースコードをアップロードする方法(2/2) サイドメニューのエクスプロー ラービュー上で、自由にフォルダ やファイルの削除が可能。 変更を加えた後は、Gitメニュー からリモートリポジトリへ Commit/Pushすることが可能。 【注意事項】  Lovable.devは、GitHubリポジトリと双方向連携できるものの、Lovable.devが自らを起点に作成したリポジ トリとしか連携できない点に注意が必要(=既に作成済みのリポジトリをリモートリポジトリとして設定するこ とはできない) 。(2025/02/26時点)

2025/2/27 祭り AI Code Agents 13 様々なAIコーディングエージェントサービスやツールは、 GitHubなどのリポジトリ(Git)ホスティングサービスやGit などのバージョン管理システムを利用することで共同開 発を行えるということがよくわかったよ！ エンジニア Aさん 営業担当 Iさん そうね、本当は全てのサービスがGitHubと双方向連携 できるようにしてくれれば、もっと開発は効率化するん だけどね。今は対応していないAIエージェントサービス とソースコードの同期をとるのにひと手間かかるので。 理解したよ。それにしてもこれほどのAIコーディングエー ジェントがあるとどれを契約すべきか迷ってしまうね。どの サービスもサブスク契約だから、いくつも契約していたら月 の出費がすごいことになりそう……。 確かに悩ましいところね。Devinなんて月額$500だしね。 月額$500…日本円で約75,000円だって！？ 僕のお給料ではとても払える額じゃない！ そういうリアクションになるのはよくわかるわ。笑 でも安心して。世界中で同じようなことを考えている人 たちが有志として集まって、Devinをオープンソース化 (ソースコードを公開して無料で誰でも使えるようにす ること)の取り組みがあるから、それを紹介するわね。 AさんとIさんの 会話の続き おぉ、それは朗報だ！ 使い過ぎてAPI料金の方がサブス クより高いなんて本末転倒なこと にならないように注意してね。

2025/2/27 祭り AI Code Agents 14 【ご参考】Devinのオープンソース化プロジェクト OpenHandsのご紹介(1/2) オープンソース化 GitHuib：OpenHands  OpenHandsは「Devin」に触発されて作 られた最も人気の高いオープンソースAI エージェントの一つです。  元々OpenDevinとして開発され、後に改 名されました。  ソフトウェアエンジニア向けのAIエー ジェントであり、人間の開発者と同様に コードの編集・実行、コマンド実行、 Web閲覧、API呼び出しなどが可能です。  Dockerによる隔離環境内でコードを実行 することで安全性も確保しています。 OpenHandsは活発に開発が続けられてお り開発チームは2024年にシード資金を調 達し、現在はホスティング版サービス （ベータ版）の提供に向けた開発も進めて います。 https://github.com/All-Hands-AI/OpenHands

2025/2/27 祭り AI Code Agents 15 【ご参考】Devinのオープンソース化プロジェクト OpenHandsのご紹介(2/2) デモ動画

2025/2/27 祭り AI Code Agents 16 【ご参考】Bolt.newの進化系オープンソース Bolt.diyのご紹介 オープンソース化 GitHuib：Bolt.diy  Bolt.diyは、商用版であるBolt.newの 基盤となるコアコンポーネントをオープ ンソース化したもので、ローカル環境で 自由にカスタマイズしながら利用できる AI駆動型の開発ツールです。  Bolt.newがブラウザ上で動作する商用 サービスであるのに対し、Bolt.diyは ローカル環境や無料のクラウドサービス （例: Cloudflare Pages）で動作可能な 点が大きな違いです。  Bolt.diyは、使用するLLM（大規模言 語モデル）を自由に選択できます。 OpenAIやAnthropicなどのクラウドベー スモデルから、HuggingFaceやローカ ルモデル（例: Ollama）まで幅広く対応 しています。 https://github.com/stackblitz-labs/bolt.diy

2025/2/27 祭り AI Code Agents 17 EOF ご清聴ありがとうございました。