Sign up for and Set up Amazon Lex

• Create an Amazon Lex bot if you haven't already. Sign into the AWS Management Console and navigate to Amazon Lex.
• Select "Create" to start a new bot. Follow the steps to set basic bot properties and configure intents.
• Set up the lambda function if necessary, configure the bot to use it for fulfillment.
• Once done, get the bot alias ARN (Amazon Resource Name) from the Lex Console, necessary for configuration later.

Prepare Bubble Application

• Log in to your Bubble account and use an existing application or create a new one.
• Navigate to the Plugin tab in Bubble and click on "Add Plugin."
• Search for "API Connector" and install it in your application.
• Create a new API in the API Connector plugin to interface with Amazon Lex.

Set up Amazon Cognito for Authentication

• In the AWS Management Console, navigate to Amazon Cognito and create a new user pool or use an existing one.
• Create a new identity pool in Cognito, which will allow your Bubble app to access the Amazon Lex bot securely.
• Provide the necessary IAM roles and permissions for the identity pool to interact with Amazon Lex.
• Note down the Cognito Identity Pool ID for later use.

Configure Bubble API Connector

• In Bubble's API Connector, add a new API and name it "Amazon Lex".
• For the API URL, input: https://runtime.lex.{region}.amazonaws.com/bot/{botName}/alias/{botAlias}/user/{userId}/content
• Replace {region}, {botName}, {botAlias}, and {userId} with your specific parameters.
• Add the necessary headers for the request.Authorization will typically involve signing requests using AWS v4 signatures.
• Set up the API call parameters to match those required by Amazon Lex. Typical parameters to include are 'inputText' for user input, and 'sessionAttributes' for managing conversation context.

Create Amazon Lex API Call in Bubble

• In the API Connector plugin, create a new API call labeled as "SendMessageToAmazonLex".
• Set the method to POST.
• Define the body parameter with keys such as 'inputText' and 'sessionAttributes':

  {
       "inputText": "",
       "sessionAttributes": {}
     }
     

• Add response schema to parse the bot’s response. Typically, look for fields such as 'message' and 'sessionAttributes' in the response to determine next steps.

Design Bubble App UI for Chat Interface

• In the Bubble editor, create a UI that includes a text input for entering user queries and a Repeating Group to display conversation history.
• Bind the text input to a workflow that triggers when the user submits a query. The workflow should include the SendMessageToAmazonLex API call.
• Update the Repeating Group data source to include both user queries and bot responses by manipulating Bubble's custom states or using a database.
• Display the Lex bot's 'message' response field in the chat interface, ensuring conversation flow is maintained properly.

Test and Validate Integration

• Run your Bubble application and initiate a conversation through the chat interface.
• Monitor the conversations in the Amazon Lex console to ensure correct intents and slots are being triggered.
• Check the network requests in your browser's developer tools to verify that the API requests and responses are formatted correctly.
• Iteratively debug any issues, paying particular attention to authentication headers and payload structure.

Deploy Your Bubble App

• After successful testing, you can deploy your Bubble application to ensure it is accessible to all users.
• Constantly monitor and refine your Lex bot and Bubble app, using feedback and operational analytics to enhance your chatbot’s performance.