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

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

この記事では、主に以下について紹介していきます。
- GitHub Copilot Extensionsの概要
- サードパーティーのExtensionsの活用
- オリジナルエージェントの開発

::: note info
 [公式ページ](https://docs.github.com/en/copilot/using-github-copilot/using-extensions-to-integrate-external-tools-with-copilot-chat) を主に参照。
:::

# 1. GitHub Copilot Extensionsとは？
GitHub Copilot Extensionsは、**GitHub Copilotのチャット機能を拡張するツール**です。

下記2つの利用方法があります。
1. サードパーティーが作成したExtensionをインストールして利用
2. JavaScript等で独自にプログラムしたExtensionをデプロイして利用



### サードパーティーが作成したExtensionをインストールして利用
<img width="500" alt="sentry.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3933191/454f8d8b-a8c2-0870-7297-3c9a79cc8692.png">

引用：[Sentry for GitHub Copilot](https://github.com/marketplace/sentry-github-copilot-extension)


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


<img width="500" alt="blueyondrair.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3933191/5c0803f8-c751-6a33-eebd-6164aeca2213.png">

引用：[GitHub Copilot Extensions公開ベータ開始:GitHub Copilotエコシステムを強化](https://github.blog/jp/2024-09-18-enhancing-the-github-copilot-ecosystem-with-copilot-extensions-now-in-public-beta/)

### 概要まとめ

| 項目 | 内容 |
|------|------|
| 利用可能ユーザー | GitHub Copilotライセンス保持者であれば利用可能<br>- 個人ユーザー：GitHub Copilot Individual<br>- 組織や企業：GitHub Copilot Business, GitHub Copilot Enterprise |
| 費用 | - 拡張機能の使用/構築は無料<br>- 一部サードパーティー拡張機能は有料の場合あり |
| 品質と安全性 | - サードパーティー製の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 との違い

https://code.visualstudio.com/api/extension-guides/chat

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にアクセス

https://github.com/marketplace

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3933191/1d5489e9-e7d7-ac56-a01a-be5b0a55bbe5.png)


### 2. 利用したいサードパーティーのCopilot Extensionを選択してインストール
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3933191/a7fa1f8f-5f33-7d09-57f3-2413f89e332d.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3933191/436d0775-7e2b-2981-3bce-a457575fb84c.png)

## 2-2. サードパーティーのExtensionsの例
| サードパーティー | 主な特徴と機能 |
|------------|-----------------|
| Docker | - プロジェクトに適した Docker アセットの生成<br>- プルリクエストの作成<br>- 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を作成
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3933191/301f16c8-d374-92df-1d11-c248b2f8492c.png)

#### (2) Issueを特定の担当者に割り当て
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3933191/77be70cf-69a3-28f0-d7f3-7995c4cbf5c1.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3933191/419783bb-0829-ad38-42dd-0513a89ccd8c.png)

引用：[Introducing Copilot Extensions: Sentry Extension for GitHub Copilot](https://www.youtube.com/watch?v=irRaA4OZpGM&t=51s)


# 3. サンプルオリジナルエージェントの実装
Github社からいくつかサンプルプログラムが公開されています。

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


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

https://github.com/copilot-extensions/blackbeard-extension

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3933191/353375d9-73e1-34c3-6939-d3ef57d605bb.png)

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

### シーケンス図

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3933191/24090712-e8fe-e0fa-24a1-93001331dc75.png)


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

#### 1. サーバーセットアップ
- Express.jsを使用してHTTPサーバーを構築

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

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

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

#### 3. メッセージ処理システム
- カスタムシステムメッセージの組み込み：
   - 海賊風の応答生成のためのプロンプト設定
   - ユーザー名を含むカスタマイズされた応答形式
```typescript
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ペイロードでのメッセージ送信

```typescript
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,
    }),
  }
);
```

::: note info
補足：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 現在）
```typescript
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のストリーム機能を使用したリアルタイムでのデータストリーミング

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



## 3-3. 実装手順
### Copilotエージェントをデプロイ
1. Copilot エージェントを構築　※今回は公式のサンプルエージェントを使用
2. インターネットからアクセス可能なサーバーにデプロイ
デバッグが目的であればCodespacesのポート転送も使用可能
※ 今回はこちらを例に説明
   <img width="500" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3933191/92cc92b9-8e2c-46df-b902-40b26054ec2a.png">

3. 「ポート」で「表示範囲」を変更
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3933191/e025271b-61e7-6f5f-e537-ac0511db0061.png)

4. 「ローカルアドレス」のURLを控えておく。（GitHub Appの作成時に使用）
※ パス / へのGETリクエストは未実装なので、ブラウザで開くと「Cannot GET /」と表示される。



### GitHub Appを作成
1. 「Settings」 から「Developer settings」を選択
2. 「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」にする
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3933191/e4099550-c2fe-5dd6-2f03-d30c9d5978b6.png)

   - 「Where can this GitHub App be installed?」：いずれかを選択



   - Create GitHub Appを選択


### 作成したGitHub AppにCopilotエージェントを統合
1. Copilotを選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3933191/4314fc2b-c46d-9e36-af95-a690dbec223f.png)
   - App Type : Agent
   - URL : 控えておいた「ローカルアドレス」
   - Inference description：エージェントを使うユーザに見える説明
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3933191/4b394699-a28f-7ba5-20fa-202a4f0d9ea6.png)



2. 「Install App」からインストール

### Visual Studio Code, GitHub.com, GitHub Mobile etc. で呼び出し可能！
※最初の呼び出しの際のみ認証を行う必要があります。
![ptchi21d.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3933191/03deaf41-f20b-9bf9-7303-79a90835a7df.png)

#### 実際の挙動
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3933191/c4c3b05b-93dd-4567-6f49-a2decbc94edc.png)





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

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

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

## 4-2. 動作フロー

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

## 4-3. アーキテクチャ

```mermaid
sequenceDiagram
    participant Client as Client
    participant Server as Server
    participant GitHub as GitHub API
    participant LLM1 as GitHub Copilot API
    participant LLM2 as Gemini API

    Client->>+Server: POSTリクエスト (旅行先候補とトークン)
    Server->>+GitHub: GitHubトークン検証
    GitHub-->>-Server: ユーザー情報

    Server->>Server: プロンプト読み込み

    Server->>+LLM1: 観光地情報リクエスト（GPT-4o）
    LLM1-->>Server: 観光地情報
    Server-->>Client: 観光地情報送信


    Server->>+LLM1: 食事情報リクエスト（GPT-3.5 Turbo）
    LLM1-->>Server: 食事情報
    Server-->>Client: 食事情報送信

    Server->>+LLM2: 予算分析リクエスト（Gemini 1.5 Flash）
    LLM2-->>Server: 予算分析結果
    Server-->>Client: 予算分析結果送信

    Server->>Server: 情報統合と意思決定プロンプト生成

    Server->>+LLM2: 最適な旅行先決定リクエスト（Gemini 1.5 Pro）
    LLM2-->>Server: 最適な旅行先
    Server-->>Client: 最適な旅行先の結果


```



## 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]

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

```

## 4-5. 実際の挙動
応答は単一チャットウインドウ内に出力されます。

### 観光地エージェント
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3933191/ac7ae292-1685-97eb-f4ea-8c8c5b331770.png)



### ご飯エージェント
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3933191/4af13999-74f4-c45e-bb46-a2cb3e8c4fd1.png)


### 予算エージェント
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3933191/7b75c165-f13b-df75-5cff-144d6513d784.png)



### 意思決定エージェント
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3933191/d110d2af-e0f1-673a-efca-8baef5269107.png)





# 5. GitHub Appの可視性設定

https://docs.github.com/ja/enterprise-cloud@latest/apps/creating-github-apps/registering-a-github-app/making-a-github-app-public-or-private


## 一般的なGitHub App
### Public GitHub App
- 誰でもインストール可能
- ランディングページに「Install」ボタンが表示
- GitHub Marketplaceに公開可能

### Private GitHub App
- 所有者のアカウントまたはOrganaizationアカウントのみがインストール可能
- 「Install」ボタンは所有者のみ表示

## Enterprise所有のGitHub App
- GitHub AppがEnterprise Managed Userによって作成されている場合、"Public"オプションは無効化
- インストールURLを使用して、OrganizationオーナーがEnterprise内のOrganizationにインストール可能


## おわりに
この記事では、GitHub Copilot Extensionsの基本から、サードパーティーの活用方法、オリジナルエージェントの開発手順まで紹介しました。GitHub Copilot Extensionsは、Github Copilotの機能をさらに拡張し、開発を効率化する可能性を秘めています。

ぜひこの記事を参考に、サードパーティーのExtensionsを活用したり、自分だけのエージェントを作成して、開発に役立ててください！



## 参考文献
- [GitHub Copilot Extensions · Your favorite tools have entered Copilot Chat.](https://github.com/features/copilot/extensions)
- [About building Copilot Extensions - GitHub Docs](https://docs.github.com/en/copilot/building-copilot-extensions/about-building-copilot-extensions)
- [Essentials of GitHub Copilot Extensions - GitHub Resources](https://resources.github.com/learn/pathways/copilot/extensions/essentials-of-github-copilot-extensions/)
- [Sentry for GitHub Copilot · GitHub Marketplace](https://github.com/marketplace/sentry-github-copilot-extension)
- [GitHub Copilot Extensions公開ベータ開始:GitHub Copilotエコシステムを強化 - GitHubブログ](https://github.blog/jp/2024-09-18-enhancing-the-github-copilot-ecosystem-with-copilot-extensions-now-in-public-beta/)
- [Chat extensions | Visual Studio Code Extension API](https://code.visualstudio.com/api/extension-guides/chat)
- [Marketplace · Tools to improve your workflow](https://github.com/marketplace)
- [copilot-extensions/blackbeard-extension: A basic "Hello world" Copilot Extension example that talks like Blackbeard the pirate](https://github.com/copilot-extensions/blackbeard-extension)
- [GitHub Appをパブリックまたはプライベートにする - GitHub Enterprise Cloud Docs](https://docs.github.com/ja/enterprise-cloud@latest/apps/creating-github-apps/registering-a-github-app/making-a-github-app-public-or-private)
- [Introducing Copilot Extensions: Sentry Extension for GitHub Copilot - YouTube](https://www.youtube.com/watch?v=irRaA4OZpGM&t=51s)