React UI¶

This guide covers integrating Cognidesk into React applications with the chat widget and hooks.

Setup¶

pnpm add @cognidesk/react @cognidesk/ui

Import the default styles once in your app entrypoint:

import "@cognidesk/ui/styles.css";

Client creation¶

import { createCognideskClient } from "@cognidesk/react";

const client = createCognideskClient({
  baseUrl: "/api",
});

Drop in a full chat interface:

import { ChatWidget } from "@cognidesk/react";

function App() {
  return <ChatWidget client={client} agentId="flight-support" />;
}

useChat hook¶

For custom UI, use the lower-level hook:

import { useChat } from "@cognidesk/react";

function CustomChat() {
  const { messages, sendMessage, status, error } = useChat({
    client,
    agentId: "flight-support",
  });

  return (
    <div>
      {messages.map((m) => (
        <div key={m.id}>{m.text}</div>
      ))}
      {status === "streaming" ? <span>Streaming...</span> : null}
      {error ? <strong>{error.message}</strong> : null}
      <button onClick={() => void sendMessage("Check ticket ABC123")}>Send</button>
    </div>
  );
}

Appearance configuration¶

Style the widget with CSS variables and element classes:

<ChatWidget
  client={client}
  agentId="flight-support"
  appearance={{
    variables: { "--cd-color-primary": "#0f172a" },
    elements: { root: "shadow-lg" },
    widgets: {
      confirmation: {
        elements: {
          panel: "rounded-md border p-3",
          primaryButton: "bg-emerald-700",
        },
      },
    },
  }}
/>

Custom widgets¶

Replace built-in widget kinds with custom React components:

<ChatWidget
  client={client}
  agentId="flight-support"
  widgets={{
    "seat-map": ({ input, submit }) => (
      <SeatMap value={input} onSelect={(seatId) => submit({ seatId })} />
    ),
  }}
/>