Installation

Detailed setup guide for @ngaf/chat.

#Requirements

1
Angular 20+

@ngaf/chat uses Angular Signals, the input() function, and contentChildren(). Angular 20 or later is required.

2
Node.js 18+

Required for the build toolchain and package installation.

#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:

PackageVersionRequired
@angular/core^20.0.0 || ^21.0.0Yes
@angular/common^20.0.0 || ^21.0.0Yes
@angular/forms^20.0.0 || ^21.0.0Yes
@angular/platform-browser^20.0.0 || ^21.0.0Yes
@ngaf/licensing*Yes
@ngaf/render*Yes
@ngaf/a2ui*Yes
@json-render/core^0.16.0Yes
@langchain/core^1.1.33Yes
rxjs~7.8.0Yes
marked^15.0.0 || ^16.0.0Yes

@cacheplane/partial-json is installed by @ngaf/chat for streaming JSON parsing.

Markdown rendering

marked parses AI message content into HTML (headings, code blocks, tables, lists). It is a required peer; the library ships a defensive plain-text fallback for resilience, but the rendered output is unusable without marked installed.

#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