Tutorial: Deploy an enterprise chat web app

In this article, you deploy an enterprise chat web app that uses your data with a large language model in Azure AI Foundry portal.

Your data source grounds the model with specific data. Grounding means the model uses your data to understand the context of your question. You don't change the deployed model itself. Your data stays separate and secure in your original data source.

The steps in this tutorial are:

Prerequisites

• An Azure subscription. If you don't have an Azure subscription, create a free account.
• If you don't have one, create a hub-based project.

• A deployed Azure OpenAI chat model. Finish the Azure AI Foundry playground quickstart to create this resource if you don't have one.

• A Search service connection to index the sample product data. If you don't have one, follow the steps to create and connect a search service.

• A local copy of product data. The Azure-Samples/rag-data-openai-python-promptflow repository on GitHub has sample retail product information for this tutorial scenario. The product_info_11.md file has product information about the TrailWalker hiking shoes for this tutorial example. Download the example Contoso Trek retail product data in a ZIP file to your local machine.

• A Microsoft.Web resource provider registered in the selected subscription so you can deploy to a web app. For more information on registering a resource provider, see Register resource provider.

• Necessary permissions to add role assignments in your Azure subscription. Only the Owner of the specific Azure resources can grant permissions by role assignment.

Azure AI Foundry portal and Azure portal

In this tutorial, you perform some tasks in the Azure AI Foundry portal and some tasks in the Azure portal.

The Azure AI Foundry portal is a web-based environment for building, training, and deploying AI models. As a developer, it's where you build and deploy your chat web application.

The Azure portal lets an admin manage and monitor Azure resources. As an admin, you use the portal to set up settings for different Azure services required for access from the web app.

Configure resources

To make the resources work correctly in a web app, set up the correct permissions in the Azure portal.

First, identify the resources you need to set up in the Azure AI Foundry portal.

1. Open the Azure AI Foundry portal, then select the project you used to deploy the Azure OpenAI chat model.

2. Select Management center from the left pane.

3. Select Connected resources under your project.

4. Identify the three resources you need to configure: the Azure OpenAI, the Azure AI Search, and the Azure Blob storage that corresponds to your workspaceblobstore.

   

   Tip

   If you have multiple Azure OpenAI resources, use the one that contains your deployed chat model.

5. Search for each of these names in the Azure portal. Open each one in a new browser tab so that you can switch between them.

6. When you're done, you have three new browser tabs open: Search service, Azure AI Foundry, and blobstore Container. Keep all three tabs open because you switch between them to set up the resources.

Enable managed identity

In the browser tab for the Search service resource in the Azure portal, enable managed identity:

1. In the left pane, under Resource Management, select Identity.
2. Switch Status to On.
3. Select Save.

In the browser tab for the Azure AI Foundry resource in the Azure portal, enable managed identity:

1. In the left pane, under Resource Management, select Identity.
2. Switch Status to On.
3. Select Save.

Set access control for search

In the browser tab for the Search service resource in the Azure portal, set the API access policy:

1. In the left pane, under Settings, select Keys.
2. Under API Access control, select Both.
3. When prompted, select Yes to confirm.

Assign roles

Repeat this pattern for each resource in the steps below.

The general pattern for assigning role-based access control (RBAC) for any resource is:

1. Navigate to the Azure portal for the given resource.
2. From the left page in the Azure portal, select Access control (IAM).
3. Select + Add > Add role assignment.
4. Search for the role you need to assign and select it. Then select Next.
5. When assigning a role to yourself:
   1. Select User, group, or service principal.
   2. Select Select members.
   3. Search for your name and select it.
6. When assigning a role to another resource:
   1. Select Managed identity.
   2. Select Select members.
   3. Use the dropdown to find the type of resource you want to assign. For example, Azure AI services or Search service.
   4. Select the resource from the list that appears. There might only be one, but you still need to select it.
7. Continue through the wizard and select Review + assign to add the role assignment.

Use these steps to assign roles for the resources you set up in this tutorial:

• Assign these roles in the browser tab for Search service in the Azure portal:

  • Search Index Data Reader to the Azure AI Foundry managed identity
  • Search Service Contributor to the Azure AI Foundry managed identity
  • Contributor to yourself (to find Contributor, switch to the Privileged administrator roles tab at the top. All other roles are in the Job function roles tab.)

• Assign these roles in the browser tab for Azure AI Foundry in the Azure portal:

  • Cognitive Services OpenAI Contributor to the Search service managed identity
  • Contributor to yourself.

• Assign these roles in the browser tab for Azure Blob storage in the Azure portal:

  • Storage Blob Data Contributor to the Azure AI Foundry managed identity
  • Storage Blob Data Reader to the Search service managed identity
  • Contributor to yourself

You're done setting up resources. You can close the Azure portal browser tabs now if you want.

Add your data and try the chat model again

In the Azure AI Foundry playground quickstart (that's a prerequisite for this tutorial), you see how your model responds without your data. Add your data to the model so it can answer questions about your products.

To complete this section, you need a local copy of product data. The Azure-Samples/rag-data-openai-python-promptflow repository on GitHub contains sample retail product information that's relevant for this tutorial scenario. Specifically, the product_info_11.md file contains product information about the TrailWalker hiking shoes that's relevant for this tutorial example. Download the example Contoso Trek retail product data in a ZIP file to your local machine.

Follow these steps to add your data in the chat playground to help the assistant answer questions about your products. You're not changing the deployed model itself. Your data is stored separately and securely in your Azure subscription.

1. Go to your project in Azure AI Foundry.

2. Select Playgrounds from the left pane.

3. Select Try the chat playground.

4. Select your deployed chat model from the Deployment dropdown.

   

5. On the left side of the chat playground, select Add your data > + Add a new data source.

   

6. In the Data source dropdown, select Upload files.

   

7. Select Upload > Upload files to browse your local files.

8. Select the files you want to upload. Select the product information files that you downloaded or created earlier. Add all of the files now. You won't be able to add more files later in the same playground session.

9. Select Upload to upload the file to your Azure Blob storage account. Then select Next.

   

10. Select your Azure AI Search service.

11. For the Vector index name, enter product-info and select Next.

12. On the Search settings page under Vector settings, deselect the Add vector search to this search resource checkbox. This setting helps determine how the model responds to requests. Then select Next.

    Note

    If you add vector search, more options would be available here for an additional cost.

13. Review your settings and select Create vector index.

14. In the playground, you can see that your data ingestion is in progress. This process might take several minutes. Before proceeding, wait until you see the data source and index name in place of the status.

    

15. You can now chat with the model asking the same question as before ("How much are the TrailWalker hiking shoes"), and this time it uses information from your data to construct the response. You can expand the references button to see the data that was used.

Deploy your web app

When you're satisfied with the experience in the Azure AI Foundry portal, deploy the model as a standalone web application.

Find your resource group in the Azure portal

In this tutorial, deploy your web app to the same resource group as your Azure AI Foundry hub. You'll set up authentication for the web app in the Azure portal.

Follow these steps to go to your resource group in the Azure portal:

1. Go to your project in Azure AI Foundry. Select Management center from the left pane.

2. Under the Project heading, select Overview.

3. Select the resource group name to open the resource group in the Azure portal. In this example, the resource group is named rg-sdg-ai.

   

4. You're now in the Azure portal, viewing the contents of the resource group where you deployed the hub. Note the resource group name and location. You'll use this information in the next section.

5. Keep this page open in a browser tab. You'll return to it later.

Deploy the web app

Publishing creates an Azure App Service in your subscription. You might incur costs depending on the pricing plan you select. When you're done with your app, delete it from the Azure portal.

To deploy the web app:

1. Complete the steps in the previous section to add your data to the playground. You can deploy a web app with or without your own data, but you need a deployed model as described in the Azure AI Foundry playground quickstart.

2. Select Deploy > ...as a web app.

   

3. On the Deploy to a web app page, enter the following details:

   • Name: A unique name for your web app.
   • Subscription: Your Azure subscription. If you don't see any available subscriptions, first register Microsoft.Web as a resource provider.
   • Resource group: Select a resource group in which to deploy the web app. Use the same resource group as the hub.
   • Location: Select a location in which to deploy the web app. Use the same location as the hub.
   • Pricing plan: Choose a pricing plan for the web app.
   • Enable chat history in the web app: For the tutorial, the chat history box isn't selected. If you enable the feature, your users have access to their individual previous queries and responses. For more information, see chat history remarks.

4. Select Deploy.

5. Wait for the app to deploy. This process might take a few minutes.

6. When it's ready, the Launch button is enabled on the toolbar. Don't launch the app yet, and don't close the chat playground page—you'll return to it later.

Configure web app authentication

By default, only you can access the web app. In this tutorial, add authentication to restrict access to members of your Azure tenant. Users sign in with their Microsoft Entra account to access your app. You can follow a similar process to add another identity provider if you prefer. The app only uses the user's sign-in information to verify they're a member of your tenant.

1. Return to the browser tab with the Azure portal, or open the Azure portal in a new browser tab. View the contents of the resource group where you deployed the web app. You might need to refresh the view to see the web app.

2. Select the App Service resource from the list of resources in the resource group.

3. From the collapsible left menu under Settings, select Authentication.

   

4. If you see Microsoft listed an Identity provider on this page, nothing further is needed. You can skip the next step.

5. Add an identity provider with the following settings:

   • Identity provider: Select Microsoft as the identity provider. The default settings on this page restrict the app to your tenant only, so you don't need to change anything else here.
   • Tenant type: Workforce
   • App registration: Create a new app registration
   • Name: The name of your web app service
   • Supported account types: Current tenant - Single tenant
   • Restrict access: Requires authentication
   • Unauthenticated requests: HTTP 302 Found redirect - recommended for websites

Use the web app

You're almost there. Now you can test the web app.

1. If you changed settings, wait about 10 minutes for the authentication settings to take effect.

2. Return to the browser tab with the chat playground page in the Azure AI Foundry portal.

3. Select Launch to open the deployed web app. If prompted, accept the permissions request.

4. If you don't see Launch in the playground, select Web apps from the left pane, then select your app from the list to open it.

   If the authentication settings aren't active yet, close the browser tab for your web app and return to the chat playground in the Azure AI Foundry portal. Wait a little longer, then try again.

5. In your web app, ask the same question as before ("How much are the TrailWalker hiking shoes"). This time, the app uses information from your data to construct the response. Expand the reference button to see the data used.

   

Understand chat history

With the chat history feature, your users can see their previous queries and responses.

Enable chat history when you deploy the web app. Select the Enable chat history in the web app checkbox.

After you enable chat history, your users can show or hide it in the top right corner of the app. When the history is shown, they can rename or delete conversations. As they're signed in to the app, conversations are ordered from newest to oldest and named based on the first query in the conversation.

If you delete the Cosmos DB resource but keep the chat history option enabled in the studio, your users see a connection error but can keep using the web app without chat history.

Update the web app

Use the playground to add more data or test the model with different scenarios. When you're ready to update the web app with the new model, select Deploy > ...as a web app again. Select Update an existing web app, and choose the existing web app from the list. The new model deploys to the existing web app.

Clean up resources

To avoid unnecessary Azure costs, delete the resources you created in this quickstart if you don't need them. Manage resources in the Azure portal.

Related content

• Get started building a chat app using the prompt flow SDK
• Build a custom chat app with the Azure AI SDK