Installation

Detailed setup guide for @ngaf/chat.

Requirements

Install the package

npm install @ngaf/chat marked

marked is required for parsing assistant markdown. Beyond that: the chat components ship with their own design tokens and component-encapsulated styles. No PostCSS config, no global stylesheet import, no Tailwind required.

Peer Dependencies

@ngaf/chat declares the following peer dependencies:

Configure provideChat() (optional)

Add provideChat() alongside your agent provider to register CHAT_CONFIG for global chat configuration:

// app.config.ts
import { ApplicationConfig } from '@angular/core';
import { provideChat } from '@ngaf/chat';
 
export const appConfig: ApplicationConfig = {
  providers: [
    provideChat({ assistantName: 'Assistant' }),
  ],
};

provideChat() is optional — chat components fall back to sensible defaults.

Theming

The chat ships with a complete light/dark token system. Three ways to customize:

1. Override a single token at app root

/* src/styles.css */
:root {
  --ngaf-chat-primary: oklch(0.55 0.22 264);
}

2. Force a theme via attribute

<chat data-ngaf-chat-theme="dark" [agent]="agent" />

3. Deep override via the optional global stylesheet

/* src/styles.css */
@import '@ngaf/chat/chat.css';
 
:root {
  --ngaf-chat-primary: oklch(0.55 0.22 264);
}

See Theming for the full token reference.

What's Next