教程：使用 .NET MAUI 和 ChatGPT 创建建议应用

在本教程中，你将了解如何在 Visual Studio 中创建适用于 Windows 的 .NET MAUI 应用；而该应用会调用 OpenAI 的 ChatGPT API 以根据用户输入的位置提供建议。 该应用会有一个简单的 UI，允许用户输入位置并获取餐馆、酒店和景点的建议。

本教程介绍如何执行下列操作：

• 为 .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 应用”模板，并将一些 UI 元素添加到“MainPage”，以便根据提供的位置向用户提供一些建议。 UI 会有用于获取餐馆、酒店和景点的建议的按钮。

1. 在 Visual Studio 中，创建名为 ChatGptRecommendationApp 的新 .NET MAUI 应用项目。

2. 运行新项目，确保应用成功生成和运行。

3. 在解决方案资源管理器中打开 MainPage.xaml。

4. 将 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" />
   

5. 若要生成项目，需要为每个按钮添加 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，因为我们将对 OpenAI .NET API 库进行异步调用。 现在，运行应用时，应会看到以下 UI：

用户可以在 Entry 控件中输入其位置，然后单击其中一个按钮，获取餐馆、酒店或景点的建议。 UI 底部的 Label 控件将显示结果。

接下来，将 OpenAI .NET API 库添加到项目中，并准备进行一些 API 调用。

引用并初始化适用于 .NET 的 OpenAI 库

为了调用 OpenAI 的 ChatGPT API，我们将使用适用于 .NET 的 OpenAI 库 NuGet 包的预发行版本。 该库为 .NET 应用程序提供了对 OpenAI REST API 的访问权限。 我们将库添加到项目中，并使用 API 密钥启动它。

1. 从 Visual Studio 中的工具菜单打开包管理器控制台。

2. 通过运行以下命令来安装 OpenAI 库。 必须使用 IncludePrerelease 标志，因为该库仍处于预览版状态：

   Install-Package OpenAI -IncludePrerelease
   

   这应会在项目中安装版本 2.0.0 或更高版本的预发行版。 还可以通过在命令中指定版本号来安装库的特定版本。 例如，若要安装版本 2.0.0-beta.4，你需要运行以下命令：

   Install-Package OpenAI -Version 2.0.0-beta.4
   

3. 打开 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 库。 可以在 OpenAI API 设置页上创建 API 密钥。

4. 为了编译项目，您需将以下 using 语句添加到 MainPage.xaml.cs 文件的顶部：

   using OpenAI;
   using OpenAI.Chat;
   using System.ClientModel;
   

现在，我们已经准备好把一切组合起来了。 在下一节中，我们将向三个事件处理程序添加某些代码以调用 OpenAI 库，并显示建议结果。

添加 ChatGPT API 调用并测试应用

现在，可将代码添加到会使用适用于 .NET 的 OpenAI 库的代码隐藏文件中，以便调用 OpenAI ChatGPT API。 我们将代码添加到前面创建的三个事件处理程序。 此代码将从 Entry 控件获取用户的位置，并将其传递给 API 以获取建议。 然后，我们将在 UI 底部的 Label 控件中显示结果。

1. 创建一个名为 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;
       }
   
       // 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 控件中显示响应。

   注意

   最好向 GetRecommendationAsync 方法添加错误处理功能来处理 API 调用可能引发的所有异常。 为简单起见，我们已从此示例中排除该部分。

2. 运行应用，输入位置并测试建议按钮。 应该会在 UI 底部的 Label 控件中看到来自 API 的响应：

   

就这么简单！ 你已成功创建一个 Windows .NET MAUI 应用，该应用使用 OpenAI ChatGPT API 提供餐馆、酒店和景点的建议。 尝试更改提示，看看能否改善结果。 还可尝试更改传递到 GetRecommendationAsync 中 的 GetChatClient 的模型名称，看看能否从其他模型获得更好的结果。

重要

试用期到期后，请留意 API 使用情况。 还可以设置 OpenAI 帐户的每月支出限制，避免产生意外费用。

后续步骤

转到下一篇文章，了解如何…

将 DALL-E 添加到 .NET MAUI Windows 桌面应用

另请参阅

• 使用 C# 标记和社区工具包创建 .NET MAUI 应用
• 使用 .NET MAUI 生成 Windows 应用
• 宣布正式推出适用于 .NET 的 OpenAI 库
• 在 Windows 上开发负责任生成式 AI 应用程序和功能
• Microsoft DevRadio 视频：如何使用 OpenAI 和 .NET MAUI 来生成应用