Introduction

Transform AI agent responses into interactive interfaces

What is @brander/sdk?

BranderUX SDK is an embeddable React component that transforms AI responses into beautiful, interactive user interfaces. Instead of showing plain text responses, your users get fully interactive dashboards, tables, charts, and forms — 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
      betaKey="bux_your_token"
      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
      betaKey="bux_your_token"
      projectId="your_project_id"
      onQueryStream={async function*(params) {
        const stream = anthropic.messages.stream({
          model: "claude-sonnet-4-20250514",
          messages: params.messages,
          tools: params.tools.anthropic,
          max_tokens: params.max_tokens || 4000,
        });
        yield* anthropicStream(stream);
      }}
    />
  );
}