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

# Use the Chat SDK with other frameworks and runtimes

> Connect the Chat SDK to Vue, Svelte, Next.js, React Native, Node, Bun, and Deno

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](#vue)**

> **[Svelte](#svelte)**

> **[Next.js and SSR](#nextjs-nuxt-sveltekit-remix-and-astro)**

> **[React Native](#react-native-and-expo)**

> **[Node, Bun, and Deno](#node-bun-and-deno)**

> **[Electron and workers](#electron-and-web-workers)**

For a full walkthrough, start with
[Getting started](https://docs.typewise.app/guides/channels/chat-sdk/getting-started.md). The snippets below
assume a shared client:

```typescript chat.ts theme={null}
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:

```typescript useChat.ts theme={null}
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:

```typescript chat-store.ts theme={null}
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:

```typescript chat.ts theme={null}
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](https://docs.typewise.app/guides/channels/chat-sdk/getting-started.md), and render with
`FlatList` and `TextInput`.

To upload a file from a picker, pass its contents as a blob:

```typescript theme={null}
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:

```typescript theme={null}
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.

> [!NOTE]
>
> 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` |


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.