GPT-RAG — Frontend Component

Note

A part of GPT-RAG.

Table of Contents

• Deploy (Quickstart)
  • Prerequisites
  • Clone the Repository
  • Build the Frontend
  • Deploy to Azure
• (Optional) Running Locally
  • Required Permissions to Run Locally
• Frontend customizations

Deploy (Quickstart)

Prerequisites

• ZIP command
• Azure CLI
• Node.js 16+
• Install ZIP in WSL/Linux: sudo apt-get install zip

Clone the Repository

git clone https://github.com/0Upjh80d/gpt-rag-frontend.git

Tip

If you plan to customize the application code, create a new repository by clicking on the Use this template button on top of this page. Please update the repository to the new URL before running the git clone command.

Build the Frontend

Everytime you change frontend code you need to build it before a new deployment, including in the first time:

cd frontend
npm install
npm run build

Deploy to Azure

Execute the following commands in the terminal to deploy your code to the App Service.

1. Change directory to the backend folder

   cd ..
   cd backend

2. Remove .venv if you have tested it locally.

   For Linux or Mac users, run:

   rm -rf .venv

   Or Windows users:

   Remove-Item -Recurse -Force .venv

3. Zip the source code.

   For Linux or Mac users, run:

   zip -r ../deploy.zip *

   Or Windows users:

   tar -a -c -f ../deploy.zip *

4. Deploy to Azure via Azure CLI.

   For Linux or Mac users, run:

   cd ..
   az webapp deploy \
       --subscription <SUBSCRIPTION_ID> \
       --resource-group <RESOURCE_GROUP_NAME> \
       --name <WEB_APP_NAME> \
       --src-path deploy.zip \
       --type zip \
       --async true

   For Windows users:

   cd ..
   az webapp deploy `
       --subscription <SUBSCRIPTION_ID> `
       --resource-group <RESOURCE_GROUP_NAME> `
       --name <WEB_APP_NAME> `
       --src-path deploy.zip `
       --type zip `
       --async true

(Optional) Running Locally

Before running the application locally, make sure that the necessary Azure resources (like Blob Storage, AI services, and the Orchestrator) are already deployed in the cloud. Don’t worry — this can easily be done using azd provision, as outlined in the setup guide for the GPT-RAG repository.

1. Rename the .env.template file to .env and update the variables as needed.

2. Log in to your Azure account by running azd auth login or az login.

3. Start the application by running ./start.sh (or ./startwin.sh if you're on Windows).

Required Permissions to Run Locally

Assign the necessary permissions to the user who needs to run the frontend application locally. Below are the specific roles and the corresponding commands.

Note

Replace the variables (those starting with the $ symbol) with the corresponding values from your deployment, keeping in mind that principalId is the identifier of your user in Entra ID.

• Orchestrator

  Assign the "Contributor" role to the user for accessing function app.

  az role assignment create \
     --assignee $principalId \
     --role "Contributor" \
     --scope "/subscriptions/$subscriptionId/resourceGroups/$resourceGroupName/providers/Microsoft.Web/sites/$functionAppName"

• Storage Account

  Assign the "Storage Blob Data Reader" role to the user for accessing blob storage.

  az role assignment create \
     --assignee $principalId \
     --role "Storage Blob Data Reader" \
     --scope "/subscriptions/$subscriptionId/resourceGroups/$resourceGroupName/providers/Microsoft.Storage/storageAccounts/$storageAccountName"

• Key Vault

  Assign the "Key Vault Secrets User" role to the user to access secrets.

  az role assignment create \
     --assignee $principalId \
     --role "Key Vault Secrets User" \
     --scope "/subscriptions/$subscriptionId/resourceGroups/$resourceGroupName/providers/Microsoft.KeyVault/vaults/$keyVaultName"

• Azure AI Services

  Assign the "Cognitive Services Contributor" role to the user for using AI services.

  az role assignment create \
     --assignee $principalId \
     --role "Cognitive Services Contributor" \
     --scope "/subscriptions/$subscriptionId/resourceGroups/$resourceGroupName/providers/Microsoft.CognitiveServices/accounts/$aiServicesAccountName"

• Application Insights

  Assign the "Application Insights Component Contributor" role to the user for monitoring.

  az role assignment create \
     --assignee $principalId \
     --role "Application Insights Component Contributor" \
     --scope "/subscriptions/$subscriptionId/resourceGroups/$resourceGroupName/providers/microsoft.insights/components/$appInsightsName"

Frontend Customizations

Optionally you can customize some items in the frontend.

Component	Description	File Location	Example
Title 1	Update page's title.	frontend/src/pages/layout/Layout.tsx	<h4 className={styles.headerRightText}>Chat On Your Data/h4>
Title 2	Update page's title.	frontend/src/pages/layout/index.html	<title>Chat Chat On Your Data | Demo</title>
Logo	Update frontend logo.	frontend/src/pages/layout/Layout.tsx	<Link to="/" className={styles.headerTitleContainer}> <img height="80px" src="https://www.yourdomain.com/yourlogo.png"></img> <h3 className={styles.headerTitle}></h3> </Link>
Citations	You can remove citations from the answers if you do not want them. Just set showSources to {false}.	frontend/src/pages/chat/Chat.tsx	<Answer key={index} answer={answer[1]} isSelected={selectedAnswer === index && activeAnalysisPanelTab !== undefined} onCitationClicked={c => onShowCitation(c, index)} onThoughtProcessClicked={() => onToggleTab(AnalysisPanelTabs.ThoughtProcessTab, index)} onSupportingContentClicked={() => onToggleTab(AnalysisPanelTabs.SupportingContentTab, index)} onFollowupQuestionClicked={q => makeApiRequestGpt(q)} showFollowupQuestions={false} showSources={false} />
Speech Synthesis	To enable speech synthesis change speechSynthesisEnabled variable to true.	frontend/src/pages/chat/Chat.tsx	const speechSynthesisEnabled = true;