Installation

Install the package

React Simple Chatbot uses styled-components as a peer dependency, so install both packages:

npm install react-simple-chatbot styled-components

yarn add react-simple-chatbot styled-components

pnpm add react-simple-chatbot styled-components

bun add react-simple-chatbot styled-components

If your project already uses styled-components, you don’t need to install it again. The chatbot uses the copy your app already has, so there is only one styled-components instance and your ThemeProvider reaches the chatbot.

Requirements

Package	Supported versions
`react` and `react-dom`	18 or 19
`styled-components`	5.1 or newer (including 6)

These are peer dependencies: your app provides them, and the package manager warns you when a version is out of range.

What is included

An ES module build (dist/react-simple-chatbot.mjs), picked by bundlers such as Vite, webpack and Rollup, so unused code can be tree-shaken.
A UMD build (dist/react-simple-chatbot.js), used by CommonJS environments. In a page without a bundler, it exposes the ReactSimpleChatbot global (the component is ReactSimpleChatbot.default) and expects React, ReactDOM and styled globals.
TypeScript types, generated from the source. You don’t need a separate @types package. See TypeScript.

The only runtime dependency is flatted, used to store the conversation when the cache is enabled.

Next.js and other frameworks

The ChatBot component uses hooks and browser APIs, so it must render as a client component. In the Next.js App Router, add 'use client' at the top of the file that renders it:

'use client';

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

const steps: Step[] = [{ id: 'hello', message: 'Hello!', end: true }];

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

You can then import Chat from a server component. The frameworks guide covers Next.js and other setups in more detail.

Next steps

Build your first conversation in the quick start.