Skip to main content

REFERENCE

SDK Demos

How to use @asgard-js/core and @asgard-js/react, with demos you can try on the page.

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.

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

  2. What locale Does and Does Not Cover​

    CoveredNot 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 panelsText you pass in via initMessages
    The API-key sign-in screenAnything you draw with renderFooter / renderHeader

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

  3. 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" />

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

  5. 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} />

  6. See Also​

Ready to get started?

Want to see how Asgard fits your team? Talk to us.

Contact us