Getting Started

react-actions-chat gives you a chat UI plus the primitives needed to turn messages into guided actions.

Install

npm install react-actions-chat

This package targets Node.js 22.13.0+.

Import the bundled styles anywhere you mount the chat:

import 'react-actions-chat/styles';

First Chat

import { Chat } from 'react-actions-chat';
import 'react-actions-chat/styles';

export function App() {
  return (
    <Chat
      theme='dark'
      initialMessages={[
        {
          type: 'other',
          content: 'Hello! How can I help you today?',
        },
      ]}
    />
  );
}

initialMessages seeds the conversation when the component first mounts. Each message is either from the local user (self) or the assistant side (other).

What To Read Next

• Components overview for the main public building blocks
• Types overview for the main data shapes and store-backed state
• Stores overview for transcript, input, and persistent button state
• Sub-packages for optional companion functionality
• Chat for the main component
• Plain message buttons for the simplest action type
• Using different input types for passwords, emails, phone numbers, search, and validation
• Build a chat flow for the core message model and button patterns
• Collect input and confirmations for email, password, and confirm/decline flows
• Theming and styling for presets, custom themes, and Vite setup notes
• Examples guide for runnable demos in this repo

Companion Package

Install the companion package if you want recommended actions driven by a search query or vector search:

npm install react-actions-chat react-actions-chat-recommended-actions

Then continue with Recommended actions overview.