VS Code Simple Browser MCP Server

VS Code Simple Browser MCP Server

A Model Context Protocol (MCP) server that enables LLMs to interact with VS Code's Simple Browser, providing website interaction capabilities and console log monitoring.

Features

Browser Controls

• Open URLs: Launch websites in VS Code's Simple Browser
• Navigation: Navigate between different URLs
• Page Refresh: Reload the current page
• Browser State: Get current URL and browser status
• Close Browser: Close the Simple Browser window

Console Log Monitoring

• Real-time Logging: Capture console messages from web pages
• Log Filtering: Filter logs by level (log, warn, error, info, debug)
• Historical Logs: Retrieve logs with timestamps and source information
• Log Management: Clear console log history

JavaScript Execution

• Code Execution: Execute JavaScript code in the browser context
• Result Handling: Get return values from executed code
• DOM Manipulation: Interact with page elements through JavaScript

Available Tools

Installation

1. Clone the repository:
   git clone https://github.com/YOUR_USERNAME/vscode-simple-browser-mcp.git cd vscode-simple-browser-mcp
2. Install dependencies:
   npm install
3. Build the project:
   npm run build

Usage

With Claude Desktop

Add the server to your Claude Desktop configuration file:

macOS/Linux: ~/Library/Application Support/Claude/claude_desktop_config.json Windows: %APPDATA%\\Claude\\claude_desktop_config.json

Standalone

Run the server directly:

Development

Project Structure

Development Commands

• npm run build - Build the TypeScript project
• npm run dev - Watch mode for development
• npm start - Run the compiled server

Adding New Tools

1. Define the tool using the MCP SDK:
   server.tool( "tool_name", "Tool description", { parameter: z.string().describe("Parameter description"), }, async ({ parameter }) => { // Tool implementation return { content: [ { type: "text", text: "Tool result", }, ], }; } );
2. Update this README with the new tool information

Example Usage

Opening a Website

Executing JavaScript

Monitoring Console Logs

Getting Browser State

Architecture Notes

Current Implementation

This is a foundational implementation that provides:

• Basic browser control through simulated VS Code commands
• In-memory console log storage
• JavaScript execution simulation

Future Enhancements

For a production implementation, consider:

• Direct VS Code Extension API integration
• Real-time webview message passing
• Advanced console log capture mechanisms
• Screenshot capabilities
• Network request monitoring
• Element inspection tools

Contributing

1. Fork the repository
2. Create a feature branch: git checkout -b feature/your-feature-name
3. Make your changes
4. Add tests if applicable
5. Commit your changes: git commit -am 'Add some feature'
6. Push to the branch: git push origin feature/your-feature-name
7. Submit a pull request

Issues and Bug Reports

If you encounter any issues or bugs, please create an issue on GitHub with:

• A clear description of the problem
• Steps to reproduce the issue
• Your environment details (OS, VS Code version, Node.js version)
• Any relevant error messages or logs

License

ISC License

Support

For issues and questions:

• Check the MCP documentation
• Review VS Code Extension API documentation
• Create an issue in this repository
• Join the MCP community discussions

Roadmap

Future enhancements planned:

• Real-time console log streaming
• Network request monitoring
• Screenshot capture capabilities
• Advanced DOM inspection tools
• Performance monitoring integration
• Multi-tab browser support