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

# Chat SDK overview

> Run Typewise AI Agent conversations in your own interface with the headless Chat SDK

The Typewise Chat SDK (`@typewise/chat-sdk`) gives you everything the chat
widget does, without the UI. You decide how the conversation looks and where it
lives: a product page, a help sidebar, a command palette, a native app, or a
terminal.

> **[Get started with React](https://docs.typewise.app/guides/channels/chat-sdk/getting-started.md)**
>
> Build a working chat in about 50 lines

> **[Live examples](https://typewise.github.io/chat-sdk-examples/)**
>
> Try a storefront concierge, a docs sidebar, and more

## What the SDK handles

You write the rendering. The SDK takes care of the rest:

> **Sessions**
>
> A returning visitor picks up their open conversation

> **Real-time replies**
>
> AI Agent and Human Agent messages, with typing indicators

> **Delivery state**
>
> Messages still sending or failed, without duplicates

> **Context and identity**
>
> Page context variables and signed, verified values

> **Attachments**
>
> Uploads, downloads, and upload progress

> **Surveys and verification**
>
> Satisfaction ratings and email verification codes

It has one runtime dependency and works in browsers, Node, React Native,
Electron, Web Workers, Bun, and Deno.

## Choose between the widget and the SDK

> **[Use the chat widget](https://docs.typewise.app/guides/channels/chat-widget/javascript-api.md)**
>
> * Ready-made bubble and full-page chat
> * One script tag and `window.twConfig`
> * Branding options in the platform
> * `window.twSdk` to set variables and open the chat

> **[Use the Chat SDK](https://docs.typewise.app/guides/channels/chat-sdk/getting-started.md)**
>
> * You build the UI with your own components
> * `npm install` or a script tag
> * Runs in any JavaScript runtime, not only websites
> * Full state and events, so chat and page react to each other

If the bubble fits your site, use the widget. Use the Chat SDK when the
conversation should be part of your own interface.

## How it works

**1. Create one client**

`createClient({clientId})` returns a client for one visitor. It does no
network work until you call a method, so it's safe during
server-side rendering.

**2. Subscribe to state**

`chat.subscribe(listener)` calls you after every change with an immutable
snapshot: messages, activity, connection, and the open conversation. Render
from that snapshot.

**3. Resume and send**

`chat.resume()` restores the visitor's open conversation, if any.
`chat.sendMessage(text)` starts a conversation when none is open.

```javascript theme={null}
import { createClient } from "@typewise/chat-sdk";

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

chat.subscribe((state) => render(state.messages, state.activity));

await chat.resume();
await chat.sendMessage("Where is my order?");
```

## Prerequisites

* Your **client ID**. Find it under **Behavior → Channels → Chat →
  Installation**, as `clientId` in the Quick start snippet.
* If your chat has a **Domain allowlist**, add every origin that runs the SDK,
  including `localhost` for development. While the list is empty, every origin
  is allowed.
* Declare the context variables you plan to send in
  [Context Variables](https://docs.typewise.app/documentation/settings/context-variables.md). Typewise drops
  names you haven't declared.

## Next steps

> **[Get started with React](https://docs.typewise.app/guides/channels/chat-sdk/getting-started.md)**
>
> Install the SDK and build your first chat

> **[Plain HTML and JavaScript](https://docs.typewise.app/guides/channels/chat-sdk/html.md)**
>
> Load the SDK from a script tag, no build step

> **[Other frameworks](https://docs.typewise.app/guides/channels/chat-sdk/other-frameworks.md)**
>
> Vue, Svelte, Next.js, React Native, and Node

> **[API reference](https://docs.typewise.app/guides/channels/chat-sdk/api-reference.md)**
>
> Every method, option, event, and error


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