An agent in the browser
100x Agent Extension
V1 agent extension prototype — chat, workflows, data explorer, and app generation in one shell.
01 / At a glance
A browser agent with room to work.
Full agent extension shell — chat, workflows, data explorer, app generation, and onboarding in one React workspace.
- Core surfaces
- 8
- React components
- 167
- Design system UI
- 40+
02 / The work
What this project includes
Multi-mode AI chat with streaming responses, attachments, and thread-scoped file tracking
Visual workflow builder with browser simulation and script compilation
Data explorer — TanStack Table with AI filters, grouping, and D3/Perspective charts
Natural-language app generation with sandboxed React/JSX preview
Quick actions and interest-based personalization from onboarding tags
100X-UI design system — 40+ components, semantic tokens, light/dark themes
03 / In the product
Selected screens
01 / 03
Agent workspace
Chat, home dashboard, and workflow automation surfaces.
02 / 03
Data & app generation
Interactive tables and sandboxed React output from natural language.
03 / 03
Design system
100X-UI component catalog with semantic tokens and theme switching.
04 / Behind the build
Design and engineering notes
- Mode-aware shell — chat, build, data, and app surfaces share navigation without context loss
- Semantic design tokens synced to the 100X-UI Figma system for light/dark parity
- Miller's Law in UI — dropdowns capped at seven items to reduce cognitive load
- Built with Cursor in two weeks as a design-engineering reference for 100x product direction
Tools and stack
Role Design Engineer
Explore the project