AI

Agentation: AI-Powered Code Editing by Visual Selection

Tool that allows AI to identify and modify code by tracking mouse clicks on webpage elements, solving the positioning problem in AI programming assistants.

February 23, 2026
6 min read
By ClawList Team

Agentation: Click to Edit — How AI Finally Knows Exactly Where You Mean

Published on ClawList.io | Category: AI | March 4, 2026


If you've spent any meaningful time working with AI coding assistants like Claude Code or Cursor, you've probably run into the same frustrating wall. The AI is technically capable — it can write solid logic, refactor cleanly, and generate boilerplate faster than you ever could. But getting it to touch the right line of code? That's where things fall apart.

"Fix the button in the bottom-right corner." "Update the blue header text on the homepage." "That dropdown near the search bar is broken."

These descriptions feel completely obvious to any human looking at a screen. To an AI, they're archaeological riddles buried somewhere inside thousands of lines of JSX, CSS modules, and nested components. The model guesses, gets it wrong, you clarify, it guesses again — and suddenly you've spent twenty minutes describing a two-minute fix.

An open-source tool called Agentation is trying to eliminate that problem entirely. The concept is disarmingly simple: wherever you click your mouse on a running web page, the AI knows exactly which line of code to target.


The Root Problem: Positioning Cost in AI-Assisted Development

Before diving into what Agentation does, it's worth naming the problem precisely, because it's more fundamental than it first appears.

When developers communicate with AI coding assistants, there are two distinct challenges:

  1. Intent — what change do you want?
  2. Locationwhere in the codebase does that change belong?

AI assistants have gotten remarkably good at understanding intent. Ask Claude to refactor a function for readability, and it will do a reasonable job. Ask Cursor to add input validation, and it knows what that means.

But location is a different story. Natural language descriptions of UI positions are inherently ambiguous. "The card on the right side of the dashboard" could map to any of a dozen components depending on viewport size, data state, and how the layout was structured six months ago by someone who has since left the team.

The result is what you might call positioning overhead — the back-and-forth negotiation between developer and AI just to establish which element we're talking about. In large codebases, this can genuinely dominate the interaction. You spend more tokens explaining the location than describing the actual fix.


How Agentation Works: Mouse Clicks as Code Coordinates

Agentation approaches this with a surprisingly direct solution. Rather than relying on natural language to convey position, it instruments your browser session to capture mouse click events and maps those events back to specific source file locations.

Here's the general flow:

  1. You run your web application in a browser session connected to Agentation.
  2. You click on any element on the page — a misbehaving button, a typo in a heading, a layout component that's rendering incorrectly.
  3. Agentation resolves the click to a precise location in your source code — the component file, the line number, potentially the specific JSX attribute or CSS class responsible for that element.
  4. That location context is passed to the AI alongside your natural language instruction.

Instead of telling Claude Code "find the broken dropdown in the navbar," you click the dropdown and say "this is broken." The AI receives the click's resolved source location as grounding context, which means it can go directly to work rather than spending its first several steps just searching.

A simplified mental model of what gets passed to the AI looks something like this:

User instruction: "This button doesn't respond to clicks on mobile"
Resolved context: {
  file: "src/components/Header/NavMenu.tsx",
  line: 84,
  element: "<button className='nav-trigger'>",
  component: "NavMenu"
}

With that context attached, the AI isn't guessing anymore. It has a precise entry point.


Practical Use Cases: Where This Changes Your Workflow

The implications extend across several common development scenarios where positioning overhead tends to be highest.

UI Bug Reports and Fixes

This is the most immediate win. When a designer or QA engineer flags a visual bug, instead of writing a paragraph trying to describe which element looks wrong, they click it. The click becomes the bug report's location data. An AI assistant picking up that ticket has an unambiguous starting point.

Copy and Content Edits

Marketing teams frequently request text changes on live pages. "The headline on the pricing page reads 'Anual' instead of 'Annual.'" With Agentation, someone clicks the misspelled word, the tool resolves it to the relevant CMS field or JSX string, and the AI makes the edit in the correct location without scanning through layout files.

Refactoring with Visual Confirmation

When refactoring component structure, developers often think visually first — "I want to extract this sidebar into its own component." Clicking the sidebar in the running app and expressing that intent gives the AI exactly the right component boundaries to work with, rather than having to infer them from a description.

Onboarding New Team Members

For developers unfamiliar with a codebase, the gap between "I see a UI element" and "I know which file owns this UI element" is substantial. Agentation collapses that gap directly, letting newcomers make targeted changes without first needing to internalize the entire component tree.


The Broader Shift: From Text-Only to Multimodal Developer Tooling

Agentation fits into a wider movement in developer tooling toward richer, more grounded AI interactions. Text-only interfaces made sense as a starting point — language models are, after all, language models. But the assumption that everything must be communicated through language is increasingly being challenged.

Visual selection, cursor position, terminal output, browser state — these are all signals that carry information about where in a system the developer's attention is focused. Feeding that grounding context into AI interactions reduces ambiguity in a way that better prompting alone cannot achieve.

This is particularly relevant for teams building with AI automation pipelines and OpenClaw skills, where precise targeting of UI elements and code locations is often a prerequisite for reliable agent behavior. An agent that can resolve visual selections to code locations has a fundamentally higher ceiling for accuracy than one operating on natural language descriptions alone.


Conclusion

Agentation doesn't make AI smarter. It makes the conversation with AI more precise by replacing vague spatial language with an exact coordinate: the click.

For developers who regularly use AI coding assistants, the positioning problem is real and its costs accumulate quickly. Any tool that reduces the back-and-forth needed to establish location — without requiring changes to your existing workflow beyond keeping a browser session open — is worth evaluating seriously.

The project is open-source, which means the core mechanism is inspectable and the integration surface is extensible. As AI-assisted development matures, grounding techniques like this are likely to become standard infrastructure rather than optional add-ons.

If you've found yourself typing long descriptions of UI elements to your AI assistant, Agentation is a direct answer to that frustration. Click the thing. Let the AI handle the rest.


Original concept shared by @sitinme on X. Explore more AI development tools and OpenClaw skill resources at ClawList.io.

Tags

#AI#Claude#programming#code-editing#developer-tools

Related Articles