agent-canvas

Select DOM elements on web pages and capture selectors with Playwright.

3|1|Updated Jan 20, 2026

Search Tags:#accessibility #Playwright #QA #web-automation #AI-agents #design-review #element-selection

Ready to run

npx skills add https://github.com/edrouhardmicrosoft/agent-canvas-skills --skill agent-canvas

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: agent-canvas
Source: https://github.com/edrouhardmicrosoft/agent-canvas-skills/tree/main/.claude/skills/agent-canvas
Command: npx skills add https://github.com/edrouhardmicrosoft/agent-canvas-skills --skill agent-canvas

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires playwright, and includes scripts (resource) components.

What problem does it solve?

Agent Canvas provides an interactive element picker for web pages, enabling AI agents to visually identify DOM elements, capture selectors, and retrieve contextual data without manual scraping.

Core Features & Use Cases

Interactive element picker with a browser overlay to hover, highlight, and select elements, returning their selectors and metadata.
Optional integrations with agent-eyes for richer element descriptions and screenshots to improve downstream reasoning.
Use during UI QA, design reviews, accessibility checks, and debugging to quickly collect element data and verify UI behavior.

Quick Start

Install prerequisites: uv run .claude/skills/agent-canvas-setup/scripts/check_setup.py install --scope temporary
Launch the picker and select elements: uv run .claude/skills/agent-canvas/scripts/agent_canvas.py pick http://localhost:3000 --with-eyes --with-edit
Retrieve session artifacts after closing the browser: ls -la .canvas/sessions/ ; cat .canvas/sessions/$(ls -t .canvas/sessions/ | head -1)/session.json

Frequently Asked Questions about agent-canvas

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I visually select DOM elements for AI agents during web automation?▼

You can visually select DOM elements by launching an interactive picker overlay in the browser, hovering to highlight elements, and clicking to capture their selectors and contextual metadata for AI agents.

What is the best way to capture web page selectors for automated QA workflows?▼

The best way to capture web page selectors for automated QA workflows is using an interactive element picker that automates element selection and retrieves contextual data to validate UI behavior during design reviews.

Do I need Playwright to run an interactive element picker for web pages?▼

Yes, you need Playwright to run an interactive element picker for web pages. It requires a Python environment with Playwright installed and the picker setup initialized to launch the browser overlay and select elements.

Can I capture screenshots during UI design reviews with an element selection tool?▼

Yes, you can capture screenshots during UI design reviews by integrating optional agent-eyes context with the element selection tool, which provides richer element descriptions and screenshots to improve downstream AI reasoning.

How do I retrieve session artifacts after closing the browser in a web automation task?▼

To retrieve session artifacts after closing the browser in a web automation task, list the local sessions directory. The artifacts, including a session.json file containing captured selectors and metadata, are saved automatically.

Does interactive element selection work for accessibility checks?▼

Yes, interactive element selection works for accessibility checks. It enables you to quickly collect element data, identify DOM selectors, and verify UI behavior to ensure web pages meet accessibility requirements during reviews.