Chat SDK examples

These examples show experiences the bubble widget can’t offer. They’re open source under the MIT license, and each one runs against your own client ID: open a demo and paste it into the Connect Typewise panel.

Storefront concierge

The conversation sits in a product page’s buy column and knows the selected finish. ⌘K opens it as a command palette.Reactassistant-ui

Docs sidebar

A docked help panel that knows which docs section the reader is on and suggests questions for it.TypeScriptNo framework

Proactive prompts

A checkout that offers help on dwell time, scroll depth, exit intent, and an idle cart, then sends the cart as context.ReactuseSyncExternalStore

Script tag

One HTML file that loads the SDK from a CDN.HTMLNo build step

Where to look

The source is on GitHub. These files show the core patterns:

examples

proactive-prompts/src

useChat.ts

sidebar/src

quick-actions.ts

storefront-concierge/src

main.tsx

script-tag

index.html

File	Shows how to
`useChat.ts`	Connect React with `useSyncExternalStore`
`quick-actions.ts`	Parse and render quick actions
`main.tsx`	Send page context as it changes
`index.html`	Build a chat without a bundler

Run them locally

Clone and install

Requires Node 20 or later.

git clone https://github.com/Typewise/chat-sdk-examples.git
cd chat-sdk-examples
npm install

Start an example

npm run dev:storefront   # or dev:sidebar, dev:proactive, dev:script-tag

Connect your chat

Enter your client ID in the Connect Typewise panel in the bottom left. You can also pass it in the URL (?clientId=…) or set VITE_TW_CLIENT_ID in .env.local inside the example’s folder.If your chat has a Domain allowlist, add localhost to it.

Migrate to Typewise

Channels

Integrations

Best practices

Storefront concierge

Docs sidebar

Proactive prompts

Script tag

Where to look

Run them locally

Storefront concierge

Docs sidebar

Proactive prompts

Script tag

​Where to look

​Run them locally

Where to look

Run them locally