> 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

# Add to Your App

> Quickly set up pre-built, embeddable components in your application.

Components are simple to set up and maintain. Once you've integrated a component into your application, it will reflect up-to-date data for the given company that is accessing it in your application.

To set up components, you'll need to do two things:

1. Install the required libraries
2. Generate a short-lived access token to make requests on behalf of a given company
3. Embed the SchematicEmbed component in your React frontend using a Component ID from Schematic

All steps are covered below.

### 1. Install the required libraries

There are two libraries you'll need to install:

```sh
npm install @schematichq/schematic-components @stripe/react-stripe-js

yarn add @schematichq/schematic-components @stripe/react-stripe-js

pnp add @schematichq/schematic-components @stripe/react-stripe-js
```

> **Note**
>
> The Stripe library is required for the Schematic checkout components. If you *know* you won't be using checkout components, you can omit it.

### 2. Set up your server for token exchange

Schematic components use short-lived, company-scoped temporary access tokens to make requests on behalf of a company. You'll need to issue these from your server, using a secret access token.

If you haven't already done so, start by installing the Schematic developer SDK of your choosing. Then, you can implement the token exchange for a specific company using its [keys](/concepts#keys):

#### Node.js

```typescript
// Initialize Schematic SDK
import { SchematicClient } from "@schematichq/schematic-typescript-node";
const apiKey = process.env.SCHEMATIC_API_KEY;
const client = new SchematicClient({ apiKey });

// Get a temporary access token
export async function getTemporaryAccessToken(companyId: string) {
  const resp = await client.accesstokens.issueTemporaryAccessToken({
    lookup: { companyId }, // The lookup will vary depending on how you have configured your company keys
  });

  return resp.data?.token;
}
```

#### Go

```go
import (
  schematicgo "github.com/schematichq/schematic-go"
  schematicClient "github.com/schematichq/schematic-go/client"
)

func GetTemporaryAccessToken(ctx context.Context, client schematicClient.SchematicClient, companyId string) (string, error) {
	resp, _, err := client.Accesstokens.IssueTemporaryAccessToken(ctx, schematicgo.IssueTemporaryAccessTokenRequestBody{
		Lookup: map[string]string{
			"company_id": companyId,
		},
		ResourceType: "company",
	})
	if err != nil {
		return "", err
	}

	return resp.Data.Token, nil
}
```

Temporary access tokens are valid for 15 minutes.

### 3. Use the SchematicEmbed component in your React frontend application

Once you've issued a temporary access token and provided it to your frontend React application, you can simply pass it to the SchematicEmbed component along with your Component ID to render it:

```typescript
import { EmbedProvider, SchematicEmbed } from "@schematichq/schematic-components";

export default function CustomerPortal({ accessToken }: { accessToken: string }) {
  const componentId = process.env.NEXT_PUBLIC_SCHEMATIC_COMPONENT_ID;
  if (!componentId) {
    return <NotFound />;
  }

  return (
    <EmbedProvider>
      <SchematicEmbed accessToken={accessToken} id={componentId} />
    </EmbedProvider>
  );
}
```