@m6d/cortex-react

React chat widget for cortex servers: streaming messages, tool call visualization, composer attachments, syntax highlighting, and i18n. Same features and pixel parity as @m6d/cortex-angular.

Usage

import { CortexChatWidget, type CortexReactConfig } from '@m6d/cortex-react';
import '@m6d/cortex-react/styles.css';
import '@m6d/cortex-react/theme.css';

const config = {
  locale: 'en',
  transport: {
    baseUrl: '/api/agents/assistant',
    getHeaders: () => ({ Authorization: `Bearer ${token}` }),
  },
} satisfies CortexReactConfig;

export function Chat() {
  return <CortexChatWidget config={config} className="block h-svh w-full" />;
}

CortexReactConfig is the shared CortexConfig plus a React-only toolComponents field (Record<string, ComponentType<CortexToolComponentInputs>>). Every other property, the client tools flow, and the media blocks are documented in packages/cortex-angular/README.md; only the toolComponents and injector rows are Angular-specific.

Custom parts

With slots you draw the widget's parts yourself: header, landing (the blank chat) and threadList (the history's list). Each is a component that takes the context the default is drawn from as its props, the same one Angular's cortexSlot templates get (fields listed in the Angular README). The landing's composer is a React node to place. Define slot components outside render: a new component each render remounts the part.

import {
  CortexChatWidget,
  type CortexHeaderContext,
  type CortexLandingContext,
  type CortexReactSlots,
} from '@m6d/cortex-react';

function Header(chat: CortexHeaderContext) {
  return (
    <div className="cortex-widget__chat-header">
      <div className="cortex-widget__chat-title-wrap">
        <p className="cortex-widget__chat-title">{chat.title ?? chat.agentName}</p>
      </div>
      <button className="cortex-widget__header-btn" onClick={chat.newChat}>
        +
      </button>
    </div>
  );
}

function Landing(landing: CortexLandingContext) {
  return (
    <div className="cortex-widget__landing">
      <h1>{landing.greeting}</h1>
      {landing.composer}
    </div>
  );
}

const slots = { header: Header, landing: Landing } satisfies CortexReactSlots;

<CortexChatWidget config={config} slots={slots} />;

The theming tokens and the table actions are the same as Angular's.

Requirements

• React 18 or later
• Peer dependencies: @tanstack/ai, @tanstack/ai-client, @tanstack/ai-react, marked, dompurify, highlight.js, plus the lazily loaded mermaid, vega, vega-lite, vega-embed, leaflet (and leaflet/dist/leaflet.css in your page for maps)