Built-in UI Locales

The SDK's own chrome — thinking blocks, tool-call groups, the Task Check List, the subagent panel, the API-key screen, the File Explorer — switches with a single locale prop.

Built-in UI Locales

The SDK's own chrome — thinking blocks, tool-call groups, the Task Check List, the subagent panel, the API-key screen — switches with a single locale prop. Three catalogs ship today: zh-TW, en-US, ja-JP. A missing key falls back to en-US, then to the key itself.

Switch locale

import type { Locale } from '@asgard-js/react';

// 'zh-TW' | 'en-US' | 'ja-JP'
<Chatbot
  locale="ja-JP"
  config={{ botProviderEndpoint: '...' }}
  customChannelId="my-channel"
/>

// Consumer-placed panels read the same catalogs
<TaskList tasks={tasks} locale="ja-JP" />
<SubagentList subagents={subagents} locale="ja-JP" />

locale governs only the SDK's own chrome; it never translates bot replies — that is the bot provider's job. Switching remounts the Chatbot.

Loading chatbot...

Supported Locales

type Locale = "en-US" | "ja-JP" | "zh-TW";

<Chatbot
  locale="ja-JP"
  config={{ botProviderEndpoint: "..." }}
  customChannelId="my-channel"
/>

A missing key falls back first to en-US, then to the key itself — so an untranslated string never breaks the layout or renders blank.

What `locale` Does and Does Not Cover

Covered	Not covered
Chrome the SDK draws itself (buttons, statuses, labels, empty states)	The content of bot replies
Human-readable labels in tool-call, task and subagent panels	Text you pass in via `initMessages`
The API-key sign-in screen	Anything you draw with `renderFooter` / `renderHeader`

Translating bot replies is the bot provider's job, not the SDK's.

Consumer-placed Panels

The self-docked panels read the same catalogs and take their own locale:

<TaskList tasks={tasks} locale="ja-JP" />
<SubagentList subagents={subagents} locale="ja-JP" />

Reading the Catalog Directly

To reuse the same strings in your own UI:

import { t } from "@asgard-js/react";

t("ja-JP", "task.completed");
t("zh-TW", "tool.read", { file: "src/index.ts" }); // supports {var} interpolation

Pairing With the Site Locale

Sites built on Docusaurus, Next.js and friends usually have their own locale already — just map it across:

const sdkLocale = siteLocale === "en" ? "en-US" : "zh-TW";

<Chatbot locale={sdkLocale} {...rest} />