Introduction

Turn your agent into a full agentic application

What is @brander/sdk?

BranderUX SDK is an embeddable React component that turns your agent into a full agentic application. Instead of plain text responses, your users get branded, interactive dashboards, tables, charts, and forms — generated at runtime, with progressive loading that streams in real-time.

It works with any AI provider or agent framework: LangGraph, CrewAI, Google ADK, Pydantic AI, Mastra, AutoGen, or direct SDKs like Anthropic, OpenAI, and Gemini.

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

BranderUX sits between your users and your AI agent:

• 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, { 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",
          messages: params.messages,
          tools: params.tools.anthropic,
          max_tokens: params.max_tokens || 4000,
        });
        yield* anthropicStream(stream);
      }}
    />
  );
}