Choosing Your Integration

Pick the path that fits your stack — most teams never need to build a server.

BranderUX renders branded, interactive UI from your AI agent's responses. There are a few ways to wire it up, and the right one depends on three things: where your AI runs, whether you have a React app, and how much you want to host yourself. This page helps you choose before you write code — the differences below are about effort and where the work lives, not about what the end user sees.

Do you need to build an AG-UI server?

Usually not. The SDK ships provider adapters — anthropicStream, openaiStream, geminiStream — that turn your AI provider's native stream into the AG-UI events BranderUX renders. You hand the adapter your provider's stream; it does the translation. No SSE endpoint, no protocol code:

App.tsx
import Brander, { anthropicStream } from "@brander/sdk";

<Brander
  betaKey="bux_your_token"
  projectId="your_project_id"
  onQueryStream={async function* (params) {
    const stream = anthropic.messages.stream({
      model: "claude-sonnet-4-20250514",
      system: params.system,        // BranderUX's instructions
      messages: params.messages,
      tools: params.tools?.anthropic,
      max_tokens: params.max_tokens ?? 4000,
    });
    yield* anthropicStream(stream); // <- AG-UI translation, no server needed
  }}
/>

The three ways to integrate

MethodUse whenFrontendServer work
SDK + client adapterYou have a React app and can call your AI provider from a route or the client.<Brander /> React componentNone — the SDK's provider adapter does the AG-UI translation for you.
SDK + sseStream (your own server)Your agent must run server-side (your own tools, data, keys, or a pre-existing agent).<Brander /> React componentOne SSE endpoint that emits AG-UI events (we ship a reference adapter).
MCP AppYou want branded UI inside Claude Desktop, Claude.ai, or ChatGPT — no frontend at all.None — renders inside the AI hostExpose the generate_screen tool from your MCP server.

One more choice: the UI mode

Independently of how you connect, you pick a UI generation mode — Fixed Screens or Flexible (A2UI). It changes who decides the layout: your PM/designer, or the AI guided by their screens as examples. It's a separate decision from the integration method, and you can change it later from the dashboard without touching code. The Fixed Screens vs Flexible guide walks through the tradeoffs.

Still not sure? Start here

  • React app, and you can call the AI provider directly? Use the SDK with a client adapter. No server to build.
  • React app, but the AI must stay server-side (private tools/data, or an existing agent)? Use the SDK with sseStream plus the reference server adapter.
  • Your users live inside Claude or ChatGPT (or you want no frontend at all)? Ship an MCP App with the generate_screen tool.