5. Bring Lex Bot to Web ( optional )

This is an optional step for Lex development only. If you only want to create Alexa Skill, you can navigate to Export the Bot to Alexa Skills Kit for the next step. Proceed with this step if you want to do extra hands-on upon website chatting robot.

In this lab, you will create a web interface that can be integrated with your Lex bot. This interface allows you to interact with a Lex bot directly from a browser using text or voice. You will be using AWS CloudFormation to create this web interface. Please use us-east-1 as the CloudFormation is in us-east-1.

  1. Go to GitHub repo: aws-lex-web-ui to preview what we would accomplish.

  2. Go to Getting Started section, click Launch Stack

  3. You will be brought to CloudFormation service page. If you are asked to login to AWS console, do so.

  4. Click on Next

  5. Scroll down. You need to change a few parameters here. DO NOT change other parameters especially ‘BootstrapBucket’ (aws-bigdata-blog) and ‘BootstrapPrefix’ (artifacts/aws-lex-web-ui/artifacts) where the origin code exists. You will encounter a NoSuchKey error by changing the parameters.

    • Enter PersonalBanker into the BotName. This must be the exact name of your bot.
    • Delete the text in WebAppConfBotInitialText field, and enter You can ask me for your account info. Just type What is my checking account balance or click on the mic and say it
    • Delete the text in WebAppConfBotInitialSpeech field, and enter Say "What is my checking account balance" to get started.
    • Delete the text in WebAppConfToolbarTitle field, and enter Personal Banker

  6. Click on Next

  7. Click on Next again

  8. Tick “I acknowledge that AWS CloudFormation might create IAM resources with custom names.” and “I acknowledge that AWS CloudFormation might require the following capability.” And click on Create stack

  9. It may take a few minutes. Click on the refresh button on the top right corner to see the progress

  10. Once the stacks are created. The status column will show green text

  11. Click on lex-web-ui, go to the Output section. You need to expand this section if needed.

  12. Click on WebAppUrl

  13. Adjust your browser to an appropriate size and start chatting with your bot or speak to it.