Amplifying User Experience: Harnessing the power of AWS Lex and AWS Amplify integrated WebApp

Modern developers often face the challenging juggling act of full-stack application development, requiring proficiency in frontend frameworks, backend infrastructure, and seamless integration. AWS Amplify stands as a beacon of hope, simplifying this process with a complete set of tools and services. But the true power of AWS Amplify is fully unleashed when integrated with AWS Lex, a service for building conversational interfaces using voice and text.

Integrating AWS Lex into an AWS Amplify application introduces a new level of user interaction, enabling developers to create more intuitive and engaging user interfaces. With this integration, developers can quickly incorporate a sophisticated chatbot that understands natural language, responds to user inquiries, and guides them throughout the web application. The result is a smarter, more responsive, and more engaging web application, truly transforming the landscape of full-stack application development.

Unveiling the Amplify Advantages

Amplify transcends the label of a mere tool; it's a unified platform specifically designed to empower developers of all experience levels to build and deploy robust web and mobile applications efficiently. Gone are the days of manually configuring complex backend infrastructure; Amplify simplifies this process remarkably, handling user authentication, data storage, and API creation with ease. AWS Amplify offers:

· Easy Setup and Authentication: Amplify provides a simple CLI (Command Line Interface) that streamlines the setup process for creating, managing, and deploying web applications. Developers can initialize a new Amplify project with just a few commands, making it effortless to get started. Additionally, Amplify offers built-in authentication services that support various methods such as username/password, social sign-in, and OAuth. This enables developers to implement secure user authentication and authorization in their applications effortlessly.

· Visual Development Simplified: Amplify Studio empowers non-coders and visual learners with a drag-and-drop interface, enabling them to design user interfaces intuitively and connect them to the backend effortlessly.

· Hosting and CI/CD: Amplify offers hosting services that enable developers to deploy web applications to the cloud with a single command. Additionally, Amplify provides built-in CI/CD (Continuous Integration/Continuous Deployment) capabilities, making it easy to automate the deployment process and ensure seamless updates to applications.

· Backend Services: With Amplify, developers can easily set up backend services such as databases, storage, and APIs. Amplify supports integration with AWS services like Amazon DynamoDB, Amazon S3, and Amazon API Gateway, simplifying the process of configuring and managing backend infrastructure.

· Developer-Friendly Ecosystem: Amplify integrates seamlessly with popular developer tools like Figma and GitHub, ensuring a smooth and familiar workflow. Additionally, the powerful Amplify CLI provides granular control over configurations and deployments.

Driving Engagement Through Conversation with AWS Lex

AWS Lex, a service by Amazon, empowers developers to build engaging, intuitive conversational interfaces. With sophisticated NLP algorithms, intent recognition, and context management, it interprets user inputs accurately and fosters seamless conversations, enhancing application interactivity. AWS Lex offers:

· Natural Language Understanding: Lex bots leverage advanced natural language processing (NLP) algorithms to understand and interpret user input in both text and voice formats accurately.

· Intent Recognition: Lex enables developers to define intents, which represent the actions that users want to perform. Through machine learning, Lex can recognize user intents and extract relevant information from their input.

· Context Management: Lex maintains conversation context, enabling bots to understand follow-up questions and maintain continuity in the conversation. This context management enhances the user experience by providing more personalized interactions.

Build AWS Amplify App Powered by Lex Bots

• Simplified Development: Integrating Lex into Amplify streamlines the development process by providing a unified platform for building both frontend and backend components of conversational applications. Developers can focus on building intuitive user interfaces without worrying about infrastructure management.
• Scalability and Reliability: Leveraging Amplify's cloud infrastructure, Lex bots benefit from AWS's scalability and reliability. As user demand grows, Amplify automatically scales resources to accommodate increased traffic, ensuring consistent performance and uptime.
• Cost-Efficiency: Amplify's pay-as-you-go pricing model and AWS's tiered pricing for Lex services ensure cost efficiency for developers. By only paying for the resources they consume, developers can optimize costs while delivering high-quality conversational experiences.
• Accelerated Time-to-Market: With Amplify's streamlined development workflows and Lex's pre-built machine learning models, developers can bring conversational applications to market faster. Amplify abstracts away the complexity of infrastructure management, allowing teams to focus on building innovative features and iterating quickly based on user feedback.

Integrating AWS Lex in an Amplify Web UI

Now Amplify supports Lex v2 integrations that can power the application with pre-built chatbot features. With a simple set up, we can build a responsive user interface powered by the Lex chatbot assistant.

Application Architecture

In our simple implementation example, we configured a Lex bot “AutoInsuranceBot” with pre-defined bot intents and connected it with the UI interface hosted on Amplify app.

The Amplify app UI component hosted on CodeCommit is based on the pre-built JavaScript driven web application repo (aws-lex-web-ui). It works by making calls to the Lex service directly from a users browser using temporary credentials obtained from Amazon Cognito. With this setting, the web user can interact with the Lex bot using text.

Set up and Configurations

Step 1: Create a Lex Bot

Before integrating Lex into your Amplify web application, you need to create a Lex bot in the AWS Management Console. Define the intents and utterances that your bot will understand, and configure any necessary slots and prompts. In this example, we used a pre-built bot template in Lex with default intents for AutoInsurance assistant. At the end of creating the Lex bot, the console will direct to the creation of a pre-configured CloudFormation stack which will help deploy the resources needed for this Lex bot.

*Optional: adjust Lex bot intent to fine tune audient interaction with the bot:

An Amazon Lex bot intent represents an action that the bot is designed to fulfill. In your bot, AutoInsuranceBot, an intent might represent something like "GetPolicyQuote".

Here's a breakdown of the components for this example:

· Name: A descriptive name for the intent. For your AutoInsuranceBot, you might have an intent named " GetPolicyQuote ".

· Sample utterances: These are typical phrases a user might say to signal the intent. For the "GetInsuranceQuote" intent, sample utterances might be "I need a car insurance quote" or "Can you give me an auto insurance quote?".

· Slots: These are data points the bot needs to fulfill the intent. For a "GetInsuranceQuote" intent, slots might include "CarModel", "CarYear", "DriverAge", etc.

· Prompts: These are questions the bot will ask to elicit the slot values from the user. For example, "What's the model of your car?" for the "CarModel" slot.

· Fulfillment: This is the action the bot will take to fulfill the intent once all necessary slot values have been collected. This could be a Lambda function that calculates the insurance quote based on the slot values and returns the quote to the user.

To use an intent in the AutoInsuranceBot, if needed, we could typically do the following:

·?????? Define the intent in the Amazon Lex console, specifying the name, sample utterances, slots, prompts, and fulfillment.

·?????? Implement the fulfillment action (for example, writing a Lambda function that calculates an insurance quote based on the slot values).

·?????? Use the Amazon Lex runtime API to send user input to AutoInsurance Bot and receive the bot's responses.

Step 2: Configure AWS Cognito Guest Access for Lex bot

AWS Cognito is a comprehensive identity management service that enables developers to easily manage user identities, secure access control, and synchronize data across multiple devices, platforms, and applications. AWS Cognito can authenticate users through social identity providers like Google, Facebook, and Amazon, or through enterprise identity providers via SAML 2.0.

The service is broadly divided into two components: User Pools and Identity Pools.

• User Pools are user directories that provide sign-up and sign-in options for your app users.
• Identity Pools (also known as Federated Identities) allow you to grant your users access to other AWS services.

Cognito Guest Access

Cognito provides a unique feature known as "Guest Access" or "Unauthenticated Identities." This feature allows developers to grant limited AWS access to unauthenticated users, or users who have not signed in. This is particularly useful for scenarios where certain application functionalities need to be accessible to all users, regardless of their authentication status.

Guest access is typically used for:

• Providing limited access to resources for users who have not registered or signed in.
• Allowing users to try an application before signing up.
• Offering public information that does not require user identification.

In our example, we need to configure a guess access as identity integration for the Lex bot to use in our app. First, we created a “user pool” in Cognito, this will be used to configure “identity pool”. Then we will set up “identity pool” with guest access.

During the setup for identity provider, select the Cognito user pool that was created.

During the step of setting up Guest IAM role, include below IAM policy for the Lex bot resource.

After setting up Cognito user pool and identity pool. We can use “Identity pool ID” and “Identity provider” during the UI set up.

Step 3: Configure Lex Bot in UI file

Next, implement a chat user interface in the web application using HTML, CSS, and JavaScript. You can use libraries like React or Vue.js to create interactive components for sending messages to the Lex bot and displaying responses. For demonstration, we used the template of the UI components provided by aws-lex-web-ui GitHub repo. These libraries provide pre-built JavaScript and CSS files that are ready to be included directly into an HTML file to display a full page chatbot UI.

We created a “Lex” repo in AWS CodeCommit for its seamless integration with Amplify. In the UI configuration file of the template, we need to specify the Lex bot related settings such as the Lex bot name, bot id, bot alias id, the initial bot interaction message, the web title to be displayed, as well as a Cognito user pool id and identity pool id (creations of Cognito were not covered in this walk-through).

Step 4: Build an Amplify web UI to integrate with Lex bot

Next, configure your Amplify project to integrate with AWS Lex bot. In this example, since we want to host a simple static website which we use to test the interaction with Lex bot, we used Amplify Hosting to connect with the CodeCommit repo which contains the UI code for the Amplify app.

The next page shows the default AWS Amplify build configuration file (amplify.yml). It's written in YAML and defines the build and deploy settings for your Amplify app.

It includes the following:

·????? Pre-build commands to install project dependencies (npm ci).

·????? Build commands to compile the source code (npm run build).

·????? An artifacts section defining the dist directory as the location of deployable files with a glob pattern to include all files in any directory.

·????? A cache section to speed up builds by caching the node_modules directory and its files.

This configuration ensures project dependencies are installed, the app is built, and the build artifacts are properly tracked and deployed. Also, it improves build times by caching dependencies.

After finishing connecting the repo and deploying the Amplify app, our app “lex” will start the automatic provision, build and deploy. Since the “lex” app is connected with the main branch in our CodeCommit repo, every time a change is committed and pushed to the main branch, it triggers the Amplify “lex” app to automatically rebuild and deploy for the newest changes in the code repo.

After the Amplify app finished building, we can access the UI which was deployed to the app url. This “lex” app powered by the Lex bot is now live. This interface helps users interact with the AutoInsuranceBot to complete basic tasks defined in the bot intents such as add vehicle to policy, remove driver from policy or making payments.

Conclusion

By combining the advanced capabilities of Lex with the ease of development offered by Amplify, developers can create powerful and intelligent conversational applications that delight users and drive business value. Whether it's enhancing customer support, automating routine tasks, or providing personalized recommendations, integrating Lex into Amplify opens up a world of possibilities for building next-generation web applications.

References

AWS Amplify ?– User Guide: https://docs.aws.amazon.com/amplify/latest/userguide/welcome.html

AWS Lex v2 ?– User Guide: https://docs.aws.amazon.com/lexv2/latest/dg/what-is.html

AWS Cognito ?– User Guide: https://docs.aws.amazon.com/cognito/latest/developerguide/cognito-user-identity-pools.html

GitHub repo: https://github.com/aws-samples/aws-lex-web-ui/tree/master

Authors

Vinny Wang

Vinny Wang is a Software Engineer/Consultant at Deloitte Consulting, specializing in Cloud Engineering on the AWS platform. With extensive experience in developing end-to-end data and machine learning solutions across multiple industries, he excels at creating effective solutions in all stages of cloud infrastructure and machine learning project cycles.

Gaurav Kumar

Gaurav Kumar is a Senior Consultant at Deloitte Consulting, specializing in cloud infrastructure architecture design and cloud-native development. With 11 years of technical and consulting experience, he has worked as an architect on several large-scale implementations and has assisted various clients in adopting best practices in infrastructure solutions such as automation, infrastructure as code, and migration.

Sponsor

Gowtham Ramu

Gowtham Ramu is a Specialist Leader in Cloud Engineering at Deloitte Consulting, bringing over 24 years of experience in crafting solutions that span various industries. His expertise lies in developing Cloud Native solutions at scale, with a strong focus on data engineering. With more than 10 AWS certifications, he instills in his team a commitment to continuous learning as a fundamental principle.