Layrr CLI
Layrr opens your web app with an overlay: click an element, describe the change, and the agent gets the exact source location
- 267 ★ on the repository
- Last commit
- MIT
Broad access
Why this level
- Hands the agent an edit task, and the agent changes project files
- Creates a git repository if there is none and commits edits into your history
- Proxies your dev server traffic through local port 4567
Install
- Works in
In your terminal, with SkillFoxx CLI
npx skillfoxx add cli/layrrDetects the agents on your machine, shows the access level and pins the version.
Other ways to install
Access and checks
How we reviewBroad accessThe tool can change data, run commands or handle secrets.
- Hands the agent an edit task, and the agent changes project files
- Creates a git repository if there is none and commits edits into your history
- Proxies your dev server traffic through local port 4567
This is third-party code. Review the repository files before installing.
What it does
Layrr installs from npm and runs as layrr --port 3000, where the port belongs to a dev server that is already running. It starts a proxy on port 4567 and opens your page in the browser with a small overlay. In the overlay you pick one or several elements and describe the change in plain words, such as "make the button narrower" or "fix the copy". Layrr itself maps the selected element to a source file and line and hands the agent the instruction together with that location. The agent is set by the --agent flag: Claude Code, Codex CLI or Gemini through the Pi coding agent, which ships as a dependency of the package. If no agent is set, Layrr asks on startup. Git provides the undo path. Layrr creates a repository if there is none, takes an initial snapshot, commits each successful edit with a [layrr] prefix and keeps files that were already dirty out of those commits. You can browse the edit history in the overlay and revert from there.
Who it is for. For frontend developers and designers who spot a problem in the browser and want to fix the interface through Claude Code or Codex without hunting for the right file.
Good fit when
- You need a quick fix to spacing, copy or button width while looking at the running page
- The app already runs on a local dev server and you do not want to explain which component holds the element
- You want each agent edit as its own git commit and revertible from the interface
- You want to hand the agent several selected elements with one instruction
Not a fit when
- The app is not running locally: Layrr works through a proxy to a dev server
- You need large logic changes across many files: the tool targets focused edits to selected elements
- The repository holds a lot of uncommitted work you do not want next to agent commits
- You use an agent that is not on the list: Claude Code, Codex CLI and Gemini through Pi are supported
Example request
Start Layrr for my app on port 3000 with Claude Code so I can click elements and ask for editsLimitations
Requires a running dev server whose port is set with --port: Layrr works through a proxy to it and does not start the app itself. For Gemini, the tool asks for a model and an API key, which you can change with layrr --configure-gemini. Claude Code and Codex CLI must be installed and authenticated separately. Edits target selected elements, so large logic changes are better made in a regular agent session.
How to disable. Stop the layrr process and remove the package with npm uninstall -g layrr. Commits with the [layrr] prefix stay in git history and can be reverted with ordinary tools.
FAQ
How do I run Layrr for a Next.js or Vite app?
Start the dev server, for example pnpm dev, and run layrr --port 3000 with that server's port. Layrr opens a proxied version of the app at localhost:4567.
Which agents does Layrr support?
Claude Code, Codex CLI and Gemini through the Pi coding agent. Pick one with the --agent flag set to claude, codex or gemini.
How do I undo an agent edit?
Layrr commits each successful edit with a [layrr] prefix. Preview and revert are available in the overlay history.
What does Layrr do to my git repository?
If there is no repository, Layrr creates one and takes an initial snapshot. Files changed before the launch stay out of Layrr commits.
Does Layrr need an API key?
For Claude Code and Codex CLI the agent handles its own login. For Gemini, Layrr asks for a model and a key during setup, and you can change them later with layrr --configure-gemini.
Discussion
No questions or reviews yet.
Related
CLI toolsA skill for building premium scroll-driven websites on a real design standard: typography, rhythm, depth, motion and in-browser verification
Annotation toolbar for React pages: click an element to hand the agent its selector and context, plus skills for setup and an autonomous UI critique
A CLI that lets an agent inspect a running React app: component tree, props, state, hooks and render profiling
Console, network, screenshots and Lighthouse audits from your open Chrome session to the agent via a DevTools extension
A skill methodology for reproducing websites, from a static page to heavy WebGL, built on real source code rather than agent-hallucinated code
A workspace for Claude Code: ten commands lead from a product idea to React screens and a handoff package with ready prompts for implementation
README in short
The page states the problem: finding the file and line takes longer than the edit itself. Installation, launch, a table of command-line options, the agent list and the git rules follow.