Quick start

In this page you build a chatbot that asks for the user’s name and greets them by name. It takes three steps.

Build the chatbot

1. Install React Simple Chatbot and styled-components, its peer dependency:

   npm install react-simple-chatbot styled-components

   See installation for yarn, pnpm and bun, and for the supported versions.

2. Describe the conversation as an array of steps. Each step has a unique id and a trigger pointing to the next step:

   steps.ts

   import type { Step } from 'react-simple-chatbot';
   
   export const steps: Step[] = [
     { id: '1', message: 'What is your name?', trigger: '2' },
     { id: '2', user: true, trigger: '3' },
     { id: '3', message: 'Hi {previousValue}, nice to meet you!', end: true }
   ];

   Step 1 is a bot message, step 2 waits for the user to type, and step 3 answers with what the user typed.

3. Render the ChatBot component with your steps:

   App.tsx

   import ChatBot from 'react-simple-chatbot';
   import { steps } from './steps';
   
   export default function App() {
     return <ChatBot headerTitle="Previous value" steps={steps} />;
   }

The result

Preview

Code

previous-value.tsx

import ChatBot, { type Step } from 'react-simple-chatbot';

const steps: Step[] = [
  { id: '1', message: 'What is your name?', trigger: '2' },
  { id: '2', user: true, trigger: '3' },
  { id: '3', message: 'Hi {previousValue}, nice to meet you!', end: true }
];

export default function PreviousValue() {
  return <ChatBot headerTitle="Previous value" steps={steps} />;
}

How it works

• trigger tells the chatbot which step comes next. The conversation starts with the first step of the array and follows the triggers. A trigger can also be a function that picks the next step from the user’s answer; see dynamic content.
• user: true makes a step wait for the user. The chatbot enables the input, and when the user submits, the typed text becomes the value of that step.
• {previousValue} in a message is replaced with the value of the previous step, here the name the user typed. For more control, message can be a function that receives previousValue and the answers given so far.
• end: true marks the last step. When it is reached, the conversation stops and the chatbot calls handleEnd if you passed one.

Tip

Keep every step id unique: a step with a repeated id replaces the earlier one. A trigger must point to an existing id; the chatbot checks this when it starts and throws an error that names the step with the invalid trigger.

Next steps

StepsAll kinds of steps: messages, user input, options, custom components and updates.

ExamplesOptions, validation, forms, API calls and more.

ThemingChange the colors and fonts of the chatbot.

ChatBot propsEvery prop of the ChatBot component and its default value.