MCPcopy Index your code
hub / github.com/Azure-Samples/azure-search-openai-javascript

github.com/Azure-Samples/azure-search-openai-javascript @main

Chat with this repo
repository ↗ · DeepWiki ↗ · + Follow
412 symbols 769 edges 126 files 3 documented · 1%
What it actually does AI analysis from the code graph — generated when you open this
loading…
README

ChatGPT + Enterprise data with Azure OpenAI and Azure AI Search

Table of Contents

Open in GitHub Codespaces Join Azure AI Foundry Discord Open in Remote - Containers

This sample demonstrates a few approaches for creating ChatGPT-like experiences over your own data using the Retrieval Augmented Generation pattern. It uses Azure OpenAI Service to access the ChatGPT model (gpt-4o-mini), and Azure AI Search for data indexing and retrieval.

Retrieval Augmented Generation Architecture

The repo includes sample data so it's ready to try end to end. In this sample application we use a fictitious company called Contoso Real Estate, and the experience allows its customers to ask support questions about the usage of its products. The sample data includes a set of documents that describe its terms of service, privacy policy and a support guide.

The application is made from multiple components, including:

  • Search service: the backend service that provides the search and retrieval capabilities.
  • Indexer service: the service that indexes the data and creates the search indexes.
  • Web app: the frontend web application that provides the user interface and orchestrates the interaction between the user and the backend services.

App Architecture

Features

  • Chat and Q&A interfaces
  • Explores various options to help users evaluate the trustworthiness of responses with citations, tracking of source content, etc.
  • Shows possible approaches for data preparation, prompt construction, and orchestration of interaction between model (ChatGPT) and retriever (Azure AI Search)
  • Settings directly in the UX to tweak the behavior and experiment with options
  • Optional performance tracing and monitoring with Application Insights

Chat screen

📺 Watch a video overview of the app

Getting started

Azure account prerequisites

IMPORTANT: In order to deploy and run this sample, you'll need:

Azure deployment

Cost estimation

Pricing may vary per region and usage. Exact costs cannot be estimated. You may try the Azure pricing calculator for the resources below.

  • Azure Container Apps: Pay-as-you-go tier. Costs based on vCPU and memory used. Pricing
  • Azure Static Web Apps: Free Tier. Pricing
  • Azure OpenAI: Standard tier, ChatGPT and Ada models. Pricing per 1K tokens used, and at least 1K tokens are used per question. Pricing
  • Azure AI Search: Standard tier, 1 replica, free level of semantic search*. Pricing per hour.Pricing (The pricing may vary or reflect an outdated tier model. Please visit the linked page for more accurate information)
  • Azure Blob Storage: Standard tier with ZRS (Zone-redundant storage). Pricing per storage and read operations. Pricing
  • Azure Monitor: Pay-as-you-go tier. Costs based on data ingested. Pricing

⚠️ To avoid unnecessary costs, remember to take down your app if it's no longer in use, either by deleting the resource group in the Portal or running azd down --purge.

Project setup

There are multiple ways to successfully setup this project.

The easiest way to get started is with GitHub Codespaces that provides preconfigurations to setup all the tools for you. Read more below. Alternatively you can set up your local environment follwing the instructions below.

GitHub Codespaces

You can run this repo virtually by using GitHub Codespaces, which will open a web-based VS Code in your browser:

Open in GitHub Codespaces

VS Code Remote Containers

A similar option to Codespaces is VS Code Remote Containers, that will open the project in your local VS Code instance using the Dev Containers extension:

Open in Remote - Containers

Local environment

Then get the project code:

  1. Create a new folder and switch to it in the terminal
  2. Run azd auth login
  3. Run azd init -t azure-search-openai-javascript
  4. note that this command will initialize a git repository and you do not need to clone this repository

Deploying from scratch

Execute the following command, if you don't have any pre-existing Azure services and want to start from a fresh deployment.

  1. Run azd up - This will provision Azure resources and deploy this sample to those resources, including building the search index based on the files found in the ./data folder.
  2. You will be prompted to select a location for the majority of resources, except for the OpenAI and Static Web App resources.
  3. 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 {location}. Currently only a short list of locations is accepted. That location list is based on the OpenAI model availability table and may become outdated as availability changes.
  4. By default, the Staic Web App resource will be deployed to eastus2. You can set a different location with azd env set AZURE_WEBAPP_LOCATION {location}. Currently only a short list of locations is accepted. Note that Static Web App is a global service, and the location you choose will only affect the managed Functions App which is not used in this sample.
  5. After the application has been successfully deployed you will see a URL printed to the console. Click that URL to interact with the application in your browser.

It will look like the following:

'Output from running azd up'

NOTE: It can take 15+ minutes for the application to be fully deployed.

Deploying with existing resources

If you already have existing Azure resources, you can re-use those by setting azd environment values.

Existing resource group

  1. Run azd env set AZURE_RESOURCE_GROUP {Name of existing resource group}
  2. Run azd env set AZURE_LOCATION {Location of existing resource group}

Existing OpenAI resource

  1. Run azd env set AZURE_OPENAI_SERVICE {Name of existing OpenAI service}
  2. Run azd env set AZURE_OPENAI_RESOURCE_GROUP {Name of existing resource group that OpenAI service is provisioned to}
  3. Run azd env set AZURE_OPENAI_CHATGPT_DEPLOYMENT {Name of existing ChatGPT deployment}. Only needed if your ChatGPT deployment is not the default 'chat'.
  4. Run azd env set AZURE_OPENAI_EMBEDDING_DEPLOYMENT {Name of existing GPT embedding deployment}. Only needed if your embeddings deployment is not the default 'embedding'.

Existing Azure AI Search resource

  1. Run azd env set AZURE_SEARCH_SERVICE {Name of existing Azure AI Search service}
  2. Run azd env set AZURE_SEARCH_SERVICE_RESOURCE_GROUP {Name of existing resource group with ACS service}
  3. If that resource group is in a different location than the one you'll pick for the azd up step, then run azd env set AZURE_SEARCH_SERVICE_LOCATION {Location of existing service}
  4. If the search service's SKU is not standard, then run azd env set AZURE_SEARCH_SERVICE_SKU {Name of SKU}. The free tier won't work as it doesn't support managed identity. (See other possible values)

Other existing Azure resources

You can also use an existing Storage Account. See ./infra/main.parameters.json for list of environment variables to pass to azd env set to configure those existing resources.

Provision remaining resources

Now you can run azd up, following the steps in Deploying from scratch above. That will both provision resources and deploy the code.

Deploying again

If you've only changed the backend/frontend code in the app folder, then you don't need to re-provision the Azure resources. You can just run:

azd deploy

If you've changed the infrastructure files (infra folder or azure.yaml), then you'll need to re-provision the Azure resources. You can do that by running:

azd up

Sharing environments

To give someone else access to a completely deployed and existing environment, either you or they can follow these steps:

  1. Install the Azure Developer CLI
  2. Run azd init -t azure-search-openai-javascript or clone this repository.
  3. Run azd env refresh -e {environment name} They will need the azd environment name, subscription ID, and location to run this command. You can find those values in your .azure/{env name}/.env file. This will populate their azd environment's .env file with all the settings needed to run the app locally.
  4. Set the environment variable AZURE_PRINCIPAL_ID either in that .env file or in the active shell to their Azure ID, which they can get with az ad signed-in-user show.
  5. Run ./scripts/roles.ps1 or ./scripts/roles.sh to assign all of the necessary roles to the user. If they do not have the necessary permission to create roles in the subscription, then you may need to run this script for them. Once the script runs, they should be able to run the app locally.

Clean up

To clean up all the resources created by this sample:

  1. Run `azd down

Extension points exported contracts — how you extend this code

ChatThreadController (Interface)
(no doc) [4 implementers]
packages/chat-component/src/components/composable.ts
ChatApproach (Interface)
(no doc) [3 implementers]
packages/search/src/lib/approaches/approach.ts
IndexFileOptionsField (Interface)
(no doc)
packages/indexer/src/routes/indexes/index.ts
IntrinsicElements (Interface)
(no doc)
packages/webapp/src/vite-env.d.ts
ChatInputController (Interface)
(no doc) [3 implementers]
packages/chat-component/src/components/composable.ts
AskApproach (Interface)
(no doc) [3 implementers]
packages/search/src/lib/approaches/approach.ts
Document (Interface)
(no doc)
packages/indexer/src/lib/document.ts
ThemeSwitchProps (Interface)
(no doc)
packages/webapp/src/components/ThemeSwitch/ThemeSwitch.tsx

Core symbols most depended-on inside this repo

appendMessage
called by 7
packages/search/src/lib/message-builder.ts
toHtml
called by 7
packages/search/src/lib/langchain/html-callback-handler.ts
removeNewlines
called by 6
packages/search/src/lib/util/string.ts
parseBoolean
called by 6
packages/search/src/lib/util/string.ts
setState
called by 6
packages/chat-component/src/components/chat-context.ts
getState
called by 6
packages/chat-component/src/components/chat-context.ts
wrap
called by 5
packages/search/src/lib/langchain/html-callback-handler.ts
newListWithEntryAtIndex
called by 5
packages/chat-component/src/utils/index.ts

Shape

Method 176
Function 99
Class 77
Interface 57
Enum 3

Languages

TypeScript100%

Modules by API surface

packages/chat-component/src/components/composable.ts29 symbols
packages/chat-component/src/components/chat-component.ts24 symbols
packages/search/src/lib/langchain/html-callback-handler.ts21 symbols
packages/chat-component/src/components/chat-history-controller.ts15 symbols
packages/chat-component/src/components/chat-controller.ts15 symbols
packages/webapp/src/pages/chat/Chat.tsx13 symbols
packages/indexer/src/lib/indexer.ts13 symbols
packages/chat-component/src/components/chat-thread-component.ts13 symbols
packages/chat-component/src/types.d.ts12 symbols
packages/chat-component/src/components/chat-context.ts12 symbols
packages/chat-component/src/components/chat-debug-thought-process.ts11 symbols
packages/webapp/src/pages/oneshot/OneShot.tsx10 symbols

For agents

$ claude mcp add azure-search-openai-javascript \
  -- python -m otcore.mcp_server <graph>

⬇ download graph artifact