Cognipeer Chat UI

AI Conversational Interface Kit

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.

GitHub npm

Key Features

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.

Quick Start

Drop in a full chat experience with a single component — or customize every detail.

Installation

npm install @cognipeer/chat-ui

Basic Usage

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"
        agentId="my-agent"
        theme="dark"
      />
    </div>
  );
}

With Authentication

<Chat
  baseUrl="http://localhost:3000/api"
  agentId="my-agent"
  authorization="Bearer your-token-here"
  theme="dark"
/>

Custom Theme

<Chat
  baseUrl="http://localhost:3000/api"
  agentId="my-agent"
  theme="dark"
  themeColors={{
    bgPrimary: "#1a1a2e",
    bgSecondary: "#16213e",
    bgTertiary: "#0f3460",
    textPrimary: "#eaeaea",
    textSecondary: "#a0a0a0",
    accentPrimary: "#e94560",
  }}
/>

Minimal (Without History Sidebar)

import { ChatMinimal } from "@cognipeer/chat-ui";

<ChatMinimal
  baseUrl="http://localhost:3000/api"
  agentId="my-agent"
/>

Cognipeer Chat UI vs Alternatives

Product	Primary Role	Streaming (SSE)	Tool Call Viz	File Uploads	Theming	Hooks API	Agent Server Ready	Open Source
Cognipeer Chat UI	Agent Chat UI Kit	✓	✓	✓	✓	✓	✓	✓
Vercel AI SDK UI	UI Building Blocks	✓	△	△	△	✓	△	✓
Generic Chat Components	Basic Chat UI	△	✕	△	△	△	✕	△
Fully Custom Build	From Scratch	✓	✓	✓	✓	✓	✓	✕