{"id":21964471,"url":"https://github.com/azure-samples/openai-secure-ui-js","last_synced_at":"2026-04-02T02:48:09.059Z","repository":{"id":265376258,"uuid":"856797367","full_name":"Azure-Samples/openai-secure-ui-js","owner":"Azure-Samples","description":"Reusable OpenAI secure UI and infrastructure for AI Chat with Azure","archived":false,"fork":false,"pushed_at":"2025-03-17T14:03:27.000Z","size":1766,"stargazers_count":13,"open_issues_count":0,"forks_count":19,"subscribers_count":11,"default_branch":"main","last_synced_at":"2025-04-17T10:44:56.438Z","etag":null,"topics":["ai-azd-templates","azd","azd-templates","azure","chatbot","generative-ai","javascript","nodejs","openai","secure","serverless","template","typescript","ui","web-components"],"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":".github/CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":".github/CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":".github/SECURITY.md","support":"SUPPORT.md","governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-09-13T08:16:12.000Z","updated_at":"2025-04-14T14:55:01.000Z","dependencies_parsed_at":"2024-11-29T21:04:10.133Z","dependency_job_id":null,"html_url":"https://github.com/Azure-Samples/openai-secure-ui-js","commit_stats":null,"previous_names":["azure-samples/openai-secure-ui-js"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Azure-Samples%2Fopenai-secure-ui-js","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Azure-Samples%2Fopenai-secure-ui-js/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Azure-Samples%2Fopenai-secure-ui-js/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Azure-Samples%2Fopenai-secure-ui-js/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Azure-Samples","download_url":"https://codeload.github.com/Azure-Samples/openai-secure-ui-js/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250546442,"owners_count":21448334,"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","azd-templates","azure","chatbot","generative-ai","javascript","nodejs","openai","secure","serverless","template","typescript","ui","web-components"],"created_at":"2024-11-29T12:22:53.714Z","updated_at":"2026-04-02T02:48:09.004Z","avatar_url":"https://github.com/Azure-Samples.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003c!-- prettier-ignore --\u003e\n\u003cdiv align=\"center\"\u003e\n\n\u003cimg src=\"./docs/images/secure-chat.png\" alt=\"\" align=\"center\" height=\"64\" /\u003e\n\n# Azure OpenAI secure UI starter\n\n[![Open project in GitHub Codespaces](https://img.shields.io/badge/Codespaces-Open-blue?style=flat-square\u0026logo=github)](https://codespaces.new/Azure-Samples/openai-secure-ui-js?hide_repo_select=true\u0026ref=main\u0026quickstart=true)\n[![Watch to learn more about GenAI with JS on YouTube](https://img.shields.io/badge/YouTube-d95652.svg?style=flat-square\u0026logo=youtube)](https://www.youtube.com/playlist?list=PLlrxD0HtieHi5ZpsHULPLxm839IrhmeDk)\n[![Build Status](https://img.shields.io/github/actions/workflow/status/Azure-Samples/openai-secure-ui-js/ci.yml?style=flat-square\u0026label=Build)](https://github.com/Azure-Samples/openai-secure-ui-js/actions)\n![Node version](https://img.shields.io/badge/Node.js-\u003e=20-3c873a?style=flat-square)\n[![TypeScript](https://img.shields.io/badge/TypeScript-blue?style=flat-square\u0026logo=typescript\u0026logoColor=white)](https://www.typescriptlang.org)\n[![License](https://img.shields.io/badge/License-MIT-yellow?style=flat-square)](LICENSE)\n\n:star: If you like this sample, star it on GitHub — it helps a lot!\n\n[Overview](#overview) • [Get started](#getting-started) • [Run the sample](#run-the-sample) • [Resources](#resources) • [FAQ](#faq) • [Guidance](#guidance)\n\n![Animation showing the app in action](./docs/images/demo.gif)\n\n\u003c/div\u003e\n\nThis sample shows how to deploy a secure [Azure OpenAI](https://learn.microsoft.com/azure/ai-services/openai/overview) infrastructure with reusable components to build a web UI with authentication. It provides a starting point for building secure AI chat applications, using [RBAC](https://learn.microsoft.com/azure/role-based-access-control/built-in-roles) permissions and OpenAI API SDKs with [keyless (Entra) authentication](https://learn.microsoft.com/entra/identity/managed-identities-azure-resources/overview). The backend resources are secured within an [Azure Virtual Network](https://learn.microsoft.com/azure/virtual-network/virtual-networks-overview), and the frontend is hosted on [Azure Static Web Apps](https://learn.microsoft.com/azure/static-web-apps/overview).\n\n## Overview\n\nBuilding AI applications can be complex and time-consuming, but using accelerator components with Azure allows to greatly simplify the process. This template provides a starting point for building a secure UI with Azure OpenAI, using a keyless authentication mechanism and a virtual network to secure the backend resources. It also demonstrates how to set up user authentication and authorization with configurable providers with [Azure Static Web Apps Easy Auth](https://learn.microsoft.com/azure/static-web-apps/authentication-authorization).\n\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"./docs/images/architecture-secure.drawio.png\" alt=\"Application architecture\" width=\"640px\" /\u003e\n\u003c/div\u003e\n\nThis application is made from multiple components:\n\n- Reusable and customizable web components built with [Lit](https://lit.dev) handling user authentication and providing an AI chat UI. The code is located in the `packages/ai-chat-components` folder.\n\n- Example web app integrations of the web components, hosted on [Azure Static Web Apps](https://learn.microsoft.com/azure/static-web-apps/overview). There are example using [static HTML](./packages/webapp-html/), [React](./packages/webapp-react/), [Angular](./packages/webapp-angular/), [Vue](./packages/webapp-vue/) and [Svelte](./packages/webapp-svelte/).\n\n- A serverless API built with [Azure Functions](https://learn.microsoft.com/azure/azure-functions/functions-overview?pivots=programming-language-javascript) and using [OpenAI SDK](https://github.com/openai/openai-node) to generate responses to the user chat queries. The code is located in the `packages/api` folder.\n\nWe use the [HTTP protocol for AI chat apps](https://aka.ms/chatprotocol) to communicate between the web app and the API.\n\n## Features\n\n- **Secure deployments**: Uses Azure Managed Identity for keyless authentication and Azure Virtual Network to secure the backend resources.\n- **Reusable components**: Provides reusable web components for building secure AI chat applications.\n- **Serverless Architecture**: Utilizes Azure Functions and Azure Static Web Apps for a fully serverless deployment.\n- **Scalable and Cost-Effective**: Leverages Azure's serverless offerings to provide a scalable and cost-effective solution.\n- **Local Development**: Supports local development using Ollama for testing without any cloud costs.\n\n## Getting started\n\nThere are multiple ways to get started with this project.\n\nThe quickest way is to use [GitHub Codespaces](#use-github-codespaces) that provides a preconfigured environment for you. Alternatively, you can [set up your local environment](#use-your-local-environment) following the instructions below.\n\n\u003e [!IMPORTANT]\n\u003e If you want to run this sample entirely locally using Ollama, you have to follow the instructions in the [local environment](#use-your-local-environment) section.\n\n### Use your local environment\n\nYou need to install following tools to work on your local machine:\n\n- [Node.js LTS](https://nodejs.org/download/)\n- [Azure Developer CLI](https://aka.ms/azure-dev/install)\n- [Git](https://git-scm.com/downloads)\n- [PowerShell 7+](https://github.com/powershell/powershell) _(for Windows users only)_\n  - **Important**: Ensure you can run `pwsh.exe` from a PowerShell command. If this fails, you likely need to upgrade PowerShell.\n  - Instead of Powershell, you can also use Git Bash or WSL to run the Azure Developer CLI commands.\n\nThen you can get the project code:\n\n1. [**Fork**](https://github.com/Azure-Samples/openai-secure-ui-js/fork) the project to create your own copy of this repository.\n2. On your forked repository, select the **Code** button, then the **Local** tab, and copy the URL of your forked repository.\n\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"./docs/images/clone-url.png\" alt=\"Screenshot showing how to copy the repository URL\" width=\"400px\" /\u003e\n\u003c/div\u003e\n3. Open a terminal and run this command to clone the repo: \u003ccode\u003e git clone \u0026lt;your-repo-url\u0026gt; \u003c/code\u003e\n\n### Use GitHub Codespaces\n\nYou can run this project directly in your browser by using GitHub Codespaces, which will open a web-based VS Code:\n\n[![Open in GitHub Codespaces](https://img.shields.io/static/v1?style=for-the-badge\u0026label=GitHub+Codespaces\u0026message=Open\u0026color=blue\u0026logo=github)](https://codespaces.new/Azure-Samples/openai-secure-ui-js?hide_repo_select=true\u0026ref\u0026quickstart=true)\n\n### Use a VSCode dev container\n\nA similar option to Codespaces is VS Code Dev Containers, that will open the project in your local VS Code instance using the [Dev Containers extension](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-containers).\n\nYou will also need to have [Docker](https://www.docker.com/products/docker-desktop) installed on your machine to run the container.\n\n[![Open in Dev Containers](https://img.shields.io/static/v1?style=for-the-badge\u0026label=Dev%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/openai-secure-ui-js)\n\n## Run the sample\n\nThere are multiple ways to run this sample: locally using Ollama or Azure OpenAI models for testing, or by deploying it to Azure.\n\n### Deploy the sample to Azure\n\n#### Azure prerequisites\n\n- **Azure account**. If you're new to Azure, [get an Azure account for free](https://azure.microsoft.com/free) to get free Azure credits to get started. If you're a student, you can also get free credits with [Azure for Students](https://aka.ms/azureforstudents).\n- **Azure subscription with access enabled for the Azure OpenAI service**. You can request access with [this form](https://aka.ms/oaiapply).\n- **Azure account permissions**:\n  - Your Azure account must have `Microsoft.Authorization/roleAssignments/write` permissions, such as [Role Based Access Control Administrator](https://learn.microsoft.com/azure/role-based-access-control/built-in-roles#role-based-access-control-administrator-preview), [User Access Administrator](https://learn.microsoft.com/azure/role-based-access-control/built-in-roles#user-access-administrator), or [Owner](https://learn.microsoft.com/azure/role-based-access-control/built-in-roles#owner). If you don't have subscription-level permissions, you must be granted [RBAC](https://learn.microsoft.com/azure/role-based-access-control/built-in-roles#role-based-access-control-administrator-preview) for an existing resource group and deploy to that existing group by running these commands:\n    ```bash\n    azd env set AZURE_RESOURCE_GROUP \u003cname of existing resource group\u003e\n    azd env set AZURE_LOCATION \u003clocation of existing resource group\u003e\n    ```\n  - Your Azure account also needs `Microsoft.Resources/deployments/write` permissions on the subscription level.\n\n#### Cost estimation\n\nSee the [cost estimation](./docs/cost.md) details for running this sample on Azure.\n\n#### (Optional) Enable additional user context to Microsoft Defender for Cloud\nIn case you have Microsoft Defender for Cloud protection on your Azure OpenAI resource and you want to have additional user context on the alerts, run this command:\n\n```bash\nazd env set MS_DEFENDER_ENABLED true\n```\n\nTo customize the application name of the user context, run this command:\n```bash\nazd env set APPLICATION_NAME \u003cyour application name\u003e\n```\n\nFor more details, refer to the [Microsoft Defender for Cloud documentation](https://learn.microsoft.com/azure/defender-for-cloud/gain-end-user-context-ai).\n\n#### Deploy the sample\n\n1. Open a terminal and navigate to the root of the project.\n2. Authenticate with Azure by running `azd auth login`.\n3. Run `azd up` to deploy the application to Azure. This will provision Azure resources, deploy this sample, and build the search index based on the files found in the `./data` folder.\n   - You will be prompted to select a base location for the resources. If you're unsure of which location to choose, select `eastus2`.\n   - By default, the OpenAI resource will be deployed to `eastus2`. You can set a different location with `azd env set AZURE_OPENAI_RESOURCE_GROUP_LOCATION \u003clocation\u003e`. Currently only a short list of locations is accepted. That location list is based on the [OpenAI model availability table](https://learn.microsoft.com/azure/ai-services/openai/concepts/models#standard-deployment-model-availability) and may become outdated as availability changes.\n\nThe deployment process will take a few minutes. Once it's done, you'll see the URL of the web app in the terminal.\n\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"./docs/images/azd-up.png\" alt=\"Screenshot of the azd up command result\" width=\"600px\" /\u003e\n\u003c/div\u003e\n\nYou can now open the web app in your browser and start chatting with the bot.\n\n##### (Optional) Using a different framework for the webapp\n\nBy default, the sample deploys the static HTML version of the webapp. However, we provide example integrations of the UI web components with different web app frameworks:\n\n- [static HTML](./packages/webapp-html/)\n- [React](./packages/webapp-react/)\n- [Angular](./packages/webapp-angular/)\n- [Vue](./packages/webapp-vue/)\n- [Svelte](./packages/webapp-svelte/)\n\nIf you want to switch the deployment to use any of these, edit the file `azure.yaml` in the root of the project and changes the project path to the one you want to deploy for the webapp service:\n\n```yaml\nservices:\n  webapp:\n    # Change here to the path of the web app you want to deploy,\n    # for example, to deploy the React version of the web app\n    # change it to ./packages/webapp-react\n    project: ./packages/webapp-html\n```\n\n#### Clean up\n\nTo clean up all the Azure resources created by this sample:\n\n1. Run `azd down --purge`\n2. When asked if you are sure you want to continue, enter `y`\n\nThe resource group and all the resources will be deleted.\n\n### Run the sample locally with Ollama\n\nIf you have a machine with enough resources, you can run this sample entirely locally without using any cloud resources. To do that, you first have to install [Ollama](https://ollama.com) and then run the following commands to download the models on your machine:\n\n```bash\nollama pull phi3\n```\n\n\u003e [!NOTE]\n\u003e The `phi3` model with download a few gigabytes of data, so it can take some time depending on your internet connection.\n\nAfter that you have to install the NPM dependencies:\n\n```bash\nnpm install\n```\n\nNext, create a `.env` file in the `packages/api` folder with the following content:\n\n```bash\nOPENAI_BASE_URL=http://localhost:11434/v1\nOPENAI_API_KEY=__dummy\nOPENAI_MODEL_NAME=phi3\n```\n\nThen you can start the application by running the following command which will start the web app and the API locally:\n\n```bash\nnpm start\n```\n\nYou can now open the URL `http://localhost:4280` in your browser, use the authentication emulator to connect to the web app, and start chatting with the bot.\n\n### Run the sample locally with Azure OpenAI models\n\nFirst you need to provision the Azure resources needed to run the sample. Follow the instructions in the [Deploy the sample to Azure](#deploy-the-sample-to-azure) section to deploy the sample to Azure, then you'll be able to run the sample locally using the deployed Azure resources.\n\nOnce your deployment is complete, you should see a `.env` file in the `packages/api` folder. This file contains the environment variables needed to run the application using Azure resources.\n\nTo run the sample, you can then use the same commands as for the Ollama setup. This will start the web app and the API locally:\n\n```bash\nnpm start\n```\n\nOpen the URL `http://localhost:4280` in your browser, use the authentication emulator to connect to the web app, and start chatting with the bot.\n\n## Resources\n\nHere are some resources to learn more about Azure OpenAI and related technologies:\n\n- [Serverless AI Chat sample](https://github.com/Azure-Samples/serverless-chat-langchainjs)\n- [Generative AI with JavaScript](https://github.com/microsoft/generative-ai-with-javascript)\n- [Generative AI For Beginners](https://github.com/microsoft/generative-ai-for-beginners)\n- [Azure OpenAI Service](https://learn.microsoft.com/azure/ai-services/openai/overview)\n- [Chat + Enterprise data with Azure OpenAI and Azure AI Search](https://github.com/Azure-Samples/azure-search-openai-javascript)\n\nYou can also find [more Azure AI samples here](https://github.com/Azure-Samples/azureai-samples).\n\n## FAQ\n\nYou can find answers to frequently asked questions in the [FAQ](./docs/faq.md).\n\n## Guidance\n\n### Region availability\n\nThis template uses model `gpt-4o-mini` which may not be available in all Azure regions. Check for [up-to-date region availability](https://learn.microsoft.com/azure/ai-services/openai/concepts/models#standard-deployment-model-availability) and select a region during deployment accordingly.\n\nWe recommend using `East US 2` if you're unsure of which region to choose.\n\n### Security\n\nThis template has [Managed Identity](https://learn.microsoft.com/entra/identity/managed-identities-azure-resources/overview) built in to eliminate the need for developers to manage these credentials. Applications can use managed identities to obtain Microsoft Entra tokens without having to handle any secrets in the code. Additionally, we're using [Microsoft Security DevOps GitHub Action](https://github.com/microsoft/security-devops-action) to scan the infrastructure-as-code files and generates a report containing any detected issues.\n\n### Security\n\nThis template has [Managed Identity](https://learn.microsoft.com/entra/identity/managed-identities-azure-resources/overview) built in to eliminate the need for developers to manage these credentials. Applications can use managed identities to obtain Microsoft Entra tokens without having to handle any secrets in the code. Additionally, we're using [Microsoft Security DevOps GitHub Action](https://github.com/microsoft/security-devops-action) to scan the infrastructure-as-code files and generates a report containing any detected issues.\n\nYou can Learn more about using Managed Identity with Azure OpenAI in this [tutorial](https://learn.microsoft.com/training/modules/intro-azure-openai-managed-identity-auth-javascript/).\n\n### Troubleshooting\n\nIf you have any issue when running or deploying this sample, please check the [troubleshooting guide](./docs/troubleshooting.md). If you can't find a solution to your problem, please [open an issue](https://github.com/Azure-Samples/openai-secure-ui-js/issues) in this repository.\n\n## Contributing\n\nThis project welcomes contributions and suggestions. Most contributions require you to agree to a\nContributor License Agreement (CLA) declaring that you have the right to, and actually do, grant us\nthe rights to use your contribution. For details, visit https://cla.opensource.microsoft.com.\n\nWhen you submit a pull request, a CLA bot will automatically determine whether you need to provide\na CLA and decorate the PR appropriately (e.g., status check, comment). Simply follow the instructions\nprovided by the bot. You will only need to do this once across all repos using our CLA.\n\nThis project has adopted the [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/).\nFor more information see the [Code of Conduct FAQ](https://opensource.microsoft.com/codeofconduct/faq/) or\ncontact [opencode@microsoft.com](mailto:opencode@microsoft.com) with any additional questions or comments.\n\n## Trademarks\n\nThis project may contain trademarks or logos for projects, products, or services. Authorized use of Microsoft\ntrademarks or logos is subject to and must follow\n[Microsoft's Trademark \u0026 Brand Guidelines](https://www.microsoft.com/en-us/legal/intellectualproperty/trademarks/usage/general).\nUse of Microsoft trademarks or logos in modified versions of this project must not cause confusion or imply Microsoft sponsorship.\nAny use of third-party trademarks or logos are subject to those third-party's policies.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fazure-samples%2Fopenai-secure-ui-js","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fazure-samples%2Fopenai-secure-ui-js","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fazure-samples%2Fopenai-secure-ui-js/lists"}