js-popular-repos / azure-openai-chat-frontend Goto Github PK

This folder contains a Lit implementation, consisting of multiple LitElements that can be used to interact with the Azure OpenAI API.

It is a classic chat UI that can be used to send messages to the API and receive responses.

The following technologies are part of the frontend application:

• Lit and LitElement
• Web Components
• Vite and Rollup for local development, bundling and serving
• TypeScript
• ESLint and Prettier for code linting and formatting

The following video shows the user interface. Styles are fully configurable!

The frontend application is configured using a global configuration file. You can enable or disable the default prompts, and configure the default prompt texts, the API endpoint and other settings.

All texts and labels are configurable to match your use case. To customize the texts, please edit the global config file.

To run the application locally, you must install Node.js LTS and make sure you can run npm commands from your terminal.

Then you can proceed by following these steps:

• To install all npm dependencies, please run npm install. This is a npm workspace, so all dependencies will be installed in the root folder.
• To start the local development server, open a new terminal and run npm run start. This will start the local development server on port 8000.
• To build the application, open a new terminal and run npm run build. This will generate a production build in the dist folder.

[IMPORTANT] For the application to be functional, you will need to connect it to a locally running or remotely deployed backend service, and make sure that the data attribute data-api-url is pointing to the correct endpoint.

The Search API service implements the HTTP protocol for AI chat apps. It can be used with any backend service that implements the same protocol.

Recommended backend repos	Development environment
Property rental domain with Node.js	Example question: What is the refund policy
Employee benefits with Python	Example question: What is included in my Northwind Health Plus plan that is not in standard?
Employee benefits with .NET and C#	Example question: What is included in my Northwind Health Plus plan that is not in standard?

To connect to a backend, follow these steps:

1. Deploy the backend services as explained in their respective repository readme files, for example following these steps to deploy the backend.
2. Once the backend service is fully deployed, get the backend URL with azd env get-values | grep BACKEND_URI.
3. Deploy the frontend application to Azure as explained here or start it locally or in Codespaces.
4. Set the backend URL in this repo, running azd env set BACKEND_URI <your_backend_url> that you got in step 2.
5. Depending on whether you want to use the deployed frontend app or the local frontend app:

• If you want to use the deployed frontend app, run azd up to redeploy.

• If you want to use the local frontend app on your machine or in Codespaces, run:

  # Export the environment variable.
  # The syntax may be different depending on your shell or if you're using Windows.
  export BACKEND_URI=<your_backend_url>
  
  # Start the app
  npm start

[NOTE] You may need to enable CORS in your backend service, by running azd env set ALLOWED_ORIGIN <your_frontend_url> then deploy again with azd up.

Get the frontend URL, following this table:

If you want to use the module as a library as it is used in the JavaScript sample, set the environment variable IS_LIB to true, running azd env set IS_LIB true.

To deploy this application code to Azure Static Web Apps you can use Azure Static Web Apps CLI or using the Azure Developer CLI, by running azd up and following the instruction in the terminal.

If you're deploying this sample to Azure Static Web Apps, using the Azure Developer CLI template, please consider enabling user authentication, following this guide.

Authenticating requests to the backend service, will need to be implemented in the backend service solution.