GitHub Copilot Agent + Github MCP ServerでDevinっぽいことできる？やってみた
最近Devinがすごいですね、私の所属する開発チームでも、Devinを業務に本格導入し始めました。
簡単なことならちょっとお願いするだけで何でもすぐやってくれますし、何なら難しい実装もおおよそ半分の工数を削減してできてしまいます。
Devinのすごいところ
Devinのすごいところは自律して作業できることだと思います。雑に頼むと多少作業が遅かったり、暴走して頼んでいないことをやるときがありますが、それでもタスクを自動で進めてくれるのは、開発業務の革命とも言えます。
他にも以下のような点がDevinのすごいところだと思います。
-
マルチタスク・並列処理
- Devin 2.0では、複数のAIエージェント（Devin）を同時に立ち上げて、それぞれ異なるタスクを並行して進めることが可能。例えば、API実装・フロントエンド開発・テスト作成などを同時に任せることができる。
-
柔軟な依頼方法と連携
- SlackやGitHubのPRコメント、Devin専用UIなど、さまざまな方法で作業依頼ができ、進捗や修正指示も手軽に行える。VS CodeやCursorなどのエディタとも連携し、普段の開発環境から直接Devinを呼び出して作業を依頼できる。
-
リアルタイムなコードレビューと最適化
- コードの品質分析や自動リファクタリング、コメント生成などもAIが担当し、開発者の生産性向上とコード品質の向上に貢献する。
ただDevinは利用料金は最低月20ドル以上なので、ちょっと高くて個人だとなかなか手を出せないところが難点です。
なのでGitHub Copilot Agent + GitHub MCP ServerでもDevinのようにIssueを渡すだけで、完全に自律してPRを上げるくらいはできるんじゃないかと思ったので検証することにしました。
GitHub Copilot AgentとGitHub MCP Serverについて
まず簡単にGitHub Copilot AgentとGitHub MCP Serverについて説明します。
GitHub Copilot Agentとは
Github Copilot Agentは、GitHubが提供する次世代のAIコードアシスタントで、従来のCopilotを大幅に進化させた「エージェント型」AIツールです。開発者が自然言語で指示を出すだけで、コードの生成や修正、リファクタリング、デバッグなどを自律的に実行できるのが最大の特徴です。
GitHub MCP Serverとは
GitHub MCPサーバーは、「MCP（Model Context Protocol）」を実装したサーバーで、AIモデル（例：GitHub Copilot Agent）がGitHubリポジトリや外部ツール・サービスと安全かつ統一的に連携できるようにするための仕組みです。
MCPについて詳しい説明は を参照してください。
GitHub Copilot AgentとGitHub MCP Serverを組み合わせることでできること
GitHub Copilot AgentとGitHub MCP Serverを連携させることで、AIによる開発自動化の範囲と深度が大きく広がります。
GitHubリポジトリ操作・管理の自動化
- Copilot AgentがGitHub MCP Server経由でリポジトリの横断検索、Issueの作成・管理、Pull Request（PR）の生成・レビューなどを自然言語で自律的に実行できる。
- 例：「このリポジトリの未解決Issueを一覧表示して」「最新のPRの内容を要約して」などの指示で、AIがMCP Serverを通じてGitHub APIにアクセスし、必要な情報取得や操作を自動化する。
実際に検証してみる
- GitHub MCP Serverの導入
- TODOコメントからIssueを作成
- Issueの内容から自動でPRを作成
と言った感じで検証を進めていきます。
GitHub CopilotはFreeモードでモデルはClaude 3.5 Sonnetを選択しています。
Github MCP Serverの導入
まず 公式リポジトリのREADMEを元にGitHub MCP Serverを使えるようにします。
- Dockerインストール
公式のGitHub MCP Serverを利用するためにDockerが必要なので OrbStackをインストールします。
こちらの記事によるとOrbStackはDockerと互換性があり、なおかつ軽量でパフォーマンスが良いらしいです。
- PAT取得
GitHub MCP Serverを起動、コマンド操作を行うためにhttps://github.com/settings/personal-access-tokens/new からPersonal Access Token(PAT)を作成します。
※ PATとは
PATは、GitHubなどのサービスでユーザー名とパスワードの代わりに利用できる認証トークンです。Gitコマンド（clone、pull、pushなど）でリポジトリにアクセスする際の認証などに使用されます。
セキュリティ上の注意点として、最小限必要な権限だけ付与し、最小限の有効期限で設定するのが良いでしょう。
権限はRepository permissionsから
- Contents (Read and write)
- Metadata (Read-only)
- Issues (Read and write)
- Pull Requests (Read and write)
を許可して作成しました。
- settings.jsonに記述
公式リポジトリのREADMEの上部にあるVS Code Installer Serverリンクを踏んでVS Codeを開きInstaller Serverをクリックすると一瞬でsettings.jsonに記述してくれます。
GITHUB_PERSONAL_ACCESS_TOKENのところに先ほど取得したPATを入れます。
"mcp": {
"servers": {
"github": {
"command": "docker",
"args": [
"run",
"-i",
"--rm",
"-e",
"GITHUB_PERSONAL_ACCESS_TOKEN",
"ghcr.io/github/github-mcp-server"
],
"env": {
"GITHUB_PERSONAL_ACCESS_TOKEN": "github_pat_****"
}
}
}
},
GitHub Copilotを開き⚒️アイコンをクリックし、↓のようにMCP Server: githubが出ていれば導入は完了です。
TODOコメントからIssueを作成する
まず試しに私のブログのリポジトリ内のTODOコメントからissueを作成してみます。
TODOコメントはAPIの型修正と、SNSシェア機能を追加するものを入れています。
br-to
https://github.com/br-to/tech-blog 内のTODOコメントの内容をissueに登録してください
GitHub Copilot
TODOコメントを検索して、それらをGitHubのissueとして登録するタスクを実行します。まず、コードベース内のTODOコメントを検索しましょう。
TODOコメントを2つ見つけました。これらをGitHubのissueとして登録していきます：
型の改善に関するTODO
SNSシェア機能の実装に関するTODO
これらをissueとして登録します。
次に、SNSシェア機能に関するissueを作成します。
TODOコメントを2つ見つけ、それぞれGitHubのissueとして登録しました：
"APIレスポンスの型定義の改善" (#46)
場所: route.ts
内容: APIレスポンスの型定義とチェックの改善タスク
"ブログ記事のSNSシェア機能の実装" (#47)
場所: page.tsx
内容: SNSシェアボタンとその機能の実装タスク
両方のissueには適切なラベルを付け、詳細なタスク内容と技術的な考慮事項を記載しました。これらのissueは GitHub リポジトリ上で追跡できます。コードベース内のTODOコメントは全て issue として登録されました。
ツールが呼び出されると、実行前にアクションを確認する必要があります。現在のセッション(Allow in this Session)、ワークスペース(Allow in this Workspace)、または今後のすべての呼び出し(Always Allow)に対して特定のツールを自動的に承認することができるので一回自動承認すれば、今後は楽に作業できます。(ただ一度自動承認したツールを自動承認しないように戻す方法は探しても見当たらなかったです🤔)
Issueの作成に関しては、特にこういうものを作って欲しいというテンプレを渡していなくても概要、タスク、目的を書いてくれてすごいです。ラベルも勝手につけてくれています。
APIの型修正
## 概要
`src/app/api/posts/route.ts` の型定義を改善する必要があります。
## タスク
- [ ] APIレスポンスの型定義を実装
- [ ] 適切な型チェックの追加
## 目的
- コードの型安全性の向上
- 開発時のエラー検出の改善
SNSシェア機能の追加
## 概要
`src/app/blog/[slug]/page.tsx` にSNSシェア機能を実装する必要があります。
## タスク
- [ ] シェアボタンのUIコンポーネントの作成
- [ ] 各SNSプラットフォーム（Twitter、Facebook等）へのシェア機能の実装
- [ ] シェアURLやメタデータの適切な設定
## 目的
- ブログ記事の拡散性の向上
- ユーザーエンゲージメントの促進
## 技術的な考慮事項
- Next.jsのクライアントサイドコンポーネントとして実装
- 各SNSプラットフォームのシェアAPIの適切な利用
- アクセシビリティへの配慮
Issueの内容から自動でPRを作成
では次にissueを渡してPRを作成してもらいます。
APIの型修正
https://github.com/br-to/tech-blog/issues/46 の対応をお願いします。 何をやったか、どうしてその実装にしたかはPRに記載してください
最初出してもらったものは型エラーが出ていたので一度指摘しましたが、依頼してから5分以内にはある程度のものを作成してくれました。
## 変更内容
APIレスポンスの型定義を改善しました。具体的には以下の変更を行いました：
1. `NotionPost` 型の追加
- Notion APIからのレスポンスの型を明確に定義
- プロパティの階層構造を正確に表現
- 必要なフィールドの型を詳細に指定
2. `BlogPost` 型の追加
- クライアントに返すレスポンスの型を定義
- フラットな構造で必要な情報のみを含む
- フロントエンドで使いやすい形に整形
## なぜこの実装にしたか
1. 型安全性の向上
- NotionのAPIレスポンスの型を正確に定義することで、データ構造の変更を早期に検出可能
- 型エラーによるランタイムエラーを防止
2. 開発体験の改善
- IDEの補完機能が正確に動作
- リファクタリング時の安全性向上
- コードの可読性向上
3. メンテナンス性の向上
- データ変換のプロセスが明確
- 将来的なAPI変更への対応が容易
SNSシェア機能の追加
## 概要
Issue #47 の対応として、ブログ記事のSNSシェア機能を実装しました。
## 実装内容
- ShareButtonsコンポーネントの作成
- Twitter、Facebook、LinkedInへのシェア機能
- アクセシビリティに配慮したボタンデザイン
- レスポンシブ対応のスタイリング
- 必要なSNSアイコンの追加（SVG形式）
- ブログ記事ページへの統合
## 技術的な選択
1. クライアントコンポーネントとして実装
- シェア機能はブラウザのAPIを使用するため、'use client'ディレクティブを使用
2. SVGアイコンの採用
- 高品質な表示とサイズ変更への対応
- アクセシビリティのためのaria-label付与
3. シンプルなシェアURL生成
- 各SNSプラットフォームの公式シェアAPIを使用
- URLとタイトルを適切にエンコード
## 動作確認項目
- [ ] 各SNSボタンのクリックで正しくシェアダイアログが開く
- [ ] シェアURLに記事のタイトルと正しいURLが含まれている
- [ ] モバイル表示での適切なレイアウト
- [ ] ホバー時の視覚的フィードバック
Closes #47
SNSシェアコンポーネントの見た目
PRのテンプレを渡したりしていないのでAPIの型修正とPRの書き方が変わっていますが、やはりこちらも5-10分でそれなりのものが作れました。
これでGitHub Copilot Agent + GitHub MCP Serverでも自動でissue作成からPR作成までやることは確認できました🙌
まとめ
ここまで試してみて、やはりDevinの完成度の高さと使いやすさは圧倒的だと感じました。
GitHub Copilot Agent + GitHub MCP Serverでも、Issueの自動生成からPR作成まで一通り自動化は可能ですが、いくつか課題もありました。
例えば、MCPを使って作業して欲しいのに、ローカル編集に切り替わっていたり、新規ファイルの作成はうまくいっても既存ファイルの更新に失敗するケースがありました。
それでも、自分で手作業でやるよりは圧倒的に早くタスクをこなせるので、簡単なIssue対応であれば十分実用的だと感じています。
なにより、ある程度は無料で使えるのも大きな魅力ですね😆
今後は、テストコードの自動生成など、もう一歩踏み込んだ検証もしていく予定です。
最後まで読んでいただき、ありがとうございました。
Discussion