How to Build an Azure OpenAI Chat App Using Power Apps Code Apps and React

Power Apps recently released a preview feature called “Code Apps” that enables building web applications, so I decided to create an actual app to try it out.

Code Apps (Preview)

Code Apps is a new application format that allows you to host full-code web applications built with React and other frameworks on the Power Platform, while integrating them with Power Platform’s authentication, connectors, and management capabilities for distribution.
While the Power Apps Component Framework creates components that run within Power Apps canvas or model-driven apps, Code Apps enables building complete web applications from the ground up.

Official documentation here:

Power Apps code apps (preview) documentation - Power Apps

Provides access to highlighted areas within the Power Apps code apps (preview) documentation

learn.microsoft.com

In this article, I’ll walk through creating a Code Apps application and building a web app that runs on Power Apps.

Prerequisites

Install the Latest Version of Power Platform CLI

First, install the latest version of Power Platform CLI (PAC) in your development environment. *Note: Older versions don’t support the [pac code] command.

Enable Code Apps in the Target Environment

Next, enable Code Apps on the Power Platform side.

From the Power Platform admin center, click [Settings] for the target environment.

Navigate to [Features].

Enable [Power Apps code apps] and save.

Note Down the Environment GUID

Finally, note down the GUID of the environment where you’ll upload the app.

That completes the prerequisites.

Building the App

Launch the Sample App

First, let’s follow the official reference guide to launch the sample app provided by Microsoft locally.

Start by cloning the sample project from GitHub. *Note: URL is current as of the time of writing.

git clone https://github.com/microsoft/PowerAppsCodeApps.git

Next, install the required packages using npm install.

Create an authentication profile for the target environment using the pac auth command. Use the environment GUID you noted down during the prerequisites.

pac auth create --environment [Environment GUID]

If you see the following message, authentication was successful.

Next, initialize using pac code init. The “Hello World” portion sets the app name.

pac code init --displayName '[App Name]'

Then, launch locally with the following command.

npm run dev | pac code run

Once it launches successfully, access localhost:3000.

The web app is running!

Building a Chat App with Azure OpenAI (AOAI)

Let’s take it a step further by customizing the sample app to create a chat application.

Edit App.tsx in the project and save. *The code is available here. Note: This code has not been tested.

Upload the App to Power Platform

Finally, let’s upload the created app to Power Apps.

Use the pac code push command to push the app to your environment.

npm run build | pac code push

The app you created will now appear in the app list!

This exciting new feature, “Code Apps,” is likely to become the standard approach for internal applications where users have paid licenses, rather than using Azure Web Apps.

The code is available here. Please note this is for demonstration purposes only and has not been tested:

React component App.tsx for a Power Apps Code App that enables conversational interactions with Azure OpenAI.

React component App.tsx for a Power Apps Code App that enables conversational interactions with Azure OpenAI. - App.tsx

gist.github.com