Loading repository data…
Azure-Samples / repository
The Chat App Protocol compliant user-interface building block, for your chat-gpt like RAG pattern applications built with Azure OpenAI and Azure AI Search.
A transparent discovery signal based on current public GitHub metadata.
This score does not audit code, security, maintainers, documentation quality, or suitability. Verify the repository and its current documentation before adoption.
A classic chat user interface that can be used to send messages to an OpenAI API and receive responses.
This application is frontend application implemented with Lit, consisting of multiple LitElements that can be used to interact with the Azure OpenAI API.
When opening in Codespaces or Remote Containers, you will have all the dependencies preinstalled. Once the container is ready, run
npm start
The frontend will be running in forwarded port 8000.
[!IMPORTANT] You will need to follow instructions in Getting Started, to deploy a backend and connect it to the frontend app.
Features • Gettting Started • Guidance • Resources
This repo features a classic Chat-GPT-like user interface, including additional capabilities to debug responses, restyle, revisit history and reset the chat.
The following technologies are part of the frontend application:
Selected from shared topics, language and repository description—not editorial ratings.
keen0429 /
The Chat App Protocol compliant user-interface building block, for your chat-gpt like RAG pattern applications built with Azure OpenAI and Azure AI Search.
56/100 healthThe code in this repository represents the frontend application or colored area in the following diagram. It assumes a backend middleware and service deployments are in place. For a full reference, visit this repo
The following video shows the user interface. Styles are fully configurable!
This application is optimized to be opened in a container. 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:
Initialize as an Azure Developer CLI, running
azd init -t azure-openai-chat-frontend
npm install. This is a npm workspace, so all dependencies will be installed in the root folder.npm run start. This will start the local development server on port 8000.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-urlis 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:
azd env get-values | grep BACKEND_URI.azd env set BACKEND_URI <your_backend_url> that you got in step 2.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 withazd up.
Get the frontend URL, following this table:
| Environment | URL |
|---|---|
| Local | http://localhost:8000 |
| Production | azd env get-values | grep FRONTEND_URI |
| Codespace | https://<your_codespace_base_url>-8000.app.github.dev |
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.
azd up and follow the instructions in the terminal.
swa init && swa deployIf 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.