noodbnpicpfgghpkcddjainbpngloeoh
Visual code review for live UI — leave comments on DOM elements for AI agents DOM Review is a Chrome extension that bridges the gap between what you see in the browser and what your AI coding agent needs to fix. Built for the vibecoding workflow: you look at your app, point at what's off, describe the fix in plain English, and your AI agent reads your reviews straight from Chrome and makes the changes. How it works: 1. Click any element on your page 2. Write a comment (e.g., "make this bolder") 3. Your AI Agent reads the reviews from the live page via Chrome DevTools MCP and edits the code! DOM Review captures all the necessary context for your AI Agent: - CSS selectors (smart generation that avoids utility classes like Tailwind/Bootstrap) - Computed styles (colors, fonts, display, dimensions) - Accessibility attributes (ARIA roles, labels, tab index) - Framework component info (detects React, Vue, Angular components and props) DOM Review comes with a Sidebar Panel where you can manage all your reviews, filter them by status, and sort by date, priority, or category. You can also export/import reviews as JSON files if you're not using MCP yet. Say goodbye to copy-pasting selectors and losing context. Let your AI agent read the DOM directly! Source Code & Contributions: The source code for DOM Review is open source and publicly available on [GitHub](https://github.com/AAnkacHH/web-review-extention).
Agentic Browser - AI Powered Web Automation Agent
AI-Powered Agentic Browser: Private AI Automation - Tasks, Content, More! Control Chrome with direct AI (ChatGPT, Claude, Gemini, Grok, Deepseek & more) for automation & analysis. BYOK or use credits; your data stays local, straight to providers. Works amazingly! Key Features: ✅ AI Task Automation: Auto-fill forms, summarize articles, manage social media, and more with natural language commands. ✅ BYOK & Private AI: Use your API keys (OpenAI, Anthropic, etc.) or use ours– direct to AI, zero data stored by us. ✅ Image & Text Analysis: Extract text from images, generate captions, and analyze visual data instantly. ✅ Seamless Integration: Works directly in Chrome – no switching tabs or apps needed. Popular Use Cases: • AI Webscraping, Agentic Browser supports structured outputs tell your AI what you want it to find for you and at the end of the task it will provide you with a file containing all of your data. • Marketing & SEO: Auto-generate content, analyze competitors, extract insights. • Research: Summarize articles, gather data, manage citations efficiently. • Productivity: Automate repetitive tasks like emails, forms, data entry. Experience Powerful, Private AI Browsing Now: Install the extension. Add your API keys (or use credits). Command AI directly in your browser. Agentic Browser – #1 Agentic Automation Tool for Chrome - Direct, Private AI Power.
Browser Annotations
A Chrome DevTools extension to send feedback to your coding agent Select an element, add feedback, and send it to your coding agent. Use the skill or simply copy as markdown. Features: - Annotate elements — Select an element and write your feedback - Works anywhere — Annotate any website from your Chrome DevTools, no project setup - Live agent collaboration — Send feedback directly to your Pi or Claude Code session via a webhook - Copy as markdown — Copy an element's context or your feedback at any time - Full context — Includes an element's selector, position, size, viewport, and device info - Attach screenshots — Optionally include a screenshot of the selected element - Source mapping — Links elements to React and Svelte source code during development - Batch annotations — Annotate elements across multiple pages and send them as one prompt
Agentation Vue
Turn UI annotations into coding-agent instructions. Click any element, add a note, and paste into any AI tool. Agentation Vue turns visual feedback into structured instructions for AI coding agents. Click any element on a page, leave a comment, and copy the output as Markdown — ready to paste into Claude Code, Cursor, Copilot, or any LLM. 1. Click the toolbar icon (or double-tap a modifier key) to enter inspect mode. 2. Hover over any element — it highlights automatically with full CSS path detection. 3. Click to pin a numbered marker and type your note. 4. Hit "Copy" — structured Markdown lands in your clipboard, ready for your AI tool. - Click-to-annotate — Pin markers on any element with a single click. - Multi-select — Shift+drag to rubber-band multiple elements at once. - Area select — Alt+drag to annotate a screen region. - Text selection — Highlight specific text to annotate it. - Vue component tree — Automatically detects the full Vue component hierarchy (works on any Vue 2.7 or Vue 3 app). - Keyboard-first — Double-tap a modifier key to toggle; hold it to "peek" without interrupting your flow. - Two detail levels — Standard for quick feedback, Forensic for deep debugging (bounding boxes, computed styles, accessibility attributes). - Themes — Light, dark, or auto (follows your system preference). - Session persistence — Annotations survive page refreshes, scoped per URL. The Markdown output is designed for LLMs: each annotation includes the element tag, its CSS selector path, your comment, the Vue component chain, and nearby context. Forensic mode adds viewport dimensions, user agent, bounding boxes, CSS classes, computed styles, and accessibility info — everything an AI agent needs to locate and fix the issue. All data stays in your browser. Annotations are stored in sessionStorage — nothing is sent to any server. Works fully offline. WHO IT'S FOR - Developers using AI pair-programming tools (Claude Code, Cursor, Windsurf, Copilot...) - QA teams reporting bugs with precise element context - Designers handing off feedback on live sites - Anyone who wants to point at a UI and tell an AI exactly what to change Unofficial community-maintained Vue.js port of Agentation (agentation.dev) by Ben Taylor. Also available as an NPM package for embedding directly in your Vue app.
UI Builder with Gemini AI
Create HTML with Gemini AI and preview live Chrome Extension that builds complete HTML/CSS/JS websites with Gemini AI — live preview, inspect & edit elements, multi-page management, AI prompt suggestions, and multi-page deployment to Netlify. Generate HTML with AI: - Describe the UI in natural language (Vietnamese), and Gemini generates complete HTML (single-file, inline CSS/JS) - Two AI modes: Flash (fast) and Thinking (deeper reasoning) — switchable via toggle - Iterative editing — each new prompt automatically includes the current HTML, so AI changes only the requested parts while preserving CSS/structure - Conversation context — each page keeps its own chat context, so follow-up prompts understand previous context Inspect & Edit Elements: - Enable Inspect mode → hover to highlight elements → click to select - Describe changes for the selected element → AI edits only that element’s `innerHTML` - Display the CSS selector of the element being edited Device Preview: - Preview in 3 sizes: Desktop (100%), Tablet (768px), Mobile (375px) - Quick switching via toolbar on the preview Multi-page Management: - Create, rename (double-click), and delete multiple pages - Each page is an independent workspace with its own conversation context - Fast page switching, with full JavaScript support via sandbox blob URL Link Navigation & Auto Page Creation: - Click a link in preview → show modal to create a new page or navigate to an existing page - Page name is derived from the link text (supports Vietnamese diacritics) - Prompt splitting: user sees a clean prompt, internal instructions are appended automatically - Smart matching: match by page name + slug fallback (Vietnamese diacritics-safe) AI Suggestions (Prompt Suggestions): - Automatic suggestions from presets + AI-powered completion from Gemini - Ghost text displays suggestions; press Tab to accept - LRU cache (50 items) to avoid duplicate API calls - Works in both the main prompt and create-page modal History & Revert: - Every generate/edit action is saved (prompt + full HTML) - Click a history item to view older versions - Revert — the next prompt continues from the reverted version Deploy to Netlify (Multi-page): - Connect using a Netlify Personal Access Token - One site for all pages — deploy/update under the same URL - First page → `/index.html` (root), other pages → `/slug/index.html` - Automatically rewrite links between pages - Auto-recreate site if it was deleted on Netlify
