Edit

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

  • Article

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 multilanguage 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:

Prerequisites

Deploy the 2 reference architectures using the following articles. Make sure to use the same subscription and region for both deployments. The deployment may 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 deploying the two reference architectures, you have two full-stack apps deployed. To use the JavaScript frontend with the Python backend, you need to get the URLs for the JS frontend and the PY backend and configure them in the other app.

You should have each repo in a separate development environment, either locally on 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, review the URLs you entered in the environment. Make sure they don't end with a slash, /.

Next steps