provideChat()

provideChat is the provider factory that registers @ngaf/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 '@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, 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 '@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
renderRegistryAngularRegistryundefinedStored on CHAT_CONFIG for consumers that want a shared render registry. <chat> uses the [views] input directly.
avatarLabelstring"A"Shared avatar label for consumers that inject CHAT_CONFIG
assistantNamestring"Assistant"Shared assistant display name for consumers that inject CHAT_CONFIG
licensestringundefinedSigned license token used by the package license check

#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 still requires the [views] input on ChatComponent
// This works fine without provideChat()
@Component({
  imports: [ChatComponent],
  template: `<chat [agent]="chatRef" />`,
})
export class SimpleChatComponent {
  chatRef = agent({
    apiUrl: 'http://localhost:2024',
    assistantId: 'chat_agent',
    threadId: signal(null),
  });
}

#What's Next