Install the SDK

This is the first step of Instrument your app. The examples use @schematichq/schematic-react, a client-side React library that provides hooks to check flags, read entitlements, and track events. Every other language and framework is listed in the SDK overview.

Install

$
npm install @schematichq/schematic-react
$
# or
$
yarn add @schematichq/schematic-react
$
# or
$
pnpm add @schematichq/schematic-react

Get a publishable key

Generate a publishable key from Settings, API Keys in the Schematic dashboard. Publishable keys look like api_... and are safe to use client-side.

Mount the provider

Similar to libraries like Clerk, SchematicProvider wraps your application and provides the Schematic client to everything below it.

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
);

Verify the connection

useSchematicFlag takes a flag key and returns whether the current context has access. Point it at any flag key that exists in your account and render both branches.

1
import { useSchematicFlag } from "@schematichq/schematic-react";
2
3
const MyComponent = () => {
4
  const isFeatureEnabled = useSchematicFlag("mechanical-keyboard");
5
6
  return isFeatureEnabled ? "Cherry MX Blues" : "1990's Logitech Keyboard";
7
};

Until you identify a company, this check resolves against no context and will read false for anything gated. That is expected at this point.

Next step

Identify users and companies so entitlement checks resolve against a real account, then return to Instrument your app for entitlement checks, usage events, and components.