Use the Chat SDK with other frameworks and runtimes

The Chat SDK is plain TypeScript, so it works with any framework. The pattern is always the same: create one client, subscribe to its state, and call resume() once.

Vue

Svelte

Next.js and SSR

React Native

Node, Bun, and Deno

Electron and workers

For a full walkthrough, start with Getting started. The snippets below assume a shared client:

chat.ts

import { createClient } from "@typewise/chat-sdk";

export const chat = createClient({ clientId: "YOUR_CLIENT_ID" });

Vue

Wrap the state in a shallowRef. Each snapshot is immutable, so a shallow ref is enough:

useChat.ts

import { shallowRef, onMounted, onScopeDispose } from "vue";
import { chat } from "./chat";

export function useChat() {
  const state = shallowRef(chat.getState());
  onScopeDispose(chat.subscribe((next) => (state.value = next)));
  onMounted(() => {
    chat.resume().catch((error) => console.warn("[typewise]", error));
  });
  return state;
}

Svelte

subscribe already matches the store contract:

chat-store.ts

import { readable } from "svelte/store";
import { chat } from "./chat";

export const chatState = readable(chat.getState(), (set) =>
  chat.subscribe(set),
);

Call chat.resume() once, for example in onMount of your root component.

Next.js, Nuxt, SvelteKit, Remix, and Astro

Nothing touches window or storage at import time, and createClient does no work until you call a method. You can import the client on the server and call resume() and sendMessage() from client-side code only. In Next.js, mark components that use the chat with "use client".

React Native and Expo

There’s no localStorage, so pass AsyncStorage to keep the visitor’s session across app launches:

chat.ts

import AsyncStorage from "@react-native-async-storage/async-storage";
import { createClient } from "@typewise/chat-sdk";

export const chat = createClient({
  clientId: "YOUR_CLIENT_ID",
  storage: AsyncStorage,
});

Use the same useSyncExternalStore hook as in Getting started, and render with FlatList and TextInput. To upload a file from a picker, pass its contents as a blob:

const data = await (await fetch(uri)).blob();
const [upload] = await chat.uploadFiles([{ name, type, data }]);

if (upload.ok) {
  await chat.sendMessage({ text: "", attachments: [upload.attachment] });
}

Node, Bun, and Deno

On a server, keep the session in memory. Each client is one visitor, so create one client per end user:

import { createClient, createMemoryStorage } from "@typewise/chat-sdk";

const chat = createClient({
  clientId: "YOUR_CLIENT_ID",
  storage: createMemoryStorage(),
});

chat.on("message", (message) => {
  if (message.role !== "user") console.log(`${message.role}: ${message.text}`);
});

await chat.sendMessage("Hello from a terminal");

In Deno, import npm:@typewise/chat-sdk. Call chat.destroy() when the user’s session ends, to close the real-time connection.

Calls from a server arrive without a browser Origin header, so the Domain allowlist doesn’t apply to them.

Electron and Web Workers

Both work without changes. In a Web Worker, there’s no localStorage, so the SDK keeps the session in memory unless you pass your own storage adapter.

Compatibility

Target	Support
Browsers	Any browser with ES2020, `fetch`, and WebSocket: Chrome and Edge 80+, Firefox 74+, Safari 14+
Bundlers	Vite, webpack 5, Rollup, esbuild, Parcel, Turbopack, and Metro. ESM and CommonJS both ship
Older tooling	webpack 4 and other tools without `exports` support use `main` and `module`
Runtimes	Node 18+, Bun, Deno, Electron, Web Workers, React Native, and Expo
TypeScript	Types are bundled and resolve under `node10`, `node16`, and `bundler`

Migrate to Typewise

Channels

Integrations

Best practices

Use the Chat SDK with other frameworks and runtimes

Vue

Svelte

Next.js and SSR

React Native

Node, Bun, and Deno

Electron and workers

Vue

Svelte

Next.js, Nuxt, SvelteKit, Remix, and Astro

React Native and Expo

Node, Bun, and Deno

Electron and Web Workers

Compatibility

Vue

Svelte

Next.js and SSR

React Native

Node, Bun, and Deno

Electron and workers

​Vue

​Svelte

​Next.js, Nuxt, SvelteKit, Remix, and Astro

​React Native and Expo

​Node, Bun, and Deno

​Electron and Web Workers

​Compatibility

Vue

Svelte

Next.js, Nuxt, SvelteKit, Remix, and Astro

React Native and Expo

Node, Bun, and Deno

Electron and Web Workers

Compatibility