Optizon Chat

Components for AI agent chat interfaces, for agents such as Claude Code and Pi: a message model of typed parts, a store your app streams its agent's events into, and a transcript that stays fast for thousands of turns (finished turns are virtualized, the streaming one stays live, each streamed token re-renders only its part). Replies render as streaming-safe Markdown; the transcript is a screen-reader log with a status region that announces what changes. Every point where an agent waits for the person has a prompt (permissions, questions, plan approval, forms, sign-in), answerable by keyboard alone, and PromptInput is the composer: queueing while the agent works, stopping, history, / and @ menus at the caret, attachments by drop and paste, and never a send while an input method composes. Every Claude Code and Pi tool call renders in its own card: shell output as a colored terminal that streams, edits as diffs, reads as file previews, searches as results, subagents with their own nested transcript, task lists; MCP and unknown tools get a card with JSON trees.

Use

Install it next to @optizon/ui and @optizon/tokens, at the same version, with React 19 and Tailwind CSS 4 (4.1.14 or later; keep @tailwindcss/vite on the same version as tailwindcss). It brings @optizon/markdown and @optizon/code, at the same version:

npm install @optizon/[email protected] @optizon/[email protected] @optizon/[email protected] @optizon/[email protected] @optizon/[email protected] react@^19 react-dom@^19
npm install -D tailwindcss@^4.1 @tailwindcss/vite@^4.1

In your application stylesheet, scan the packages' source (paths are relative to the stylesheet):

@import "@optizon/tokens";
@source "../node_modules/@optizon/ui/src";
@source "../node_modules/@optizon/markdown/src";
@source "../node_modules/@optizon/code/src";
@source "../node_modules/@optizon/chat/src";

Code blocks, diffs and editors come from @optizon/code: give Monaco its worker factory once at startup with configureMonaco({ getWorker }) (the setups for Vite, webpack and Rspack, and the Content Security Policy: https://github.com/optzn/ui/blob/main/docs/CODE.md). For math and diagrams in replies, install @optizon/math or @optizon/diagrams and register mathPlugin() or diagramsPlugin() on a MarkdownProvider at the app's root; chat's Markdown adds codeFencePlugin() itself.

import { useMemo } from "react";
import { UIProvider } from "@optizon/ui";
import { Thread, createChatStore } from "@optizon/chat";

export function Conversation() {
  const store = useMemo(() => createChatStore(), []);
  // As your agent's events arrive:
  //   store.append({ id, role: "assistant", parts: [{ type: "text", text: "", state: "streaming" }], metadata: { status: "streaming" } });
  //   store.appendText(id, 0, delta);
  //   store.finish(id);
  return <UIProvider><Thread store={store} className="h-[40rem]" /></UIProvider>;
}

There are no adapters: your app maps its agent's events onto the store. The guide has the model, the store, the renderer registry and the mapping tables for the Claude Agent SDK and Pi: https://github.com/optzn/ui/blob/main/docs/AGENT-CHAT.md

The package is ESM-only, ships compiled JavaScript, TypeScript declarations and source, and has @optizon/tokens, @optizon/ui, @optizon/markdown and @optizon/code (same version) and React 19 as peers. Licensed under Apache-2.0.

The agent skill for Codex and Claude Code ships in @optizon/ui and covers chat too: npx @optizon/[email protected] install-skill.

Documentation, examples and source: https://github.com/optzn/ui