> ## Documentation Index
> Fetch the complete documentation index at: https://developer.suki.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Platform Client & Provider

> Headless Web SDK Client and Provider reference

The Suki Web SDK provides **PlatformClient** and **PlatformClientProvider** to help you integrate Suki Headless Web SDK functionality into your application.

**PlatformClient**

The `PlatformClient` acts as the shared runtime object for the SDK within your app. You should create a single instance of this object and reuse it throughout your application to ensure consistency.

**PlatformClientProvider**

The `PlatformClientProvider` is a React wrapper that makes your PlatformClient instance available to all child components.
This allows you to use Suki hooks, such as **`useAuth`**, **`useAmbient`**, and **`useAmbientSession`**, to build your integration quickly.

## PlatformClient

### Import

Before you can use the `PlatformClient`, you need to import it into your application.

```tsx React theme={"theme":{"light":"github-dark","dark":"material-theme-darker"}}
import { PlatformClient } from '@suki-sdk/platform-react';

function App() {
  return <PlatformClientProvider client={platformClient}>
<YourApp />
</PlatformClientProvider>;
}
```

### Creating an instance

Create the client **once** for your app (for example at module scope or outside your root component) so it is not recreated on every render.

```tsx React  theme={"theme":{"light":"github-dark","dark":"material-theme-darker"}}
const client = new PlatformClient({
  env: "staging",
  enableDebug: true,
  logLevel: "error"
});
```

<Note>
  The object you pass to `new PlatformClient({ ... })` sets how that client behaves for your app.
</Note>

### Configuration

These are the settings you pass when you call `new PlatformClient({ ... })` in your application.

<ResponseField name="env" type="string">
  The Suki environment the client targets. Examples in this documentation use **`"staging"`**.
</ResponseField>

<ResponseField name="enableDebug" type="boolean">
  When **`true`**, the client runs in a debug-oriented mode so you can troubleshoot during development. Use **`false`** when you do not want that behavior in production.
</ResponseField>

<ResponseField name="logLevel" type="string">
  The logging level for the client. Examples in this documentation use **`"error"`**.
</ResponseField>

## PlatformClientProvider

Before you can use the `PlatformClientProvider`, you need to import it into your application.

<CodeGroup>
  ```tsx Import theme={"theme":{"light":"github-dark","dark":"material-theme-darker"}}
  import { PlatformClientProvider } from '@suki-sdk/platform-react';
  ```

  ```tsx Wrap your app theme={"theme":{"light":"github-dark","dark":"material-theme-darker"}}
  import { PlatformClientProvider } from '@suki-sdk/platform-react';

  function App() {
    return (
      <PlatformClientProvider client={platformClient}>
        <YourApp />
      </PlatformClientProvider>
    );
  }
  ```
</CodeGroup>

### Wrap your app

Create a single **`PlatformClient`** instance and wrap your application with **`PlatformClientProvider`**. Hooks such as `useAuth`, `useAmbient`, and `useAmbientSession` **must** run under this provider.

<Note>
  To use Headless Web SDK, you must wrap your app with **`PlatformClientProvider`** above any component that calls Headless Web SDK hooks. Those hooks read the shared **`PlatformClient`** from React context that the provider supplies.

  Refer to the [Quickstart](/headless-web-sdk/quickstart) for a full component tree and **`useAuth`** example.
</Note>

## Next steps

<CardGroup cols={2}>
  <Card title="Quickstart" icon="rocket" href="/headless-web-sdk/quickstart" arrow={true}>
    Install, provider, `useAuth`, and ambient flow
  </Card>

  <Card title="Types Overview" icon="brackets" href="/headless-web-sdk/api-reference/types" arrow={true}>
    Index of all Headless Web SDK type reference pages
  </Card>

  <Card title="Authentication Hook" icon="key" href="/headless-web-sdk/guides/hooks/auth-hook" arrow={true}>
    `useAuth` configuration and behavior
  </Card>

  <Card title="UseAuth Parameters" icon="brackets" href="/headless-web-sdk/api-reference/types/use-auth-params" arrow={true}>
    TypeScript shape for `useAuth` options
  </Card>
</CardGroup>