AgentEcho

Product Introduction

1. Definition: AgentEcho is a browser extension-based visual feedback annotation tool (technical category: developer productivity software) that enables precise DOM element targeting and AI-optimized documentation generation.
2. Core Value Proposition: It exists to streamline developer communication by converting visual feedback into structured Markdown reports optimized for AI coding assistants, reducing ambiguity in bug reports and code reviews.

Main Features

1. Precision DOM Annotation:

   • How it works: Users hover to activate a blue highlight overlay on page elements. Clicking places persistent numbered markers with pixel-perfect positioning using CSS position: absolute coordinates relative to the viewport.
   • Technology: Chrome Extension APIs for DOM manipulation, Shadow DOM encapsulation to prevent CSS conflicts, and custom position-tracking algorithms.

2. Framework-Smart Analysis:

   • How it works: Automatically detects React/Angular component names via DOM property inspection (e.g., __reactFiber internals). Captures component hierarchies, props, and state identifiers.
   • Technology: Pattern-matching heuristics for framework-specific DOM attributes, with extensible analyzers for Vue/Svelte (roadmap).

3. AI-Optimized Markdown Export:

   • How it works: Generates context-rich reports including unique CSS selectors (e.g., div.header > button.submit-btn), text content, classes, and framework metadata formatted for LLM ingestion.
   • Technology: Markdown templating engine with semantic structuring for clarity, plus Chrome Clipboard API integration.

Problems Solved

1. Pain Point: Eliminates vague bug reports like "the button looks broken" by providing exact element identifiers and contextual metadata.
2. Target Audience:
   • Frontend developers conducting code reviews
   • QA engineers documenting visual regressions
   • Product managers providing UI feedback to dev teams
   • AI prompt engineers training coding assistants
3. Use Cases:
   • Annotating responsive design flaws during mobile testing
   • Documenting CSS conflicts in component libraries
   • Generating training data for AI pair programmers
   • Reporting accessibility violations (e.g., color contrast issues)

Unique Advantages

1. Differentiation vs. Competitors: Unlike generic screenshot tools (e.g., Loom), AgentEcho outputs machine-readable technical context (selectors/component trees) absent in alternatives. Outperforms manual annotation by generating stable element identifiers resistant to DOM mutations.
2. Key Innovation: Patented selector-generation algorithm combining multiple attributes (ID/class/data-*) to create unique, persistent CSS paths. Integrates framework context missing in DOM inspection tools like browser DevTools.

Frequently Asked Questions (FAQ)

1. Does AgentEcho work on localhost development environments?
   Yes, the Chrome extension functions identically on localhost, staging, and production websites via Manifest V3 content script injection.

2. How does AgentEcho ensure selectors remain valid between sessions?
   The algorithm prioritizes immutable attributes (IDs, data-testid), uses relative positional selectors (e.g., :nth-of-type), and stores element coordinates for cross-session marker persistence.

3. Can teams collaborate using AgentEcho annotations?
   Currently supports individual use with local storage; cloud sync and team features are on the roadmap (Q4 2026). Export Markdown to share via Slack/Jira.

4. What browsers support AgentEcho beyond Chrome?
   Chrome-only initially due to Manifest V3 dependencies; Firefox/Edge ports require browser API compatibility adjustments.

5. How does the Polyform Noncommercial license impact enterprise usage?
   Commercial teams must purchase via Chrome Web Store ($1/user). Source code modifications are permitted for internal use but cannot be redistributed commercially.