design system

Components

Primitives that match the production UI.

These are the building blocks shipped in components/ui/*. Class names in the live app use ui-button, ui-card, ui-badge — same tokens, same behavior.

Buttons

Variants
Sizes
States

Inputs

Text + label

Badges & status

Decision
alloweddeniedneeds approval
Lifecycle
activedisabledrevokedexpiredpending

Cards

Native agent

agent_ollie

3 active permissions · last verified 4m ago.

Verifications · 24h1,284

Default card with elevation. Use only on hero panels and dialogs.

Heads up. Action Gateway currently supports safe public web reads as the MVP.

Code block

install + verifyjs
import { BehalfID } from "@behalfid/sdk";

const behalf = new BehalfID({
  apiKey: process.env.BEHALFID_API_KEY
});

const decision = await behalf.verify({
  agentId: "agent_ollie",
  action:  "purchase",
  vendor:  "coachella.com",
  amount:  742
});

// fail closed
if (!decision.allowed) {
  throw new Error(decision.reason);
}

Table

ActionVendorDecisionRequestWhen
purchasecoachella.comdeniedreq_3xZ9q2026-05-09 18:42
access_datagmail.comallowedreq_3xZ9p2026-05-09 18:39
send_emailgmail.comneeds approvalreq_3xZ9o2026-05-09 18:36
access_datanotion.soallowedreq_3xZ9n2026-05-09 18:31

List row (console pattern)

agent_ollienative · 3 permissions · created 2026-04-21
activelast verified 4m
chat_claude_desktopconnected · provider claude.ai · 1 permission
disabledpaused 1h ago
zapier_homebrewconnected · provider zapier · 7 permissions
activelast verified 12s

Tabs

Empty state

No verifications yet.

Once an agent calls behalf.verify(…) with this key, decisions appear here.

Page header

Native agent

agent_ollie

Custom integration created on 2026-04-21. Currently allows purchase up to $500 on coachella.com and access_data on gmail.com.

Form (signup pattern)

Already have one? Sign in