Weevarv1.0.2

UI control for agent-driven builds.

Weevar lets you change your UI directly and turn those changes into code-ready instructions. Rearrange elements in your running app, see the result instantly, and hand off the exact intent to your AI coding assistant. Move it, copy it, paste it.

npm install weevar
Weevar tool moving UI elements on the web

Working with Weevar#

  1. Run your app in dev mode (Vite, Next dev, anything that bundles React in development).
  2. Press ⌘⇧E on Mac or Ctrl+Shift+E on Windows/Linux to activate the overlay. Or click the floating Weevar trigger in the corner.
  3. Hover over an element. You'll see an outline and a label showing the component name or selector.
  4. Click to select it. Drag to reorder it within its parent or move it into a different container.
  5. Open the Prompt tray. Weevar gives you a structured prompt describing the change you just made.
  6. Copy. Paste it into Claude Code, Codex, or whatever AI assistant edits your code.

Refresh the page and the layout snaps back. Weevar never writes to your source files; your prompt does.

Agent execution#

Plain prose loses precision. "Move the CTA under the headline" leaves the agent guessing which CTA, which headline, and which file. Weevar gives the agent the things it actually needs to find and edit code:

  • Component name (<NavItem>, <SignInButton>) when React Fiber is available
  • Source location (src/components/Header.tsx:14) when the bundler plugin is installed
  • DOM path with index (nav[0]>ul[0]>li[3]) for grep fallback
  • Container layout (flex-row, grid, block) so the agent doesn't break the layout
  • Tailwind classes verbatim when Tailwind is detected, flex gap-6 items-center instead of "horizontal layout with medium spacing"
  • Sibling order before and after the move, so there's no ambiguity about where the element lands
  • Constraints ("preserve all props", "don't introduce wrappers") to keep the diff narrow

The result is a prompt the agent can act on without a second round of clarification.

Weevar in action#

Weevar tool toggle animation

View Demo

What it’s for#

Weevar is for the moments where you know exactly what you want the layout to look like, but writing it down for an Agent is harder than just doing it. It is for experimenting with the layout till you find what works without having to do all that experimentation via prompting one after the other.

  • "Put the button under the cards on the left hand side" — drag it yourslef.
  • "Reorder these cards in this order..." — just reorder them.
  • "Move this from the sidebar into the main column" — drag it across.

You're not writing a spec. You're showing the agent the answer.

Useful tips#

  • Few changes per session is fine. Multiple changes are also fine, Weevar batches them and generates a single prompt that explains all of them in order.
  • Pick the right target tool. Claude Code expects file paths. Codex expects line numbers. Generic gives you a tool-agnostic version. The dropdown is in Settings.
  • Use the bundler plugin. Without it, prompts fall back to DOM selectors. With it, you get component names and file:line anchors that AI tools can jump to directly.
  • Refresh to reset. If a session gets messy, refresh the page. Nothing was committed.

License information#

Weevar is MIT licensed. You can use it, modify it, and ship it in your own projects, personal or commercial.

You are free to adapt it to your workflow or include it in internal tools. If you redistribute Weevar as part of another product, the original license must be included.

Learn more#