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.

Create new chatbot

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 Lex V2 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 aws-exports.js 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

Lex V1 bot

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 provide your auth credentials and bot details to configure your app:

1import { Amplify } from 'aws-amplify';
2
3Amplify.configure({
4 Auth: {
5 identityPoolId: 'us-east-1:xxx-xxx-xxx-xxx-xxx',
6 region: 'us-east-1'
7 },
8 Interactions: {
9 bots: {
10 BookTrip: {
11 name: 'BookTrip',
12 alias: '$LATEST',
13 region: 'us-east-1'
14 }
15 }
16 }
17});

Lex V2 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 need to provide your auth credentials and bot details to configure your app:

1import { Amplify } from 'aws-amplify';
2import { AWSLexV2Provider } from '@aws-amplify/interactions';
3
4Amplify.addPluggable(new AWSLexV2Provider());
5
6const interactionsConfig = {
7 Auth: {
8 identityPoolId: "<identityPoolId>",
9 region: "<region>"
10 },
11 Interactions: {
12 bots: {
13 // LexV2 Bot
14 <V2BotName>: {
15 name: "<V2BotName>",
16 aliasId: "<V2BotAliasId>",
17 botId: "<V2BotBotId>",
18 localeId: "<V2BotLocaleId>",
19 region: "<V2BotRegion>",
20 providerName: "AWSLexV2Provider",
21 },
22 }
23 }
24}
25
26Amplify.configure(interactionsConfig);

Configure frontend

Install Amplify and its dependencies

1npm install aws-amplify@^5 amazon-cognito-identity-js @react-native-community/netinfo @react-native-async-storage/async-storage react-native-get-random-values react-native-url-polyfill

You need to add the crypto.getRandomValues and URL polyfills to your application's entry point file (in most React Native apps this will be the top level index.js).

1// Example index.js
2import 'react-native-get-random-values';
3import 'react-native-url-polyfill/auto';
4
5import { AppRegistry } from 'react-native';
6import App from './App';
7import { name as appName } from './app.json';
8
9AppRegistry.registerComponent(appName, () => App);

Configure 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, App.js (Expo) or index.js (React Native CLI).

1import { Amplify } from 'aws-amplify';
2import awsconfig from './src/aws-exports';
3
4Amplify.configure(awsconfig);