Skillget

layrr

agent
Security Audit
Fail
Health Pass
  • License — License: MIT
  • Description — Repository has a description
  • Active repo — Last push 0 days ago
  • Community trust — 255 GitHub stars
Code Fail
  • network request — Outbound network request in overlay/history.ts
  • network request — Outbound network request in overlay/overlay.ts
  • execSync — Synchronous shell command execution in scripts/build.ts
  • spawnSync — Synchronous process spawning in src/agents/base.ts
  • process.env — Environment variable access in src/agents/base.ts
  • spawnSync — Synchronous process spawning in src/agents/claude.ts
  • process.env — Environment variable access in src/agents/claude.ts
Permissions Pass
  • Permissions — No dangerous permissions requested

No AI report is available for this listing yet.

SUMMARY

A browser coding agent interface for selecting elements and sending instructions directly to Claude Code.

README.md
layrr

layrr

Point, click, and edit any web app with AI

Layrr lets you click an element in your running web app, describe the change in plain English, and send the exact source location to Claude Code, Codex CLI, or Gemini via Pi.

npm License

The problem

You can see the issue in the browser: the button is too wide, the copy is wrong, the spacing is off, or the component needs a quick behavior change. The slow part is finding the right file, line, and context before your coding agent can make a useful edit.

Layrr sits between your browser and local dev server. It injects a small overlay, maps clicked elements back to source, and gives your coding agent the instruction plus the selected code location.

Install

Install Layrr globally:

npm install -g layrr

Usage

Start your app first:

pnpm dev

Then run Layrr against the dev server port:

layrr --port 3000

Layrr opens a proxied version of your app at http://localhost:4567.

In the browser:

  1. Click one or more elements.
  2. Describe the change you want.
  3. Let the selected coding agent edit the source.
  4. Preview or revert Layrr edits from the overlay history.

For a local checkout:

pnpm install
pnpm build
node dist/cli.js --port 3000

Options

layrr --port <number> [project-root] [options]
Option Description
-p, --port <number> Local dev server port. Required.
--proxy-port <number> Layrr proxy port. Defaults to 4567.
--agent <name> AI agent to use: claude, codex, or gemini.
--gemini-model <model> Save and use a Gemini model, for example gemini-2.5-flash.
--configure-gemini Reconfigure the Gemini model and API key.
--no-open Do not open the browser automatically.
-h, --help Show help.

Agents

Layrr supports:

  • claude - Claude Code
  • codex - Codex CLI
  • gemini - Gemini via Pi coding agent, installed as a Layrr dependency

If no agent is configured, Layrr prompts you to pick one.

To configure Gemini without starting a session:

layrr --configure-gemini

Git History

Layrr uses git as its undo path:

  • initializes a git repo if needed
  • creates an initial snapshot when needed
  • commits successful edits with a [layrr] prefix
  • keeps pre-existing dirty files out of Layrr edit commits
  • lets the overlay preview and revert Layrr edits

License

MIT

Reviews (0)

No results found