The $3 Solution: Giving Claude Visual Inspection Capabilities

Created a Model Context Protocol server in under an hour that gives Claude the ability to visually inspect HTML files it helps create, demonstrating rapid development of practical AI-augmentation tools.

MCP Development Technical Innovation Open Source
Rapid Development Protocol Integration System Design MCP Development AI Augmentation Claude Tools

Bridging AI's Visual Gap

When building web interfaces with AI assistance, a critical limitation emerged: Claude could write HTML and CSS but couldn't actually see the results. This disconnect between code creation and visual verification meant extra work for developers who needed to manually check and describe the output back to the AI. The solution? A custom Model Context Protocol (MCP) server that would give Claude "eyes" to inspect web pages directly.

What started as a simple idea turned into a powerful demonstration of rapid tool development. In under an hour, and for just $3.03 in API costs, we created a system that fundamentally enhanced Claude's ability to assist with web development. This isn't just a story about building a preview tool – it's about how quickly we can augment AI capabilities when we identify specific, practical needs.

Technical Architecture

graph TD A[Client Request] -->|HTML File Path| B[MCP Server] B --> C[File System Operations] B --> D[Puppeteer Controller] subgraph Preview Process D --> E[Load HTML] E --> F[Inject CSS] F --> G[Capture Screenshot] G --> H[Save Image] end subgraph Analysis C --> I[Read File] I --> J[Parse Structure] J --> K[Generate Report] end H --> L[Image Storage] K --> M[Analysis Results] L & M -->|MCP Response| N[Claude]

The system architecture prioritizes simplicity and efficiency while maintaining robust functionality. By leveraging Puppeteer for headless browser control and integrating it with the MCP SDK, we created a seamless bridge between Claude's code analysis capabilities and visual inspection needs.

Core Implementation

The heart of the system lies in its ability to handle local resources efficiently:

Watercolor painting with geometric shapes behind male figures 
                    
                    class PreviewServer {
                    private screenshotDir: string;
                    
                    constructor() {
                        this.screenshotDir = path.join(__dirname, 'screenshots');
                        this.ensureDirectoryExists();
                    }

                    async previewFile(filePath: string): Promise {
                        const browser = await puppeteer.launch();
                        const page = await browser.newPage();
                        
                        // Handle local file loading with proper path resolution
                        const absolutePath = path.resolve(filePath);
                        await page.goto(`file://${absolutePath}`);
                        
                        // Ensure CSS is properly loaded
                        await this.injectStyles(page);
                        
                        // Capture and save screenshot
                        const screenshotPath = await this.captureScreenshot(page);
                        
                        await browser.close();
                        
                        return {
                        screenshot: screenshotPath,
                        analysis: await this.analyzeStructure(filePath)
                        };
                    }

Technical Challenges Overcome

Local Resource Access

CSS Injection

  • Direct filesystem reading of stylesheets
  • Programmatic style injection via Puppeteer
  • Relative path resolution for resources

Path Management

  • Absolute path handling implementation
  • Dedicated screenshot directory creation
  • Proper file system permissions setup

Environment Integration

Watercolor with geometric shapes behind the male figures 
                    
                    const configureEnvironment = (): void => {
                    // Handle ES module path resolution
                    const __dirname = path.dirname(fileURLToPath(import.meta.url));
                    
                    // Set up screenshot directory
                    const screenshotDir = path.join(__dirname, 'screenshots');
                    fs.mkdirSync(screenshotDir, { recursive: true });
                    
                    // Configure MCP server settings
                    process.env.MCP_SERVER_PORT = '3000';
                };

Impact and Results

53m
Development Time
$3
Total Cost
287
Lines of Code

Capability Enhancements

  • Full-page screenshot capture
  • CSS-styled preview generation
  • Detailed HTML structure analysis
  • Local file system integration

Community Benefits

  • Open source availability
  • MIT License for maximum flexibility
  • Clear contribution guidelines
  • Comprehensive documentation

Open Source Release

Watercolor of men at a lake in the woods

The project is now available on GitHub, enabling others to:

Implementation Options

  • Claude OS configuration
  • Cline VSCode extension setup
  • Custom environment integration

Project Structure

  • TypeScript implementation
  • Full documentation
  • Contributing guidelines
  • Proper .gitignore setup

Future Development

The success of this rapid development project opens several exciting possibilities:

Enhanced Preview Features

  • Responsive design testing
  • Interactive element inspection
  • Animation preview support

Extended Integration

  • CI/CD pipeline integration
  • IDE plugin development
  • Multi-file project support

Community Expansion

  • Additional browser support
  • Custom preview templates
  • Enhanced analysis tools

Key Takeaways

This project demonstrates how specific, well-defined problems can be solved quickly and cost-effectively when approached with the right tools and focus. In less time than a typical meeting and for less than the cost of a coffee, we created a tool that fundamentally enhances AI-assisted web development.

The success of this rapid development approach, combined with the decision to open source the solution, shows how individual solutions can become community resources.

Sometimes the most impactful tools aren't the ones that take months to build, but rather the focused solutions that address specific, immediate needs.