😎

AI Chat Web Appを作ってみた

に公開

はじめに

ChatGPTのような質疑できるLLM画面が簡単に作成できるようなので、作ってみました。

参考URL

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

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

まずはテンプレートをインストールします。ターミナルから以下を実行

dotnet new install Microsoft.Extensions.AI.Templates

コマンドでプロジェクトの作成

テンプレートがインストールされたので、プロジェクトの作成が出来ます。
任意のフォルダ内で、以下を実行

dotnet new aichatweb

フォルダ内に、csprojファイルが出来ますので、VisualStudioで開けます。
まずはそのまま、何も考えずに実行です。
エラーになりました。

まだ何も設定を行っていないので、エラーになります。
まずは、プロジェクトを右クリックして「ユーザーシークレットの管理」を選択下さい。

{
  "GitHubModels:Token": "Personal Access Token"
}

GitHubからアクセストークンを取得して、書き換えてください。
これで実行が出来ます。

VisualStudioから作成

テンプレートをインストールしているので、新しいプロジェクの作成から「AI Chat Web App」を選択できます。

ソリューションエクスプローラから、プロジェクトを右クリックして、「ユーザーシークレットの管理」を選択してください。

書き方はReadMeに記載されています。

これを、コピペしましょう。key以降は、GitHubからPersonalAccessTokenを取得して、書き換えてください。

システムプロンプトの記載は、Components/Pages/Chat/Chat.razorにあります。

「system」とかで検索すると出てきます。

英語で記載されているので、日本語で書き直してください。

そのままビルドしましょう。しばらくすると、ブラウザが起動します。

URL欄のリンクをクリックしてください。
出来上がりです。

Discussion