aldegad

aldegad / agent-picker

Public

Package-first UI selection bridge for coding agents, with a draft workspace and local daemon.

github.comaldegadagent-picker#readme coding-agents developer-tools dom-selection nextjs react
13
1
100% credibility
Found Mar 15, 2026 at 13 stars -- GitGems finds repos before they trend. Get early access to the next one.
Sign Up Free
AI Analysis
TypeScript
AI Summary

Agent Picker provides a DOM selection overlay and collaborative design board for AI coding agents to inspect, capture, and compare UI components in web applications.

How It Works

1
📰 Discover Agent Picker

You hear about a handy tool that lets AI helpers pick and compare parts of your web page design.

2
📥 Bring it into your project

You copy the tool into your app folder and connect it with a few simple links so it works smoothly.

3
🚀 Start the background helper

You launch a small helper program that keeps everything in sync behind the scenes.

4
🎯 Select UI pieces effortlessly

A floating picker appears; click on any screen element to capture it with details like size and style.

5
🖼️ Open the design lab

Visit the special page to drag, zoom, and arrange your captured pieces side-by-side for comparison.

6
🤖 Team up with AI agents

Your AI helpers read the selections, add notes, and suggest changes right on the shared board.

🎉 Perfect UI collaboration

Your web design evolves quickly as humans and AI work together seamlessly on the perfect layout.

Sign up to see the full architecture

5 more

Sign Up Free

Star Growth

See how this repo grew from 13 to 13 stars Sign Up Free
Repurpose This Repo

Repurpose is a Pro feature

Generate ready-to-use prompts for X threads, LinkedIn posts, blog posts, YouTube scripts, and more -- with full repo context baked in.

Unlock Repurpose
AI-Generated Review

What is agent-picker?

Agent Picker is a TypeScript package-first bridge for coding agents to capture live DOM selections directly in your React app. Drop it into your Next.js project via subtree clone, wire tsconfig aliases, and mount the provider—devtools overlay appears for picking elements, grabbing snapshots, box models, and gaps, all synced to a local daemon with CLI access like `agent-pickerd:get-selection` or `set-agent-note`. It includes a draft workspace design lab to drag components, rearrange across desktop/mobile/original viewports, and export layouts.

Why is it gaining traction?

Unlike screenshot tools or ad-hoc agent scripts, it coordinates multiple agents via shared notes and selections through the daemon's HTTP/SSE endpoints and CLI. The devtools highlight box models live, persist sessions, and integrate seamlessly without npm publishes. Developers hook on the agent workflow docs for Claude/Gemini, turning random picks into structured UI feedback loops.

Who should use this?

Frontend devs pairing with AI coding agents for iterative UI fixes, like reselecting elements after agent changes. Teams prototyping components needing quick viewport diffs without Figma roundtrips. Solo builders vendoring into Next.js for daemon-backed agent picker sessions during local dev.

Verdict

Worth vendoring for agent-driven UI workflows—docs cover Next.js integration, daemon CLI shines, tests hit devtools—but at 10 stars and 1.0% credibility, it's early alpha. Test in a smoke host first; maturity lags behind polished alternatives.

(198 words)

Sign up to read the full AI review Sign Up Free

Similar repos coming soon.