Review designs with the Chrome extension¶

Status: Current | Last reviewed: 2026-09-23

Agent Studio Review adds an environment banner and design comments to Agent Studio, including local apps and HTML prototypes titled Agent Studio. Select an element, describe a change, then use Copy all for AI to share the feedback together with its page and element selector.

Install¶

1. Extract the shared extension ZIP into a permanent folder on your computer.
2. Open chrome://extensions in Chrome.
3. Turn on Developer mode.
4. Click Load unpacked and select the extracted agent-studio-review folder containing manifest.json.
5. Refresh your Agent Studio tabs.

If you have the source repository, select tools/agent-studio-review/extension directly instead. No build, account, or server setup is required.

The banner displays the current environment:

You can minimize the banner with its arrow if it covers a control at the top of the page. The collapsed label is white and sits at the far left over the logo corner, leaving the center of the header available for clicking and adding comments. Click the small environment label to restore the banner.

The full banner appears the first time you open a review page in a browser session. After you collapse it, it stays collapsed across refreshes, navigation, and other review tabs until you expand it again. Your last choice is remembered for the session. Restarting Chrome or reloading the extension starts with the full banner again.

Local apps and HTML files¶

The original Studio addresses work automatically. Other HTTP/HTTPS pages and local files qualify when their browser-tab title contains Agent Studio, ignoring case. Titles such as Agent Studio · Agents and Agent Studio — Prototype also work.

For a local HTML prototype, set its title:

<title>Agent Studio</title>

To review a file opened directly from disk:

1. Open chrome://extensions and choose Details for Agent Studio Review.
2. Enable Allow access to file URLs.
3. Open or refresh your HTML file.

For automatic detection across web pages, allow the extension access On all sites in its Chrome settings. If you restrict site access, enable it for each local app or preview site you want to review. Chrome's internal pages cannot be annotated.

The extension also notices titles set after an app loads. On a page detected by title alone, the overlay disappears if the title stops containing Agent Studio, and returns when it matches again.

Local apps such as http://localhost:3100 support comments after navigating between screens, changing URL parameters, or using browser back/forward.

Add a comment¶

1. Click Add Comment at the bottom right.
2. Move your pointer over Studio. The outlined element is the selection target.
3. Click the element. This selects it without activating its usual action.
4. Describe the change.
5. Click Save comment, or press Ctrl+Enter / ⌘Enter.

Press Escape to cancel selection or close the editor. You can also select with the keyboard: after starting Add Comment, use Tab or Shift+Tab to focus a Studio element and press Enter.

A numbered pin marks the element while it remains visible on the original page. Click the pin to open its comment. The comment stores the page title, environment, exact URL and route, a CSS selector, full DOM path, XPath where available, and element text and labels.

If the app changes routes while you write, you can still save. Your feedback keeps the page URL and element selector from when you made the selection.

Copy comments for AI¶

Open Comments and click Copy all for AI. Paste the result into your AI coding tool, issue, document, or team chat.

The copied text includes only the page URL, one selector, a short element label, and your feedback. To share one comment, click its copy icon, labelled Copy comment for AI.

## 1. https://ai-manager.macau.trueserve.ai/agents
Selector: button[data-testid="create-agent"]
Label: "Create agent"
Feedback: Make this action easier to find.

The label helps AI find the corresponding text in the source code. It is omitted when unavailable and shortened to 120 characters when needed. For elements inside shadow DOM, the selector includes the chain needed to reach the element. Existing saved comments use the same compact format.

If your browser blocks automatic copying, the extension shows the text already selected. Press Ctrl+C / ⌘C, then Done.

Manage comments¶

The panel is one list of all saved comments across pages and environments. Each row shows its page, environment, route, and feedback, with two icon buttons:

• The copy icon copies that comment and its selector for AI.
• The delete icon immediately removes that comment from this browser.

Clear all comments removes every saved comment across all environments after confirmation. Copy the list first if you want to keep the feedback. The number beside Comments counts the whole list.

To inspect a design change without numbers covering it, click the eye button beside Comments. Its tooltip reads Hide comment numbers. Click it again, labelled Show comment numbers, to restore the pins. This setting survives page refreshes and applies to your other open review tabs. Your comments remain in the list and can still be copied or added while numbers are hidden.

Pins appear only on the original page. Different local file paths keep their pins separate, even when both files are named index.html. If an element moves, changes, or is inside a closed panel, its pin may disappear; the comment and its captured selector remain in the copied text. Switching TrueServe tenants does not separate comments with the same environment and route.

Local storage¶

Comments stay in your Chrome profile. Other teammates see them when you share copied text. They are not synchronized to your TrueServe account.

You can store up to 1,000 comments within the browser's storage allowance. Copied text contains the captured page URL (including the complete path for local files), labels, and text; input values, passwords, cookies, and screenshots are not captured.

Existing comments from the earlier extension remain available after updating, including comments previously marked resolved.

Update or troubleshoot¶

Replace the extension files in the same permanent folder, click Reload on its chrome://extensions card, and refresh Studio. Keeping the folder preserves your local comments. Uninstalling the extension removes them, so copy the feedback first if you need it.

If the banner is missing, confirm that the address matches a Studio URL pattern or that the tab title contains Agent Studio. Check Chrome site access, and enable Allow access to file URLs for local files. Refresh after changing extension settings. Chrome's extension toolbar popup also explains when the active page is unsupported or needs a refresh.

If copied text contains only page names and feedback, check which Comments controls you used. Some prototypes have their own Copy All for Claude button; those comments do not capture selectors. Use this extension's Copy all for AI or per-comment copy icon. Extension output has a numbered URL heading and a Selector: line for every comment.

You can select content inside open shadow roots. Embedded frames and closed shadow roots support selecting their host element only. Exit browser fullscreen or close a native browser dialog if it covers the overlay.

See also¶

• Home and the agent repository
• Agent canvas, prompts and preview
• Signing in