Overview

Drop-in settings screens plus headless pricing and credit store components.

BuildBase ships with pre-built UI for the most common SaaS screens. One function call replaces months of UI work — fully translated, permission-gated, and responsive.

import { useSaaSAuth } from '@buildbase/sdk/react';

function SettingsButton() {
  const { openWorkspaceSettings } = useSaaSAuth();
  return <button onClick={() => openWorkspaceSettings()}>Settings</button>;
}

Settings screens

Call openWorkspaceSettings(section) to open any screen:

Section	What it shows
`profile`	User name, email, language, country, currency, timezone
`security`	Password, passkeys, and active sessions
`devices`	Signed-in devices — rename, sign out, or forget a device
`connected-agents`	Connected OAuth2 agents (e.g. MCP clients) — view and revoke access
`general`	Workspace name, icon, billing currency
`users`	Invite members, assign roles, seat usage, remove members
`subscription`	Current plan, upgrade/downgrade, cancel/resume, invoices
`usage`	Per-quota progress bars with consumption and overage
`credits`	Credit balance, transaction history
`features`	Toggle workspace feature flags
`notifications`	Notification preferences
`permissions`	Role permission configuration
`danger`	Delete workspace with confirmation

Every screen handles loading states, errors, permission checks, and translations automatically.

Page components

PricingPage

Headless pricing page: fetches plan data and handles checkout logic, you render the UI through a required render prop:

import { PricingPage } from '@buildbase/sdk/react';

function Pricing() {
  return (
    <PricingPage slug="main-pricing">
      {({ loading, error, plans, selectPlan }) => {
        if (loading) return <p>Loading plans...</p>;
        if (error) return <p>{error}</p>;

        return plans.map((plan) => (
          <button
            key={plan._id}
            onClick={() => selectPlan(plan._id, 'monthly', 'usd')}
          >
            Choose {plan.name}
          </button>
        ));
      }}
    </PricingPage>
  );
}

CreditStorePage

Headless credit store: fetches credit packages and handles purchase logic, you render the UI through a required render prop:

import { CreditStorePage } from '@buildbase/sdk/react';

function Credits() {
  return (
    <CreditStorePage>
      {({ loading, error, packages, selectPackage }) => {
        if (loading) return <p>Loading packages...</p>;
        if (error) return <p>{error}</p>;

        return packages.map((pkg) => (
          <button key={pkg._id} onClick={() => selectPackage(pkg._id)}>
            Buy {pkg.creditAmount} credits — {pkg.name}
          </button>
        ));
      }}
    </CreditStorePage>
  );
}

BetaForm

Beta signup form:

import { BetaForm } from '@buildbase/sdk/react';

function BetaPage() {
  return <BetaForm onSuccess={() => alert('You are on the list!')} />;
}

<ConnectedAgents /> lists the AI agents (OAuth2 clients, such as MCP clients) the signed-in user has authorized to access their account, with a per-row Disconnect action. It is the same screen openWorkspaceSettings('connected-agents') opens — render it directly to embed it in your own page. It is a drop-in component; all props are optional:

import { ConnectedAgents } from '@buildbase/sdk/react';

function AgentsPage() {
  return <ConnectedAgents />;
}

Set the mcp prop on SaaSOSProvider to add a Connect an agent guide to the screen — a copyable server URL, a paste-to-connect prompt for chat assistants, and setup snippets for the major AI apps (ChatGPT, Claude, Cursor, VS Code, Windsurf, Cline by default; override via mcp.clients):

import { SaaSOSProvider } from '@buildbase/sdk/react';

<SaaSOSProvider
  mcp={{
    url: 'https://app.example.com/api/mcp',
    name: 'Acme',
    docsUrl: 'https://docs.example.com/agents',
  }}
>

The guide is also exported standalone as <ConnectMcpGuide /> — render it anywhere (an onboarding step, a docs page). It reads the provider's mcp config by default, accepts an explicit config prop, and renders null when no MCP url is configured.

For a fully custom UI, useConnectedAgents() returns headless data and actions, session-authed and scoped to the signed-in user:

Field	Type	Description
`agents`	`IConnectedAgent[]`	Connected agents — `clientId`, `title`, granted `scope`, `lastGrantedAt`
`loading`	`boolean`	`true` while the initial list is loading
`error`	`string \| null`	Error message from the last list or revoke, if any
`revoking`	`string \| null`	The `clientId` currently being disconnected, or `null`
`refresh`	`() => Promise<void>`	Re-fetches the list
`revoke`	`(clientId) => Promise<void>`	Disconnects an agent, then optimistically drops it from the list

Inline openers

Open billing or credit UI from anywhere — buttons, banners, feature gates:

import { useSaaSAuth } from '@buildbase/sdk/react';

function UpgradePrompt() {
  const { openPlanPicker, openCreditStore } = useSaaSAuth();

  return (
    <div>
      <button onClick={() => openPlanPicker()}>Upgrade Plan</button>
      <button onClick={() => openCreditStore()}>Buy Credits</button>
    </div>
  );
}

Method	Opens
`openWorkspaceSettings(section?)`	Full settings dialog
`openPlanPicker()`	Plan selection UI
`openCreditStore()`	Credit purchase UI

Built-in capabilities

All pre-built UI includes:

Permission gating — actions hidden based on user's role
8 languages — translated via the locale prop on SaaSOSProvider
Responsive — adapts to mobile, tablet, and desktop
Loading and error states — skeleton loaders, inline errors, retry buttons

Next Steps

Billing — Subscription plans and checkout.
Credits — Credit-based billing.
Internationalization — Locale and RTL support.