How it works

Have you ever wondered about the technology behind chatbots found on websites that interacts with users and answers FAQs? If you have ever looked for a solution to a problem about a service on any website and you happen to have to scroll through all the other irrelevant answers before finally getting the answer you wanted, then you'll agree with me it is time consuming. In this article, I will guide you on how to build a bot that can give precise answers about queries the users might have concerning the services on any company website as well as run automated tasks like booking a ticket, cancelling it, reschedule etc.

When the user opens the website, the web UI loads and appears at the bottom right corner of the screen. Once clicked, it displays a pre-configured welcome message. If the user types any questions related to the company, the AI model searches the pre-loaded PDF files containing every information about the company, if the answer is found, the bot gives the user a human friendly and summarized response. In our case, the bot will not only answer FAQs, but will help users book travel tickets, give the different destinations, let them choose between classic or VIP travel options with their different tariffs.
The technologies involved are:

• Amazon Lex
• AWS S3
• Amazon Bedrock
• Amazon Polly
• AWS IAM

Architecture

Step by Step guide to build it

Create a Lex Bot

Open the AWS console and search Amazon Lex, choose create Bot -> Descriptive Bot

Bot name: web-assistant
runtime role: Create a role with basic Amazon Lex permissions = true
Children’s Online Privacy Protection Act (COPPA) = no
Idle session timeout = 5mins

Now click Next, for the Descriptive Bot Builder - GenAI enter this text:

Objective: we are a travel agency that transport passengers to different destinations in Cameroon. I want a bot that can book a journey, cancel a journey, check reservation details, Get travel status, reschedule a journey. We use ticket_id to identify the client. we offer two travel classes

For the other parameters, allow defaults and click done. Give it between two to 3 minutes to create the intents. When the intents are created on the green success bar that appears above to notify the intents were successfully created, click on review. In the next page that appears, you will see the different intents created. If you are happy with the intents, click "Accept intents" these intents will be included in the prompt for building the model.

Till now all the intents are the automatically generated, meaning the bot knows nothing about our company, only expects specific data in order to treat the request, say if the destination city isn't in it's database, then it'll not accept any other answer. So we have to personalize the bot in order to accept our company data, say we only travel to few towns, our tarrifs are in local currency. My generated intents are:

• BookJourney
• CheckReservationDetails
• GetTravelStatus
• CancelJourney
• RescheduleJourney
• FallbackIntent

We are therefore going to add a knowledge base which Amazon Lex will interact with in order to give us answers specific to our company. In order to personalize the different intents to go into the knowledge base and look for the required information, we need to configure each of them:

Configure BookJourney intent

Click BookJourney inside the intents page and scroll down to slots

Click on Prompt for slot: DepartureCity

Then go to Advanced options and configure the following
Enhance this slot with the assisted slot resolution feature: enable
Runtime generative AI features: enable
Select model: Anthropic, Claude instant and save

Back on go to intents -> BookJourney -> advanced options -> *Enable assisted slot resolution - GenAI = true * -> Save intent. This sets the chatbot to seek the knowledge base for specific type of answers.

Repeat the same activity for all the slots that have as type AMAZON.city or AMAZON.date, remember to save each time you enable the assisted slot resolution. Check for the intents and make sure they are configured to seek assistance from AI in order to manage the City and Date slots. This will help users give cities that are in the company data and for dates, the user can be prompted and they respond with either today, tomorrow or in two weeks and the model figures out the date based on the present date.

After finishing and saving the intents, go to Slot types and select ClassType

For the class values, we will input VIP and Classic, just as it is done in the image below:

Click save slot type. Then Click on Build to make sure all changes are saved

Create S3 bucket and store company data

Go to the console and search S3 -> Create bucket
Bucket name: knowledge-base-bucket-xxx (xxx are random numbers to make the bucket name unique)
region: us-east-1

Upload data that has the data of the company, this include every service, cost etc that the company sells. In our case, lets use this text and convert to pdf and upload to our S3 bucket.

General Express Description:
Welcome to the General Express chatbot! We are dedicated to providing exceptional travel services across various destinations in Cameroon, with our headquarters located in Bafoussam. Our mission is to ensure a comfortable, convenient, and enjoyable travelexperience for all our customers. Key Features:
Travel Destinations and Pricing:
Our chatbot can assist you in exploring our travel routes and pricing options:
Bafoussam to Douala: 4000 XAF (Classic) | 6000 XAF (VIP)
Bafoussam to Yaoundé: 5000 XAF (Classic) | 6500 XAF (VIP)
Bafoussam to Bangante: 1000 XAF (Classic) | 1500 XAF (VIP)
Bafoussam to Bafang: 1000 XAF (Classic) | 1500 XAF (VIP)
Bafoussam to Bamenda: 2000 XAF (Classic) | 2500 XAF (VIP)
Bafoussam to Buea: 6000 XAF (Classic) | 7000 XAF (VIP)
Luggage Handling:
Our team will assess the value of your luggage before departure, ensuring safe and secure transport. Travel Schedules:
The chatbot provides information about our travel times:
Morning Journeys: 6 AM to 10 AM
Day Journeys: 11 AM to 5 PM
Night Journeys: 6 PM to 2 AM
Complimentary Meals:
Enjoy complimentary meals during your journey, enhancing your travel experience without any additional costs. Customer Service:
Our friendly and welcoming personnel are committed to ensuring your comfort and satisfaction throughout your travels. If you have any questions or need assistance, our chatbot is here to help!
Contact Information:
For further inquiries or to make a reservation, feel free to reach us at:
Phone: 600000000
Phone: 800000000
Conclusion:
The General Express chatbot is designed to make your travel
planning seamless and efficient. Whether you need information about
routes, pricing, or travel schedules, we are here to assist you at every step. Experience the joy of travel with General Express, where customer satisfaction is our top prior

Create a knowledge base for Amazon Bedrock

Go to the search bar in the console and search Amazon Bedrock -> Builder Tools -> Knowledge basses -> Create knowledge Base.
Provide the following details:
Knowledge base name: travel-assistant-knowledge-base
IAM: Create and use a new service role
choose data source: S3 -> Next

Configure data source:
data source name: travel-assistant-knowledge-base
Data source location: this account
S3 URI: Browse S3
choose: knowledge-base-bucket-xxx
next

Select embeddings model and configure vector store
Embeddings modele: Titan Embeddings G1 - Text v1.2
vector database: Quick create a new vector store = true
next

Review everything and create knowledge base. It will take few minutes to create. After that, we'll need to sync the knowledge base so that the LLM can read the pdf documents that are stored in our S3.

After the data source is created, click on sync for the LLM to read the PDF documents in our S3 bucket. If other information or services are added to the company, it just needs to be documented and uploaded to S3, not forgetting to sync the knowledge base.

Create a Lex bot QnA intent

Go back to the Lex console and select the bot we created and select Add intent -> use built-in intent -> AMAZON.QnAIntent-GenAI feature, give intent name as GenAiIntent as in the following image

Then click Add. Next configure the intent,
QnA configuration:
Select model: Anthropic Claude instant
Knowledge store: Knowledge base for Amazon bedrock
Knowledge base for Amazon Bedrock Id: (return to knowledge base console and copy the knowledge base id we created earlier, it has 10 characters)
click save intent

The saved intent should appear to the left of the screen amongst the intents.

Then we have to build the the bot by clicking on the Build button(top right) and wait for the build to complete

Test the Chatbot

Click on the test button in order to start testing the bot. We need to verify the functionality of the bot before deployment. To the left of the screen, the test window opens, click on the inpect button so as to see the values. We will ask questions related to the uploaded document:

• What are the destinations
• What are the tariffs,

Woow, we have our bot answer questions based on the knowledge base information. Next we can try to book a ticket:
I will just type in Book a ticket, the model will identify the intent and ask the relevant questions in order to book the ticket

Notice that instead of giving a date, i wrote tomorrow and the bot figured out and selected the date of tomorrow. With human friendly interactions, we can book a ticket for a travel agency with little efforts

Looking at the Inspect dashboard, the bot asks questions and populates it, this can be used to trigger lambda functions to carryout the desired task in the backend.

Now we need to integrate it to our website by building a web UI chat icon.

Build a WebUI and attach to the website

Create a version

On the Lex console select the bot we created and select bot versions on the left panel and create a new version. This creates a snapshot of what we just built. It will create Version 1

Create an Alias

On the left panel, under deployments, select Aliases -> create Alias and fill the following
Alias name: travel-assistant-alias
associate with a version: version 1
click create

Copy the alias ID and the bot ID as we will use it when creating the webUI.

Create a cloud formation stack

Open this page in a new tab Deploy webUI for Chatbot

Under the section Getting started with the AWS CloudFormation deployment option we choose the region where we want to create the stack which should also be the same region where the bot is located(North Virginia) and click launch stack. Search the following fields and populate them with the following:

Lex V2 Bot configuration parameters:
LexV2BotId: XXXXXXX (Replace X with the bot id you copied)
LexV2BotAliasId: XXXXXXX (Replace with the alias Id)

Next look for Web Application Parameters and populate with the following:
WebAppParentOrigin: https://domain.com (enter the domain name where the web app is running)
WebAppPath: /index.html (provide the name of the file that runs the home page)
WebAppConfBotInitialText: You can ask me for help booking a ticket or FAQ about our company Just type "Book ticket" or click on the mic and say it.
WebAppConfBotInitialSpeech: Say 'Book ticket' to get started.
WebAppConfToolbarTitle: Book Ticket

Acknowledge the two radio buttons under Capabilities and create the stack.

It will open a cloud formation console, wait for it to finish creating.

After creation is completed, go to outputs and look for the SnippetsUrl

Copy the code snippet and go to the index.html file of the running website and paste it in the body part of the html code. Do necessary updates on the website to display the newly configured index.html file. In my case, it is a static website hosted in an S3 bucket. So i will upload the index.html to the S3.

Now open the website, you should see the chatbot open to the bottom right side of the screen

When you click the chat icon

And voila!! We have successfully integrated a chatbot to our website.