Quick Start

Get your first widget running in 5 minutes

Step 1: Install the Package

npm install @brander/sdk

Step 2: Get Your API Token

Step 3: Create Your AI Handler

Recommended: Use streaming with onQueryStream for the best user experience with progressive UI loading.

Use sseStream when your backend returns Server-Sent Events (SSE) with AG-UI events. This is the simplest integration for most use cases.

App.tsx

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 endpoint should return SSE with AG-UI events. See our Agent Examples page for backend implementations.

Step 4: Render the Component

App.tsx

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

function App() {
  return (
    <Brander
      betaKey="bux_your_token"        // Required
      projectId="your_project_id"     // Required
      onQueryStream={(params) =>      // Recommended
        sseStream("/api/agent", { params })
      }
      width="100%"
      height="600px"
    />
  );
}

That's it! Start your app and try: "Show me a dashboard"

Next Steps

Agent Examples: Full backend + frontend examples for LangGraph, CrewAI, Google ADK, Pydantic AI, Mastra, and AutoGen
Props Reference: Complete list of all available props
TypeScript Types: Full type definitions for type-safe development
BranderChatWidget: Floating chat widget for support use cases