Clientsight

• 

  home page

• 

  eye moving setup

Inspiration

We were inspired by how tedious and slow traditional web editing can be, especially when trying to optimize interfaces for real user attention. Most analytics tools only show where users click, not what they see or think about. We wondered: What if creators could interact with their websites as naturally as looking and speaking—instantly making changes and understanding user engagement through their own eyes?

What it does

Our platform captures your eye movement in real time via webcam, letting you lock onto any UI element simply by looking at it. With a spoken or typed natural language command, you can make instant edits to that area—whether it’s changing colors, resizing, swapping out text, or more. Live engagement analytics and gaze heatmaps reveal where users spend time, skip over elements, or get confused—so you know exactly how to improve your design.

How we built it

Built on top of React and TypeScript, we used WebGazer.js for robust, privacy-first eye-tracking that works right in the browser (no extra hardware). We engineered a calibration flow for accuracy and then connected NLP parsing (natural language processing) to a validation layer built on Zod, so commands are safely and reliably mapped to CSS/UI changes. Instant preview and undo are handled in the frontend, with heatmaps generated from session gaze data—all processed locally.

Challenges we ran into

The biggest challenge was getting accurate eye-tracking with standard webcams—facing issues with lighting conditions, head movement, and calibration drift. Parsing flexible, conversational commands to reliably perform safe edits was also tough. We needed to balance fast UX with strong privacy guarantees, so keeping all processing local was non-trivial. Additionally, mapping gaze data to dynamic, sometimes non-standard web elements pushed us to rethink UI detection.

Accomplishments that we're proud of

We’re proud to have delivered a functioning demo where creators edit interfaces with their gaze and speech. Our privacy-first architecture means no gaze data leaves your device—and it’s still lightning-fast. The system detects real user engagement, flags ignored or problematic elements, and exports production-ready code and real heatmaps. We also nailed seamless undo/redo and built integrations for common design workflows.

What we learned

We learned how powerful and intuitive gaze-based interaction can be—not just for accessibility but for making design work feel more human. We saw firsthand the value of real-time feedback: seeing where users actually look and instantly fixing those pain points. Balancing technical constraints (accuracy, security) with creative freedom is essential. Most importantly, fast iteration and keeping everything privacy-first are key to user trust and adoption.

What's next for Clientsight

Next, we’re refining gaze accuracy for even more robust editing, expanding to support team collaboration features, and developing an Electron desktop version for system-wide control (across all your apps). We plan to offer deeper integrations with design tools like Figma, and expand analytics for marketers and researchers. Scaling for enterprise and launching a public API are our goals, making gaze-driven editing a new standard in UX and web creation.

Built With

• 0.13.0
• 12.0
• 3.11+
• accessibility
• agent
• agents:
• ai
• api
• autoprefixer
• backend
• browser-based
• build:
• builder
• cal
• component
• css
• demo
• development
• dot
• external
• eye
• fastapi
• fastapi)
• features
• fetch.ai
• fetch.ai)
• firebase
• gaze
• gemini)
• generation
• generation)
• generative
• generator
• google
• gpt-4
• hacks
• hardware)
• integration
• live
• modules
• multi-agent
• no
• node.js
• npm
• openai
• optimizer
• page
• plugin
• postcss
• preview
• prompts
• python
• react
• real-time
• sdk
• services
• smooth
• stack:
• style
• system
• tech
• tools
• tracking
• turbo
• typescript
• uagents
• using
• uvicorn
• visualization
• vite
• webgazer.js
• with