Intl Provider – AI Kit

AiKitIntlProvider is AI Kit’s optional internationalization boundary. Without it, components render English and inherit the ambient React Aria locale. Add it when you need French, a specific BCP-47 locale for date and time formatting, or overrides for built-in AI Kit strings.

Setup

Mount AiKitIntlProvider inside CartoTheme. React Aria overlays portal inside the theme wrapper, so this order keeps them inside the internationalization context too.

import { AiKitIntlProvider, CartoTheme } from "@servicetitan/anvil2-ai-kit";

export function Root({ children }) {
  return (
    <CartoTheme>
      <AiKitIntlProvider locale="fr-FR">{children}</AiKitIntlProvider>
    </CartoTheme>
  );
}

Passing locale also configures React Aria’s locale, keeping translated strings, timestamps, and other date and time formatting in sync. AI Kit currently ships English synchronously and loads French (fr-FR) on demand. Unsupported locales fall back to English. Omit locale to inherit an existing React Aria I18nProvider or the browser default:

import type { ReactNode } from "react";
import { I18nProvider } from "react-aria";
import { AiKitIntlProvider, CartoTheme } from "@servicetitan/anvil2-ai-kit";

export function Root({
  appLocale,
  children,
}: {
  appLocale: string;
  children: ReactNode;
}) {
  return (
    <I18nProvider locale={appLocale}>
      <CartoTheme>
        <AiKitIntlProvider>{children}</AiKitIntlProvider>
      </CartoTheme>
    </I18nProvider>
  );
}

Override messages

Pass only the IDs you need through messages. Overrides merge over the active catalog.

<AiKitIntlProvider
  locale="en"
  messages={{
    "ai-kit.promptBar.placeholder": "Message Atlas…",
    "ai-kit.chatHistory.newChat": "Start conversation",
  }}
>
  {children}
</AiKitIntlProvider>

Message IDs are documented on the component Code pages that own them. Unknown IDs have no effect. ICU interpolation and rich-text placeholders remain part of the message contract; preserve placeholders such as {name}, {percent}, and <link>…</link> when overriding those messages.

`AiKitIntlProvider` Props

The AiKitIntlProvider accepts the following props.

ReactNode

required

AI Kit subtree that receives the scoped locale and message catalog.

string

BCP-47 locale for AI Kit strings and React Aria date and time formatting. Omit to inherit the ambient React Aria locale.

Record<string, string>

Partial built-in message overrides keyed by AI Kit message ID.

​Setup

​Override messages

​AiKitIntlProvider Props

Setup

Override messages

`AiKitIntlProvider` Props