GPUI Agentation

[][contributors-url] [][forks-url] [][stars-url] [][issues-url] [][license-url]

gpui-agentation

🎯 Point at a running GPUI app, leave a note, and your coding agent gets the element, its bounds, and its Rust source location.

Explore the docs »

View Demo · Report Bug · Request Feature

Version: 0.6.0. Debug builds only — release builds expose no annotation API.

Pinned to gpui-pre =0.3.8.

Table of Contents

About The Project

Built With

Getting Started

Prerequisites Installation

Usage

Inspect and annotate Capture feedback Connect your agent Agent skills

Try the Demo Roadmap Contributing License Contact Acknowledgments

About The Project

[](https://emmanuel-defreitas.github.io/gpui-agentation/)

Agentation annotates web pages through the DOM. A native GPUI window has no DOM, so gpui-agentation registers screens (and optional finer targets) with an ID, label, bounds, and Rust call site, then attaches your note to that.

Use it when you would otherwise describe a UI bug to your agent in words or paste a screenshot. Notes persist to a local JSON file, carry a status (pending, acknowledged, resolved, dismissed) and a reply thread, and an agent reads them over a loopback MCP server or REST/SSE.

It is a development tool. It annotates registered targets, not arbitrary pixels (by default, the whole screen), and release builds do not include it. For production telemetry or session replay, use something else.

( back to top )

Built With

[][Rust-url] [][GPUI-url] [][MCP-url]

( back to top )

Getting Started

Add gpui-agentation to your own GPUI app in three steps: install the crate, initialize once at launch, then mount and wrap your screen.

Prerequisites

• macOS with Xcode command-line tools
• Rust via rustup (the repository pins the toolchain)
• Python 3 (only needed to run the bundled demo)

Ely is bundled, so there is nothing else to install.

Installation

1. Add the crate with the native feature set:

   cargo add gpui-agentation --no-default-features --features native

1. The crate does not exist in release builds, so every call sits behind #[cfg(debug_assertions)] and release returns your content unchanged:

   // Launch: serve Agentation's assets, then initialize.

let app = gpui_platform::application(); #[cfg(debug_assertions)] let app = app.with_assets(gpui_agentation::Assets); app.run(|cx| { #[cfg(debug_assertions)] gpui_agentation::init(cx).expect("initialize Agentation"); // ...open your window });

// Window setup: app name, route, notes file, local port. Keep feedback // in a field of your root view that carries the same cfg. #[cfg(debug_assertions)] let feedback = gpui_agentation::Agentation::mount( "My app", "gpui://my-app/home", "target/agentation/feedback.json", 4748, window, cx, )?;

// Render: wrap the screen in debug builds; release keeps content as is. #[cfg(debug_assertions)] let content = self.feedback.root("home", "Home screen", content, window, cx); content

1. Add target(id, label, child) only where you want finer inspection. Ordinary controls need no wrappers. Agentation handles its Ely setup, assets, and focus internally.

The consumer example keeps all of this in one devtools module. More: setup guide, setup skill for agents, and customization.

( back to top )

Usage

Inspect and annotate

Turn on the power switch, then choose Inspect, Box, Arrow, Pen, Comment, or Textbox. Select an element or draw on the screen. Inspect surfaces the element's ID, label, bounds, and Rust call site.

Draw an arrow (or a box or freehand pen stroke) to point your agent at exactly the right spot.

While annotation mode is on, use I / B / A / P / C / T to select a tool. Hover a tool to see its shortcut as an Ely keycap in the tooltip. Ctrl/Cmd+S saves the current draft; Ctrl/Cmd+Z and Ctrl/Cmd+Shift+Z undo and redo annotation changes. Delete/Backspace removes a selected annotation when its text field is not being edited. Text fields retain their ordinary typing and text undo behavior.

Textboxes use plain text with one style and size, preceded by a numbered pin. Click to select and show the bounding box; drag the text or pin to move both. Double-click or press Enter on the selected textbox to edit it. Saving displays the text directly on the canvas without opening a comment. Other numbered pins can be dragged independently of their drawings.

In a floating comment, type @ to choose an existing note or #12 to preview pin 12. Hovering a suggestion or using the arrow keys animates its pin; click, Enter or Tab inserts an @#12 reference. Escape dismisses the list. Right-click an annotation for Edit, Delete and Color actions, with undo support.

Include gpui_agentation::debug_menu() in your host's cx.set_menus(...) list to expose the controls in the native Debug menu. Agentation::root routes those menu commands to the active window. Settings → Toolbar → None hides the embedded toolbar. Toolbar placement persists per application in its notes file and is shared by windows mounted against that file.

Capture feedback

Write a comment and save it. Open Comments → Copy to copy your feedback as Markdown, ready to paste to your agent.

Move the toolbar out of the way whenever it overlaps the UI you are inspecting.

Connect your agent

1. Keep the debug app running.
2. Open Settings → MCP and turn the server on.
3. Copy the config into your MCP client.

The endpoint runs on loopback. Clients that require stdio can use the MCP bridge.

• MCP Registry name: mcp-name: io.github.emmanuel-defreitas/gpui-agentation

_For more examples, please refer to the Reference._

Agent skills

Give your coding agent a reusable workflow for installation or exploring a running app's feedback. Both skills live under skills/:

From a clone of this repository, copy either skill directory into your host project's .agents/skills/ directory, or into ~/.agents/skills/ for personal use across projects. For example, to install the exploration skill in a host:

mkdir -p /path/to/your-app/.agents/skills

cp -R skills/gpui-agentation-explore /path/to/your-app/.agents/skills/

In Zed, start a new conversation after copying, then invoke /gpui-agentation-explore or /gpui-agentation-setup. Other agents can load the linked SKILL.md directly or use their supported skill directory. Try: “Use gpui-agentation-explore to discover my app's MCP tools and summarize pending feedback without changing notes.” Skills provide instructions; connect the running debug app's MCP server separately using the steps above.

( back to top )

Try the Demo

Clone the repository and run the bundled demo app:

git clone https://github.com/emmanuel-defreitas/gpui-agentation

cd gpui-agentation make dev

1. Choose Inspect, Box, Arrow, or Pen.
2. Select an element or draw, then write a comment and save.
3. Open Comments → Copy to copy your feedback as Markdown.

For rebuilds on save, enable Settings → Hot reload → Server status. It rebuilds and restarts the app after a successful build; in-memory state resets, saved annotations survive. Demo details

( back to top )

Roadmap

• Inspect, Box, Arrow, and Pen annotation tools
• Loopback MCP server plus REST/SSE access
• Hot reload for rebuild-on-save
• Add text annotation tool
• Update Comment annotation UX
• Add gpui-devtools features from joris-gallot/gpui-devtools
• Extends AI features from hexuria/gpui-agent
• Stabilize the API toward 1.0
• Port MCP tools to a standalone macOS companion app

See the open issues for a full list of proposed features (and known issues).

( back to top )

Contributing

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star! Thanks again!

1. Fo