Chatbots in React, one step at a time

Why React Simple Chatbot

Conversations as data

A conversation is a plain array of steps: bot messages, user inputs, options and custom components, connected by triggers.

TypeScript first

Written in TypeScript with types for every step and prop, so your editor completes and checks your conversations.

Your components inside

Render any React component as a step, read the previous answers, and decide when the conversation continues.

Themeable

Change colors and fonts with a styled-components theme, or style any element with props and stable class names.

Voice ready

Speech recognition for user answers and speech synthesis for bot messages, with one prop each.

Production ready

React 18 and 19, StrictMode, server-side rendering, conversation cache and accessible controls.

A chatbot in a few lines

App.tsx

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

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

export default function App() {
  return <ChatBot steps={steps} />;
}

Start here

Quick startInstall the package and build your first chatbot.

ExamplesLive chatbots with their code, ready to copy.

API referenceEvery prop, step attribute and type.

Migrating to 1.0What changed from 0.x and how to update.