🌌 OpenClaw Sidebar

AI assistant in your browser sidebar — powered by OpenClaw Gateway

Chat with your AI assistant while browsing any webpage. The sidebar automatically captures page context, selected text, and images — making your AI truly context-aware.

✨ Features

Feature	Description
💬 Sidebar Chat	Chat with AI without leaving your current page
🔍 Context-Aware	Automatically captures current page URL, title, and content
✂️ Text Selection	Select text on any page — AI sees what you selected
📄 Page Content	Extracts page body text for AI reference
🖼️ Image Support	Paste or drag-and-drop images into chat
⚡ Streaming	Real-time streaming output with smooth typing effect
📝 Markdown	Full Markdown rendering with code highlighting, tables, lists
🔄 SPA Support	Auto-updates context when navigating single-page apps

📦 Installation

From Source

git clone https://github.com/r266-tech/openclaw-sidebar.git
cd openclaw-sidebar
npm install
npm run build

Load in Browser

Browser	Steps
Edge	edge://extensions/ → Enable Developer mode → Load unpacked → Select dist/
Chrome	chrome://extensions/ → Enable Developer mode → Load unpacked → Select dist/

Note: Manifest V3 extension, compatible with Chromium-based browsers.

⚙️ Configuration

1. Gateway Connection

Right-click the extension icon → Options, then configure:

Setting	Example
Gateway URL	http://127.0.0.1:18789
Gateway Token	Your OpenClaw gateway token

2. Finding Your Token

# Method 1: Read config directly
cat ~/.openclaw/openclaw.json | grep -A2 '"auth"'

# Method 2: Use OpenClaw CLI
openclaw config get gateway.auth.token

3. Image Support (Optional, macOS)

Enable AI image recognition with a one-time setup:

./native-host/install-file-bridge.sh

Images are saved to ~/clawd/screenshots/sidebar/. To uninstall:

launchctl unload ~/Library/LaunchAgents/com.openclaw.file-bridge.plist

🎯 Usage

1. Click the extension icon or press Cmd+Shift+B (Mac) / Ctrl+Shift+B (Windows)
2. Type your message in the sidebar
3. Pro tip: Select text on the page before sending — AI will see your selection as context

🛠️ Development

# Development mode with hot reload
npm run dev

# Production build
npm run build

Tech Stack

• UI: Preact + TypeScript
• Styling: Tailwind CSS
• Build: Vite + @crxjs/vite-plugin
• Markdown: marked

Project Structure

src/
├── background/    # Service worker (extension lifecycle)
├── content/       # Content script (page interaction)
├── sidebar/       # Main sidebar UI (Preact components)
├── options/       # Extension options page
└── styles/        # Tailwind CSS configuration

🤝 Contributing

Contributions are welcome! See CONTRIBUTING.md for guidelines.

📄 License

MIT © 2026 r266-tech

---

Built with 🌌 for the OpenClaw ecosystem