#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.

npm install @vatio-ai/sdk

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:

<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:

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

Next: the reference for every method and option, and the limits every page hits.