Installation

Detailed installation instructions for @cognipeer/chat-ui.

Package Installation

npm

npm install @cognipeer/chat-ui

yarn

yarn add @cognipeer/chat-ui

pnpm

pnpm add @cognipeer/chat-ui

Peer Dependencies

The package requires React 18+:

{
  "peerDependencies": {
    "react": ">=18.0.0",
    "react-dom": ">=18.0.0"
  }
}

Styles

Import the CSS file in your app:

// In your main App.tsx or _app.tsx
import "@cognipeer/chat-ui/styles.css";

Or in CSS:

/* In your global CSS */
@import "@cognipeer/chat-ui/styles.css";

With Tailwind CSS

If you're using Tailwind CSS, add the package to your content config:

// tailwind.config.js
module.exports = {
  content: [
    "./src/**/*.{js,ts,jsx,tsx}",
    "./node_modules/@cognipeer/chat-ui/**/*.{js,mjs}",
  ],
  // ...
};

TypeScript

The package includes TypeScript definitions. No additional @types package needed.

import { Chat, ChatProps, Message, Conversation } from "@cognipeer/chat-ui";

const props: ChatProps = {
  baseUrl: "/api/agents",
  agentId: "assistant",
};

Framework-Specific Setup

Next.js

// app/chat/page.tsx
"use client";

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

export default function ChatPage() {
  return (
    <div className="h-screen">
      <Chat
        baseUrl="/api/agents"
        agentId="assistant"
      />
    </div>
  );
}

Vite

// src/App.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="assistant"
      />
    </div>
  );
}

export default App;

Create React App

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

function App() {
  return (
    <div style={{ height: '100vh' }}>
      <Chat
        baseUrl="http://localhost:3000/api/agents"
        agentId="assistant"
      />
    </div>
  );
}

export default App;

ESM/CommonJS

The package supports both ESM and CommonJS:

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

// CommonJS
const { Chat } = require("@cognipeer/chat-ui");

Compatibility

Chat UI 0.4.0 works with older servers (every 0.4.0 feature that needs the server is simply absent), but most of what is new needs @cognipeer/agent-server 0.3.0 or later:

Feature	Needs
Messages, streaming, history, uploads (inline), tool calls	any agent-server
Approvals and questions, reattach, server-side Stop, usage limits, status badges, raw uploads with progress, per-agent attachment limits	agent-server 0.3.0+
Regenerate, edit, feedback, rename, pin, bulk delete, export	agent-server 0.3.0+ (and the agent's experience allowing it)
Embedded chat	A server with bearer sessions (resolveContext), such as a Cognipeer Console portal
Other backends (agent-sdk in process, Chat Completions, Responses, A2A)	See Transports

The package is published as ESM and CommonJS (there is no browser-global build), with TypeScript definitions and a precompiled styles.css.

Troubleshooting

Styles not loading

Make sure you import the CSS file:

import "@cognipeer/chat-ui/styles.css";

TypeScript errors

Ensure you're using TypeScript 4.7+ with proper JSX configuration:

// tsconfig.json
{
  "compilerOptions": {
    "jsx": "react-jsx",
    "moduleResolution": "bundler"
  }
}

Module not found

If using Next.js with the app directory, ensure the component is marked as a client component:

"use client";

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

Next Steps

• Getting Started
• Theming
• Components