@poulo2/ai-components

AI interface components for React 19, in one package: a liquid-metal prompt input with voice mode, an agent activity stream, chat messages, a todo list and a following scroller. Docs and live previews are in the repository's docs site.

Install

Not published yet. This package is not on npm, so the command below will not work until it is. Do not install a package of this name from anywhere else in the meantime.

npm install @poulo2/ai-components

Then load the styles once, in one of two ways.

With Tailwind v4 — add both lines to your global stylesheet, so Tailwind generates the classes the components use:

@import "@poulo2/ai-components/theme.css";
@source "../node_modules/@poulo2/ai-components/dist";

The token names follow shadcn/ui. If your app already defines them, skip the theme.css import to keep your own palette, and add --border-strong.

Without Tailwind — import the prebuilt stylesheet instead. It includes Tailwind's base reset.

import "@poulo2/ai-components/styles.css";

Dark mode follows a dark class on an ancestor, usually <html>.

Use

import { MetalPromptInput } from "@poulo2/ai-components";

export function Composer() {
  return <MetalPromptInput onSubmit={(prompt) => console.log(prompt)} />;
}

Each component also has its own entry point, for bundlers that don't tree-shake the root import:

import { OrbAgentActivity } from "@poulo2/ai-components/agent-activity";

The entries are prompt-input, agent-activity, message, scroller, todo-list and metal-frame. They export the same things as the root.

Exports: MetalPromptInput, OrbAgentActivity, ChatMessage, MessageGroup, MessageMarker, ChatScroller, OrbTodoList, MetalFrame, and their prop and item types.

Every component is a client component; the bundle carries "use client", so it can be imported from a Next.js server component file.

Build

The component source lives in frontend/ of the repository, so the docs site and the package can't drift. npm run build bundles it into dist/: the root entry, one entry per component, and the chunks they share.

See NOTICE for the bundled beUI source and third-party libraries.