Configuration

@threadplane/chat leans on Angular's dependency injection for shared configuration. The provideChat() function registers a ChatConfig object under the CHAT_CONFIG injection token and starts the package license check.

provideChat()

Call provideChat() in your application's provider array when your application or wrappers need to inject shared chat configuration.

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

Signature:

function provideChat(config: ChatConfig): EnvironmentProviders

provideChat() returns EnvironmentProviders (via makeEnvironmentProviders), so it works with bootstrapApplication, ApplicationConfig, or route-level providers.

ChatConfig Interface

import type { AngularRegistry } from '@threadplane/render';
 
interface ChatConfig {
  /** Default render registry for consumers that read CHAT_CONFIG. */
  renderRegistry?: AngularRegistry;
 
  /** Override the default AI avatar label (default: "A"). */
  avatarLabel?: string;
 
  /** Override the default assistant display name (default: "Assistant"). */
  assistantName?: string;
 
  /** Signed license token from threadplane.ai. Optional in development. */
  license?: string;
}

Options

Option	Type	Default	Description
`renderRegistry`	`AngularRegistry`	`undefined`	Stored on `CHAT_CONFIG` for consumers that want a shared render registry. Pass `[views]` directly to `ChatComponent` for built-in generative UI rendering.
`avatarLabel`	`string`	`"A"`	Single character or short string for consumers that inject `CHAT_CONFIG`.
`assistantName`	`string`	`"Assistant"`	Display name for consumers that inject `CHAT_CONFIG`.
`license`	`string`	`undefined`	Signed license token used by the package license check.

CHAT_CONFIG Injection Token

The CHAT_CONFIG token is an InjectionToken<ChatConfig> that you can inject directly in any component or service:

import { inject } from '@angular/core';
import { CHAT_CONFIG } from '@threadplane/chat';
import type { ChatConfig } from '@threadplane/chat';
 
@Component({ /* ... */ })
export class MyComponent {
  private config = inject(CHAT_CONFIG);
 
  get avatarText(): string {
    return this.config.avatarLabel ?? 'A';
  }
}

Optional injection

If provideChat() has not been called, injecting CHAT_CONFIG will throw. Use inject(CHAT_CONFIG, { optional: true }) if your component needs to work with or without global configuration.

Per-Route Configuration

Because provideChat() returns EnvironmentProviders, you can provide different configurations at the route level:

// app.routes.ts
import { provideChat } from '@threadplane/chat';
 
export const routes: Routes = [
  {
    path: 'support',
    loadComponent: () => import('./support-chat.component'),
    providers: [
      provideChat({
        assistantName: 'Support Bot',
        avatarLabel: 'S',
      }),
    ],
  },
  {
    path: 'code',
    loadComponent: () => import('./code-chat.component'),
    providers: [
      provideChat({
        assistantName: 'Code Assistant',
        avatarLabel: 'C',
        renderRegistry: codeRegistry,
      }),
    ],
  },
];

Using Configuration Without provideChat()

All composition components ship with sensible defaults. If you don't call provideChat(), components will:

Use "A" as the avatar label
Use "Assistant" as the assistant name
Have no injected CHAT_CONFIG

So you can use ChatComponent, ChatInputComponent, and the rest without any global configuration for basic chat. Generative UI is controlled by the ChatComponent [views], [store], and [handlers] inputs.