React Actions Chat

Appearance

Use Cases ​

react-actions-chat works best when a product needs a conversational surface that can still guide users toward explicit actions. Use this page to choose the package pieces and examples that match the flow you are building.

Support Triage ​

Build a chat that starts with common support categories, collects follow-up details, and still accepts free-form questions when users need to explain the issue in their own words.

Use this when you need:

  • a first-stop support assistant for orders, billing, shipping, or account questions
  • category buttons that branch into more specific next steps
  • a shared input bar for follow-up questions

Start with:

Guided Account Flows ​

Collect structured values such as email addresses, passwords, one-time codes, or confirmation text inside the chat while keeping the transcript readable.

Use this when you need:

  • login, account recovery, or identity-check steps
  • masked password submissions with access to the raw value
  • retry and abort behavior for invalid input
  • confirmation steps before changing account state

Start with:

Upload-Aware Assistance ​

Let users attach images or documents only when the current assistant step expects files, then return the input bar to a normal text mode afterward.

Use this when you need:

  • support flows that request screenshots, receipts, forms, or documents
  • per-step file validation
  • image and file message parts in the transcript
  • upload controls that stay disabled outside the active collection step

Start with:

Backend-Routed LLM Chat ​

Keep the UI package focused on rendering and state while routing generation through your own backend endpoint.

Use this when you need:

  • generated support replies
  • provider keys kept out of the browser bundle
  • a reusable text-generation flow around the chat UI
  • a local demo route before moving to production infrastructure

Start with:

Turn a user query into a short list of action buttons so people can jump directly to the setting, workflow, or document they need.

Use this when you need:

  • command-palette style recommendations in chat
  • semantic matching against a catalog of actions
  • vector-search-backed action discovery
  • clear buttons instead of long generated answers

Start with:

Shared Support Desk ​

Use a reusable support adapter to power both the customer chat and the admin queue from the same ticket data.

Use this when you need:

  • customer-side ticket creation
  • admin queue management
  • ticket status changes and replies
  • a testable adapter boundary before connecting a real backend

Start with:

Coding Or Documentation Assistants ​

Render longer markdown replies with headings, lists, and fenced code blocks while keeping the chat input comfortable for multiline prompts.

Use this when you need:

  • local coding-assistant style flows
  • markdown-rendered response parts
  • multiline prompts
  • follow-up handling that reads the latest user message from the store

Start with:

Choosing A Path ​

If you are building a guided workflow, start with request-input and confirmation buttons. If users need open-ended help, start with allowFreeTextInput and userResponseCallback. If the chat should choose from a known catalog of actions, use recommended actions before adding generated text. If the flow needs tickets, queues, or admin handling, start with the support package.