React Actions Chat

Appearance

Examples Guide ​

This repo includes seven runnable example apps. Each one maps cleanly to a section of the docs.

coding ​

Path: examples/coding

Live demo: coding

Use this example for:

  • multiline free-text input
  • markdown-rendered text parts with headings, lists, and fenced code blocks
  • local coding-assistant style follow-up flows

Docs:

Run it:

bash
pnpm --filter coding-example dev

qa-bot ​

Path: examples/qa-bot

Live demo: qa-bot

Use this example for:

  • the core Chat component
  • initialMessages
  • free-form follow-up handling with userResponseCallback
  • plain action buttons created with createButton

Docs:

Run it:

bash
pnpm --filter qa-bot-example dev

uploads ​

Path: examples/uploads

Live demo: uploads

Use this example for:

  • optional file uploads that stay disabled by default
  • fileValidator
  • built-in image and file message parts
  • upload-focused request-input flows

Docs:

Run it:

bash
pnpm --filter uploads-example dev

login ​

Path: examples/login

Live demo: login

Use this example for:

  • createRequestInputButtonDef
  • createRequestConfirmationButtonDef
  • validators, retries, and abort behavior
  • password masking and rawContent

Docs:

Run it:

bash
pnpm --filter login-example dev

llm-support ​

Path: examples/llm-support

Live demo: llm-support

Use this example for:

  • react-actions-chat-llms
  • createChatTextGenerationFlow
  • createTextGenerationBackend
  • a local backend route wired through react-actions-chat-llms
  • an in-chat startup API-key step that keeps the key in memory for the current tab

Docs:

Run it:

bash
pnpm --filter llm-support-example dev

The demo starts by asking for an OpenAI API key in-chat before the first request. It keeps that key in memory for the current tab only.

You can optionally set OPENAI_MODEL and VITE_LLM_SUPPORT_EXAMPLE_MODE in your shell if you want a specific model or startup mode locally.

settings ​

Path: examples/settings

Live demo: settings

Use this example for:

  • react-actions-chat-recommended-actions
  • createVectorSearchQueryRecommendedActionsFlow
  • VectorSearchButtonDefinition
  • createOpenAITextEmbedder

Docs:

Run it:

bash
pnpm --filter settings-example dev

The public demo is published without VITE_OPENAI_API_KEY, so the page is available but real embedding-backed recommendations stay disabled there.

If you want to run the settings demo with real embeddings locally, create examples/settings/.env.local with:

bash
VITE_OPENAI_API_KEY=your_openai_api_key

That keeps the example easy to run locally, but production apps should move embedding calls behind a backend service.

support-desk ​

Path: examples/support-desk

Live demo: support-desk

Use this example for:

  • react-actions-chat-support
  • createSupportUserFlow
  • createSupportAdminFlow
  • createInMemorySupportFlowAdapter
  • sharing a ticket queue between customer and admin views in one demo workspace

Docs:

Run it:

bash
pnpm --filter support-desk-example dev

The demo starts with an empty in-memory adapter, lets the customer side create tickets or live chats, and uses the same adapter when you switch to the admin console.