NRI OpenStandiaAdvent Calendar 2024

GitHub Copilot Extensionsによるオリジナルエージェント開発

Last updated at 2024-12-21Posted at 2024-12-14

はじめに

最近、開発者の間で話題沸騰中の GitHub Copilot Extensions。
「GitHub Copilot」といえば、AIによるコード提案・生成機能を搭載したコードエディタ拡張機能ですが、その機能を独自にカスタマイズ可能な Github Copilot Extensions が登場しました。

この記事では、主に以下について紹介していきます。

GitHub Copilot Extensionsの概要
サードパーティーのExtensionsの活用
オリジナルエージェントの開発

公式ページを主に参照。

1. GitHub Copilot Extensionsとは？

GitHub Copilot Extensionsは、GitHub Copilotのチャット機能を拡張するツールです。

下記2つの利用方法があります。

サードパーティーが作成したExtensionをインストールして利用
JavaScript等で独自にプログラムしたExtensionをデプロイして利用

サードパーティーが作成したExtensionをインストールして利用

引用：Sentry for GitHub Copilot

JavaScript等で独自にプログラムしたExtensionをデプロイして利用

引用：GitHub Copilot Extensions公開ベータ開始:GitHub Copilotエコシステムを強化

概要まとめ

項目	内容
利用可能ユーザー	GitHub Copilotライセンス保持者であれば利用可能 - 個人ユーザー：GitHub Copilot Individual - 組織や企業：GitHub Copilot Business, GitHub Copilot Enterprise
費用	- 拡張機能の使用/構築は無料 - 一部サードパーティー拡張機能は有料の場合あり
品質と安全性	- サードパーティー製のExtension はGitHubによる審査あり
使用時に共有されるデータ	- GitHubユーザーID、チャット履歴

1-1. サポートされているクライアントとIDE （2024/12/02 現在）

Clients and IDEs	GitHub Copilot Extensions support
Visual Studio Code	✓
Visual Studio	✓
GitHub.com	✓
GitHub Mobile	✓
JetBrains IDEs	✓
GitHub Codespaces	✗
Vim/Neovim	✗
Copilot in the CLI	✗
Xcode	✗

1-2. Visial Studio Code Chat extensions との違い

Github Copilot Chatを拡張する方法には、Github Copilot Extensionsの他に類似機能としてVSCodeのChat extensionsがあります。違いは以下の通りです。

機能	限定性	稼働場所
Chat extensions	VS Code上でしか使用できない	ローカル
GitHub Copilot Extensions	Visual Studio Code, Visual Studio, GitHub.com, GitHub Mobile, JetBrains IDEs	サーバー

2.サードパーティーのExtensionsについて

2-1. 利用手順

1. GitHub Marketplace/Copilotにアクセス

2. 利用したいサードパーティーのCopilot Extensionを選択してインストール

2-2. サードパーティーのExtensionsの例

サードパーティー	主な特徴と機能
Docker	- プロジェクトに適した Docker アセットの生成 - プルリクエストの作成 - Docker Scout で脆弱性の検出
Stack Overflow	- Stack Overflow の 5,800 万件以上の技術的な質問と回答に基づいて要約された回答を生成
Perplexity	- IDE を離れることなく、リアルタイムの Web 検索結果にアクセス可能

2-3. 具体的な活用事例

Sentry

ソフトウェア開発におけるエラー監視とトラッキングを行うためのオープンソースのモニタリングツール

Sentry Copilot Extensionで実現可能なこと

問題の特定: プロジェクト内の最新のIssueを確認。
詳細情報の取得: 特定のIssueについて詳細な情報を取得。
GitHub Issueとの統合: SentryのIssueから直接GitHub Issueを作成し、特定の担当者に割り当て。
問題の解決: 発生したIssueを解決するためのアクションもサポート。

(1) SentryのIssueから直接GitHub Issueを作成

(2) Issueを特定の担当者に割り当て

引用：Introducing Copilot Extensions: Sentry Extension for GitHub Copilot

3. サンプルオリジナルエージェントの実装

Github社からいくつかサンプルプログラムが公開されています。

まずは、その中でもHello World的な位置付けであるBlackbeardエージェント（黒ひげのような話し方をするエージェント）を題材にオリジナルエージェントの構築手順を説明します。

3-1. アプリケーションの構成

アプリケーションの処理内容は、わずか53行のコードでindex.jsに定義されています。このプログラムはExpressで立ち上げたサーバー上で稼働しています。

シーケンス図

3-2. 主要なコンポーネント

1. サーバーセットアップ

Express.jsを使用してHTTPサーバーを構築

import express from "express";
const app = express();
app.post("/", express.json(), async (req, res) => { ... });

2. Github API 連携

Octokitを使用してGitHub APIと通信：
- ユーザートークンによる認証
- ユーザー情報の取得と検証

import { Octokit } from "@octokit/core";
const octokit = new Octokit({ auth: tokenForUser });
const user = await octokit.request("GET /user");

3. メッセージ処理システム

カスタムシステムメッセージの組み込み：
- 海賊風の応答生成のためのプロンプト設定
- ユーザー名を含むカスタマイズされた応答形式

const messages = payload.messages;
messages.unshift({
  role: "system",
  content: "You are a helpful assistant that replies to user messages as if you were the Blackbeard Pirate.",
});

4. Copilot LLM API連携

GitHub CopilotのLLM APIを使用した応答生成：
- ストリーミング形式での応答生成
- トークンベースの認証
- JSONペイロードでのメッセージ送信

const copilotLLMResponse = await fetch(
  "https://api.githubcopilot.com/chat/completions",
  {
    method: "POST",
    headers: {
      authorization: `Bearer ${tokenForUser}`,
      "content-type": "application/json",
    },
    body: JSON.stringify({
      messages,
      stream: true,
    }),
  }
);

補足：bodyの引数にmodelを追加することで使用するLLMを指定できます。検証したところ、使用可能なモデルはgpt-3.5-turbo（gpt-3.5-turbo-0613）、gpt-4o（gpt-4o-2024-05-13）でした。modelに引数を指定しない場合、デフォルトとして gpt-3.5-turbo-0613 が使用されます。（2024/11/28 現在）

const copilotLLMResponse = await fetch(
  "https://api.githubcopilot.com/chat/completions",
  {
    method: "POST",
    headers: {
      authorization: `Bearer ${tokenForUser}`,
      "content-type": "application/json",
    },
    body: JSON.stringify({
      model: "gpt-4o", // ここで使用するLLMを指定可能
      messages,
      stream: true,
    }),
  }
);

5. ストリーミングレスポンス

Node.jsのストリーム機能を使用したリアルタイムでのデータストリーミング

import { Readable } from "node:stream";
Readable.from(copilotLLMResponse.body).pipe(res);

3-3. 実装手順

Copilotエージェントをデプロイ

Copilot エージェントを構築　※今回は公式のサンプルエージェントを使用
インターネットからアクセス可能なサーバーにデプロイ
デバッグが目的であればCodespacesのポート転送も使用可能
※ 今回はこちらを例に説明
「ポート」で「表示範囲」を変更
「ローカルアドレス」のURLを控えておく。（GitHub Appの作成時に使用）
※ パス / へのGETリクエストは未実装なので、ブラウザで開くと「Cannot GET /」と表示される。

GitHub Appを作成

「Settings」から「Developer settings」を選択
「New GitHub App」を選択
- GitHub App name : @で呼び出すエージェント名（例：blackbeard-extension-sample）
- Homepage URL : GitHub Appのホームページ。以下のいずれかを利用。
  - アプリのウェブサイトURL
  - アプリを所有する組織のURL（例：自身のGitHubページや会社のHP）
  - アプリのコードが保存されているリポジトリのURL（Public repoの場合）
- Callback URL : 控えておいた「ローカルアドレス」の後ろに/callbackを付与したURL
- Webhookは「Active」のチェックを外す
- Permissionsで「Account permissions」の「Copilot Chat」を「Read-only」にする
- 「Where can this GitHub App be installed?」：いずれかを選択
- Create GitHub Appを選択

作成したGitHub AppにCopilotエージェントを統合

Copilotを選択
- App Type : Agent
- URL : 控えておいた「ローカルアドレス」
- Inference description：エージェントを使うユーザに見える説明
「Install App」からインストール

Visual Studio Code, GitHub.com, GitHub Mobile etc. で呼び出し可能！

※最初の呼び出しの際のみ認証を行う必要があります。

実際の挙動

4. オリジナルエージェントの開発

Github Copilot Extensionsで実現可能なことの一部を紹介するため、LLMマルチエージェントを活用してユーザーの旅行先を決定するエージェントを実装しました。このエージェントは、ユーザーが提示した複数の旅行先候補から、観光地や食事、予算などの要素を考慮して最適な目的地を選択します。

4-1. LLMマルチエージェントとは？

複数の大規模言語モデル（LLM）をエージェントとして活用し、相互に協力・競争しながら複雑なタスクを遂行するシステムです。各エージェントは特定の役割や専門性を持ち、互いにコミュニケーションを取り合うことで、単一のモデルでは難しい問題解決や高度なタスクの実行を可能にします。この分野に関する、ツールや基盤、関連論文も数多く発表されています。

4-2. 動作フロー

ユーザーが旅行先候補を入力（例：ギリシャ、スイス、カナダ）
専門エージェントが情報を収集・分析。分析の内容もユーザーに提示
- 観光地エージェント：各候補地の観光スポットをリサーチ。GPT-4oを使用
- 食事エージェント：各地域の名物料理情報を収集。GPT-3.5 Turboを使用
- 予算エージェント：各地域を予算の観点から分析。Gemini 1.5 Flashを使用
収集した情報を統合
意思決定エージェントが最適な旅行先を決定。Gemini 1.5 Proを使用
結果をユーザーに提示

4-3. アーキテクチャ

4-4. 各エージェントのプロンプトの内容

観光地エージェント

あなたは旅行先の観光地に関する専門家です。以下の旅行先候補について、それぞれの主要な観光スポット、特徴、魅力を簡潔にまとめてください。各旅行先につき3-5つの重要なポイントを挙げ、観光の観点から比較できるようにしてください。


旅行先候補: [ユーザーが提供した候補リスト]

回答形式:
[旅行先1]:
- ポイント1
- ポイント2
- ポイント3

[旅行先2]:
- ポイント1
- ポイント2
- ポイント3

...

ご飯エージェント

あなたは各地域の食文化に精通した専門家です。以下の旅行先候補について、それぞれの代表的な料理、食の特徴、おすすめのグルメスポットを簡潔にまとめてください。各旅行先につき3-5つの重要なポイントを挙げ、食の観点から比較できるようにしてください。


旅行先候補: [ユーザーが提供した候補リスト]

回答形式:
[旅行先1]:
- ポイント1
- ポイント2
- ポイント3

[旅行先2]:
- ポイント1
- ポイント2
- ポイント3

...

予算エージェント


あなたは旅行予算の専門家です。以下の旅行先候補について、予算の観点から分析し、それぞれの費用対効果、予算管理のコツ、潜在的な費用節約の機会を簡潔にまとめてください。各旅行先につき3-5つの重要なポイントを挙げ、予算の観点から比較できるようにしてください。


旅行先候補: [ユーザーが提供した候補リスト]


回答形式:
[旅行先1]:



予算ポイント1（例：平均的な宿泊費と食費）
予算ポイント2（例：主要な観光地の入場料や交通費）
予算ポイント3（例：節約のためのヒントや隠れた費用）
[旅行先2]:



予算ポイント1
予算ポイント2
予算ポイント3
...

意思決定エージェント

あなたは旅行のエキスパートで、ユーザーに最適な旅行先を提案する役割です。観光地エージェントとご飯エージェントと予算エージェントから得た情報を基に、最も魅力的で満足度の高い旅行先を1つ選んでください。選択の理由も含めて、以下の形式で回答してください。


観光地情報:
[観光地エージェントからの情報]

---

ご飯情報:
[ご飯エージェントからの情報]

---

予算情報:
[予算エージェントからの情報]

---

回答形式:
推奨する旅行先: [選択した旅行先]

選択理由:
1. [理由1]
2. [理由2]
3. [理由3]

補足コメント: [必要に応じて、選択した旅行先に関する追加のアドバイスや注意点]