Chat UI

Cognipeer Chat UI

Ship polished chat surfaces for AI agents. A production-ready React chat UI with streaming, tool-call rendering, history, uploads, and theme controls — without stitching one together from low-level primitives.

• Package @cognipeer/chat-ui
• Framework React
• Surfaces Full workspace chat · ChatMinimal · composable hooks

Use the full Chat surface for a sidebar-based, multi-session workspace, drop in ChatMinimal for a single-thread widget, or compose lower-level hooks when your product needs more control than either surface gives out of the box.

npm

npm install @cognipeer/chat-ui

yarn

yarn add @cognipeer/chat-ui

pnpm

pnpm add @cognipeer/chat-ui

import { Chat } from "@cognipeer/chat-ui";
import "@cognipeer/chat-ui/styles.css";

function App() {
  return (
    <div className="h-screen">
      <Chat
        baseUrl="http://localhost:3000/api/agents"
        agentId="my-agent"
        theme="dark"
      />
    </div>
  );
}

Guide

Getting started

Install the package and get a working chat surface on screen quickly.

Guide

Core concepts

The message model, streaming flow, and session behavior.

Guide

Theming

Dark and light surfaces, accent colors, spacing, and overrides through tokens and props.

Reference

Components

Chat, ChatMinimal, and every building block in between.

Reference

API reference

Hooks, the agent client, and every exported type.

Examples

Examples

Basic usage, custom theming, feedback, custom hooks, and a minimal setup.

---

What it handles for you

Streaming that feels product-ready

Render partial assistant output, tool-call activity, and follow-up UI without assembling a chat surface from scratch.

Tool calls with inspectable state

Show arguments, results, and expandable tool traces in a way that fits operational agent workflows, not generic message bubbles.

History, sessions, and workspace chat

Move from a minimal single-thread chat to a full sidebar-based conversation experience without changing your application model.

Uploads, feedback, and product hooks

File attachments, custom message actions, and integration hooks for the places teams usually end up rebuilding the chat stack by hand.

Where to go next

• Getting started — install and render your first chat surface.
• Architecture — how components, hooks, and the agent client fit together.
• Streaming — partial output, tool-call activity, and follow-up UI.
• Agent Server integration — wiring the UI to a running @cognipeer/agent-server instance.