Skip to main content
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

Build a working chat in about 50 lines

Live 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

  • 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

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

​
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. Typewise drops names you haven’t declared.

​
Next steps

Get started with React

Install the SDK and build your first chat

Plain HTML and JavaScript

Load the SDK from a script tag, no build step

Other frameworks

Vue, Svelte, Next.js, React Native, and Node

API reference

Every method, option, event, and error