provideCopilotChatLabels

Overview

provideCopilotChatLabels returns an Angular Provider that customizes the text labels used throughout the prebuilt chat components, such as the input placeholder, toolbar button labels, the disclaimer text, and the welcome message. You pass a partial set of labels and they are merged over the defaults, so you only override the strings you want to change.

Add it to an application or component providers array. Components read the merged labels through injectChatLabels. This mirrors React's chat label configuration via useCopilotChatConfiguration.

The full set of defaults lives in COPILOT_CHAT_DEFAULT_LABELS. Any field you omit falls back to its default value.

Signature

import { provideCopilotChatLabels } from "@copilotkit/angular";
import type { Provider } from "@angular/core";

function provideCopilotChatLabels(
  config: Partial<CopilotChatLabels>,
): Provider;

Parameters

Return Value

Returns an Angular Provider that binds the merged labels to the COPILOT_CHAT_LABELS injection token.

Usage

Override a few labels in your application config. Everything you do not list keeps its default.

import { ApplicationConfig } from "@angular/core";
import {
  provideCopilotKit,
  provideCopilotChatLabels,
} from "@copilotkit/angular";

export const appConfig: ApplicationConfig = {
  providers: [
    provideCopilotKit({ runtimeUrl: "/api/copilotkit" }),
    provideCopilotChatLabels({
      chatInputPlaceholder: "Ask me anything...",
      welcomeMessageText: "Welcome! What can I help you build?",
    }),
  ],
};

You can also scope labels to part of your app by adding the provider to a feature component's providers array instead of the application config.

Related