Demystifying AWS Lex Chatbot and the Notoriously popular AWS Lex Webui Repo

4 min readSep 10, 2019

The Lex WebUi Repository

Off let I have been working on some Chatbot creation and for obvious reason, we have chosen AWS Lex for its capabilities. And while doing the quick google search https://github.com/aws-samples/aws-lex-web-ui came in as the most vetted repo.

Some obvious notable benefits of this are

The entire stack is set up in One-click cloud formation
Inbuilt state management
Cognito identity pool integration
Standalone and iframe integration and communication inbuilt
Different kind of CI/CD-based deployment options
Local node js development
Responsive mobile-ready using vue
Multiple response card markdown support

And I did not know what I have got into unless I went through 3 days to set it up and came up with very important learning about this AWESOME REPO

Region:

Always use us-east-1 or make sure you are deploying it in the region where Lex is supported ( and it’s supported as of now Sept 2019 to limited regions)

Custom Deployment:

The cloud formation template given in the website uses its own bucket to serve the code. To have your own code there is a deployment process through which you can deploy your own bot. Go through thishttps://github.com/aws-samples/aws-lex-web-ui/blob/master/templates/README.md and scroll to Deploy Using My Own Bootstrap S3 Bucket

The below things will save a lot of time

Caveats1: The S3 bucket needs to be in a Lex supported region

Caveats2: There has to be a folder in the bucket which you have to mention in the cloud formation bucket prefix section while launching the CF template again, [even if this is written as optional there is a / issue in the code which will not resolve if you do not give the folder name]

Caveats3: Use an EC2 instance if possible to run the build script from, as this needs to run a Makefile. Installing Cygwin or some other ways from a Windows machine will be difficult and will cost you extra time. There is a linter and it will give you an error if try to run from Windows because of m character issues.

Cavetas4: make file gets time stamp issues if there is a time difference between your system time and AWS machine time

AWS Cognito Identity pool configuration

This cloud formation tool already comes with an Identity and pool which has Cognito authentication created. While using your own S3 bucket make sure you keep the poolid blank but poolname a unique name. This will create a new user pool and identity pool. The user pool also adds the callback URL and configures the domain. Go through this https://github.com/aws-samples/aws-lex-web-ui/blob/master/templates/cognitouserpoolconfig.yaml if you need more information. If you give an existing pool id and name it will NOT WORK as the domain and callback URL is not configured. You need to add these in the userpool and app settings.

Using your existing BOT

The Bot import and export feature in Amazon only will work if you do it in the same region, it will NOT work if you do it across the region if the bots are having Lambda function. The lex and Lambda service role has to be configured manually. For the cloud formation template in bot name just mention as existing bot name which is present in the region and create a new identity pool as mentioned above, using the existing pool needs a domain name and callback URL configuration, Which you have to configure manually. The bot export and import python API https://github.com/aws-samples/aws-lex-web-ui/blob/master/templates/README.md is broke, as I had tested it on 12 Th September. It is better to Use the console to import your bot and then use that as an existing bot in the cloud formation example.

Configuration and CSS change

Refer to this https://github.com/aws-samples/aws-lex-web-ui/blob/master/src/README.md#chatbot-ui-configuration-loading for details of the parent and iframe configuration. There are different configuration files which we can change the configuration. If you want to change some basic css you will have to change the below files

Filename

Originally published at https://www.techcloudonline.com on September 10, 2019. You can find free aws practice questions here