Instrument your app

This is the code track. Every step here is code you write once: mount the SDK, tell Schematic which company is active, meter what that company consumes, and enforce what it is entitled to. The plans, features, and allowances themselves are configured in the dashboard and change without a deploy, so nothing below hard-codes a limit or a price.

If the vocabulary is unfamiliar, Concepts defines features, entitlements, companies, and flags. The examples below use @schematichq/schematic-react. The same five moves exist in every SDK, listed in the SDK overview.

What you need first

• A Schematic account and a publishable key from Settings, API Keys.
• At least one feature with a flag key. If nobody has created one yet, either run through Set up your first plan or click Generate Sample Data on the Quickstart page in the app.

1. Install and mount the SDK

$
npm install @schematichq/schematic-react

Wrap your application in SchematicProvider so every hook below has a client to talk to.

1
"use client";
2
3
import { SchematicProvider } from "@schematichq/schematic-react";
4
5
ReactDOM.render(
6
  <SchematicProvider publishableKey="your-publishable-key">
7
    <App />
8
  </SchematicProvider>,
9
  document.getElementById("root"),
10
);

Full install and configuration details, including the provider options, are on Install the SDK.

2. Identify the company and user

Schematic resolves entitlements per company, so nothing works until the SDK knows which company is signed in. Call identify once when your session is established.

1
import { useEffect } from "react";
2
import { useSchematicEvents } from "@schematichq/schematic-react";
3
4
const SchematicIdentity = () => {
5
  const { identify } = useSchematicEvents();
6
7
  useEffect(() => {
8
    identify({
9
      company: { keys: { "demo-id": "demo-company" } },
10
      keys: { "demo-id": "demo-user" },
11
    });
12
  }, [identify]);
13
14
  return null;
15
};

The keys are your identifiers, not ours. Use whatever you already have, such as your internal account ID or a Stripe customer ID. Identify users and companies covers traits, the server-side upsertCompany equivalent, and when to reach for each.

3. Check an entitlement

useSchematicEntitlement reads like a feature flag. Ask whether the current company has access and render accordingly.

1
import { useSchematicEntitlement } from "@schematichq/schematic-react";
2
3
const { value: isEnabled } = useSchematicEntitlement("new-boolean-feature");
4
5
<button disabled={!isEnabled} onClick={handleClick}>
6
  {isEnabled ? "Generate report" : "Upgrade to generate reports"}
7
</button>;

The string is the flag key set on the feature in the dashboard. Whether that flag resolves true depends on the company’s plan, any overrides, and any trial, and none of that logic lives in your codebase.

4. Send usage events

For metered features, the same hook returns the allowance and the usage so far, and useSchematicEvents gives you track to report each use.

1
import {
2
  useSchematicEntitlement,
3
  useSchematicEvents,
4
} from "@schematichq/schematic-react";
5
6
const {
7
  value: isEnabled,
8
  featureUsage,
9
  featureAllocation,
10
  featureUsageExceeded,
11
} = useSchematicEntitlement("new-event-feature");
12
13
const { track } = useSchematicEvents();
14
15
<>
16
  <button
17
    disabled={!isEnabled || featureUsageExceeded}
18
    onClick={() => track({ event: "new-event-feature-clicked" })}
19
  >
20
    {featureUsageExceeded ? "Monthly limit reached" : "Run it"}
21
  </button>
22
  <div>
23
    {featureUsage} / {featureAllocation}
24
  </div>
25
</>;

track is fire and forget on the client. Report the same event from your backend instead when the action can happen outside a browser session, or when you cannot trust the client to report honestly. See usage-based billing for how allowances, overages, and resets are configured.

5. Render a component

Components such as the Customer Portal and Checkout are configured in the dashboard and dropped into your app by ID. Because they let a customer change their own billing, rendering one needs a temporary access token scoped to a single company, and that token requires a secret key. Issue it on your server and never ship the secret key to the client.

1
import { SchematicClient } from "@schematichq/schematic-typescript-node";
2
3
const schematicClient = new SchematicClient({ apiKey });
4
5
const resp = await schematicClient.accesstokens.issueTemporaryAccessToken({
6
  lookup: {
7
    "demo-id": "demo-company",
8
  },
9
});
10
11
const accessToken = resp.data?.token;

Pass that token to the embed alongside the component ID. The Components docs cover mounting, theming, and the full set of templates.

Verify it worked

• The Companies tab lists the company you identified, with a last seen timestamp that updates on every identify or track call.
• The Events tab shows each event as it arrives, which is the fastest way to confirm your flag key and event name match what the dashboard expects.
• Flipping an entitlement in the dashboard changes what your app renders on the next check, with no deploy.

What’s next

Go deeper on the parts you touched:

• Key management — how company and user keys resolve, and how to pick them.
• SDKs — the same five moves in Go, Python, Node, Java, Ruby, and C#.
• Components — checkout, meters, and paywalls beyond the Customer Portal.
• Stripe integration — sync plans, subscriptions, and invoices both directions.
• Feature analytics — read the events you are now sending.