Brander Component

Inline embeddable widget for AI-powered interfaces

Import

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

// Or with specific adapters
import Brander, { anthropicStream, openaiStream, geminiStream } from '@brander/sdk';

Basic Usage (Streaming)

The Brander component embeds directly into your page layout. Perfect for dashboard pages, admin panels, and inline AI experiences.

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

function App() {
  return (
    <div className="dashboard">
      <h1>Analytics Dashboard</h1>
      <Brander
        betaKey="bux_your_token"
        projectId="my-project-id"
        onQueryStream={(params) => sseStream("/api/agent", { params })}
        width="100%"
        height="600px"
      />
    </div>
  );
}

Direct Provider Integration

For direct SDK usage without a backend endpoint, use the provider adapters:

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

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

<Brander
  betaKey="bux_your_token"
  projectId="my-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);
  }}
/>
OpenAI
import Brander, { openaiStream } from "@brander/sdk";
import OpenAI from "openai";

const openai = new OpenAI({ apiKey: process.env.OPENAI_API_KEY });

<Brander
  betaKey="bux_your_token"
  projectId="my-project-id"
  onQueryStream={async function*(params) {
    const stream = await openai.chat.completions.create({
      model: "gpt-4o",
      messages: params.messages,
      tools: params.tools.openai,
      stream: true,
    });
    yield* openaiStream(stream);
  }}
/>

Props

Required Props
  • betaKey: string - Your BranderUX API token (format: bux_xxxxx)
  • projectId: string - Your BranderUX project ID
  • AI Handler (ONE of the following):
    • onQueryStream: StreamingCallback - Streaming handler (Recommended)
    • onQuery: OnQueryCallback - Non-streaming handler (Alternative)
Optional Props
Display:
  • variant?: "hybrid" | "classic" | "chat" - Display style (default: "classic")
  • defaultSidebarOpen?: boolean - Default sidebar state (default: true)
Styling:
  • width?: string - Container width (default: "100%")
  • height?: string - Container height (default: "600px")
  • className?: string - CSS class name
  • style?: React.CSSProperties - Inline styles

Conversation History

The widget includes a built-in chat history drawer that automatically manages multiple conversations. Users can create, switch, and delete conversations through the UI.

Full Configuration Example

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

function Dashboard() {
  return (
    <div className="app">
      <header>
        <h1>Sales Dashboard</h1>
      </header>

      <Brander
        // Required
        betaKey="bux_your_token"
        projectId="my-project-id"
        onQueryStream={(params) => sseStream("/api/agent", { params })}
        // Display
        variant="classic"
        defaultSidebarOpen={true}
        // Dimensions
        width="100%"
        height="700px"
        // Custom Styling
        className="branderux-widget"
        style={{ border: '1px solid #e0e0e0', borderRadius: '8px' }}
      />
    </div>
  );
}

Alternative: Non-Streaming

App.tsx
import Brander from '@brander/sdk';

function App() {
  return (
    <Brander
      betaKey="bux_your_token"
      projectId="my-project-id"
      onQuery={async (params) => {
        const response = await fetch('/api/ai', {
          method: 'POST',
          body: JSON.stringify(params)
        });
        return response.json();
      }}
    />
  );
}

Use Cases

  • Admin Dashboards: Embed in admin panels for AI-powered data exploration
  • Analytics Pages: Interactive data visualization and reporting
  • CRM Systems: AI-powered customer data management
  • E-commerce Back Office: Product and order management interfaces
  • SaaS Applications: User-facing data exploration tools