Installation

Intentface chat comes in two layers. The headless package — behavior, state, and wire formats — installs from npm. The styled components are copy-paste: each component page links to its source, which you copy into your project, so you own every class from the start.

Prerequisites

A React 19 app. The styled components assume Tailwind v4 and the token set on the Theming page; the headless package itself has no styling and works with any styling approach.

Headless package

bun add @intentface/chat
# or: npm install @intentface/chat / pnpm add @intentface/chat

react and react-dom (v19+) are the only peer dependencies — no styling, no animation library. Import primitives from their subpaths:

import { Composer } from "@intentface/chat/composer";
import { Message } from "@intentface/chat/message";
import { groupTurns } from "@intentface/chat/message-utils";

Each primitive renders semantic DOM with data-* state attributes and exposes behavior through context hooks and render props. See the headless concepts for the model.

Styled components

If you want the Intentface look rather than styling from scratch, copy the styled components. Every component page has a View source link at the top, pointing to the component's source on GitHub — for example, the Composer. Copy that file into your project, along with any components and icons it imports; its import statements are its dependencies. The styling is then yours to edit.

Theme

The styled components reference a small set of design tokens. Copy the token CSS from the Theming page into your global stylesheet.