Skip to main content

Implementation Guide for GenAI Bedrock Voicebot project

Setup Instructions for genai-bedrock-voicebot

This guide will walk you through the steps to set up the genai-bedrock-voicebot projects using AWS Amplify and App Runner.

Table of Contents

  1. Fork the Repository
  2. Login to AWS
  3. Create a GitHub Connection in AWS App Runner
  4. Create the Admin Console Amplify App
  5. Retrieve API Endpoints
  6. Create the Chat UI Amplify App
  7. Update Environment Variable in Admin Console

1. Fork the Repository

  1. Navigate to the repository: genai-bedrock-voicebot.
  2. Click on the Fork button at the top right corner.
  3. Select your GitHub account to create the fork.
  4. Once forked, note down your fork's URL (e.g., https://github.com/<YourGitHubUsername>/genai-bedrock-voicebot).

2. Login to AWS

  1. Open the AWS Management Console.
  2. Enter your AWS account credentials to log in.

2.1. Enable Bedrock "Mixtral 8x7B Instruct" LLM Model Access

1. Navigate to the Amazon Bedrock service by searching for "Bedrock" in the AWS console search bar
2. In the Amazon Bedrock console, go to the "Model access" section from the left navigation pane
3. Click on "Manage model access."


Locate the "Mixtral 8x7B Instruct" model under the Mistral AI provider
4. Select the checkbox next to the model to request access.
5. Review and agree to the End User License Agreement (EULA) if prompted.
6. Click "Save changes" to submit your access request. Access should be granted shortly after



3. Create a GitHub Connection in AWS App Runner

  1. In the AWS Console, search for App Runner and open the App Runner console.
  2. Click on Connections in the left-hand menu.
  3. Click Create connection.
  4. Follow the instructions to authenticate your GitHub account and create the connection.
  5. Copy the ARN of the newly created GitHub connection.

  6. step-1 In the console navigate for "AWS App Runner" and click on three horizontal bars in the top left.

    Fig 8.1

    step-2 Now click on connected account.

    Fig 8.2

    step-2 Select Github in drop down and click on Add

    Fig 8.3

    Step 4 Provide a connection name, select Github App, then click on Next.

    Fig 8.4

    Step 5 Now copy the ARN and provide it in the Environment Variable.

    Fig 8.5

4. Create the Admin Console Amplify App

  1. Open the AWS Amplify console by searching for Amplify in the AWS Console.

    Fig 1

  2. Click New App > Host web app.
  3. Select GitHub as the repository provider and connect your GitHub account.

    Fig 2


  4. Now click on Authorize AWS Amplify.

    5. Fig 3

    • If your GitHub repository does not appear in the search box, click on Update GitHub permissions.

    Fig 4

    • Choose All repository and click on Install and Authorize.

    Fig 5

    • Now search for the recently created repository which contains all the files.

  5. Choose your forked repository and select the branch you want to use (default: main).

  6. Enable Monorepo and set the "Monorepo root Directory" to amplify-chat-admin.

    Fig 6

    Modify Project Name (Admin Console)

    1. On the next screen, modify the project name to something like genai-bedrock-voicebot-admin.
    Fig 7

  7. Scroll down and expand Advance Settings, then click on Add New.
Fig 8

Configure Environment Variables (Admin Console)

In the Advanced settings section, add the following environment variables:

  • JWT_SECRET='<Specify a random string>'
  • APPRUNNER_GITHUB_URL='<Your GitHub Fork URL>'
  • APPRUNNER_GITHUB_BRANCH_MAIN='<Your GitHub Fork Branch Name>' (Default is main)
  • APPRUNNER_GITHUB_CONNECTION_ARN='<ARN of GitHub Connection from App Runner>'
  • CHAT_PROD_API="" (Leave this blank initially)
  • BHASHINI_USER_ID="<User ID of Bhashini>" (Optional)
  • BHASHINI_API_KEY="<API Key of Bhashini>" (Optional)

  • Review everything and click on Save and Deploy

Fig 10

Fig 11

  • It will start creating Amplify App for you.

Fig 12

  • Soon, it will start deploying.

Fig 13

  • It will take a few minutes to deploy.

Fig 14

5. Retrieve API Endpoints

  1. Wait for the deployment to complete.
  2. Download the amplify_outputs.json file from the Amplify console.


  3. Locate the following variables in the last two lines of the file:
    • VITE_APIGW_ENDPOINT: <HTTP API Gateway URL>
    • VITE_STREAMING_API_ENDPOINT: <App Runner URL>
  4. Note down these values for later use.

6. Create the Chat UI Amplify App

  1. In the Amplify console, click New App > Host web app.
  2. Select your forked repository and branch.
  3. Set the "Monorepo root Directory" to amplify-chat-ui.

    Fig 15
  4. Click Next.

Configure Environment Variables (Chat UI)

In the Advanced settings section, add the following environment variables:

  • VITE_APIGW_ENDPOINT='<HTTP API Gateway URL>' (from the previous step)
  • VITE_STREAMING_API_ENDPOINT='<App Runner URL>' (from the previous step)

Modify Project Name (Chat UI)

  1. Modify the project name to something like genai-bedrock-voicebot-chat-ui.
  2. Click Save and Deploy.

7. Update Environment Variable in Admin Console

  1. After deploying the Chat UI, copy the Amplify URL for the Chat UI deployment.
  2. Return to the Amplify console for the Admin Console project (genai-bedrock-voicebot-admin).
  3. Navigate to Environment Variables.
  4. Update the CHAT_PROD_API environment variable with the URL of the Chat UI Amplify project.
  5. Redeploy the Admin Console application to apply the changes.

This guide should help you set up both the Admin Console and Chat UI projects in AWS Amplify, with all necessary configurations and environment variables in place.

Testing the Deployed Application

To test the application, follow these steps:

  1. Open the Amplify Admin Application URL:
    Navigate to the URL provided by the Amplify Admin Console deployment.

  2. Cognito Authentication:
    The application will prompt you for authentication using Amazon Cognito. Create an account using your email ID.

    • After signing up, check your email for a verification link.
    • Complete the email verification and log in to the console.

  3. Create a New Chatbot:
    Fig 23

    • Once logged in, create a new chatbot by providing the Customer Name, Website, and Chatbot Name.
      Fig 24
    • Submit the form to generate the chatbot.

  4. Access the Chatbot:

    • The newly created chatbot will appear in the list. Click on the chatbot name link to open it in a new tab.
    • Validate that the chatbot name and details match what you provided earlier.
      Fig 25

  5. Test Basic Functionality:

    • In the chatbot interface, try sending a "Hello" message and confirm that you receive a proper response.
      Fig 26

  6. Validate Website Crawling:

    • Wait for approximately 30 minutes to allow the backend engine to crawl the specified website.
    • Afterward, try asking a question related to the website content to experience the capabilities of the GenAI chatbot powered by Amazon Bedrock.

  7. Test Voice Bot Functionality:

    • Click on the microphone button to test the voice bot functionality.
    • The bot supports voice input in English and Hindi (powered by Amazon Polly) and other Indian local languages if Bhashini is configured.
    • If you have entered your Bhashini User ID and API Key, the bot will also respond in regional Indian languages.

  8. Integrate Chatbot into a Website:

    • For demo purposes, the chatbot can be integrated into any website via a TamperMonkey script.
    • For production deployment, you can embed the chatbot directly into the website using a simple 4-line script.

 

Comments

Post a Comment

Popular posts from this blog

Identifying AWS Service and Region from a Given IP Address: A JavaScript Solution

  In today's digital age, managing cloud resources efficiently is critical for businesses of all sizes. Amazon Web Services (AWS), a leading cloud service provider, offers a plethora of services spread across various regions worldwide. One of the challenges that cloud administrators often face is identifying the specific AWS service and region associated with a given IP address. This information is vital for configuring firewalls, setting up VPNs, and ensuring secure network communication. In this blog post, we will explore how to identify the AWS service and region for a provided IP address using the AWS-provided JSON file and a simple JavaScript solution. This approach will help you streamline your cloud management tasks and enhance your network security. The Problem: Identifying AWS Services and Regions AWS provides a comprehensive range of services, each operating from multiple IP ranges across different regions. These IP ranges are frequently updated, and keeping track of them...
Post a Comment
Read more

Practical Git Commands

 Revert Git Repo to a previous Tag:     1. reset to a tag named reset-to-here     git reset --hard reset-to-here     2. push your change to the remote forcing by +     git push origin +main   Push Tag to Remote:  To push a single tag: git push origin tag <tag_name> And the following command should push all tags ( not recommended ): # not recommended git push --tags  
Post a Comment
Read more