react-ai-chat-ui

Composable AI chat UI for React 19 — layout shell, message list with auto-scroll, markdown + GFM, lightweight fenced code blocks (copy + scroll, no Prism bundle), and a keyboard-friendly composer.

npm name: The name react-ai-ui is already taken on npm (another maintainer). This library is published as react-ai-chat-ui.

Install

npm install react-ai-chat-ui react react-dom

Import the bundled stylesheet once (Tailwind utilities scoped to the classes used in this package):

import "react-ai-chat-ui/styles.css";

Try it locally (demo app)

From the repo root:

npm run demo

That builds the library, installs the Vite app under examples/demo, and starts http://localhost:5173.

Two-terminal workflow (while you change library source):

1. Terminal A — library watch: npm run dev (rebuilds dist/ on save).
2. Terminal B — demo: cd examples/demo && npm install && npm run dev
   Refresh the browser after each library rebuild (or rely on Vite HMR when only the demo changes).

The demo depends on the library via "react-ai-chat-ui": "file:../.." in examples/demo/package.json (npm links the package into node_modules).

Verify it works

Automated sanity check (types + library build + demo production build):

npm test

All steps must exit with code 0. That proves the package compiles, bundles, and the demo app can import and build against it.

Manual smoke test (run npm run demo, then in the browser):

| Check | What to do | Pass if | |--------|------------|---------| | Styles | Open the demo | Chat shell, bubbles, and input look styled (not unstyled HTML). | | Send | Type text, click Send or press Enter | User bubble appears on the right; input clears. | | Shift+Enter | Shift+Enter in the textarea | Inserts a newline without sending. | | Empty send | Clear input, click Send | Nothing is added (button disabled when empty). | | Assistant reply | Send a message | After ~600ms, assistant bubble on the left with bold text and a code fence. | | Markdown | Confirm bold + fence render | Not raw ** or triple backticks as plain text. | | Code block | In assistant message, use horizontal scroll if needed | Monospace block; Copy works (paste elsewhere). | | Scroll | Send several messages | List scrolls toward the latest message. |

For deeper coverage later, add Vitest + React Testing Library or Playwright against examples/demo — not included yet to keep the repo minimal.

Use in another project without publishing

From this repo:

npm run build
npm pack

In your app:

npm install /absolute/path/to/react-ai-chat-ui-1.0.0.tgz

Or in your app’s package.json: "react-ai-chat-ui": "file:../path/to/this-repo" then npm install.

Bundle size

This package intentionally does not ship react-syntax-highlighter / Prism. Fenced code is readable monospace + horizontal scroll + copy, which keeps npm install and the published JS bundle small. If you need token colors, add a highlighter in your app and swap the code / pre mapping in a fork of AIMessage, or wrap CodeBlock.

Quick start

import {
  ChatWindow,
  MessageList,
  PromptInput,
  useChat,
} from "react-ai-chat-ui";
import "react-ai-chat-ui/styles.css";

function App() {
  const { messages, sendMessage, addAssistantMessage } = useChat();

  const handleSend = (text: string) => {
    sendMessage(text);
    setTimeout(() => {
      addAssistantMessage(`You said: ${text}`);
    }, 1000);
  };

  return (
    <div className="h-dvh p-4">
      <ChatWindow className="mx-auto h-full max-h-[720px]">
        <MessageList messages={messages} />
        <PromptInput onSend={handleSend} />
      </ChatWindow>
    </div>
  );
}

Exports

• ChatWindow — flex column shell (min-h-0 safe for nested scroll)
• MessageList — renders Message[], auto-scroll, optional footer slot
• MessageBubble — user vs assistant layout; assistant uses AIMessage
• AIMessage — react-markdown + remark-gfm
• CodeBlock — monospace fence + copy + horizontal scroll (no syntax-highlighter dependency)
• PromptInput — Enter send, Shift+Enter newline, empty guard
• TypingIndicator — status line for loading
• useChat — in-memory messages + sendMessage / addAssistantMessage / clearMessages
• Types: Message, MessageRole

License

MIT