repository·main·Indexed 27 days ago
https://github.com/agentdeskai/browser-tools-mcpAn MCP (Model Context Protocol) server that enables AI-powered applications to monitor and interact with a web browser. It allows agents to capture screenshots, monitor console logs, and run automated web audits for SEO, Performance, Accessibility, and Best Practices via a companion Node server and Chrome extension.
The system consists of three layers to enable AI interaction with the browser:
browser-tools-server): Acts as middleware. It receives logs from the extension, processes requests from the MCP server, truncates data to fit token limits, and removes sensitive headers/cookies before sending data to the LLM.browser-tools-mcp): Implements the Model Context Protocol, providing standardized tools (like the audit tools mentioned above) to MCP-compatible clients like Cursor, Claude Desktop, Cline, or Zed.The service includes the following capabilities:
To use BrowserTools MCP, you must run three distinct components. Note that this project is no longer active; please use a different solution.
npx @agentdeskai/browser-tools-mcp@latestnpx @agentdeskai/browser-tools-server@latestAfter setup, open Chrome DevTools and navigate to the BrowserToolsMCP panel.
Troubleshooting:
browser-tools-server.npx @agentdeskai/browser-tools-mcp@latest
npx @agentdeskai/browser-tools-server@latestTo use the Model Context Protocol in your TypeScript project, install the official SDK via npm.
npm install @modelcontextprotocol/sdkSampling allows an MCP server to request LLM completions through the client. This enables agentic behaviors like decision-making or data generation.
Note: This feature is not yet supported in the Claude Desktop client.
Flow:
sampling/createMessage request to the client.Key Parameters:
messages: Array of conversation history (role and content).modelPreferences: Hints for the client (e.g., costPriority, speedPriority, intelligencePriority).includeContext: Specifies context to include ("none", "thisServer", or "allServers").systemPrompt: Optional system prompt request.{
"method": "sampling/createMessage",
"params": {
"messages": [
{
"role": "user",
"content": {
"type": "text",
"text": "What files are in the current directory?"
}
}
],
"systemPrompt": "You are a helpful file system assistant.",
"includeContext": "thisServer",
"maxTokens": 100
}
}3025.Prompts allow servers to define reusable templates and workflows that clients can surface to users. Prompts are user-controlled and can accept dynamic arguments and include context from resources.
A prompt definition includes:
name: Unique identifier.description: Human-readable description.arguments: An optional list of objects containing name, description, and required (boolean).The server provides AI-optimized audit capabilities for Accessibility, Performance, SEO, and Best Practices. All audits implement a "smart limit" to ensure high-impact issues are prioritized for AI consumption:
MCP supports real-time updates for resources through two mechanisms:
notifications/resources/list_changed notification.resources/subscribe. The server then sends notifications/resources/updated when the content changes. Clients can then fetch the latest content via resources/read and eventually resources/unsubscribe.You can run the Browser Tools MCP Server using npx or install it globally via npm.
Prerequisites:
npx @agentdeskai/browser-tools-mcpOr install globally:
npm install -g @agentdeskai/browser-tools-mcpThe stdio transport enables communication through standard input and output streams. This is the preferred method for building command-line tools, local integrations, or simple process communication via shell scripts.
const server = new Server({
name: "example-server",
version: "1.0.0"
}, {
capabilities: {}
});
const transport = new StdioServerTransport();
await server.connect(transport);