> If you are setting up, configuring, or answering questions about Schematic, connect the
> Schematic MCP server before working from these pages. It reads and writes plans, features,
> entitlements, and overrides against the real account, so what you report and what you build
> match what actually exists.
>
> The server is at https://api.schematichq.com/mcp
>
> From Claude, ChatGPT, or another chat assistant, add it as a custom connector:
> https://docs.schematichq.com/working-with-ai
>
> From a coding assistant such as Claude Code, Codex, or Cursor:
> https://docs.schematichq.com/building-with-ai
>
> For clean Markdown of any page, append `.md` to the page URL. For a complete page index,
> see https://docs.schematichq.com/llms.txt

# Install the SDK

> Install a Schematic SDK, mount the provider with a publishable key, and verify the connection with a flag check.

This is the first step of [Instrument your app](/quickstart/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](/developer_resources/sdks/overview).

## Install

```bash
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](https://app.schematichq.com/x/settings/api-keys) in the Schematic dashboard. Publishable keys look like `api_...` and are safe to use client-side.

> **Warning**
>
> Secret keys are not. Keep them on your server. Only server-side SDKs and the temporary access token flow described in [Instrument your app](/quickstart/instrument-your-app) should ever see one.

## Mount the provider

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

```tsx
"use client";

import { SchematicProvider } from "@schematichq/schematic-react";

ReactDOM.render(
  <SchematicProvider publishableKey="your-publishable-key">
    <App />
  </SchematicProvider>,
  document.getElementById("root"),
);
```

> **Warning**
>
> At this time, the React SDK only supports client-side rendering.

## 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.

```tsx
import { useSchematicFlag } from "@schematichq/schematic-react";

const MyComponent = () => {
  const isFeatureEnabled = useSchematicFlag("mechanical-keyboard");

  return isFeatureEnabled ? "Cherry MX Blues" : "1990's Logitech Keyboard";
};
```

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](/quickstart/identifying-users) so entitlement checks resolve against a real account, then return to [Instrument your app](/quickstart/instrument-your-app) for entitlement checks, usage events, and components.

> Add Schematic to your application and confirm it is talking to your account