🎨
Customizable Theme
Dark and light modes with full color customization via CSS variables or props.
Chat UIReact Chat Components for AI Agents
Customizable, streaming-ready chat UI with dark/light themes, file uploads, and tool visualization
Skip to content
Quick Start
bash
npm install @cognipeer/chat-uibash
yarn add @cognipeer/chat-uibash
pnpm add @cognipeer/chat-uiBasic Usage
tsx
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>
);
}Features at a Glance
Dark Theme (Default)
tsx
<Chat
baseUrl="/api/agents"
agentId="assistant"
theme="dark"
/>Light Theme
tsx
<Chat
baseUrl="/api/agents"
agentId="assistant"
theme="light"
/>With Authentication
tsx
<Chat
baseUrl="/api/agents"
agentId="assistant"
authorization="Bearer your-token"
/>Minimal (No History)
tsx
import { ChatMinimal } from "@cognipeer/chat-ui";
<ChatMinimal
baseUrl="/api/agents"
agentId="assistant"
/>Custom Theme Colors
tsx
<Chat
baseUrl="/api/agents"
agentId="assistant"
themeColors={{
bgPrimary: "#1a1a2e",
bgSecondary: "#16213e",
accentPrimary: "#e94560",
}}
/>