{"id":14990367,"url":"https://github.com/azure-samples/azure-openai-chat-frontend","last_synced_at":"2025-05-07T10:34:20.498Z","repository":{"id":232576299,"uuid":"782482632","full_name":"Azure-Samples/azure-openai-chat-frontend","owner":"Azure-Samples","description":"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.","archived":false,"fork":false,"pushed_at":"2024-09-26T21:06:33.000Z","size":250,"stargazers_count":57,"open_issues_count":14,"forks_count":33,"subscribers_count":12,"default_branch":"main","last_synced_at":"2025-05-07T10:33:07.050Z","etag":null,"topics":["ai-azd-templates","azd-templates","chatgpt","frontend","javascript","lit","nodejs","typescript","webcomponents"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Azure-Samples.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.md","code_of_conduct":".github/CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-04-05T11:43:29.000Z","updated_at":"2025-05-04T12:26:17.000Z","dependencies_parsed_at":"2024-06-19T09:49:24.548Z","dependency_job_id":"ea6860c0-b3e8-4529-9b73-e750560f3b0d","html_url":"https://github.com/Azure-Samples/azure-openai-chat-frontend","commit_stats":{"total_commits":52,"total_committers":8,"mean_commits":6.5,"dds":"0.34615384615384615","last_synced_commit":"ea72f003b0e420577cdcd7c860b2cd0202b2038f"},"previous_names":["azure-samples/azure-openai-chat-frontend"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Azure-Samples%2Fazure-openai-chat-frontend","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Azure-Samples%2Fazure-openai-chat-frontend/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Azure-Samples%2Fazure-openai-chat-frontend/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Azure-Samples%2Fazure-openai-chat-frontend/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Azure-Samples","download_url":"https://codeload.github.com/Azure-Samples/azure-openai-chat-frontend/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252860122,"owners_count":21815473,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["ai-azd-templates","azd-templates","chatgpt","frontend","javascript","lit","nodejs","typescript","webcomponents"],"created_at":"2024-09-24T14:19:57.491Z","updated_at":"2025-05-07T10:34:20.471Z","avatar_url":"https://github.com/Azure-Samples.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Azure OpenAI Chat Frontend\n\nA classic chat user interface that can be used to send messages to an OpenAI API and receive responses. \n\nThis application is frontend application implemented with [Lit](https://lit.dev/), consisting of multiple LitElements that can be used to interact with the Azure OpenAI API.\n\n\n[![Open in GitHub Codespaces](https://img.shields.io/static/v1?style=for-the-badge\u0026label=GitHub+Codespaces\u0026message=Open\u0026color=brightgreen\u0026logo=github)](https://github.com/codespaces/new?hide_repo_select=true\u0026ref=main\u0026repo=782482632\u0026machine=standardLinux32gb\u0026devcontainer_path=.devcontainer%2Fdevcontainer.json\u0026location=WestUs2)\n[![Open in Remote - Containers](https://img.shields.io/static/v1?style=for-the-badge\u0026label=Remote%20-%20Containers\u0026message=Open\u0026color=blue\u0026logo=visualstudiocode)](https://vscode.dev/redirect?url=vscode://ms-vscode-remote.remote-containers/cloneInVolume?url=https://github.com/Azure-Samples/azure-openai-chat-frontend)\n\n## Features\n\nWhen opening in Codespaces or Remote Containers, you will have all the dependencies preinstalled. Once the container is ready, run\n\n```sh\nnpm start\n```\n\nThe frontend will be running in forwarded port 8000. \n\n\u003e [!IMPORTANT]\n\u003e You will need to follow instructions in [Getting Started](#getting-started), to deploy a backend and connect it to the frontend app.\n\n[Features](#features) • [Gettting Started](#getting-started) • [Guidance](#guidance) • [Resources](#resources) \n\n## Features\n\nThis repo features a classic Chat-GPT-like user interface, including additional capabilities to debug responses, restyle, revisit history and reset the chat.\n\n### Technical Stack\n\nThe following technologies are part of the frontend application:\n\n- [Lit](https://lit.dev) and LitElement\n- [Web Components](https://developer.mozilla.org/en-US/docs/Web/Web_Components)\n- [Vite](https://vitejs.dev/guide/) and [Rollup](https://rollupjs.org/introduction/) for local development, bundling and serving\n- [TypeScript](https://www.typescriptlang.org/)\n- [ESLint](https://eslint.org/) and [Prettier](https://prettier.io/) for code linting and formatting\n\n### Architecture Diagram\n\nThe 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](https://github.com/Azure-Samples/azure-search-openai-javascript/tree/main)\n\n![frontend application chat UI](./docs/assets/architecture.png)\n\n## Demo Video\n\nThe following video shows the user interface. Styles are fully configurable!\n\nhttps://github.com/Azure-Samples/azure-openai-chat-frontend/assets/4014025/a2933baa-bb8d-42b6-ad8e-a8cf052ddbd0\n\n\n## Getting started\n\n\n### Running the application\n\nThis 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.\n\nAll texts and labels are configurable to match your use case. To customize the texts, please edit the [global config](./src/config/global-config.js) file.\n\n### Local installation\n\nTo run the application locally, you must install [Node.js LTS](https://nodejs.org) and make sure you can run `npm` commands from your terminal.\n\nThen you can proceed by following these steps:\n\nInitialize as an [Azure Developer CLI](https://learn.microsoft.com/azure/developer/azure-developer-cli/overview), running\n\n```bash\nazd init -t azure-openai-chat-frontend\n```\n\n- To install all npm dependencies, please run `npm install`. This is a npm workspace, so all dependencies will be installed in the root folder.\n- 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.\n- To build the application, open a new terminal and run `npm run build`. This will generate a production build in the `dist` folder.\n\n\u003e [IMPORTANT]\n\u003e For the application to be functional, you will need to connect it to a locally running or remotely [deployed backend service](#deploying-the-app-to-azure-static-web-apps), and make sure that the data attribute `data-api-url` is pointing to the correct endpoint.\n\n## Connecting to a deployed backend\n\nThe Search API service implements the [HTTP protocol for AI chat apps](https://github.com/Azure-Samples/ai-chat-app-protocol). It can be used with any backend service that implements the same protocol.\n\n| Recommended backend repos | Development environment | \n| -- | -- | \n|Property rental domain with [Node.js](https://github.com/Azure-Samples/azure-search-openai-javascript)|[![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/Azure-Samples/azure-search-openai-javascript)\u003cbr\u003eExample question: `What is the refund policy`|\n|Employee benefits with [Python](https://github.com/Azure-Samples/azure-search-openai-demo)|[![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/Azure-Samples/azure-search-openai-demo)\u003cbr\u003eExample question: `What is included in my Northwind Health Plus plan that is not in standard?`|\n|Employee benefits with [.NET and C#](https://github.com/Azure-Samples/azure-search-openai-demo-csharp)|[![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/Azure-Samples/azure-search-openai-demo-csharp)\u003cbr\u003eExample question: `What is included in my Northwind Health Plus plan that is not in standard?`|\n\nTo connect to a backend, follow these steps:\n\n1. Deploy the backend services as explained in their respective repository readme files, for example following these [steps to deploy the backend](https://github.com/Azure-Samples/azure-search-openai-javascript#deploying-from-scratch).\n2. Once the backend service is fully deployed, get the backend URL with `azd env get-values | grep BACKEND_URI`.\n3. Deploy the frontend application to Azure as [explained here](#deploying-the-app-to-azure-static-web-apps) or start it locally or in Codespaces.\n4. Set the backend URL in this repo, running `azd env set BACKEND_URI \u003cyour_backend_url\u003e` that you got in step 2.\n5. Depending on whether you want to use the deployed frontend app or the local frontend app:\n\n- If you want to use the deployed frontend app, run `azd up` to redeploy.\n- If you want to use the local frontend app on your machine or in Codespaces, run:\n\n  ```sh\n  # Export the environment variable.\n  # The syntax may be different depending on your shell or if you're using Windows.\n  export BACKEND_URI=\u003cyour_backend_url\u003e\n\n  # Start the app\n  npm start\n  ```\n\n\u003e [NOTE]\n\u003e You may need to enable CORS in your backend service, by running `azd env set ALLOWED_ORIGIN \u003cyour_frontend_url\u003e` then deploy again with `azd up`. \n\nGet the frontend URL, following this table:\n\n| Environment | URL                                                     |\n| ----------- | ------------------------------------------------------- |\n| Local       | http://localhost:8000                                   |\n| Production  | `azd env get-values \\| grep FRONTEND_URI`               |\n| Codespace   | `https://\u003cyour_codespace_base_url\u003e-8000.app.github.dev` |\n\n## Using this module as a library\n\nIf you want to use the module as a library as it is used in [the JavaScript sample](https://github.com/Azure-Samples/azure-search-openai-javascript), set the environment variable `IS_LIB` to true, running `azd env set IS_LIB true`.\n\n## Guidance\n\n### Deploying \n\n- if you initialized as an [Azure Developer CLI](https://learn.microsoft.com/azure/developer/azure-developer-cli/overview) template as explained above, you can run:\n\n`azd up` and follow the instructions in the terminal.\n\n- if you cloned or forked, you can also use the [Azure Static Web Apps CLI](https://learn.microsoft.com/azure/static-web-apps/static-web-apps-cli-deploy), by running `swa init \u0026\u0026 swa deploy`\n\n### Security considerations\n\nIf you're deploying this sample to [Azure Static Web Apps](https://learn.microsoft.com/azure/static-web-apps/overview), using the [Azure Developer CLI template](./infra/), please consider enabling user authentication, following [this guide](https://learn.microsoft.com/en-us/azure/static-web-apps/authentication-authorization). \n\nAuthenticating requests to the backend service, will need to be implemented in the backend service solution.\n\n## Resources\n\n- [AI Chat Protocol](https://github.com/microsoft/ai-chat-protocol)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fazure-samples%2Fazure-openai-chat-frontend","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fazure-samples%2Fazure-openai-chat-frontend","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fazure-samples%2Fazure-openai-chat-frontend/lists"}