vibe-view

itsocialist/vibe-view

3.2

If you are the rightful owner of vibe-view and would like to certify it and/or have it hosted online, please leave a comment on the right or send an email to henry@mcphub.com.

The Visual Debugging Agent is a VS Code extension that functions as an MCP server, enabling visual debugging of web applications in VS Code's Simple Browser.

Tools
1
Resources
0
Prompts
0

Visual Debugging Agent

A VS Code extension that acts as an MCP (Model Context Protocol) server for visual debugging of web applications running in VS Code's Simple Browser.

Overview

This extension provides a standardized way for LLMs (like Claude) to "see" and reason about the visual state of web applications. It exposes a captureSimpleBrowser tool through the MCP protocol, allowing AI assistants to capture and analyze web content for debugging purposes.

Features

  • MCP Server Integration: Registers as an MCP server provider for seamless integration with Claude Code and other MCP-compatible LLMs
  • Simple Browser Integration: Captures content from VS Code's built-in Simple Browser
  • Phase 1 (Current): Returns HTML placeholders for basic functionality testing
  • Phase 2 (Planned): Full visual screenshot capture using headless browser technology
  • Phase 3 (Future): Advanced features like context menus and automatic captures

Installation

Development Setup

  1. Clone this repository
  2. Install dependencies: 
    npm install
  3. Compile the TypeScript code: 
    npm run compile
  4. Open in VS Code and press F5 to launch the extension in a new Extension Development Host window

Usage

With Claude Code

  1. Ensure the Claude Code extension is installed in VS Code
  2. The Visual Debugging Agent will automatically register as an available MCP server
  3. Open a web page in VS Code's Simple Browser (Command Palette ā†’ "Simple Browser: Show")
  4. Ask Claude to capture the browser content: 
    Can you capture the current Simple Browser content?

Available Tools

captureSimpleBrowser

Captures the content of the currently active Simple Browser pane.

Parameters:

  • selector (optional): CSS selector to capture specific element content

Returns:

  • Phase 1: HTML placeholder with status information
  • Phase 2: Actual screenshot image path for visual analysis

Development Phases

Phase 1 (MVP) āœ… COMPLETED

  • Basic VS Code extension setup
  • MCP server registration with proper manifest configuration
  • Standalone MCP server process with stdio transport
  • HTML placeholder capture tool implementation
  • Integration with Claude Code via .claude.json configuration
  • Fixed input schema validation and tool registration
  • Successfully tested in development environment

Phase 2 (Visual Capture with html2canvas) šŸŽÆ NEXT

  • Add html2canvas dependency for browser-native screenshot capture
  • Access VS Code Simple Browser webview content via extension API
  • Inject html2canvas into webview and capture rendered content
  • Store generated images in extension workspace storage (context.storageUri)
  • Return image file paths to MCP clients for visual analysis
  • Support element-specific captures via CSS selectors

Phase 3 (UI Enhancements & Advanced Control)

  • Sticky Widget: Floating capture button overlay on Simple Browser
  • Right-Click Menu: Context menu integration for instant screenshot capture
  • Capture Options UI: Dropdown for element selection, full page, viewport
  • Integrate Puppeteer/Playwright for advanced browser automation
  • Add browser interaction capabilities (clicking, scrolling, form filling)
  • Implement dynamic content manipulation before screenshot
  • User-configurable settings for automatic captures
  • Enhanced error handling and user notifications
  • Real-time preview thumbnails in widget

Architecture

VS Code Extension
ā”œā”€ā”€ Extension Host Process
ā”‚   ā”œā”€ā”€ extension.ts (Main activation logic)
ā”‚   ā””ā”€ā”€ mcpServerProvider.ts (MCP server registration)
ā””ā”€ā”€ MCP Server Process
    ā””ā”€ā”€ mcpServer.ts (Tool implementation)

The extension uses VS Code's vscode.lm.registerMcpServerDefinitionProvider API to register an MCP server that runs as a separate Node.js process. This provides security isolation and allows the server to be discovered by any MCP-compatible LLM client.

Building and Packaging

# Compile TypeScript
npm run compile

# Watch for changes during development
npm run watch

# Lint the code
npm run lint

# Package the extension
npx vsce package

Contributing

  1. Fork the repository
  2. Create a feature branch
  3. Make your changes
  4. Run tests and linting
  5. Submit a pull request

License

This project is licensed under the MIT License.

Current Status

āœ… Phase 1 Complete - The extension successfully:

  • Registers as an MCP server provider in VS Code
  • Provides a working captureSimpleBrowser tool
  • Integrates with Claude Code for testing
  • Returns HTML placeholder content with Simple Browser status detection

šŸš§ Ready for Phase 2 - Next steps:

  • Add html2canvas for browser-native screenshot generation
  • Implement webview content access via VS Code extension API
  • Inject html2canvas into Simple Browser webview for rendering
  • Store images in extension workspace and return file paths
  • Support CSS selector-based element capture

Roadmap

  • v0.1.0: āœ… Phase 1 implementation with HTML placeholders (COMPLETED)
  • v0.2.0: Phase 2 implementation with actual visual capture
  • v0.3.0: Phase 3 implementation with advanced features
  • v1.0.0: Production-ready release with full feature set