GitHub Copilot Extensionsを使って自分専用のChat Agentを作る

## これは何?
昨日こちらのイベントに参加して参りました。そこで，https://x.com/yuhattor さんがGitHub Copilot ExtensionsというGitHub Copilot Chatの拡張機能を作るデモを見せてくださり感銘を受けたので自分の環境でも作ってみました。
自分に結構前提知識がかけているところがあったのと，公式ドキュメントが手順書のような形式でないことから若干詰まったので初学者でもわかるようにまとめてみました。

https://vscode.connpass.com/event/333720/

---

## GitHub Copilot Extensionsとは

https://github.blog/jp/2024-05-22-introducing-github-copilot-extensions/

自分はCopilot Chatの画面で呼び出せるAgentを自作できる機能という理解をしています(定義が間違っていたらご指摘ください)。

![Screenshot from 2024-11-09 11-47-32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3718390/46b73bdc-eefe-5a8e-a779-b0a6b344eed9.png)
↑@で自作したAgentを呼び出せます。

結構公開されているExtensionsもあるようです。

https://github.com/marketplace?type=apps&copilot_app=true

以下のような部分が利点と思われます。

- かなり少ないコード量で実装できる
- 自前でモデルを用意しなくてもGitHub Copilotにのれる(bedrokeとかAzure OpenAIとか使う場合にはモデルのアクティベートがいる)
- 慣れれば実装がかなり楽な気がする
- VSCodeから呼べるのが嬉しい

---

## サンプルアプリを動かしてみる

今回動かすアプリはこれです。

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

何ができるかというとワンピースの黒ひげぽい応答を返してくれるbotです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3718390/6e68dc44-8475-1508-959d-375f56dc2c21.png)![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3718390/c661b372-6d63-87dc-60a2-a07a27b42426.png)

[全体の流れが書いてある公式ドキュメント](https://docs.github.com/en/copilot/building-copilot-extensions/setting-up-copilot-extensions)がありますが，個人的にわかりやすい順番で説明します。

### Chat Agentを用意する

[blackbeard-extensions](
https://github.com/copilot-extensions/blackbeard-extension)をForkしておきます。
また，このアプリはローカルで起動させるので手元のコンピュータにcloneしておきます。

```shell
git clone https://github.com/copilot-extensions/blackbeard-extension
```

---

### ngrokの準備

ローカルで起動したChat AgentにGitHubがアクセスできるようにするためにはngrokを経由する必要があります。

[nglokのセットアップ方法](https://docs.github.com/en/copilot/building-copilot-extensions/creating-a-copilot-extension/configuring-your-server-to-deploy-your-copilot-agent)

自分が詰まったのは以下の2点です。

#### 1. ngrokに対する勘違い
自分は以下のような勘違いをしていました。

<details><summary>紛らわしいので折りたたんでおく</summary>

- 後述するGitHub Appsでサンプルリポジトリのurlを入れているのでGitHubが勝手にサンプルリポジトリを動かしてくれる
- ngrokを使うとVSCodeとGitHubが通信できるようになる。これがngrok実行時のportを使って通信する
</details>


しかし，実際は以下が正しいです。

- ローカルでアプリを起動し，そのアプリに外部からアクセスできるようにするのがngrokの役割→ローカルでnpm run devして起動する必要がある。
- このサンプルアプリが3000 portで動作しているためngrokを3000で起動する。

#### 2. ローカルコンピュータのFire Wallの設定変更が必要だった(いらない人もいるかも)

自分はUbuntuを使っており，firewall-cmdでportの開け閉めができるので以下のようにして3000を開放しておきました。firewall-cmdユーザ以外の方はおのおのやっておいてください。

```shell
firewall-cmd --state # firewall-cmdが動作していることを確認
running
firewall-cmd --add-port=3000/tcp --zone=public --permanent # 3000を開放
firewall-cmd --reload # 再起動
firewall-cmd --list-ports #確認                                                          
3000/tcp
```

#### ngrokでChat Agentを公開する
1. サンプルアプリをローカルで起動する

    ```shell
    cd blackbeard-extension
    npm install
    npm run dev
    ```
2. ngrokを起動

    ```shell
    ngrok http http://localhost:3000
    ```
ngrokを起動すると外部からサンプルアプリにアクセスできるurlが発行されます。
このurlは毎回変わるので面倒な人は固定できるらしいのでやってもいいかも。

---

### GitHub Appsの作成

GitHubのDeveloper SettingsのページからGitHub Appを作成します。
[公式ドキュメント](https://docs.github.com/en/copilot/building-copilot-extensions/creating-a-copilot-extension/creating-a-github-app-for-your-copilot-extension)に書いてあるとおりに進めればOKです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3718390/575bc875-b3cd-9a78-9a5a-e4602498402c.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3718390/bab6ca12-2685-21f1-86bb-51c0f8ffb186.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3718390/bbdc2bd6-e8d2-46d5-85c3-b327af2db32b.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3718390/3f1fd8cc-959c-f33f-26cf-2b40a7808346.png)

一応箇条書きにしておきます。

- GitHub App nameの名前を決める: @をつけてcopilot chatから呼び出すのに使う
- Homepage URLにリポジトリのurlをいれる
- Webhookのチェックを外す
- Permissionをつける
    - RepositoryのRead Write権限
    - Copilot ChatのRead-only権限

ここまでできたら，一旦GitHub Appは保存して大丈夫です。

次にCopilot Agentになるように設定変更します。
[公式ドキュメント](https://docs.github.com/en/copilot/building-copilot-extensions/creating-a-copilot-extension/configuring-your-github-app-for-your-copilot-agent)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3718390/e030d41d-e986-1639-977a-b288f1cf5023.png)
アプリの設定ページからCopilotを設定し，

- App TypeをAgentにする
- URLにngrokで発行したURLを登録する

これができたら，installして完了です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3718390/fab4ca71-cd39-ee89-c642-06d734c29dd2.png)

---

### 動かしてみる

@をつけてcopilotから呼び出してみます。
(今回自分はcopilotextensionsで登録した)
黒ひげらしく，暴力的な言葉を吐いたようでGitHubに怒られてるwww
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3718390/a61d1c53-b7e1-096f-634c-78bc5b4dbb34.png)

気を取り直して名前を聞いてみましょう
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3718390/d16aa65a-2c9b-f74a-3a04-8bc477eced47.png)
黒ひげっぽいかはわからないですが，挨拶してくれました。

---

## 今後の予定

GitHub pagesでOrganizations限定で公開している保守ドキュメントとかをつかってrag作ってみたいです。