@m6d/cortex-client

Angular AI chat UI library. Provides a self-contained chat widget with streaming messages, tool call visualization, file capture, syntax highlighting, and i18n support.

Usage

import { CortexChatWidgetComponent, CortexClientConfig } from '@m6d/cortex-client';

@Component({
  imports: [CortexChatWidgetComponent],
  template: `<cortex-chat-widget [config]="config" />`,
})
export class MyComponent {
  protected readonly config: CortexClientConfig = {
    locale: signal('en'),
    transport: {
      baseUrl: '/api/agents/assistant',
      getHeaders: () => ({ Authorization: `Bearer ${token}` }),
    },
    wsUrl: 'ws://localhost:3331/api/ws',
  };
}

No root-level providers needed — each widget instance is fully self-contained. You can render multiple widgets with different configs on the same page.

Configuration

| Property | Type | Description | | ---------------------- | ------------------------------- | ------------------------------------------------------- | | locale | Signal<string> | Active locale ("en", "ar") | | transport.baseUrl | string \| Signal<string> | Agent API base URL | | transport.getHeaders | () => Record<string, string> | Request headers provider | | wsUrl | string | WebSocket URL for real-time events (optional) | | theme | CortexClientTheme | Custom colors and styling (optional) | | showDebugButton | boolean | Show/hide the debug toggle button (default: false) | | toolComponents | Record<string, Type<unknown>> | Custom Angular components for tool rendering (optional) | | onToolCall | (toolCall) => unknown | Client-side tool call handler (optional) |

transport.getHeaders can return any request headers needed by the host app. WebSocket auth continues to derive the token query param from a bearer Authorization header when present.

Requirements

• Angular >= 21.2.0