チュートリアル: .NET MAUI と ChatGPT を使用してレコメンデーションアプリを作成する

ChatGPT API を統合して AI を利用した場所の推奨事項を提供する .NET MAUI Windows アプリを Visual Studio で作成する方法について説明します。詳細なガイダンスを使用して、レストラン、ホテル、アトラクションの提案を作成します。

このチュートリアルでは、以下の内容を学習します。

.NET MAUI アプリのシンプルなユーザーインターフェイスを作成する
OpenAI .NET API ライブラリを参照してブートストラップする
API キーを使用してアプリを OpenAI API アカウントにリンクする
OpenAI チャット 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)
{
}
```

イベントハンドラーはすべて、OpenAI .NET API ライブラリへの非同期呼び出しを行うため、 async としてマークされます。アプリを実行すると、次の UI が表示されます。

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

ユーザーは、 Entry コントロールに自分の場所を入力し、いずれかのボタンをクリックして、レストラン、ホテル、またはアトラクションの推奨事項を取得できます。 UI の下部にある Label コントロールに結果が表示されます。

次に、 OpenAI ライブラリをプロジェクトに追加し、API 呼び出しを行う準備をしましょう。

.NET 用の OpenAI ライブラリを参照して初期化する

OpenAI の ChatGPT API を呼び出すには、.NET NuGet パッケージ用の OpenAI ライブラリのプレリリースバージョンを使用します。このライブラリは、.NET アプリケーションに OpenAI REST API へのアクセスを提供します。プロジェクトにライブラリを追加し、API キーを使用してブートストラップします。

Visual Studio の [ツール] メニューからパッケージマネージャーコンソールを開きます。
次のコマンドを実行して、OpenAI ライブラリをインストールします。ライブラリはまだプレビュー段階であるため、 IncludePrerelease フラグが必要です。
```
Install-Package OpenAI -IncludePrerelease
```
これにより、バージョン 2.0.0 以降のプレリリースがプロジェクトにインストールされます。また、コマンドでバージョン番号を指定して、特定のバージョンのライブラリをインストールすることもできます。たとえば、バージョン 2.0.0-beta.4 をインストールするには、次のコマンドを実行します。
```
Install-Package OpenAI -Version 2.0.0-beta.4
```
MainPageの分離コードファイルであるMainPage.xaml.csを開きます。次のコードをファイルの先頭に追加して OpenAI ライブラリを参照し、OpenAI クライアントを保持する変数を作成します。ページが読み込まれるときに MainPage_Loaded メソッドを呼び出すコンストラクターを更新し、 MainPage_Loaded メソッドを追加して Windows レジストリから OpenAI API キーを取得し、OpenAI クライアントを初期化します。
```
private OpenAIClient _chatGptClient;

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

private void MainPage_Loaded(object sender, EventArgs e)
{
    var openAiKey = Environment.GetEnvironmentVariable("OPENAI_API_KEY");

    _chatGptClient = new(openAiKey);
}
```
これにより、API キーを使用して OpenAI ライブラリがブートストラップされます。 API キーは、OpenAI API 設定ページで作成できます。
プロジェクトをコンパイルするには、次の using ステートメントを MainPage.xaml.cs ファイルの先頭に追加する必要があります。
```
using OpenAI;
using OpenAI.Chat;
using System.ClientModel;
```

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

ChatGPT API 呼び出しを追加してアプリをテストする

次に、.NET 用 OpenAI ライブラリを使用して OpenAI ChatGPT API を呼び出す分離コードファイルにコードを追加します。前に作成した 3 つのイベントハンドラーにコードを追加します。コードは、 Entry コントロールからユーザーの場所を取得し、API に渡して推奨事項を取得します。次に、UI の下部にある Label コントロールに結果を表示します。

asyncという名前のGetRecommendationAsync メソッドを作成し、各イベントハンドラーから呼び出します。
```
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;
    }

    // The model passed to GetChatClient must match an available OpenAI
    // model in your account.
    var client = _chatGptClient.GetChatClient("gpt-3.5-turbo-16k");
    string prompt = $"What is a recommended {recommendationType} near {LocationEntry.Text}";

    AsyncResultCollection<StreamingChatCompletionUpdate> updates = client.CompleteChatStreamingAsync(prompt);
    StringWriter responseWriter = new();

    await foreach (StreamingChatCompletionUpdate update in updates)
    {
        foreach (ChatMessageContentPart updatePart in update.ContentUpdate)
        {
            responseWriter.Write(updatePart.Text);
        }
    }

    var returnMessage = responseWriter.ToString();
    SmallLabel.Text = returnMessage;
}
```
このコードは、まず、ユーザーが Entry コントロール内の場所を入力したことを確認します。そうでない場合は、アラートが表示され、返されます。ユーザーが場所を入力した場合、 ChatClient インスタンスを取得し、そのオブジェクトの CompleteChatStreamingAsync メソッドを呼び出して OpenAI を呼び出します。 CompleteChatStreamingAsync メソッドは ChatMessage[] パラメーターを受け取ります。これは、この例で行っているとおり、文字列として指定できます。

このメソッドは AsyncResultCollection<StreamingChatCompletionUpdate>を返します。このメソッドは、生成された API からの応答をストリーミングします。 updatesに対して非同期的に反復処理し、応答内の各ChatMessageContentPartを反復処理して応答文字列を構築します。応答は、UI の下部にある SmallLabel コントロールに表示されます。

注

API 呼び出しによってスローされる可能性のある例外を処理するには、 GetRecommendationAsync メソッドにエラー処理を追加することをお勧めします。わかりやすくするために、この例から除外しました。
アプリを実行し、場所を入力して、推奨ボタンをテストします。 UI の下部にある Label コントロールに API からの応答が表示されます。

それです！ OpenAI ChatGPT API を使用してレストラン、ホテル、アトラクションの推奨事項を提供する Windows .NET MAUI アプリが正常に作成されました。プロンプトを変更して、結果を改善できるかどうかを確認してみてください。 GetChatClientのGetRecommendationAsyncに渡されるモデル名を変更して、別のモデルからより良い結果が得られるかどうかを確認することもできます。

Important

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

次のステップ

方法については、次の記事に進んでください。...

.NET MAUI Windows デスクトップアプリに DALL-E を追加する

こちらも参照ください

フィードバック

このページはお役に立ちましたか?

Last updated on 2025-08-05