チュートリアル: .NET MAUI と ChatGPT を使用して推奨アプリを作成する

[アーティクル]
04/16/2024

このチュートリアルでは、OpenAI の ChatGPT API を呼び出して、ユーザーが入力した場所に基づいてレコメンデーションを提供する Windows 用の .NET MAUI アプリを Visual Studio で作成する方法について説明します。アプリには、ユーザーが場所を入力すると、おすすめのレストラン、ホテル、アトラクションを取得できるシンプルな UI が用意されています。

このチュートリアルでは、次の作業を行う方法について説明します。

.NET MAUI アプリのシンプルなユーザーインターフェイスを作成する
Azure.AI.OpenAI ライブラリを参照してブートストラップする
API キーを使用してアプリを OpenAI API アカウントにリンクする
OpenAI chat API を呼び出してレコメンデーションを取得する

前提条件

OpenAI アカウント
OpenAI API キー
.NET MAUI のインストール要件
Windows で .NET MAUI を初めて使用する場合は、「Windows 用の .NET MAUI アプリの初回構築」チュートリアルから始める必要があります。

環境変数を設定する

OpenAI SDK を使用するには、API キーを使用して環境変数を設定する必要があります。この例では、OPENAI_API_KEY 環境変数を使用します。 OpenAI 開発者ダッシュボードから API キーを取得したら、コマンドラインから次のように環境変数を設定できます。

setx OPENAI_API_KEY <your-api-key>

この方法は Windows での開発に適していますが、運用環境のアプリやモバイルサポートには、より安全な方法を使用する必要があることに注意してください。たとえば、アプリの代わりに、リモートサービスがアクセスできるセキュリティで保護されたキーコンテナーに API キーを格納できます。詳細については、「OpenAI キーの安全性に関するベストプラクティス」を参照してください。

必要な UI 要素で新しい .NET MAUI プロジェクトを作成する

まず、Visual Studio で新しい .NET MAUI プロジェクトを作成します。 .NET MAUI アプリ テンプレートを使用し、MainPage にいくつかの UI 要素を追加して、指定された場所に基づいたおすすめの情報を提供します。 UI には、おすすめのレストラン、ホテル、アトラクションを取得するためのボタンがあります。

Visual Studio で、ChatGptRecommendationApp という名前の新しい .NET MAUI アプリプロジェクトを作成します。
新しいプロジェクトを実行して、アプリが正常にビルドされ、実行されることを確認します。
ソリューションエクスプローラーで MainPage.xaml を開きます。

VerticalStackLayout の内容を次の XAML マークアップに置き換えます。

<Label
    Text="Local AI recommendations"
    SemanticProperties.HeadingLevel="Level1"
    FontSize="32"
    HorizontalOptions="Center" />

<Entry
    x:Name="LocationEntry"
    Placeholder="Enter your location"
    SemanticProperties.Hint="Enter the location for recommendations"
    HorizontalOptions="Center"/>

<Button
    x:Name="RestaurantBtn"
    Text="Get restaurant recommendations"
    SemanticProperties.Hint="Gets restaurant recommendations when you click"
    Clicked="OnRestaurantClicked"
    HorizontalOptions="Center" />

<Button
    x:Name="HotelBtn"
    Text="Get hotel recommendations"
    SemanticProperties.Hint="Gets hotel recommendations when you click"
    Clicked="OnHotelClicked"
    HorizontalOptions="Center" />

<Button
    x:Name="AttractionBtn"
    Text="Get attraction recommendations"
    SemanticProperties.Hint="Gets attraction recommendations when you click"
    Clicked="OnAttractionClicked"
    HorizontalOptions="Center" />

<Label x:Name="SmallLabel"
    Text="Click a button for recommendations!"
    SemanticProperties.HeadingLevel="Level2"
    FontSize="18"
    HorizontalOptions="Center" />

プロジェクトをビルドするには、各ボタンの Clicked イベントハンドラーを追加する必要があります。 MainPage.xaml.cs ファイルに次のコードを追加し、既存のイベントハンドラーを削除します。
```
private async void OnRestaurantClicked(object sender, EventArgs e)
{
}

private async void OnHotelClicked(object sender, EventArgs e)
{
}

private async void OnAttractionClicked(object sender, EventArgs e)
{
}
```

イベントハンドラーはすべて、async としてマークされます。これは、Azure.AI.OpenAI ライブラリへの非同期呼び出しを行うためです。今度は、アプリケーションを実行すると、次のような UI が表示されるはずです。

推奨事項を提供するための UI を備えた Windows .NET MAUI アプリ。

ユーザーは Entry コントロールに現在地を入力し、いずれかのボタンをクリックして、おすすめのレストラン、ホテル、アトラクションの情報を取得できます。 UI の下部にある Label コントロールに結果が表示されます。

次に、Azure.AI.OpenAI ライブラリをプロヘクトに追加し、一部の API 呼び出しを行う準備をします。

Azure.AI.OpenAI ライブラリを参照して初期化する

OpenAI の ChatGPT API を呼び出すには、Azure.AI.OpenAI という Microsoft Azure チームのプレリリース NuGet パッケージを使用します。このライブラリには、OpenAI API と Azure OpenAI API の両方を呼び出す .NET API が用意されています。ライブラリをプロジェクトに追加し、API キーでブートストラップします。

Visual Studio の [ツール] メニューから [パッケージマネージャーコンソール] を開きます。
次のコマンドを実行して、Azure.AI.OpenAI ライブラリをインストールします。ライブラリがまだプレビュー段階であるため、IncludePrerelease フラグが必要です。
```
Install-Package Azure.AI.OpenAI -IncludePrerelease
```
MainPage のコードビハインドファイルである MainPage.xaml.cs を開きます。ファイルの先頭に以下のコードを追加して、Azure.AI.OpenAI ライブラリを参照し、OpenAI API キーを保持する変数を作成します。ページが読み込まれるときに MainPage_Loaded メソッドを呼び出すコンストラクターを更新し、Azure OpenAI ライブラリを初期化する MainPage_Loaded メソッドを追加します。
```
private OpenAIClient _chatGptClient;
private string openAIKey = "<your-api-key-here>";
private string openAIEndpoint = null;

public MainPage()
{
    InitializeComponent();
    this.Loaded += MainPage_Loaded;
}

private void MainPage_Loaded(object sender, EventArgs e)
{
    _chatGptClient = !string.IsNullOrWhiteSpace(openAIEndpoint)
        ? new OpenAIClient(
            new Uri(openAIEndpoint),
            new AzureKeyCredential(openAIKey))
        : new OpenAIClient(openAIKey);
}
```
これにより、API キーを使用して Azure OpenAI ライブラリがブートストラップされ、いくつかの既定のオプションが設定されます。 API キーは、OpenAI API 設定ページで作成できます。このコードは、Azure OpenAI API を使用している場合にエンドポイントを設定できるように記述されています。 OpenAI API を使用している場合、openAIEndpoint 変数を [null] に設定したままにします。
プロジェクトをコンパイルするには、MainPage.xaml.cs ファイルの先頭に using ステートメントを追加する必要があります。
```
using Azure.AI.OpenAI;
using Azure;
```

これで、すべてをまとめる準備ができました。次のセクションでは、Azure.AI.OpenAI ライブラリを呼び出すための 3 つのイベントハンドラーにいくつかのコードを追加し、レコメンデーション結果を表示します。

ChatGPT API 呼び出しの追加とアプリのテスト

次に、Azure.AI.OpenAI ライブラリを使用するコードビハインドファイルにコードを追加して、OpenAI ChatGPT API を呼び出します。先ほど作成した 3 つのイベントハンドラーにコードを追加します。このコードは、Entry コントロールからユーザーの場所を取得し、それを API に渡してレコメンデーションを取得します。次に、その結果を UI の下部にある Label コントロールに表示します。

GetRecommendationAsync という名前の async メソッドを作成して、各イベントハンドラーから呼び出します。
```
private async void OnRestaurantClicked(object sender, EventArgs e)
{
    await GetRecommendationAsync("restaurant");
}

private async void OnHotelClicked(object sender, EventArgs e)
{
    await GetRecommendationAsync("hotel");
}

private async void OnAttractionClicked(object sender, EventArgs e)
{
    await GetRecommendationAsync("attraction");
}

private async Task GetRecommendationAsync(string recommendationType)
{
    if (string.IsNullOrWhiteSpace(LocationEntry.Text))
    {
        await DisplayAlert("Empty location", "Please enter a location (city or postal code)", "OK");
        return;
    }

    string prompt = $"What is a recommended {recommendationType} near {LocationEntry.Text}";

    // DeploymentName must match your custom deployment name (Azure OpenAI)
    // Or a default deployment name (such as OpenAI's GPT-3.5-turbo-0125) can be used
    ChatCompletionsOptions options = new()
    {
        DeploymentName = "gpt-3.5-turbo-0125",
        Messages =
        {
            new ChatRequestUserMessage(prompt)
        },
        ChoiceCount = 1,
        MaxTokens = 100,
    };

    var message = new ChatRequestUserMessage(prompt);
    options.Messages.Add(message);
    Response<ChatCompletions> response = await _chatGptClient.GetChatCompletionsAsync(options);
    SmallLabel.Text = response.Value.Choices[0].Message.Content;
}
```
このコードではまず、ユーザーが Entry コントロールに場所を入力したことを確認します。入力されていない場合は、アラートを表示して返します。ユーザーが場所を入力すると、Azure.AI.OpenAI の GetChatCompletionsAsync メソッドが呼び出され、OpenAI が呼び出されます。 GetChatCompletionsAsync メソッドは、ChatCompletionOptions パラメーターを使用します。このパラメーターは、次のオプションを使用して作成されました。
- DeploymentName - これは、使用するデプロイ (モデル) の名前です。
- Messages - これは ChatRequestUserMessage オブジェクトのコレクションです。この例では 1 つのメッセージのみを使用していますが、コレクションにさらに追加すると API にさらにコンテキストを追加できます。
- ChoiceCount - これは、API から取得するレコメンデーション数です。この例では、1 つのレコメンデーションのみを求めます。
- MaxTokens - これは、API が応答で返すトークン (単語) の最大数です。この例では、100 個のトークンを要求しています。
GetChatCompletionsAsync メソッドは、API からの応答を含む Response<ChatCompletions> オブジェクトを返します。 response.Value.Choices コレクションの最初の Choice から Message.Content 応答テキストを取得し、それを UI 下部にあるコントロールに表示します。

Note

API 呼び出しによってスローされる可能性のある例外を処理するために、GetRecommendationAsync メソッドにエラー処理を追加することをお勧めします。わかりやすくするために、この例から除外しました。
このセクションで追加したコードには、MainPage.xaml.cs ファイルの先頭にある次の using ステートメントも必要です。
```
using Azure.AI.OpenAI;
using Azure;
```
アプリを実行し、場所を入力して、おすすめボタンをテストします。 UI の下部にある Label コントロールに API からの応答が表示されるはずです。

これで完了です。 OpenAI ChatGPT API を使用しておすすめのレストラン、ホテル、アトラクションの情報を提供する Windows .NET MAUI アプリが正常に作成されました。結果を改善できるかどうか、プロンプトを変更してみてください。また、GetRecommendationAsync にある ChatCompletionsOptions オブジェクトの DeploymentName 値を変更すると、別のモデルからより良い結果が得られるかどうかを確認できます。

重要

試用期間が終了した後は、API の使用状況に注意してください。 OpenAI アカウントで毎月の使用制限を設定して、予期しない請求を避けることもできます。

次のステップ

次の記事に進み、以下の方法を学習してください。

C# マークアップと Community Toolkit を使用して .NET MAUI アプリを作成する