# Browser SDK

The browser SDK is an npm package with no dependencies, and types included.
Create a publishable token and allow your page's origin as described in
[the widget guide](https://vatio.ai/docs/channels/widget).

```sh
npm install @vatio-ai/sdk
```

```js
import { Vatio } from "@vatio-ai/sdk";

const options = { workspace: "acme", token: "vatpub_REPLACE_ME" };
const chat = await Vatio.chat(options);
const messages = new Map();

function receive(message) {
  messages.set(message.id, message);
  // Render messages ordered by ID in your UI, escaping untrusted content.
}

chat.on("message", receive);
chat.on("typing", (typing) => { /* Update your typing indicator. */ });
chat.on("status", (status) => { /* Update your connection indicator. */ });
chat.on("error", (error) => console.error(error.code, error.message));

for (const message of await chat.history()) receive(message);
await chat.send("What does Acme do?");
// Call chat.close() when this view unmounts.
```

## Without a bundler

A classic script from Vatio's CDN leaves the SDK on `window.Vatio`:

```html
<script src="https://cdn.vatio.ai/v1/sdk.js"></script>
<script>
  Vatio.chat({ workspace: "acme", token: "vatpub_REPLACE_ME" }).then((chat) => {
    chat.on("message", (message) => { /* render it */ });
  });
</script>
```

It serves the version the widget ships with, so it moves when the widget does.
To choose when you upgrade, pin a version the ordinary way —
`"@vatio-ai/sdk": "^3.0.0"` from npm, or the module from any npm CDN:

```html
<script type="module">
  import { Vatio } from "https://cdn.jsdelivr.net/npm/@vatio-ai/sdk@3/+esm";
</script>
```

Next: the [reference](https://vatio.ai/docs/sdk/reference) for every method and option, and the
[limits](https://vatio.ai/docs/sdk/limits) every page hits.