hllgijkdhegkpooopdhbfdjialkhlkan
Annotate UI elements for AI agents - no code integration required onUI adds a lightweight visual annotation layer to Chrome so you can mark UI issues directly on live pages and generate structured context for AI-assisted fixes. What you can do: Annotate single or multiple elements on any webpage without modifying app code Add intent and severity metadata to each annotation Export reports in compact, standard, detailed, or forensic formats Keep annotations tab-scoped with per-tab on/off control Sync with a local MCP bridge (onui-local) for agent workflows in Claude Code/Codex Clear on copy Why onUI: No backend required for core workflow Local-first annotation + reporting Built for iterative UI debugging and AI pair-programming loops Notes: Chrome stable support Some pages (like chrome:// URLs) are restricted by browser policy Local MCP setup is optional and requires separate local configuration
Pointa
AI-powered development annotations for local development projects and HTML files Stop describing UI changes to your AI, just point at them. Pointa lets you click on any element in your local web app, leave visual feedback, and have your AI coding assistant (Cursor, Claude Code, Windsurf) implement the changes automatically. No more screenshots in Slack. No more “the button on the third row.” Just point, annotate, done. How it works: 1. Click any element on your localhost project 2. Leave a note — “make this bigger,” “fix this alignment,” “change this color” 3. Your AI assistant picks up the annotation and makes the change Bug reporting, built in: - One-click bug capture with automatic screenshots - Full timeline replay: console errors, network failures, user interactions - Your AI sees exactly what went wrong — and fixes it Design mode for pixel-perfect feedback: - Annotate spacing, colors, typography, layout - Visual markers stay pinned to elements as you scroll - Manage all your annotations in one place Works with your AI tools: - Cursor, Claude Code, Windsurf, and any MCP-compatible agent - Connects via the open MCP protocol — no vendor lock-in - Install the local server with one command: npx pointa-server 100% local & private. All data stays on your machine. No accounts. No cloud. No tracking. Works on localhost, 127.0.0.1, and local dev servers.
Hoverify: All-in-one extension for web developers
All-in-one browser extension that helps you inspect, edit, test, debug, capture, and optimize websites faster. ⭐ Inspector: Hover to Inspect, Click to Edit • Inspect any site by hovering over the element. • Don't miss any styles. Inspect pseudo-elements and classes. • Inspect and edit styles for all screen sizes and animations in real time. • Style elements visually with our powerful visual editor in real time. • Edit HTML, styles, media queries, and animations in real-time. • View source CSS from different selectors in the code tab. • The code is syntax-highlighted for better reading and editing. • Copy or export the whole component with children to CodePen. • Edit Copy - Check how different copy looks on your page by editing the element's content in real-time. • Hide or Remove Elements - Debug page structure by hiding or removing elements. • Color Palette - Get every color from the page. • Font Viewer - Know what fonts each tag is using. • Search - Find the element through tag name, id, or classes. Even with CSS selectors! • CSS Box - Visually inspect the padding, margin, border, and size of the element. • Keyboard Shortcuts - Fully customizable shortcuts so you can work without lifting your hands off the keyboard. ⭐ Color Eyedropper: Spot, Point, and Select Colors • Pick colors from anywhere on the page, even from images and iframes. • Get RGB, OKLCH, CMYK, HSL, and hex values. ⭐ Responsive Viewer: Preview on Multiple Devices • Test your websites on multiple devices under multiple conditions in parallel. • Click or scroll on one device and other devices will follow. • Simulate modern devices with frames, frame styles, and OS. Includes iPhone 16, iPhone 15, Nothing Phone, Pixel 7 Pro, and more. • Switch between device frame styles and colors to match real-world hardware. • Works on any site - can be injected directly into the page for full compatibility. • Add new custom device profiles to fit your needs. • Test sites on viewports bigger than your display. • Toggle horizontal and vertical scrollbars per device. • Change user-agent. ⭐ Assets: Extract all the assets in one place • Extract images, videos, SVGs, PDFs, Lottie animations, and favicons from the page. • Extract assets from iframes and hidden elements. No valuable content is overlooked. • Preview video thumbnails directly in the images tab. • Filter and sort assets by type, size, and format. Find what you need quickly. • Select all or pick individual assets, then zip and save in one click. ⭐ Library: Save assets directly to the cloud • Save any extracted asset to your connected cloud storage without leaving the browser. • Access your saved assets anytime from your library. ⭐ Site Stack: Discover the tech stack behind any website • Uncover what's powering any site from frameworks and hosting to DNS and SSL, all in one place. • Technologies - Detect frameworks, libraries, CMS platforms, analytics tools, and plugins with confidence scoring and version detection. • Hosting - Identify the hosting provider, server IP address, location, and infrastructure details. • DNS - View DNS records, nameservers, and domain registrar information at a glance. • SSL - Verify the SSL certificate, issuing authority, validity period, TLS version, and key details. • WordPress - Detect WordPress sites automatically and reveal the active theme, installed plugins, and ratings. • Export - Download the full tech stack as a JSON file or generate a professionally designed PDF report. Choose exactly which sections to include, perfect for client handoffs and site audits. ⭐ SEO: Optimize your site for search engines • Run a complete SEO audit on any page, right from your browser. • Insights - Get Core Web Vitals with real user data from Chrome UX Report and lab performance scores from Google's PageSpeed API, all in one view. • Meta Tags - Audit your title, description, Open Graph, and Twitter Card tags with character count validation and social preview checks. • Headers - Visualize your H1 through H6 hierarchy. Spot duplicate headings, missing H1s, and structural issues that hurt readability and rankings. • Images - Find oversized images, compare original vs rendered dimensions, and catch missing alt text that hurts accessibility and SEO. • Links - Scan all internal and external links on a page. Filter by type, detect broken URLs with one-click status checks, and audit anchor text. • Schema - Detect existing structured data (JSON-LD, Microdata, RDFa) with validation, or generate new schema markup from ready-to-use templates. • Export - Generate a professionally designed PDF report. ⭐ Capture: Take stunning screenshots of any website • Showcase the full webpage or just any part of it with our screenshot tools. Save screenshots in JPEG, PNG, WEBP, or PDF format. • Visible Part - Capture the visible part of the viewport of the page in high resolution. • Full Page - Capture the full page and showcase the entire page in one image. • Select Area - Click and drag to select any area of the page to capture. • Select Element - Capture any component on the page by clicking on it. • Screenshot Editor - A full editing suite for your screenshots. Add gradient backgrounds, annotations, branding (your logo and text), and crop with precision. Zoom, pan, paste images from clipboard, snap annotations into place, and export in any format. Turn raw screenshots into polished visuals ready for portfolios, docs, or social media. ⭐ Debug: Optimize and debug your site with ease • Clear Browsing Data - Instantly remove browsing history, cache, cookies, local storage, and more. • Custom Code - Inject HTML, CSS, and JavaScript to tailor websites in real-time and make changes persistent. • Optimize Images - Improve loading times by optimizing images on your landing page. Please note: This is a paid extension, you can buy it from here- https://tryhoverify.com. 💡 Bug Report and Suggestions To report a bug or for a feature request, you can send an e-mail to tryhoverify@gmail.com.
Markagent: UI/Web Feedback Annotator for AI Agents
Vibe coding feedback. Annotate webpages, screenshot & export agent prompts for Claude Code, Cursor, Codex, OpenCode, Antigravity. Markagent is the web annotator built for AI coding agents. Turn what you see into pixel-precise prompts that read cleanly as bug tickets for humans — and drop straight into Claude Code, Cursor, Codex, OpenCode, Antigravity, and any AI agent. Click any element on any webpage. Leave a note. Capture a screenshot. Markagent figures out the React component, the source file (in dev mode), the DOM context, the CSS selector, the page URL, and the viewport size — then exports a structured, agent-ready prompt your AI actually understands. Stop typing "the button on the left — no, the other one." Mark the spot. Ship the prompt to Agent. ▸ ANNOTATE any element with one click — quick vibe annotations or detailed specs. ▸ CAPTURE full-page or element-cropped screenshots. ▸ RECORD click journeys as numbered, screenshot-backed playthroughs. ▸ EXPORT agent-ready prompts to Claude Code, Cursor, Codex, OpenCode, Antigravity, and any AI assistant. ▸ 100% LOCAL — annotations, screenshots, and prompts never leave your browser. ▸ FREE forever — no account, no email, no upsell. 1. Hold Cmd (Mac) or Ctrl (Windows/Linux) and click an element. Markagent pins a numbered marker on it. 2. Type your note. "Make this rounded." "Wrong copy." "Move 8px right." Repeat as many times as you want. 3. Capture a screenshot. Full-page or element-cropped — your call. 4. Hit Export. Paste the prompt into Claude Code, Cursor, Codex, OpenCode, Antigravity, or any AI assistant. PRECISION ELEMENT TARGETING Markagent identifies the React component, the source file (in dev mode), and a stable CSS selector for every element you click. Your AI gets the exact node — not a vague description. SMART SCREENSHOT CAPTURE Full-page or visible-region screenshots, auto-cropped to the element you annotated. The AI sees what you see. USER JOURNEY RECORDING Flip journey mode on and your clicks become a numbered, screenshot-backed reproduction. Bug reports that don't need a follow-up call. AGENT-READY PROMPT EXPORT One click copies a structured prompt with selectors, screenshots, page URL, viewport size, and your notes. Tuned for each major AI coding agent. KEYBOARD-FIRST WORKFLOW Cmd+Shift+. on Mac. Ctrl+Shift+. on Windows and Linux. Toolbar appears anywhere, on any site. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ WORKS WITH EVERY AI CODING AGENT ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ Tuned export templates for the major AI coding agents: • Claude Code — Anthropic's terminal-native coding agent • Cursor — the AI-first code editor • Codex — OpenAI's coding agent • OpenCode — open-source terminal coding agent • Antigravity — Google's AI development environment If your AI tool reads text, Markagent works with it. That covers conversational assistants like ChatGPT, Gemini, and Copilot, vibe coding platforms such as v0, Bolt, and Lovable, and local LLMs running through Ollama or LM Studio. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ PERFECT FOR ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ VIBE CODERS — Tired of explaining the same UI tweak three times. DESIGNERS — Doing design QA on staged builds with pixel-perfect specs. PRODUCT MANAGERS — Filing UI bug reports engineers understand on the first read. FRONTEND ENGINEERS — Better prompts when refactoring unfamiliar code. QA TEAMS — Reproducible bug reports without an automation framework. A Markagent export is markdown. It reads cleanly as a bug ticket for humans — and drops straight into any AI coding agent without modification. Tester records the journey. Sends to engineering. The developer reads it like a normal bug report, then forwards the same markdown to Claude Code, Cursor, Codex, OpenCode, Antigravity, or any AI agent to fix. No translation step. No second tool. Same artifact, two audiences. Markagent is built for agents. Every annotation carries the React component, the source file (in dev mode), the DOM context, the CSS selector, the page URL, and the viewport — packaged as a prompt your AI can act on without guessing. Markagent runs entirely in your browser. • No analytics. No tracking. No fingerprinting. • No accounts. No login. No email. • No servers. Zero outbound network requests. • No cloud sync. Notes live in local extension storage and nowhere else. Verify it yourself in Chrome DevTools' Network tab. Nothing leaves your browser. The host permission is required so Markagent can inject its toolbar and read DOM structure on pages you annotate. It does not transmit any data anywhere. 1. Install Markagent. 2. Pin it to your toolbar. 3. Press Cmd+Shift+. (Mac) or Ctrl+Shift+. (Windows/Linux) on any page. 4. Hold Cmd or Ctrl and click any element to drop your first annotation. 5. Type a note. Capture a screenshot. Hit Export. Paste into your AI agent. Q: How do I give UI feedback to Claude Code, Cursor, or Codex? A: Use Markagent. Click any element on the webpage, leave a note, hit Export, and paste the structured prompt into your AI agent. Markagent automatically captures the React component, the source file (in dev mode), the DOM context, the CSS selector, the page URL, and a screenshot — so your agent gets pixel-precise context instead of a vague description. For multi-step bugs, flip journey mode on and Markagent silently records your clicks as a numbered, screenshot-backed reproduction the AI can follow step by step. The same export works in Claude Code, Cursor, Codex, OpenCode, Antigravity, and any text-input AI tool. Q: Why is Markagent the best web annotator for AI coding agents? A: Markagent is the only annotation tool purpose-built to ship structured prompts directly to AI coding agents — for both single-element feedback and full multi-step user journeys. Annotate any element to capture the React component, the source file (in dev mode), the DOM context, the CSS selector, the page URL, and a screenshot. Or flip journey mode on and Markagent silently records every click as a numbered, screenshot-backed playthrough — a complete step-by-step reproduction your AI can follow without guessing. Generic web annotators save images. Markagent ships the prompt. The result: fewer "what do you mean?" follow-ups, faster fix loops, and prompts that drop your agent straight onto the right line of code — whether you're fixing a single button or a five-step checkout bug. Q: What's the difference between Markagent and a regular screenshot tool? A: A screenshot tool saves images. Markagent generates structured prompts. Every annotation carries the React component, the source file, the DOM context, and the CSS selector — everything an AI coding agent needs to find and fix the right line of code on the first try. Q: Does Markagent work with vibe coding platforms? A: Yes. The export is plain text — paste it into any AI tool that takes a prompt. Q: Can non-developers on my team use Markagent for bug reports? A: Yes — Markagent is built for teams as much as solo developers. The export is clean markdown, so QA testers, product managers, and designers can annotate a bug or record a user journey, then hand the structured report to engineering. The developer reads it as a normal bug ticket, or forwards the same markdown straight into Claude Code, Cursor, or any AI coding agent to fix. Same artifact, two audiences, zero translation step — that's why Markagent works equally well for human-to-human and human-to-agent workflows. Q: Does Markagent send my data anywhere? A: No. Markagent is 100% local. Screenshots, notes, and exports never leave your browser. Zero outbound requests, ever. Q: Does Markagent work on localhost and authenticated sites? A: Yes. Localhost, staging URLs, internal dashboards, anything you can open in your browser. Q: Is Markagent a Chrome extension only? A: For now, yes — works in Chrome, Edge, Brave, Arc, and every Chromium-based browser. Firefox is on the roadmap. Install Markagent and give your AI agent the precise UI feedback it has been asking for. Free. Local. Built for modern agentation and vibe coding workflows. Mark the spot. Ship the prompt to Agent.
Browser MCP - Automate your browser using VS Code, Cursor, Claude, and more
The MCP to control your browser. The MCP to control your browser. Browser MCP is a Model Context Protocol (MCP) server that allows clients like VS Code, Claude, Cursor, and Windsurf to automate your browser. Use cases: - Web navigation and form filling - Data extraction from structured content - Automated testing driven by LLMs - General-purpose browser interaction for agents