rksoftware

Visual Studio とか C# とかが好きです

GitHub Copilot Extensions を作って動かす (新規作成から動かすまで全必須項目入力例)

GitHub Copilot Extensions、なかなか気になる機能です。

github.blog

簡単に言うと、GitHub Copilot Chat の @~ を自作することができるものです。
バックエンドは自作の Web API になるのでなんでもやりたい放題です。
※そのバックエンドから GitHub Copilot の AI へ更に処理が移る流れです。その際にシステム プロンプトが追加できるので、そこも中々夢広がります。

■ 作っていこう!

ということで試しに作ってみるのですが、なかなか手順が多い。何をどう設定すればいいかもよくわからないし、設定も多いです。

ということで今回は動かすまでにやったことを画像で並べます。テキストで説明のあるサイトもいくつかあるようですが、設定場所と何を設定すれば動くか、結構要素が多いので画像で並べていきます。

■ バックエンドのソースコード

設定の前にバックエンドのソースコードが必要なので、こちらの記事を参考にさせていただき用意しました。
zenn.dev

■ 設定をしていこう

DevTunnel

まずは GitHub Copilot からアクセスできるところ、つまりパブリックな場所に Web API を置く必要があります。サーバーを用意してもよいのですが、我々の界隈ではやはり DevTunnel を使うのが第一の選択肢でしょう。DevTunnel を設定していきましょう。日本語では開発トンネルです。

Visual Studio でやっていきます。

トンネルを作成。

名前を付けます。これはローカルでの管理用なのでなんでもいいです。後でわかる名前にしておくほうが良いですが、ここを読んでいるということは既にたくさんのトンネルを作っているということはないでしょうから、区別をつけられる名前を付けておく必要もないでしょう。どうせすぐ消すでしょうし。本当に何でもいいです。

トンネルの種類は永続にしておきます。一日で試しきれることはないでしょうから、何日も維持する必要がありますよね。

アクセスは公開用。

実行

Web API アプリを実行します。DevTunnel を作成した少なくとも直後なら、作成したDevTunnelも起動して、かつ使ってくれるようです。特に深く考えずに実行でよさそうです。

実行したら、DevTunnel の URL を取っておく必要があります。Visual Studio の出力で開発トンネルの出力を開き、書かれている URL を確認します。

確認した URL にアクセスします。作成後一回、アクセスして続行を押しておく必要があるようです。

GitHub 側の設定

GitHub の Web サイトで GitHub App を新規に作ります。この作った GitHub App がエージェントになるようです。

今回は組織で作っているので、組織の設定の左のメニューの一番下の Developer settings

GitHub App

画像右下の New GitHub App

名前を付けます。ここでつけた名前が @~ の ~ になります。
※画像ではアンダースコアを使ってしまいましたが、名前にアンダースコアは使えないようです。この先の手順で怒られてアンダースコアなしに変えています。

必須の項目を埋めていきます。URL はなんでもいいようです。誰でも持っている自分のブログの URL でも入れておけばいいでしょう。

WebhookActive にチェックがついているのでチェックを外します。

閉じている Account permissions を開いて Copilot ChatRead-only にします。

Create GitHub App 。※まだ設定は終わりません。

左メニューで Copilot

App TypeAgent

URL に前述の手順で Visual Studio の出力で確認した DevTunnel の URL。

Save

確認

GitHub の Web サイト上で Copilot Chat を開いてみます。

General purporse chat

チャットエージェントを呼び出し。

Connect

前述の設定で行った URL のサイトが表示されるようです。

チャットに戻って、もう一度エージェント。動いたようです。

Visual Studio Code。すでに起動させていた場合は、ここで再起動をする必要がありそうです。

動きました!

■ 長いですね

手順、長いですで。