provideChat()

provideChat is the provider factory that registers @threadplane/chat configuration in Angular's dependency injection system and starts the package license check. Call it in your ApplicationConfig or at the route level when you need a shared CHAT_CONFIG value.

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

Signature

function provideChat(config: ChatConfig): EnvironmentProviders

Parameter	Type	Description
`config`	`ChatConfig`	Configuration object with optional render registry, avatar label, assistant name, and license token

Returns: EnvironmentProviders -- created via makeEnvironmentProviders(), compatible with bootstrapApplication, ApplicationConfig, and route-level providers.

What It Does

provideChat() registers a single provider:

{ provide: CHAT_CONFIG, useValue: config }

This makes the ChatConfig object available throughout the application via the CHAT_CONFIG injection token. provideChat() does not automatically wire generative UI into <chat>; pass [views], [store], and [handlers] directly to ChatComponent.

CHAT_CONFIG Injection Token

import { CHAT_CONFIG } from '@threadplane/chat';
 
const CHAT_CONFIG: InjectionToken<ChatConfig>;

The token is an InjectionToken<ChatConfig> that can be injected in any component, directive, or service:

import { inject } from '@angular/core';
import { CHAT_CONFIG } from '@threadplane/chat';
 
@Component({ /* ... */ })
export class MyComponent {
  private chatConfig = inject(CHAT_CONFIG);
}

Required provider

Injecting CHAT_CONFIG without calling provideChat() will throw a NullInjectorError. Use inject(CHAT_CONFIG, { optional: true }) if your component should work without global configuration.

Configuration Options

See the ChatConfig API reference for the full interface definition.

Option	Type	Default	Description
`renderRegistry`	`AngularRegistry`	`undefined`	Stored on `CHAT_CONFIG` for consumers that want a shared render registry. `<chat>` uses the `[views]` input directly.
`avatarLabel`	`string`	`"A"`	Shared avatar label for consumers that inject `CHAT_CONFIG`
`assistantName`	`string`	`"Assistant"`	Shared assistant display name for consumers that inject `CHAT_CONFIG`
`license`	`string`	`undefined`	Signed license token used by the package license check

Usage Patterns

Application-Wide Configuration

// app.config.ts
import { provideAgent } from '@threadplane/langgraph';
import { provideChat } from '@threadplane/chat';
 
export const appConfig: ApplicationConfig = {
  providers: [
    provideAgent({ apiUrl: 'http://localhost:2024', assistantId: 'chat' }),
    provideChat({
      avatarLabel: 'B',
      assistantName: 'Bot',
    }),
  ],
};

Route-Level Configuration

Provide different chat configurations for different parts of your application:

// app.routes.ts
export const routes: Routes = [
  {
    path: 'support',
    loadComponent: () => import('./support/support-chat.component'),
    providers: [
      provideChat({
        assistantName: 'Support Agent',
        avatarLabel: 'S',
      }),
    ],
  },
  {
    path: 'coding',
    loadComponent: () => import('./coding/code-chat.component'),
    providers: [
      provideChat({
        assistantName: 'Code Helper',
        avatarLabel: 'C',
      }),
    ],
  },
];

Without provideChat()

All chat components work without provideChat(). They use defaults:

Avatar label: "A"
Assistant name: "Assistant"
Generative UI still requires the [views] input on ChatComponent

// This works fine without provideChat()
import { injectAgent, provideAgent } from '@threadplane/langgraph';
 
@Component({
  imports: [ChatComponent],
  providers: [
    provideAgent({
      apiUrl: 'http://localhost:2024',
      assistantId: 'chat',
      threadId: signal(null),
    }),
  ],
  template: `<chat [agent]="chatRef" />`,
})
export class SimpleChatComponent {
  chatRef = injectAgent();
}