Microsoftの「AI Chat Web App テンプレート」を動かしてみる

もくじ
https://tera1707.com/entry/2022/02/06/144447

やりたいこと

最近、github Copilotがすごい、という話に始まり、MCPサーバー自作にtryしてみたり、ほかになにかCopilotやらAIでできることがないかを調べる中で、下記のようなAIチャットアプリ用のVisualStudioのテンプレートがあるというのを教えて頂く機会があった。

learn.microsoft.com

とりあえず、このページにある内容をそのまま行って動かしたいが、意外と手間取ったのでその時のメモをする。

やったこと

テンプレートのインストール

これは、上のページのまんまを実行した。 これ👇。

dotnet new install Microsoft.Extensions.AI.Templates

インストールすると、VSの新規プロジェクト作成画面のテンプレート一覧に、下記のようなのが出てきた。

これを選んでPJ作成する。

途中で出てくるPJ設定は、上のページに合った通り、このようにする。

という感じでPJ作成すると、こういうプロジェクトができた。

次は、githubで「トークン」を作らないといけないらしい。

トークンを作成する

ここが地味に手順がわからなかったのでメモ。

githubのページで、画面右上の自分のアイコンを押す。

Settingsを押す

設定メニューの一番下のDevelopper Seettingsを押す

Personal access tokensの中のFine-granted tokensを押す

Generate new tokens を押す

トークン作成画面で、トークンの名前を入れて、

とりあえずpublicリポジトリにしとく

パーミッションの一覧の中のModelsを、ReadOnlyに設定する

Generate tokens を押す

そうすると、こんな感じでトークンが作成される。
※この画面にも書いてるが、ここで見て以降は二度と表示されない(あとで確認ができない)らしいので、どこかにメモること

これでトークン作成完了。

トークンをsecrets.jsonに記入する

ここは最初のページ(もしくはプロジェクト内に作成されているreadme.md)の通りにやる。

そうするとsecret.jsonが表示されるので、下記のように書く。

YOUR-TOKENのところに、先ほど作成したトークンを入れる。

   {
     "GitHubModels:Token": "YOUR-TOKEN"
   }

実行する

ここまできたら、実行する。

実行すると、下記のような画面がでて、実行された。

※ちなみに、Tokenを入れてなかったりすると、下記のようなエラーが起きた。
jsonの中に、"GitHubModels:Token"という項目がないよ、ということっぽい)

おわり

これで、とりあえず実行出来た。
ここから、なにができるか(のまえに、そもそもこのサンプルがなにをしてるのか?)を見ていこうと思う。

参考

AI アプリ テンプレート拡張機能を使用してカスタム データとチャットする .NET AI アプリを作成する

https://learn.microsoft.com/ja-jp/dotnet/ai/quickstarts/ai-templates?tabs=visual-studio%2Cconfigure-visual-studio&pivots=github-models