gkofobaeeepjopdpahbicefmljcmpeof
Visual annotations for localhost dev projects. Send feedback to AI coding agents like Claude & Cursor via MCP. Transform your localhost development workflow with visual annotations for AI coding agents. Vibe Annotations lets you drop visual feedback directly on your development pages and send it to any AI coding agent. Annotate elements, describe what should change, and let your agent implement the fixes across multiple pages, respecting your responsive breakpoints. π Drop annotations: Click any element to leave a comment or an empty pointer for your AI agent to pick up and act on π¨ Direct design edits: Tweak CSS properties (font size, colors, layout, spacing) with live preview changes are captured as annotations for your agent to implement in source ποΈ Watch mode: Tell your agent "Start watching Vibe Annotations" β it picks up annotations as you drop them, implements changes, and loops. Hands-free π€ Works with Claude Code, Cursor, Windsurf, Codex, OpenClaw, and any MCP-compatible agent π€ Agent collaboration: let browser-based agents (Claude Chrome, OpenClaw) annotate autonomously as a styling or copywriting partner π Captures full element context: CSS selectors, styles, positioning, and viewport dimensions ποΈ Multi-page support: annotate across different routes in your SPA or multi-page app π Persistent inspection mode: stay in annotation mode to drop multiple pins efficiently β‘ Batch workflow: annotate β copy or let your agent read β implement β delete π Copy to clipboard with rich context formatting, or connect via MCP for automated reads π Auto-deletion after copy (opt-in) for streamlined iteration cycles π Per-site enabling (beta): optionally annotate on public URLs for design reference π§ Intelligent project detection prevents cross-project annotation mixing 1. Annotate: Click the extension icon, enter inspection mode, and click elements to add feedback 2. Send to your agent: Copy all annotations to clipboard and paste, or connect the MCP server for automatic reads 3. Implement: Your AI agent reads the annotations with full element context and applies the changes 4. Iterate: Delete resolved annotations and start the next cycle Install the companion server for direct agent integration. Your agent fetches annotations automatically without copy/paste. Claude Code: claude mcp add --transport http vibe-annotations http://127.0.0.1:3846/mcp Cursor / Windsurf / Codex / OpenClaw: Add the MCP server URL to your agent's config. See the extension's Get Started guide for full setup instructions. β Works With React, Vue, Angular, Next.js, Svelte, and all web frameworks Any localhost dev server (ports 3000, 5173, 8080, etc.) Local development domains (*.local, *.test, *.localhost) Local HTML files (file://) Public URLs via per-site opt-in (beta) Chrome browser with Developer mode or Chrome Web Store install Optional: vibe-annotations-server npm package for MCP integration Note: The extension auto-enables on localhost, local development domains, and file:// URLs.
Web to MCP: Import any website components to Cursor or Claude Code
A Chrome extension that captures website components and sends them to AI coding assistants like Cursor, Claude Code, Codex, etc Capture website components visually and turn them into ready-to-use code and prompts for your AI coding assistant. With Web To MCP, you can highlight any part of a live webpage, generate clean output, and send it directly into tools like Cursor or Claude Code through MCP integration. Web To MCP extension removes the guesswork from design-to-code workflows, giving developers and teams a faster way to build accurate front-end interfaces with real context from the web. Key features Capture components visually with a simple hover and click Generate instant code and prompts that can be used directly in your editor Seamless integration with Cursor and Claude Code through MCP Preserve pixel-perfect references for accurate design-to-code handoff Save hours of manual effort by automating repetitive front-end tasks Lightweight and secure Chrome extension built for speed How it works Install the Web To MCP Chrome extension from the Chrome Web Store. Enable the extension in your browser. Visit any website and hover over an element to highlight it. Click to capture the component and generate the code and prompt. Copy and paste directly into Cursor or Claude Code to start building. Why developers choose Web To MCP AI-powered workflow: Give your coding assistant clear context with visual and code inputs. Faster front-end development: Reduce design-to-code delivery time by up to 10x. Better accuracy: Stop relying on vague descriptions and pass real UI components instead. Works with your stack: Optimized for modern AI IDEs like Cursor and Claude Code. Improves collaboration: Designers, developers, and AI tools stay aligned with shared visual references. Use cases Quickly capture navigation bars, buttons, or layouts from live sites Speed up prototyping with real-world design elements Train AI coding assistants with exact visuals for better results Eliminate rework in front-end development by reducing miscommunication Automate repetitive coding tasks and focus on shipping features Requirements Google Chrome browser Cursor or Claude Code with MCP configured
onUI
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
Agent OS - AI Browser Automation & Smart Assistant for Web Tasks
AI-powered browser automation agent. Auto-fill forms, scrape data, automate workflows with intelligent task planning & execution. Transform your browsing experience with AI-powered automation. Agent OS is an intelligent browser assistant that helps you complete web tasks faster and more efficiently through natural language commands and smart execution planning. Agent OS brings artificial intelligence directly into your browser, enabling you to automate complex web tasks with simple natural language instructions. Whether you're filling out forms, extracting data, or performing repetitive actions across multiple websites, Agent OS understands your intent and executes tasks with precision. Key Automation Features: β’ Natural language task interpretation β’ Multi-step workflow planning and execution β’ Intelligent form detection and auto-filling β’ Dynamic content handling β’ Cross-page navigation and task continuation β’ Error detection and recovery β’ Task history and repeatability Extract structured data from any website without writing code. Agent OS intelligently identifies and extracts information, organizing it in formats ready for your use. Data Extraction Capabilities: β’ Automatic table detection and extraction β’ Product information gathering β’ Contact details and email extraction β’ Price monitoring and comparison data β’ Article and content scraping β’ Image and media file collection β’ Export to multiple formats (JSON, CSV, etc.) β’ Batch processing across multiple pages Smart Form Filling Automatically detect and fill form fields with intelligent data matching. Save time on repetitive data entry tasks across job applications, registrations, surveys, and more. Workflow Automation Create complex multi-step workflows that span across different websites. Agent OS remembers context and maintains state throughout your automation tasks. Side Panel Interface Access Agent OS through a convenient side panel that doesn't interrupt your browsing. View task progress, review plans, and maintain control without switching tabs. Debugger Integration Advanced Chrome debugger API integration enables precise control over page elements and interactions, ensuring reliable execution even on complex web applications. Task Planning & Review Before executing any task, Agent OS presents a detailed plan for your review. You maintain full control and visibility over what actions will be performed. Business & Productivity β’ Automate data entry into CRM systems β’ Extract competitor pricing information β’ Monitor website changes and updates β’ Compile research data from multiple sources β’ Generate reports from web-based dashboards Step 1: Describe Your Task Open the Agent OS side panel and describe what you want to accomplish in plain English. No coding or technical knowledge required. Example tasks: - "Fill out this contact form with my information" - "Extract all product names and prices from this page" - "Navigate to the checkout and enter my shipping address" - "Scrape all email addresses from this directory" Step 2: Review the Plan Agent OS analyzes your request and generates a detailed execution plan. Review each step to ensure it matches your intentions. Step 3: Approve & Execute Once you approve the plan, Agent OS executes each step automatically. Watch in real-time as tasks are completed, or minimize the panel and continue working. Step 4: Get Results Receive extracted data, confirmation of completed actions, or exported files. Save successful workflows for future reuse. Your privacy and security are our top priorities. Agent OS is designed with the following principles: Architecture β’ Manifest V3 compliant extension β’ Modern JavaScript architecture β’ Modular component design β’ Efficient resource usage β’ Background service worker implementation Browser Integration β’ Chrome side panel API β’ Active tab scripting β’ Debugger protocol support β’ Storage API for settings β’ Comprehensive permission model Compatibility β’ Chrome browser (version 88+) β’ Chromium-based browsers β’ Works on all websites (where permitted) β’ Responsive design for all screen sizes Performance β’ Lightweight footprint β’ Minimal memory usage β’ Fast execution times β’ Optimized for efficiency β’ Non-blocking operations Installation 1. Install Agent OS from the Chrome Web Store 2. Click the extension icon to open the side panel 3. Follow the quick setup wizard 4. Start automating your first task Configuration β’ Configure your AI API settings (if required) β’ Set up default form fill values β’ Customize automation preferences β’ Choose data export formats Tips for Success β’ Start with simple tasks to learn the interface β’ Use clear, specific task descriptions β’ Review plans carefully before execution β’ Save frequently used workflows β’ Check permissions for target websites Documentation Visit our comprehensive documentation portal for guides, tutorials, and API references: https://portal.agent0s.dev Regular Updates We continuously improve Agent OS with new features, performance enhancements, and security updates. Keep your extension updated for the best experience. Feedback Welcome We value your feedback and feature requests. Help us make Agent OS even better by sharing your experiences and suggestions. For Power Users: β’ Custom workflow scripting β’ API integration options β’ Advanced selector targeting β’ Conditional logic execution β’ Loop and iteration support β’ Variable and data storage β’ Complex multi-page automations For Developers: β’ Testing automation β’ Development workflow integration β’ API testing and validation β’ Form validation testing β’ User flow simulation For Data Analysts: β’ Structured data extraction β’ Data transformation pipelines β’ Batch processing capabilities β’ Export to analysis tools β’ Scheduled data collection Save Time Automate repetitive tasks that consume hours of your week. Focus on creative and strategic work while Agent OS handles the routine. Increase Accuracy Eliminate human error in data entry and form filling. Agent OS executes tasks consistently and precisely every time. Boost Productivity Complete tasks faster with intelligent automation. What takes minutes manually can happen in seconds with Agent OS. Work Smarter Let AI handle the tedious work while you focus on decision-making and creative tasks that require human insight. β’ Chrome browser (version 88 or higher) β’ Internet connection for AI features β’ API key for AI functionality (may be required for some features) β’ Appropriate permissions for target websites We're constantly working on new features and improvements. Upcoming enhancements include: β’ Enhanced natural language understanding β’ More data export formats β’ Workflow templates library β’ Collaborative automation sharing β’ Advanced scheduling capabilities β’ Browser automation API β’ Mobile companion app Start automating your web tasks today with Agent OS. Install now and experience the power of AI-driven browser automation. For more information, visit: https://agent0s.dev
AI Coding Prompt Enhancer | PromptDC
Improve your coding prompts with one click for every AI web platform like Lovable, ChatGPT, Replit & 40+ more. PromptDC enhances your coding prompts with one click β directly on Lovable, ChatGPT, Replit, Claude, and 40+ AI platforms. No tab switching. No copy-pasting. Just better prompts. 1. Go to any supported AI platform (Lovable, ChatGPT, Replit, etc.) 2. Write your prompt in the text input 3. Click the enhance button (β¨) on the floating toolbar 4. Your prompt is transformed into a clear, structured instruction 5. Send it and get better results β’ Enhance button (β¨) β Transform your prompt with one click β’ Community button β Access shared prompts from other developers β’ Settings button β Open sidebar to customize your experience β’ Disable button β Turn off PromptDC for the current session β’ Access community-shared prompts and system instructions β’ Save your best prompts to your personal library β’ Type "//" in any text field to quickly search and insert prompts β’ Create and share prompts, system prompts, and markdown files β’ Organize with categories: Security, UI/UX, Performance, Debugging, etc. β’ Select any text on a webpage β’ Right-click β "Save to Library" β’ Add name, description, type, and category β’ Reuse across all AI platforms anytime Customize how PromptDC enhances your prompts: β’ Language β Choose output language β’ Format β Regular, JSON, XML, or YAML output β’ Enhancement Mode β Simple (quick tasks) or Structured (complex implementations) β’ Override System Prompt β Replace our enhancement with your custom prompt β’ Always Include β Add text to every enhanced prompt (e.g., "Use TypeScript", "Follow CONVENTIONS.md") Works with popular AI tools and assistants used for coding and writing, such as ChatGPT, Claude, and Lovable, along with many other browser-based AI platforms. β AFTER: "Design and implement a beautiful, responsive food tracking app inspired by modern wellness platforms like MyFitnessPal and Yazio. Start with a polished landing/home page featuring a hero section, call-to-action button, and a dynamic daily food log. Define a fresh, inviting design system using vibrant greens, oranges, and subtle gradients. Implement the following features for the MVP: - A hero section with app name, tagline, and a main CTA - A daily food log component showing today's date, list of foods with calories/macros - An Add Food dialog/modal with fields for food name, calories, protein, carbs, and fats - Responsive layout and SEO best practices with semantic HTML Structure the codebase with small, reusable components (FoodLog, AddFoodModal, FoodEntryCard). All components must use design system tokens." β Coding-focused β Built specifically for developers β Platform-aware β Adapts enhancement to each AI platform β Inline enhancement β No tab switching required β Prompt library β Save and reuse your best prompts β Community prompts β Learn from other developers β Custom system prompt β Full control over enhancement logic β Always Include β Add project-specific rules to every prompt Q: Does it work with ChatGPT? A: Yes! PromptDC works directly on chatgpt.com with the floating toolbar. Q: Does it work with Claude? A: Yes! Full support for claude.ai including all features. Q: What's the // shortcut? A: Type "//" in any text field on supported sites to quickly search and insert prompts from your library or community. Q: Can I use my own enhancement prompt? A: Yes! Open sidebar β Enable "Override System Prompt" β Enter your custom instructions. Q: How do I turn it off temporarily? A: Click the red power button on the floating toolbar. Refresh the page to re-enable.
