⭐️

【GitHub Codespaces】Microsoft Agent FrameworkをBlazorで動かしてみる

に公開
GitHub
Blazor
Codespaces
Azure OpenAI
Microsoft Agent Framework
tech

この記事で伝えたいこと（ポイント）

  • GitHub CodespacesでMicrosoft Agent Frameworkを実行しているよ

はじめに

この記事はGitHub Codespacesの環境でMicrosoft Agent FrameworkをBlazorで実行する方法について書いています。

主な内容としてはセットアップや使い方を中心に書きます。（忘れやすいことなど）
誤りなどがあれば修正していく想定です。

なお、次回以降の記事でCloud Runにデプロイして動かす想定です。

Microsoft Agent Frameworkとは

概要欄によると以下のように書かれています。

Microsoft Agent Framework は、.NET および Python 用の AI エージェント と マルチエージェント ワークフロー を構築するためのオープンソース開発キットです。 セ マンティック カーネル と AutoGen プロジェクトからアイデアをまとめ、拡張し、その長所を組み合わせて新しい機能を追加します。

要するにSemantic KernelやAutoGen、Microsoft Exstension.AIなどをベースにした開発キットです。

ハンズオン環境

説明を読んでもわからないことが多いので、実際に動かしてみることにします。
今回のハンズオン環境は以下の通りです。

  • GitHub Codespaces
    • GitHub SecretsにAzure OpenAIの情報を登録して利用
  • Blazor Server(.NET 8)
  • Microsoft Agent Framework
  • Azure AI Foundryプロジェクト
    • モデルがデプロイされていることを前提とします

プログラム上ではAzure CLI Credentialを使ってAzure OpenAI(Azure AI Foundry)に接続します。

GitHub Codespacesで動かしてみる

以下のリンクをクリックしてGitHub Codespacesを開きます。

Open in GitHub Codespaces

Azure CLIのインストールとログイン

Codespacesが起動したら、Azure CLIをインストールします。

curl -sL https://aka.ms/InstallAzureCLIDeb | sudo bash

続いて、Azure CLIでログインします。

az login

ブラウザが起動するので、指示に従ってログインします。

Azure AI Foundryのセットアップ

Azure AI Foundryプロジェクトの概要からAzure AIサービスをクリックします。
Azure AIサービスのAzure AI サービスエンドポイント（環境変数ではAZURE_OPENAI_ENDPOINTとなるもの）をコピーして控えておきます。

次にすべてのエンドポイントを表示するをクリックし、モデルデプロイを開き、デプロイ済みのモデル名（環境変数ではAZURE_OPENAI_DEPLOYMENT_NAMEとなるもの）を控えておきます。

上記の2つを.envに設定します。なお、リポジトリには.env.exampleがあるので、.envとしてコピーして編集します。

cp .env.example .env

.envを開いて以下のように編集します。

AZURE_OPENAI_ENDPOINT=<Azure AI サービスエンドポイント>
AZURE_OPENAI_DEPLOYMENT_NAME=<デプロイ済みのモデル名>

GitHub Secretsの設定

次にGitHub SecretsにAzure OpenAIの情報を登録します。

今回はGitHub CLIを使って登録します。GitHub CLIは.envを指定することで自動的に読み込み、シークレットとして登録できます。
以下のコマンドを実行します。

gh secret set --app codespaces -f .env

これでCodespaces内でGitHub Secretsが利用できるようになります。
具体的にはAZURE_OPENAI_ENDPOINTとAZURE_OPENAI_DEPLOYMENT_NAMEが環境変数で利用可能になります。

Blazor Serverアプリの実行

Blazor Serverアプリを実行します。

dotnet run

実行後、以下のようなメッセージが表示されます。

Building...
warn: Microsoft.AspNetCore.DataProtection.Repositories.FileSystemXmlRepository[60]
      Storing keys in a directory '/home/codespace/.aspnet/DataProtection-Keys' that may not be persisted outside of the container. Protected data will be unavailable when container is destroyed. For more information go to https://aka.ms/aspnet/dataprotectionwarning
info: Microsoft.Hosting.Lifetime[14]
      Now listening on: http://localhost:5079
info: Microsoft.Hosting.Lifetime[0]
      Application started. Press Ctrl+C to shut down.
info: Microsoft.Hosting.Lifetime[0]
      Hosting environment: Development
info: Microsoft.Hosting.Lifetime[0]
      Content root path: /workspaces/CloudRunBlazor

上記のメッセージにあるhttp://localhost:5079にアクセスします。

動作確認

以下のようにHello Worldが表示されれば成功です。

Hello World

※今後、Cloud Runにデプロイして動かす予定なので名前はCloudRunBlazorとしています。

メニューのAgentをクリックすると、以下のような画面が表示されます。
Click meをクリックするとエージェントが動作します。

Agent画面

実行結果は以下のように表示されます。なお、実行結果は押すたびに変わるので実行結果が異なる場合があります。

Agent画面

サンプルメッセージは以下の通りです。

ここにメッセージ：申し訳ありませんが、私はピエロではありませんのでジョークをお伝えすることはできません。
ただし、代わりに面白い事実をご紹介します！
例えば、海賊たちは宝の地図を使うことで有名ですが
実際にはほとんどの海賊は地図を使わず、経験や記憶に頼って航海していました。
ちょっと意外ですね！

まとめ

今回はGitHub CodespacesでMicrosoft Agent FrameworkをBlazorで動かしてみました。事前にコンソールプログラムでどのように動くかを確認していたのでBlazorに組み込むのは比較的簡単でした。

事前に動かしたコンソールプログラムはこちらです。

また、Azure AI Foundryを使うことでAzure OpenAIのモデルを簡単に利用できることも確認できました。

次回はCloud RunでMicrosoft Agent Frameworkを動かしてみます。

Discussion