> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://docs.usebridge.com/documentation/getting-started/eligibility-sdk/react/setup/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://docs.usebridge.com/_mcp/server.

## Configuration

Create a *Publishable API Key* from your [Bridge Dashboard](https://app.usebridge.xyz/developers).
These are not masked in the UI, and have a green check next to them.

> **Error**
>
> BE CAREFUL - Do not use a secret API key in your frontend!

## BridgeSdkProvider

This component must be rendered as a parent to any other Bridge components or hooks.

```typescript
interface BridgeSdkConfig {
  publishableKey: string
  logger?: Logger
  environment?: "production" | "sandbox" | string
  analyticsHandler?: AnalyticsHandler
}
```

In your `layout.tsx`, wrap children in `BridgeSdkProvider`:

```typescript
const BridgeLayoutProvider = ({ children }) => {
  return (
    <BridgeSdkProvider config={{ publishableKey: "pk_..." }}>
      {children}
    </BridgeSdkProvider>
  )
}
```

To use sandbox, set `environment: "sandbox"`.

To attach your own logger, implement the `Logger` interface or use `consoleLogger` (exported from the SDK package).

---

#### [Building Forms](./building-forms)

Payer autocomplete and eligibility input hooks