|
1 | 1 | ---
|
2 | 2 | title: How to add OpenAI chat completions to a WinUI desktop app
|
3 |
| -description: Get started with WinUI 3 / Windows App SDK desktop apps by integrating OpenAI's chat completions API into the app. |
| 3 | +description: Get started with WinUI 3 / Windows App SDK desktop apps by integrating OpenAI's text generation and prompting APIs into the app. |
4 | 4 | ms.topic: how-to
|
5 |
| -ms.date: 11/26/2024 |
| 5 | +ms.date: 07/24/2025 |
6 | 6 | keywords: windows app sdk, winappsdk, winui3, openai, chatgpt
|
7 | 7 | ms.localizationpriority: medium
|
8 | 8 | ms.custom: template-quickstart
|
9 | 9 | audience: new-desktop-app-developers
|
10 | 10 | content-type: how-to
|
11 |
| -#Customer intent: As a Windows developer, I want to learn how to integrate OpenAI's chat completions API into my WinUI 3 / Windows App SDK desktop app so that I can build a chat-like interface that generates responses to messages. |
| 11 | +#Customer intent: As a Windows developer, I want to learn how to integrate OpenAI's text generation and prompting APIs into my WinUI 3 / Windows App SDK desktop app so that I can build a chat-like interface that generates responses to messages. |
12 | 12 | ---
|
13 | 13 |
|
14 | 14 | # Add OpenAI chat completions to your WinUI 3 / Windows App SDK desktop app
|
15 | 15 |
|
16 |
| -In this how-to, you'll learn how to integrate OpenAI's API into your WinUI 3 / Windows App SDK desktop app. We'll build a chat-like interface that lets you generate responses to messages using OpenAI's [chat completions API](https://platform.openai.com/docs/guides/text-generation/chat-completions-api): |
| 16 | +In this how-to, you'll learn how to integrate OpenAI's API into your WinUI 3 / Windows App SDK desktop app. We'll build a chat-like interface that lets you generate responses to messages using OpenAI's [text generation and prompting APIs](https://platform.openai.com/docs/guides/text): |
17 | 17 |
|
18 | 18 | :::image type="content" source="images/chatgpt-openai/long-story.png" alt-text="A screenshot of a less minimal WinUI chat app.":::
|
19 | 19 |
|
20 | 20 | <!--todo: The source code for the app we're building in this how-to is available todo -->
|
21 | 21 |
|
22 | 22 | ## Prerequisites
|
23 | 23 |
|
24 |
| -- Set up your development computer (see [Get started with WinUI](../get-started/start-here.md)). |
25 |
| -- Familiarity with the core concepts in *[How to build a Hello World app using C# and WinUI 3 / Windows App SDK](./hello-world-winui3.md)* - we'll build upon that how-to in this one. |
| 24 | +- Set up your development computer (see [Start developing Windows apps](../get-started/start-here.md)). |
| 25 | +- Familiarity with the core concepts in *[How to build a Hello World app using C# and WinUI / Windows App SDK](./hello-world-winui3.md)* - we'll build upon that how-to in this one. |
26 | 26 | - An OpenAI API key from your [OpenAI developer dashboard](https://platform.openai.com/api-keys).
|
27 | 27 | - An OpenAI SDK installed in your project. Refer to the [OpenAI documentation](https://platform.openai.com/docs/libraries) for a list of community libraries. In this how-to, we'll use the official [OpenAI .NET API library](https://github.com/openai/openai-dotnet).
|
28 | 28 |
|
29 | 29 | ## Create a project
|
30 | 30 |
|
31 |
| - 1. Open Visual Studio and create a new project via `File` > `New` > `Project`. |
32 |
| - 1. Search for `WinUI` and select the `Blank App, Packaged (WinUI 3 in Desktop)` C# project template. |
33 |
| - 1. Specify a project name, solution name, and directory. In this example, our `ChatGPT_WinUI3` project belongs to a `ChatGPT_WinUI3` solution, which will be created in `C:\Projects\`. |
34 |
| - |
35 |
| -After creating your project, you should see the following default file structure in your Solution Explorer: |
36 |
| - |
37 |
| -:::image type="content" source="images/chatgpt-openai/collapsed-file-structure-chatgpt.png" alt-text="A screenshot of the default directory structure in Solution Explorer."::: |
| 31 | +You create a new WinUI project in Visual Studio by following the steps in the [Create and launch your first WinUI app](/windows/apps/get-started/start-here#3-create-and-launch-your-first-winui-app) section of the [Start developing Windows apps](../get-started/start-here.md) article. For this example, enter `ChatGPT_WinUI3` as the project name and `ChatGPT_WinUI3` for the solution name when entering the project details in the dialog. |
38 | 32 |
|
39 | 33 | ## Set your environment variable
|
40 | 34 |
|
@@ -176,7 +170,7 @@ Let's make the following improvements to the chat interface:
|
176 | 170 | - Add a `ScrollViewer` to the `StackPanel` to enable scrolling.
|
177 | 171 | - Add a `TextBlock` to display the GPT response in a way that's more visually distinct from the user's input.
|
178 | 172 | - Add a `ProgressBar` to indicate when the app is waiting for a response from the GPT API.
|
179 |
| -- Center the `StackPanel` in the window, similar to ChatGPT's [web interface](https://chatgpt.com/). |
| 173 | +- Center the `StackPanel` in the window, similar to ChatGPT's [web interface](https://chatgpt.com). |
180 | 174 | - Ensure that messages wrap to the next line when they reach the edge of the window.
|
181 | 175 | - Make the `TextBox` larger and responsive to the `Enter` key.
|
182 | 176 |
|
@@ -392,7 +386,7 @@ Your new-and-improved chat interface should look something like this:
|
392 | 386 | Here's what you accomplished in this how-to:
|
393 | 387 |
|
394 | 388 | 1. You added OpenAI's API capabilities to your WinUI 3 / Windows App SDK desktop app by installing the official OpenAI library and initializing it with your API key.
|
395 |
| - 1. You built a chat-like interface that lets you generate responses to messages using OpenAI's [chat completions API](https://platform.openai.com/docs/guides/text-generation/chat-completions-api). |
| 389 | + 1. You built a chat-like interface that lets you generate responses to messages using OpenAI's [text generation and prompting APIs](https://platform.openai.com/docs/guides/text). |
396 | 390 | 1. You improved the chat interface by:
|
397 | 391 | 1. adding a `ScrollViewer`,
|
398 | 392 | 1. using a `TextBlock` to display the GPT response,
|
|
0 commit comments