## Migration

To migrate from the legacy chatbot component to the latest chatbot component, use the steps below:

import all0 from "/src/fragments/ui/web/installation-diff.mdx";

<Fragments fragments={{all: all0}} />

### Usage

<FilterContent framework="react">

```diff
- import { ChatBot } from 'aws-amplify-react';
+ import { AmplifyChatbot } from '@aws-amplify/ui-react';

const App = () => (

+ <AmplifyChatbot botName="yourBotName" />
- <ChatBot botName="yourBotName" />

);
```

If you were using `onComplete` prop previously, you need to use `eventListener` [described above](/ui/interactions/chatbot#listening-to-chat-fulfillment).

</FilterContent>

<FilterContent framework="angular">

import all1 from "/src/fragments/ui/angular/configure-module-diff.mdx";

<Fragments fragments={{all: all1}} />

_app.component.html_

```diff
+ <amplify-chatbot bot-name="yourBotName"></amplify-chatbot>
- <amplify-interactions bot="yourBotName"/></amplify-interactions>
```

</FilterContent>

<FilterContent framework="vue">

import all3 from "/src/fragments/ui/vue/configure-app-diff.mdx";

<Fragments fragments={{all: all3}} />

</FilterContent>