e30e75b5d4
Changesets / Create Version PR (push) Has been cancelled
Deploy Shadcn Registry / Deploy Production (push) Has been cancelled
Template Metrics / LOC + Bundle Size (push) Has been cancelled
Code Quality / Oxlint + Oxfmt (push) Has been cancelled
Code Quality / Template Sync (push) Has been cancelled
Code Quality / Build Changed Packages (push) Has been cancelled
Code Quality / Test Changed Packages (push) Has been cancelled
Deploy Expo Example / Deploy Production (push) Has been cancelled
Deploy Ink Example / Deploy Production (push) Has been cancelled
Python Tests / pytest (assistant-stream, 3.10) (push) Has been cancelled
Python Tests / pytest (assistant-stream, 3.12) (push) Has been cancelled
Python Tests / pytest (assistant-ui-sync-server-api, 3.10) (push) Has been cancelled
Python Tests / pytest (assistant-ui-sync-server-api, 3.12) (push) Has been cancelled
with-browser-extension
A Chrome extension that hosts an assistant-ui chat interface in a browser side panel.
Uses useExternalStoreRuntime with mock messages to demonstrate the UI without a backend. Swap in your own runtime (Cloud, AI SDK, etc.) for real AI responses.
Getting Started
-
Install dependencies from the monorepo root:
pnpm install -
Build the extension:
cd examples/with-browser-extension pnpm build -
Load into Chrome:
- Open
chrome://extensions - Enable Developer mode (top right)
- Click Load unpacked
- Select the
dist/folder
- Open
-
Click the extension icon in the toolbar. The side panel opens with the chat UI.
Development
pnpm dev
This watches for TypeScript and CSS changes. After each rebuild, reload the extension in chrome://extensions (click the refresh icon on the extension card).
Connecting a Real Backend
Replace useMockStore() in sidepanel.tsx with a real runtime. Since the extension runs client-side, you'll need to point to an external API endpoint rather than a local route handler.