diff --git a/cli/concept.md b/cli/concept.md
index 5e0e23977b7..e63b0031e94 100644
--- a/cli/concept.md
+++ b/cli/concept.md
@@ -8,7 +8,7 @@ Click [here](https://github.com/aws-amplify/docs/blob/master/cli/new-plugin.md)
# Architecture
-## Cli core and plugins
+## CLI core and plugins
The Amplify CLI uses [gluegun](https://github.com/infinitered/gluegun#readme). It is highly modularized.
The CLI core provides the pluggable platform, and most of the CLI category functions are implemented as plugins.
The CLI core searches for plugins in the global `node_modules` directory, and its own `node_modules` directory.
@@ -122,7 +122,7 @@ Each plugin stores contents in its own subfolder inside this folder.
## amplfy files
-### amplify-meta.json file
+###amplify-meta.json file
Both the `backend` and `#current-cloud-backend` directories contain an amplify-meta.json file.
The amplify-meta.json in the `backend` directory serves as the white board for the CLI core and the plugins to log infomration for themsevles, and to communicate with each other.
The CLI core provides read and write access to the file for the lugins.
diff --git a/js/interactions.md b/js/interactions.md
index 7753d7dbc16..cda7806076e 100644
--- a/js/interactions.md
+++ b/js/interactions.md
@@ -5,20 +5,59 @@
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.
-Ensure you have [installed and configured the Amplify CLI and library]({%if jekyll.environment == 'production'%}{{site.amplify.docs_baseurl}}{%endif%}/media/quick_start).
+Ensure you have [installed and configured the Amplify CLI and library]({%if jekyll.environment == 'production'%}{{site.amplify.docs_baseurl}}{%endif%}/js/start).
{: .callout .callout--info}
**Amazon Lex**
-AWS Amplify implements [Amazon Lex](https://aws.amazon.com/lex) as the default chatbots service. Amazon Lex supports creating conversational bots with the by the same deep learning technologies that power Amazon Alexa.
+AWS Amplify implements [Amazon Lex](https://aws.amazon.com/lex) as the default chatbots service. Amazon Lex supports creating conversational bots with the same deep learning technologies that power Amazon Alexa.
-## Create your Chatbot
+#### Automated Setup
+
+Run the following command in your project's root folder:
+
+```bash
+$ amplify add interactions
+```
+
+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.}
+{: .callout .callout--info}
+
+The `add` command automatically creates a backend configuration locally. To update your backend in the cloud, run:
+
+```bash
+$ amplify 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`.
+
+##### Configure Your App
+
+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` in React or `main.ts` in Angular.
+
+```js
+import Amplify, { Interactions } from 'aws-amplify';
+import aws_exports from './aws-exports';
+
+Amplify.configure(aws_exports);
+```
+
+Click [HERE](#WorkingWithAPI) for usage in your app
+
+### Manual Setup
+
+#### Create your Chatbot
You can create Amazon Lex chatbox in Amazon Lex console. To create your bot, follow the steps shown in [Amazon Lex Developer Guide](https://docs.aws.amazon.com/lex/latest/dg/getting-started.html).
-{: class="screencap" style="max-height:600px;"}
+{: class="screencap" style="max-height:600px;"}
-### Manual Setup
With manual setup, you need to provide your auth credentials and bot details to configure your app:
@@ -42,7 +81,7 @@ Amplify.configure({
});
```
-## Working with the API
+## Working with the Interactions API
You can import *Interactions* module from 'aws-amplify' package to work with the API.
@@ -60,7 +99,7 @@ import { Interactions } from 'aws-amplify';
let userInput = "I want to reserve a hotel for tonight";
// Provide a bot name and user input
-const response = await Interactions.send("BookTripMOBILEHUB", userInput);
+const response = await Interactions.send("BookTrip", userInput);
// Log chatbot response
console.log (response.message);
@@ -99,19 +138,22 @@ When using React, you can use *ChatBot* with following properties;
```
-Following simple app shows how to use **ChatBot** component in a React app;
+Following simple app shows how to use **ChatBot** component in a React app, with the automatic setup outlined above;
```js
import React, { Component } from 'react';
import Amplify, { Interactions } from 'aws-amplify';
import { ChatBot, AmplifyTheme } from 'aws-amplify-react';
+import aws_exports from './aws-exports';
+
+Amplify.configure(aws_exports);
// Imported default theme can be customized by overloading attributes
const myTheme = {
@@ -122,23 +164,6 @@ const myTheme = {
}
};
-Amplify.configure({
- Auth: {
- // Use your Amazon Cognito Identity Pool Id
- identityPoolId: 'us-east-1:xxx-xxx-xxx-xxx-xxx',
- region: 'us-east-1'
- },
- Interactions: {
- bots: {
- "BookTripMOBILEHUB": {
- "name": "BookTripMOBILEHUB",
- "alias": "$LATEST",
- "region": "us-east-1",
- },
- }
- }
-});
-
class App extends Component {
handleComplete(err, confirmation) {
@@ -160,7 +185,7 @@ class App extends Component {