Introduction

Two ways to build an agentic application

Pick your track

Key Features

• Drop a single React component into your app

• Progressive streaming UI, components load in real-time as the AI responds

• Works with any AI, LangGraph, CrewAI, Anthropic, OpenAI, Gemini, and more

• AG-UI Protocol support, standard streaming events for modern agent frameworks

• Fully interactive, every element generates new queries

• Automatically styled to match your brand

How It Works

Every answer becomes a screen. Here is the loop your users live in:

• 1. User types a query

  e.g., "Show me sales dashboard"

• 2. BranderUX selects the best screen layout

  Analyzes the query and picks from dashboard, table, chart, etc.

• 3. Your AI streams structured data

  Using AG-UI events for real-time progressive loading

• 4. UI components appear as data streams in

  Charts, tables, stats, all rendering progressively

• 5. Every interaction generates a new query

  Click a row, filter a chart, the cycle continues seamlessly

Simple Example

import Brander from "@brander/sdk";

function App() {
  return <Brander apiKey="bux_pk_your_key" projectId="your_project_id" />;
}

Or pass a stream handler and the agent you already have fills the screens:

import Brander, { sseStream } from "@brander/sdk";

function App() {
  return (
    <Brander
      apiKey="bux_pk_your_key"
      projectId="your_project_id"
      onQueryStream={(params) => sseStream("/api/agent", { params })}
    />
  );
}

Your backend returns Server-Sent Events (SSE) with AG-UI events. Most agent frameworks support this natively.

Supported Agent Frameworks

BranderUX works with all major agent frameworks through the AG-UI protocol:

For direct SDK usage without a framework, we provide adapters for Anthropic, OpenAI, and Gemini.

Direct SDK Example

If you're calling an AI provider directly (without an agent framework), use our stream adapters:

import Brander, { anthropicStream } from "@brander/sdk";
import Anthropic from "@anthropic-ai/sdk";

const anthropic = new Anthropic({ apiKey: process.env.ANTHROPIC_API_KEY });

function App() {
  return (
    <Brander
      apiKey="bux_pk_your_key"
      projectId="your_project_id"
      onQueryStream={async function*(params) {
        const stream = anthropic.messages.stream({
          model: "claude-sonnet-5",
          // Your persona + BranderUX UI instructions, append, never replace
          system: YOUR_SYSTEM_PROMPT + "\n\n" + params.system,
          messages: params.messages,
          tools: params.tools?.anthropic,
          max_tokens: params.max_tokens || 4000,
        });
        yield* anthropicStream(stream);
      }}
    />
  );
}