Chat UI

@cognipeer/chat-ui · Around Agent SDK

stable

A React component library for building modern, real-time conversational interfaces powered by AI agents. ChatGPT-style experience with streaming, tool transparency, and full customisation.

Quickstart GitHub Full docs

License · MITTypeScript · 100%Audience · Frontend teams that…Fits · Agent chat interfaces

Agent chat interfacesStreaming experiencesEmbeddable React UIBrowse recipes

Production install

$npm install @cognipeer/chat-ui

What's in the box

Frontend teams that need a production-ready conversational UI for agent and chat experiences with streaming and tool visibility. Each capability is opt-in — use the parts that fit, leave the rest.

Full Chat

Delivers a complete conversational interface with message history and threading.

Streaming UI

Renders live agent responses through real-time streaming updates.

Tool Cards

Visualises agent tool usage, inputs, and outputs within the chat experience.

File Attachments

Built-in file attachment support for document-aware conversations.

Themes (Dark / Light)

Provides built-in theming with full support for brand customisation.

Hooks API

Exposes React hooks for full control over chat state and behavior.

i18n Support

Built-in internationalization with English and Turkish, extensible to any locale.

How it runs

A composable React kit for streaming chat: messages, tool cards, attachments, and theming — wired to your agent through plain hooks.

Step 1

Mount

Step 2

Stream

Step 3

Tool cards

Step 4

Attachments

Step 5

Theme

Components

<ChatRoot/>
<MessageList/>
<ToolCard/>
<Composer/>

Hooks

useChat()
useToolCalls()
useAttachments()
useTheme()

Integrations

Agent Server SSE
Console gateway
Custom transports
i18n (en, tr)

Quickstart

Install, configure, run. The example below is the smallest piece of code that does something useful in production.

import  { ChatRoot, useChat } from "@cognipeer/chat-ui";
 
export function App() {
  const chat = useChat({ endpoint: "/api/agent"  });
  return <ChatRoot chat={chat} theme="light" />;
}

How it compares

Against the around agent sdk options teams most often weigh — focused on operational concerns, not feature inventories.

Capability	Chat UI	Vercel AI SDK UI	Generic Chat Components	Fully Custom Build
Streaming (SSE)	● native	● native	◐ partial	● native
Tool Call Viz	● native	◐ partial	○ missing	● native
File Uploads	● native	◐ partial	◐ partial	● native
Theming	● native	◐ partial	◐ partial	● native
Hooks API	● native	● native	◐ partial	● native
Agent Server Ready	● native	◐ partial	○ missing	● native