Page updated Jan 16, 2024

Set up Amplify Interactions

AWS Amplify Interactions category enables AI-powered chatbots in your web or mobile apps. You can use Interactions to configure your backend chatbot provider and to integrate a chatbot UI into your app with just a single line of code.

Interactions with AWS

AWS Amplify implements Amazon Lex as the default chatbots service. Amazon Lex supports creating conversational bots with the same deep learning technologies that power Amazon Alexa.

The recommended approach is to begin your new App integration with AWS LexV2, as the default module exports are associated with AWS LexV2 APIs. Instructions for AWS LexV1 setup can be found in the following section.

Setup AWS LexV2 bot

You can create Amazon Lex V2 chatbot in Amazon Lex console. To create your bot, follow the steps shown in Amazon Lex V2 Developer Guide.

Interactions

With manual setup, you also need to add AWS Lex V2 API permissions to IAM roles and bot details to configure your app.

For adding IAM permissions, find you IAM role and attach the policy below (remember to replace the template with real value):

1{
2 "Version": "2012-10-17",
3 "Statement": [
4 {
5 "Effect": "Allow",
6 "Action": ["lex:RecognizeText", "lex:RecognizeUtterance"],
7 "Resource": "arn:aws:lex:<Region>:<Account>:bot-alias/<BotId>/<BotAliasId>"
8 }
9 ]
10}
1import { Amplify } from 'aws-amplify';
2import amplifyconfig from './amplifyconfiguration.json';
3
4Amplify.configure(amplifyconfig);
5Amplify.configure({
6 ...Amplify.getConfig(),
7 Interactions: {
8 LexV2: {
9 '<V2BotName>': {
10 aliasId: '<V2BotAliasId>',
11 botId: '<V2BotBotId>',
12 localeId: '<V2BotLocaleId>',
13 region: '<V2BotRegion>'
14 }
15 }
16 }
17});

Make sure you call Amplify.configure as early as possible in your application’s life-cycle. A missing configuration or NoCredentials error is thrown if Amplify.configure has not been called before other Amplify JavaScript APIs. Review the Library Not Configured Troubleshooting guide for possible causes of this issue.

Setup AWS LexV1 bot

Create new LexV1 chatbot with Amplify CLI

Prerequisite: Install and configure the Amplify CLI

Run the following command in your project's root folder:

1amplify add interactions

Adding interactions from the CLI only allows you to create a Lex V1 bot. If you want to create a LexV2 bot, you can do so following the instructions here.

The CLI will lead you through the steps to specify the chatbot to be created.

You can choose to start from a sample chatbot or start from scratch. If you choose to start from scratch, the CLI will prompt you with a series of questions to set the intents and slots for the chatbot.

You are allowed to run the amplify add interactions command multiple times to add multiple chatbots into your project.

The Interactions category utilizes the Authentication category behind the scenes to authorize your app to send analytics events.

The add command automatically creates a backend configuration locally. To update your backend in the cloud, run:

1amplify push

Upon successful execution of the push command, a configuration file called amplifyconfiguration.json will be copied to your configured source directory, for example ./src.

If your Interactions resources were created with Amplify CLI version 1.6.4 and below, you will need to manually update your project to avoid Node.js runtime issues with AWS Lambda. Read more

Manual setup

You can create Amazon Lex V1 chatbot in Amazon Lex console. To create your bot, follow the steps shown in Amazon Lex V1 Developer Guide.

Interactions

With manual setup, you need to add AWS Lex API permissions to IAM roles and bot details to configure your app.

For adding AWS Lex API permissions, find you IAM role and attach the policy below (remember to replace the template with real value):

1{
2 "Version": "2012-10-17",
3 "Statement": [
4 {
5 "Effect": "Allow",
6 "Action": ["lex:PostText", "lex:PostContent"],
7 "Resource": "arn:aws:lex:<Region>:<Account>:bot:<BotName>:<BotAlias>"
8 }
9 ]
10}

Configuring bot details in your web app like this:

1import { Amplify } from 'aws-amplify';
2import amplifyconfig from './amplifyconfiguration.json';
3
4Amplify.configure(amplifyconfig);
5Amplify.configure({
6 ...Amplify.getConfig(),
7 Interactions: {
8 LexV1: {
9 '<V1BotName>': {
10 alias: '<V1BotAlias>',
11 region: '<V1BotRegion>'
12 }
13 }
14 }
15});

Make sure you call Amplify.configure as early as possible in your application’s life-cycle. A missing configuration or NoCredentials error is thrown if Amplify.configure has not been called before other Amplify JavaScript APIs. Review the Library Not Configured Troubleshooting guide for possible causes of this issue.

Configure frontend

Make sure that the @aws-amplify/interactions package has the same version number as the aws-amplify package in your package.json file.

Add the interactions package with npm:

1npm install --save @aws-amplify/interactions aws-amplify

or with yarn:

1yarn add @aws-amplify/interactions aws-amplify

Import and load the configuration file in your app. It's recommended you add the Amplify configuration step to your app's root entry point. For example index.js in React or main.ts in Angular.

1import { Amplify } from 'aws-amplify';
2import amplifyconfig from './amplifyconfiguration.json';
3
4Amplify.configure(amplifyconfig);