Widget

Embed a live balance display and self-serve top-up button directly in your product.

Installation

npm install agensor

The widget exports are in agensor/react — requires React 17+.

Basic usage

import { AgensorPortal } from 'agensor/react'

export function CreditWidget({ userId }: { userId: string }) {
  return (
    <AgensorPortal
      apiUrl="https://api.agensor.dev"
      publishableKey={process.env.NEXT_PUBLIC_AGENSOR_PK!}
      userId={userId}
      topupUrl={`/checkout?user=${userId}`}  // your Stripe checkout
    />
  )
}

Theming

Pass a theme prop to match your product's brand.

// Built-in presets
<AgensorPortal theme="dark" ... />
<AgensorPortal theme="light" ... />  // default

// Custom tokens
<AgensorPortal
  theme={{ accent: '#8b5cf6', bg: '#0f0f23', text: '#fff', muted: '#a78bfa' }}
  ...
/>

CSS custom properties you can override directly on the element:
--agsr-accent --agsr-bg --agsr-text --agsr-muted --agsr-border

Props

Prop	Type	Description
apiUrl	string	Base URL of the Agensor API (https://api.agensor.dev)
publishableKey	string	Your pk_… key from app.agensor.dev
userId	string	The end-user identifier to show balance for
topupUrl	string?	Link to your Stripe checkout — if omitted, top-up button is hidden
theme	'light' \| 'dark' \| object?	Visual theme (see Theming section)

← SDK Reference Pricing →