wehub-resource-sync
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
42 lines
1.1 KiB
Markdown
42 lines
1.1 KiB
Markdown
# 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
|
|
|
|
1. Install dependencies from the monorepo root:
|
|
|
|
```bash
|
|
pnpm install
|
|
```
|
|
|
|
2. Build the extension:
|
|
|
|
```bash
|
|
cd examples/with-browser-extension
|
|
pnpm build
|
|
```
|
|
|
|
3. Load into Chrome:
|
|
|
|
- Open `chrome://extensions`
|
|
- Enable **Developer mode** (top right)
|
|
- Click **Load unpacked**
|
|
- Select the `dist/` folder
|
|
|
|
4. Click the extension icon in the toolbar. The side panel opens with the chat UI.
|
|
|
|
## Development
|
|
|
|
```bash
|
|
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.
|