> ## Documentation Index
> Fetch the complete documentation index at: https://anvil.servicetitan.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Intl Provider

> Configure AI Kit locale, date and time formatting, and built-in string overrides.

`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.

```tsx theme={null}
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:

```tsx theme={null}
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.

```tsx theme={null}
<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.

<ParamField path="children" type="ReactNode" required>
  AI Kit subtree that receives the scoped locale and message catalog.
</ParamField>

<ParamField path="locale" type="string">
  BCP-47 locale for AI Kit strings and React Aria date and time formatting. Omit
  to inherit the ambient React Aria locale.
</ParamField>

<ParamField path="messages" type="Record<string, string>">
  Partial built-in message overrides keyed by AI Kit message ID.
</ParamField>