[CHI 2026 — Full Paper] Facilitating Proactive and Reactive Guidance for Decision Making on the Web: A Design Probe with WebSeek Yanwei Huang, Arpit Narechania · arXiv:2601.15100
WebSeek is a Chrome extension that helps users discover, extract, and analyze information directly on webpages. It provides an interactive canvas where users can build tables, lists, and visualizations from live web content — with an AI layer that offers both proactive suggestions (the system notices patterns and proposes next steps) and reactive assistance (users ask questions and request transformations in natural language).
An exploratory study with 15 participants revealed diverse web-analysis strategies and highlighted user preferences for transparency and control in human–AI collaboration.
- AI-assisted data extraction — select a webpage element and let the agent extract structured rows
- Spreadsheet-style table editor — resize columns/rows, add computed columns, merge tables
- Vega-Lite visualization editor — generate and refine charts backed by table data
- Proactive AI suggestions — the extension watches your canvas and suggests next steps automatically
- Export — tables as XLSX, visualizations as SVG / PNG / JPG
- Snapshots — save and restore the full canvas state via the backend
Chrome Extension (WXT + React + TypeScript)
└─ Sidepanel UI ─── REST / WebSocket ───▶ FastAPI Backend (Python)
└─ Google ADK agents
└─ OpenRouter LLM
- Node.js ≥ 18
- Chrome ≥ 114 (for Side Panel API)
- The WebSeek backend running locally or on a server
git clone https://github.com/datavisards/WebSeek.git
cd WebSeek
npm installcp .env.example .envEdit .env:
| Variable | Description |
|---|---|
WXT_OPENROUTER_KEY |
Your OpenRouter API key |
VITE_BACKEND_URL |
URL of the WebSeek backend, e.g. http://localhost:8000 |
Security:
.envis gitignored. Never commit it.
Users can also enter their API key and backend URL at runtime through the extension's Settings panel (⚙ icon), without rebuilding.
npm run dev- Open
chrome://extensions - Enable Developer mode
- Click Load unpacked → select
.output/chrome-mv3-dev
npm run buildThe production build is in .output/chrome-mv3/. Zip it for Web Store submission:
cd .output && zip -r webseek.zip chrome-mv3/webseek/
├── entrypoints/
│ ├── background/ # Service worker
│ ├── content/ # Content script (page interaction)
│ ├── popup/ # Toolbar popup
│ └── sidepanel/ # Main UI
│ ├── components/ # React components
│ ├── apis.ts # Backend REST calls
│ ├── macro-tools.ts # Tool definitions for proactive AI
│ ├── macro-tool-executor.ts # Client-side tool executor
│ ├── proactive-service-enhanced.ts # Proactive AI orchestration
│ ├── trigger-engine.ts # Rules engine for AI suggestions
│ └── prompts.ts # LLM prompt templates
├── docs/ # GitHub Pages tutorial
├── public/ # Static assets
├── manifest.json # Extension manifest (MV3)
├── wxt.config.ts # WXT build config
└── .env.example # Environment variable template
- The
WXT_OPENROUTER_KEYis embedded in the extension bundle at build time. For a publicly distributed extension, route all LLM calls through your own backend so the key is never shipped to end users. - For HTTPS pages, the backend must also be HTTPS (or use
http://localhostfor local development only).
If you use WebSeek in your research, please cite:
@inproceedings{huang2026webseek,
title = {Facilitating Proactive and Reactive Guidance for Decision Making on the Web: A Design Probe with WebSeek},
author = {Huang, Yanwei and Narechania, Arpit},
booktitle = {Proceedings of the 2026 CHI Conference on Human Factors in Computing Systems},
year = {2026},
publisher = {ACM},
url = {https://arxiv.org/abs/2601.15100}
}MIT