Skip to content

Add visual annotation browser with Agentation#3030

Draft
lezama wants to merge 1 commit intotrunkfrom
add-agentation-mcp-integration
Draft

Add visual annotation browser with Agentation#3030
lezama wants to merge 1 commit intotrunkfrom
add-agentation-mcp-integration

Conversation

@lezama
Copy link
Copy Markdown
Contributor

@lezama lezama commented Apr 9, 2026

Summary

Adds /annotate skill to Studio Code. Users type /annotate, a browser opens with the Agentation annotation toolbar, they click elements and leave feedback, and the agent reads those annotations and makes changes.

Tested end-to-end: user annotated "make this red", "change this to H2" → agent read annotations, applied changes via Global Styles custom CSS and WP-CLI.

Alternative approach to the custom element picker in #2936 — instead of building a custom UI, this injects Agentation's React toolbar into a Playwright browser using esm.sh CDN with ?deps= pinning for a single React instance.

How it works

  1. agentation-mcp bundled as dependency — launches HTTP (localhost:4747) + MCP servers
  2. /annotate skill clears old annotations, opens headed Playwright browser via open_annotation_browser tool
  3. Agentation React component injected via dynamic import() from esm.sh CDN
  4. User clicks elements, adds feedback in the browser
  5. Agent reads annotations with agentation_get_all_pending (CSS selectors, computed styles, text)
  6. Agent makes WordPress changes (Global Styles CSS, template overrides, WP-CLI) and resolves annotations

Changes

  • apps/cli/ai/agentation-inject.ts (new) — Opens headed Playwright browser, injects Agentation via esm.sh dynamic imports
  • apps/cli/ai/tools.ts — New open_annotation_browser tool
  • apps/cli/ai/plugin/skills/annotate/SKILL.md (new) — /annotate skill with guided workflow and WordPress-native change patterns
  • apps/cli/ai/slash-commands.ts — Register /annotate command
  • apps/cli/ai/agent.ts — Agentation MCP server added alongside Studio tools
  • apps/cli/package.jsonagentation-mcp dependency

Testing

  1. npm install && npm run cli:build
  2. node apps/cli/dist/cli/main.mjs code
  3. Select a running site, type /annotate
  4. Click the circle icon (bottom-right), click elements, add feedback
  5. Type "done" — agent reads and applies changes

Quality gates

  • ESLint: pass
  • TypeScript: pass
  • Tests: 72/72 pass
  • End-to-end: annotations synced and applied to WordPress site

@lezama lezama changed the title PoC: Add Agentation MCP integration for visual feedback Add visual annotation browser with Agentation Apr 9, 2026
@lezama lezama force-pushed the add-agentation-mcp-integration branch 5 times, most recently from c613b29 to dff9851 Compare April 10, 2026 03:21
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant