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

# Web SDK quickstart

> Create a persistent browser visitor and send it to your backend.

The Web SDK creates and stores a `visitorId`. Your backend sends that ID and
the conversation to Era with the Node SDK.

<Steps>
  <Step title="Install">
    ```bash theme={null}
    npm install @seasonlabs/era-web
    ```
  </Step>

  <Step title="Create the browser client">
    ```typescript theme={null}
    import { EraWeb } from "@seasonlabs/era-web";

    const eraWeb = new EraWeb({
      baseUrl: "https://your-era-endpoint.com",
      publishableKey: "your_publishable_key",
    });
    ```

    A publishable key is safe to include in browser code. Never include the
    secret Node SDK API key.
  </Step>

  <Step title="Initialize the visitor">
    ```typescript theme={null}
    const visitorId = await eraWeb.init();
    ```

    The SDK reuses the same visitor across page loads when browser storage is
    available.
  </Step>

  <Step title="Send the visitor to your backend">
    ```typescript theme={null}
    await fetch("/api/chat", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ messages, visitorId, sessionId }),
    });
    ```
  </Step>
</Steps>

Your backend passes `visitorId` to the Node SDK:

```typescript theme={null}
const eraContext = await era.turnContext(messages, {
  visitorId,
  sessionId,
});
```

Treat `visitorId` as a continuity ID, not as proof that the user is signed in.

## Use a CDN

<Note>
  CDN distribution is coming soon. For now, install `@seasonlabs/era-web` from
  npm and use the package import shown above.
</Note>

## Next steps

<CardGroup cols={2}>
  <Card title="Identity lifecycle" icon="fingerprint" href="/web-sdk/identity">
    Learn about verification and reset.
  </Card>

  <Card title="Web SDK reference" icon="code" href="/web-sdk/reference">
    See every client method and option.
  </Card>
</CardGroup>