Edit

Share via

Update the Chat app to use the JavaScript frontend with the Python backend

The Chat app is a reference application that demonstrates how to use the Azure OpenAI service. Each programming language reference architecture provides slightly different functionality. This article describes how to use the JavaScript frontend with the Python backend.

By mixing and matching the frontend and backend, you can create a multi-language application that uses the best of both worlds.

  • Demo - Configure JavaScript frontend with Python backend video

This article is part of a collection of articles that show you how to build a chat app using Azure OpenAI Service and Azure AI Search. Other articles in the collection include:

Note

This article uses one or more AI app templates as the basis for the examples and guidance in the article. AI app templates provide you with well-maintained, easy to deploy reference implementations that help to ensure a high-quality starting point for your AI apps.

Prerequisites

Deploy the two reference architectures using the following articles. Make sure to use the same subscription and region for both deployments. The deployment might take up to 20 minutes. Leave the deployments up; don't complete the Clean-up resources section until you're done with this article.

  • Deploy the JavaScript chat app using this article
  • Deploy the Python chat app using this article

Get the URLs for the frontend and backend

After you deploy the two reference architectures, you have two full-stack apps. To connect the JavaScript frontend with the Python backend, get the URLs for both apps and configure them.

You should have each repo in a separate development environment, either locally or in Codespaces.

Set JavaScript front-end URL in Python backend

  1. In the JavaScript development environment, get the URL for the JavaScript frontend by running the following command:

    azd env get-values | grep WEBAPP_URI

    This command gets all the cloud environment variables and filters for the WEBAPP_URI variable. Make sure the URL doesn't end with a slash, /.

  2. Copy the URL.

  3. In the Python development environment, set the URL for the JavaScript frontend by running the following command:

    azd env set ALLOWED_ORIGIN <FRONTEND-URL>

  4. In the Python development environment, redeploy the Python backend by running the following command:

    azd up

Set Python backend URL in JavaScript frontend

  1. In the Python development environment, get the URL for the Python backend by running the following command:

    azd env get-values | grep BACKEND_URI

    This command gets all the cloud environment variables and filters for the BACKEND_URI variable. Make sure the URL doesn't end with a slash, /.

  2. Copy the URL.

  3. In the JavaScript development environment, set the URL for the Python backend by running the following command:

    azd env set BACKEND_URI <BACKEND_URI>

  4. In the Python development environment, redeploy the Python backend by running the following command in the Python development environment:

    azd up

Use the JavaScript frontend with the Python backend

The Python app uses an HR benefits subject area while the JavaScript app uses a real estate subject area. Now that the apps are connected, you can use the front-end to ask about HR benefits. Suggested questions include:

  • What is included in my Northwind Health Plus plan that isn't standard?
  • What happens in a performance review?
  • What does a Product Manager do?

Clean-up resources

When you're done with the apps, you can delete the resources to avoid incurring more charges.

Troubleshooting

  • If you get an error, make sure the URLs you entered in the environment don't end with a slash, /.

Next steps