Brander Component

The main React component for embedding BranderUX

Import

import Brander from '@brander/sdk';
// or
import { Brander } from '@brander/sdk';

Basic Usage

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

function App() {
  const handleQuery = async (params) => {
    // Your AI integration here
    const response = await fetch('/api/ai', {
      method: 'POST',
      body: JSON.stringify(params)
    });
    return response.json();
  };

  return (
    <Brander
      betaKey="bux_your_token"
      projectId="my-project-id"
      onQuery={handleQuery}
    />
  );
}

Props Overview

The Brander component accepts the following props:

Required Props:
  • betaKey - Your BranderUX API token
  • projectId - Your BranderUX project ID
  • onQuery - Your AI handler function
Optional Props:
  • width - Container width
  • height - Container height
  • className - CSS class name
  • style - Inline styles

Next Steps

Learn about each prop in detail in the Props Reference section.