A
securityA
licenseA
qualityA Model Context Protocol server that enables LLMs to read, search, and analyze code files with advanced caching and real-time file watching capabilities.
Last updated -
6
11
34
MIT License
Enables execution of JavaScript code in the browser context, returning values and allowing DOM manipulation.
Provides the runtime environment for the MCP server, allowing it to be run as a standalone server.
Used as the implementation language for the MCP server, with project structure supporting TypeScript development.
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
Tool | Description | Parameters |
| Open a URL in Simple Browser |
(required),
(optional) |
| Navigate to a different URL |
(required) |
| Get the currently displayed URL | None |
| Refresh the current page | None |
| Execute JavaScript in browser context |
(required),
(optional) |
| Retrieve console logs |
(optional),
(optional),
(optional) |
| Clear stored console logs | None |
| Get current browser state | None |
| Close the Simple Browser | None |
Installation
Clone the repository:
git clone https://github.com/YOUR_USERNAME/vscode-simple-browser-mcp.git cd vscode-simple-browser-mcpInstall dependencies:
npm installBuild 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
{
"mcpServers": {
"vscode-simple-browser": {
"command": "node",
"args": [
"/path/to/your/vscode-simple-browser-mcp/build/index.js"
]
}
}
}
Standalone
Run the server directly:
npm start
Development
Project Structure
vscode-simple-browser-mcp/
├── src/
│ └── index.ts # Main MCP server implementation
├── build/ # Compiled JavaScript output
├── .vscode/
│ ├── mcp.json # MCP server configuration
│ └── tasks.json # VS Code tasks
├── .github/
│ └── copilot-instructions.md
├── package.json
├── tsconfig.json
└── README.md
Development Commands
npm run build- Build the TypeScript projectnpm run dev- Watch mode for developmentnpm start- Run the compiled server
Adding New Tools
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", }, ], }; } );Update this README with the new tool information
Example Usage
Opening a Website
Please open https://example.com in the Simple Browser
Executing JavaScript
Execute JavaScript to get the page title: document.title
Monitoring Console Logs
Get the latest console logs from the browser
Getting Browser State
What's the current state of the browser?
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
Fork the repository
Create a feature branch:
git checkout -b feature/your-feature-nameMake your changes
Add tests if applicable
Commit your changes:
git commit -am 'Add some feature'Push to the branch:
git push origin feature/your-feature-nameSubmit 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
This server cannot be installed
Related Resources
Related MCP Servers
- -securityAlicense-qualityA Model Context Protocol server that allows LLMs to interact with web content through standardized tools, currently supporting web scraping functionality.Last updated -1MIT License
- Asecurity-licenseAqualityA Model Context Protocol server that connects LLMs to the Compiler Explorer API, enabling them to compile code, explore compiler features, and analyze optimizations across different compilers and languages.Last updated -515
- AsecurityAlicenseAqualityA Model Context Protocol server that enables LLMs to interact with web pages, take screenshots, generate test code, scrape web pages, and execute JavaScript in a real browser environment.Last updated -29616MIT License