こんにちは！エンジニアのみっつーです。
この投稿は、オルターブース Advent Calendar 2024の6日目の投稿になります！
昨日は弊社広報担当による今年のイベント振り返りでした！
前置き
今回の内容は、GitHub Copilot Extensionsを実装するための環境セットアップ方法についてです。
先日サンフランシスコで開催されたGitHub Universeのエキスパートコーナーで「GitHub Copilot Extensionsをぜひ試してみて！」と教えていただいた経緯もあり、とりあえずサンプルを動かすところを整理してみました。
ソースコードだけでいえば blackbeard-extension のリポジトリに簡単に試せるものがありますが、それはそれとして別途GitHub Copilot Chat上で動かすためのセットアップ手順がいくつかあるので併せてまとめたいと思います。
チャットボット系の実装をやったことがある方はイメージしやすいかと思います。
GitHub Copilot Extensionsとは
そもそもGitHub Copilot Extensionsってなんぞ？という方向けに超簡単に説明すると、GitHub Copilot Chat上で @EXTENSION-NAME 形式でカスタムアプリを呼び出すことができるものです。
これはつまり、カスタムアプリ上でGitHub Copilotを呼び出せる=GitHubマネージドなAIモデルを自由に活用することができるという点で非常に便利です。
公開されているものでいえば、 GitHub Copilot for Azure や Docker for GitHub Copilot などがあります。
クイックスタート
手順
- Codespaces（かローカルデバッグ&ngrok）でサンプルアプリをデバッグ起動する
- GitHub Appを作る
- GitHub AppのCopilot関連設定&インストール
- GitHub Copilot Chatで
@EXTENSION-NAMEで呼び出す
1. Codespaces（かローカルデバッグ&ngrok）でサンプルアプリをデバッグ起動する
GitHub Appのセットアップをする際にアプリのエンドポイント情報が必要になるため、先にサンプルアプリをローカル起動してしまいましょう。
blackbeard-extensionリポジトリ（またはforkしたもの）でCodespacesを起動します。
※ローカルでDevContainer環境を作っている場合は、cloneして続き手順を実施してもらってもOKです
今回のサンプルはNode.jsのため、コマンドパレットから「Add Dev Container Configuration Files...」を実行し「Node.js & JavaScript」のdevcontainersテンプレートを使います。
再度コマンドパレットを開き、「Rebuild Container」を実行してください。
再起動後、 node -v が通ることを確認したら、README通りに npm install と npm start を実行します。
ここまで進んだら、ポートタブから該当ポートを Private → Public に更新しておきます。
2. GitHub Appを作る
サンプルアプリのデバッグ起動確認&ポートフォワーディングのURLが確認できたら、GitHub Appを作成します。
今回は個人アカウント下に作成する手順を例に案内します。
GitHub App管理画面 を開きます。
※UI上の操作でいうと、画面右上にある自分のアカウントのアイコンを押して「Settings」を選択、Settings画面左メニューの「Developer settings」を選択すればOKです。
「New GitHub App」ボタンを押下し、作成画面を開きます。作成画面では下記入力を行います。
- GitHub App name：自由な名前でOKですがルールは後述
- Homepage URL：適当な値
- Callback URL：手順1でポートフォワーディングしたURL（本来はGitHub Appインストール先での認証時リダイレクト先を設定するものです）
- Webhook > Active：チェックを外す
- Permissions > Account permissions > Copilot Chat：
Read-only
GitHub App nameについては下記ルールがありますのでご注意ください。
名前は 34 文字より長くすることはできません。
アプリが動作すると、ユーザー インターフェイス上にアプリケーション名が表示されます。 大文字は小文字に変換され、スペースは
-に置き換えられ、アクセントは無視されます。 たとえば、My APp Nämeはmy-app-nameとして表示されます。名前は GitHub 全体で一意である必要があります。 既存の GitHub アカウントと同じ名前を使用することはできません。ただし、それがあなた自身のユーザー名や組織名である場合は例外です。
上記項目入力後「Create GitHub App」ボタンを押下し、GitHub Appを作成します。
3. GitHub AppのCopilot関連設定&インストール
作成したGitHub AppにCopilot用の設定を追加します。
※この章の手順のどこかでCopilot機能の仕様に関する同意画面が出た場合は、同意操作を行ってください。（スクショ撮り忘れましたorz）
作成したGitHub Appの設定画面を開き、左メニューの「Copilot」を選択します。
遷移後画面のApp Typeに Agent を選択するとAuthorization入力欄が出てくるので、下記情報を入力します。
- URL： 手順1でポートフォワーディングしたURL
- Inference description：適当な値
「Save」ボタンを押下し、設定を保存します。
続いて、左メニューの「Install App」を選択し、自身のアカウントにGitHub Appをインストールします。
ここまでの操作が完了したら、GitHub Copilot Chat上でExtensionが @EXTENSION-NAME 形式で呼び出せる状態となります。
4. GitHub Copilot Chatで @EXTENSION-NAME で呼び出す
まずはgithub.com上でGitHub Copilot Chatを起動して @EXTENSION-NAME で呼び出してみます。
初回認証が要求されるため、「Connect」ボタンを押下します。認証後のリダイレクト先では GET / が無いためにエラーとなりますが、これは今回は無視してOKです。
再度GitHub Copilot Chatを開いていたタブに戻り、再度 @EXTENSION-NAME と何かしらメッセージをつけて呼び出し、返答が来ることを確認してみましょう。
※もし401エラーが出る場合はポートの公開設定がPublicになっているか確認しましょう。認証後のチャットのやり取りでエラーとなる場合はアプリが正常に起動しているかどうかも併せて確認してみてください。
github.com上で返答が来るところまで確認できたら、今度はVSCodeのGitHub Copilot Chatでも @EXTENSION-NAME 呼び出しの動作確認をしてみましょう。
チャットセッションが残っていると読み込まれないことがあるので、新しくチャットセッションを立てて確認します。
もし上手く反映されない場合は、時間を置いて試してみてください（私もGitHub Appインストール後から反映までに少し時間がかかりました）。
まとめ
以上でGitHub Copilot Extensionsの開発環境セットアップが完了しました。
GitHub Appを設定するうえでの躓きポイントはいくつかありますが、割と簡単にセットアップできる印象です。
また、サンプルコードを見るとindex.jsのみで実装されていることがわかります。
このindex.jsの内容も、POSTの / エンドポイントのみを持っていて、プロンプトを構成してGitHub Copilotに投げているだけとなっています。
特に、GitHub Copilotやその他GitHub APIに対する認証情報に関しては、 流れてきたトークンをそのまま使用でき、認証のための実装が一切要らない という点が非常に便利ポイントです。
実際に今公開されているものも有用なものばかりなので、自分も上手い使い方を模索したいと思います。
それでは、オルターブース Advent Calendar 2024を引き続きお楽しみください！
サービス一覧
