Docs›Chat›API Reference›provideChat()

provideChat()

provideChat is the provider factory that registers @ngaf/chat configuration in Angular's dependency injection system. Call it once in your ApplicationConfig (or at the route level) to set global defaults used by chat composition components.

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

Signature

function provideChat(config: ChatConfig): EnvironmentProviders
ParameterTypeDescription
configChatConfigConfiguration object with optional render registry, avatar label, and assistant name

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.

CHAT_CONFIG Injection Token

import { CHAT_CONFIG } from '@ngaf/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 '@ngaf/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.

OptionTypeDefaultDescription
avatarLabelstring"A"AI avatar badge text
assistantNamestring"Assistant"AI assistant display name

Usage Patterns

Application-Wide Configuration

// app.config.ts
import { provideAgent } from '@ngaf/langgraph';
import { provideChat } from '@ngaf/chat';
 
export const appConfig: ApplicationConfig = {
  providers: [
    provideAgent({ apiUrl: 'http://localhost:2024' }),
    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 requires [views] input on ChatComponent
// This works fine without provideChat()
@Component({
  imports: [ChatComponent],
  template: `<chat [agent]="chatRef" />`,
})
export class SimpleChatComponent {
  chatRef = agent({
    assistantId: 'chat_agent',
    threadId: signal(null),
  });
}

What's Next

← Previous
ChatDebug
Next →
ChatConfig