provideCopilotChatLabels.mdx

title	provideCopilotChatLabels
description	Angular provider that overrides the default text labels used by the CopilotKit chat components

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

A partial set of label overrides. Provided fields are merged over `COPILOT_CHAT_DEFAULT_LABELS`; omitted fields keep their defaults. Placeholder text for the chat input. Label for the start-transcription button. Label for the cancel-transcription button. Label for the finish-transcription button. Label for the add-attachment button. Label for the tools button. Label for the copy-code action on an assistant message. Label shown after code is copied from an assistant message. Label for the copy-message action on an assistant message. Label for the thumbs-up action. Label for the thumbs-down action. Label for the read-aloud action. Label for the regenerate action. Label for the copy-message action on a user message. Label for the edit-message action on a user message. Disclaimer text shown beneath the chat. The welcome message shown before the conversation starts.

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