Fluent

npm install @fluent/sdk

Drop-in Component

<FluentAgentChat /> renders a full chat UI with locale selector, message bubbles, and usage stats. Zero config.

Headless Client

createFluentClient() gives you typed methods for invoking agents, managing versions, and composing prompts.

BYOL (Bring Your Own LLM)

Use composeSystemPrompt() to get Fluent's locale improvements as a system prompt for any LLM provider.

Step 1

Install the package

Works with React 18+ and React 19. No peer deps besides React.

bash

npm install @fluent/sdk

Step 2

Add the chat component

Pass your agent ID and the Fluent API base URL. The component handles the rest — loading the published version, locale selection, message state, and invocation.

tsx

import { FluentAgentChat } from "@fluent/sdk";

export default function SupportPage() {
  return (
    <FluentAgentChat
      agentId="YOUR_AGENT_ID"
      apiBaseUrl="http://localhost:3000"
    />
  );
}

Step 3

Publish an agent version

The chat component loads the published version of your agent. Make sure you've published at least one version from the agent detail page.

Agent detail → Version snapshots → Snapshot current state → Make current

What the component renders

The FluentAgentChat component includes everything needed for a production chat experience.

Agent header

Shows agent name, version label, type badge, and active locale

Locale selector

Dropdown for available locales (hidden if you pass a fixed locale prop)

Message transcript

User and assistant bubbles with scroll, auto-scrolls on new messages

Composer

Textarea with submit button, disabled during loading and sending

Status bar

Shows version label, token count, and latency after each response

Error handling

Catches load and invoke errors, displays inline messages