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

> Open-source chat experiences built with the Chat SDK that you can try live and copy into your project

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](https://typewise.github.io/chat-sdk-examples/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](https://typewise.github.io/chat-sdk-examples/sidebar/)**
>
> A docked help panel that knows which docs section the reader is on and
> suggests questions for it.
>
> TypeScriptNo framework

> **[Proactive prompts](https://typewise.github.io/chat-sdk-examples/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](https://typewise.github.io/chat-sdk-examples/script-tag/)**
>
> One HTML file that loads the SDK from a CDN.
>
> HTMLNo build step

## Where to look

The source is on [GitHub](https://github.com/Typewise/chat-sdk-examples). 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`](https://github.com/Typewise/chat-sdk-examples/blob/main/examples/proactive-prompts/src/useChat.ts) | Connect React with `useSyncExternalStore` |
| [`quick-actions.ts`](https://github.com/Typewise/chat-sdk-examples/blob/main/examples/sidebar/src/quick-actions.ts) | Parse and render quick actions |
| [`main.tsx`](https://github.com/Typewise/chat-sdk-examples/blob/main/examples/storefront-concierge/src/main.tsx) | Send page context as it changes |
| [`index.html`](https://github.com/Typewise/chat-sdk-examples/blob/main/examples/script-tag/index.html) | Build a chat without a bundler |

## Run them locally

**1. Clone and install**

Requires Node 20 or later.

```bash theme={null}
git clone https://github.com/Typewise/chat-sdk-examples.git
cd chat-sdk-examples
npm install
```

**2. Start an example**

```bash theme={null}
npm run dev:storefront   # or dev:sidebar, dev:proactive, dev:script-tag
```

**3. 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.


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