---
title: "5. Bring Lex Bot to Web ( optional )"
date: 2019-09-05T23:06:51+08:00
draft: false
chapter: false
weight: 156
---

{{% notice info %}}
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](/custom-skill/6.export-lex-to-alexa/) for the next step.
Proceed with this step if you want to do extra hands-on upon website chatting robot.
{{% /notice %}}


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](https://github.com/awslabs/aws-lex-web-ui#Overview) to preview what we would accomplish. 

1. Go to [Getting Started](https://github.com/aws-samples/aws-lex-web-ui#getting-started) section, click **Launch Stack** 
    ![](/images/ask/cloudformation-get-start.png)
 
1. You will be brought to CloudFormation service page. If you are asked to login to AWS console, do so.
    ![](/images/ask/template.png)

1. Click on Next

1. 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`
    ![](/images/ask/cloudformation-configuration.png)

1. Click on **Next**

1. Click on **Next** again

1. 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**
    ![](/images/ask/cloudformation-knowledge.png)

9. It may take a few minutes. Click on the refresh button on the top right corner to see the 
progress
    ![](/images/ask/cloudformation-output.png)

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

1. Click on **lex-web-ui**, go to the **Output** section. You need to expand this section 
if needed.
    ![](/images/ask/output.png)

1. Click on **WebAppUrl**

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