[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-72632":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":17,"stars7d":18,"stars30d":19,"stars90d":16,"forks30d":16,"starsTrendScore":20,"compositeScore":21,"rankGlobal":10,"rankLanguage":10,"license":22,"archived":23,"fork":23,"defaultBranch":24,"hasWiki":25,"hasPages":23,"topics":26,"createdAt":10,"pushedAt":10,"updatedAt":32,"readmeContent":33,"aiSummary":34,"trendingCount":16,"starSnapshotCount":16,"syncStatus":35,"lastSyncTime":36,"discoverSource":37},72632,"browser-tools-mcp","AgentDeskAI\u002Fbrowser-tools-mcp","AgentDeskAI","Monitor browser logs directly from Cursor and other MCP compatible IDEs.","https:\u002F\u002Fagentdesk.ai\u002F",null,"JavaScript",7236,530,32,11,0,5,18,29,15,39.18,"MIT License",false,"main",true,[27,28,29,30,31],"ai","anthropic","cursor","mcp","mcp-server","2026-06-12 02:03:05","THIS PROJECT IS NO LONGER ACTIVE PLEASE USE A DIFFERENT SOLUTION FOR THIS. \n\n# BrowserTools MCP\n\n\n> Make your AI tools 10x more aware and capable of interacting with your browser\n\nThis application is a powerful browser monitoring and interaction tool that enables AI-powered applications via Anthropic's Model Context Protocol (MCP) to capture and analyze browser data through a Chrome extension.\n\nRead our [docs](https:\u002F\u002Fbrowsertools.agentdesk.ai\u002F) for the full installation, quickstart and contribution guides.\n\n## Roadmap\n\nCheck out our project roadmap here: [Github Roadmap \u002F Project Board](https:\u002F\u002Fgithub.com\u002Forgs\u002FAgentDeskAI\u002Fprojects\u002F1\u002Fviews\u002F1)\n\n## Updates\n\nv1.2.0 is out! Here's a quick breakdown of the update:\n- You can now enable \"Allow Auto-Paste into Cursor\" within the DevTools panel. Screenshots will be automatically pasted into Cursor (just make sure to focus\u002Fclick into the Agent input field in Cursor, otherwise it won't work!)\n- Integrated a suite of SEO, performance, accessibility, and best practice analysis tools via Lighthouse\n- Implemented a NextJS specific prompt used to improve SEO for a NextJS application\n- Added Debugger Mode as a tool which executes all debugging tools in a particular sequence, along with a prompt to improve reasoning\n- Added Audit Mode as a tool to execute all auditing tools in a particular sequence\n- Resolved Windows connectivity issues\n- Improved networking between BrowserTools server, extension and MCP server with host\u002Fport auto-discovery, auto-reconnect, and graceful shutdown mechanisms\n- Added ability to more easily exit out of the Browser Tools server with Ctrl+C\n\n## Quickstart Guide\n\nThere are three components to run this MCP tool:\n\n1. Install our chrome extension from here: [v1.2.0 BrowserToolsMCP Chrome Extension](https:\u002F\u002Fgithub.com\u002FAgentDeskAI\u002Fbrowser-tools-mcp\u002Freleases\u002Fdownload\u002Fv1.2.0\u002FBrowserTools-1.2.0-extension.zip)\n2. Install the MCP server from this command within your IDE: `npx @agentdeskai\u002Fbrowser-tools-mcp@latest`\n3. Open a new terminal and run this command: `npx @agentdeskai\u002Fbrowser-tools-server@latest`\n\n* Different IDEs have different configs but this command is generally a good starting point; please reference your IDEs docs for the proper config setup\n\nIMPORTANT TIP - there are two servers you need to install. There's...\n- browser-tools-server (local nodejs server that's a middleware for gathering logs)\nand\n- browser-tools-mcp (MCP server that you install into your IDE that communicates w\u002F the extension + browser-tools-server)\n\n`npx @agentdeskai\u002Fbrowser-tools-mcp@latest` is what you put into your IDE\n`npx @agentdeskai\u002Fbrowser-tools-server@latest` is what you run in a new terminal window\n\nAfter those three steps, open up your chrome dev tools and then the BrowserToolsMCP panel.\n\nIf you're still having issues try these steps:\n- Quit \u002F close down your browser. Not just the window but all of Chrome itself. \n- Restart the local node server (browser-tools-server)\n- Make sure you only have ONE instance of chrome dev tools panel open\n\nAfter that, it should work but if it doesn't let me know and I can share some more steps to gather logs\u002Finfo about the issue!\n\nIf you have any questions or issues, feel free to open an issue ticket! And if you have any ideas to make this better, feel free to reach out or open an issue ticket with an enhancement tag or reach out to me at [@tedx_ai on x](https:\u002F\u002Fx.com\u002Ftedx_ai)\n\n## Full Update Notes:\n\nCoding agents like Cursor can run these audits against the current page seamlessly. By leveraging Puppeteer and the Lighthouse npm library, BrowserTools MCP can now:\n\n- Evaluate pages for WCAG compliance\n- Identify performance bottlenecks\n- Flag on-page SEO issues\n- Check adherence to web development best practices\n- Review NextJS specific issues with SEO\n\n...all without leaving your IDE 🎉\n\n---\n\n## 🔑 Key Additions\n\n| Audit Type         | Description                                                                                                                              |\n| ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------- |\n| **Accessibility**  | WCAG-compliant checks for color contrast, missing alt text, keyboard navigation traps, ARIA attributes, and more.                        |\n| **Performance**    | Lighthouse-driven analysis of render-blocking resources, excessive DOM size, unoptimized images, and other factors affecting page speed. |\n| **SEO**            | Evaluates on-page SEO factors (like metadata, headings, and link structure) and suggests improvements for better search visibility.      |\n| **Best Practices** | Checks for general best practices in web development.                                                                                    |\n| **NextJS Audit**   | Injects a prompt used to perform a NextJS audit.                                                                                         |\n| **Audit Mode**     | Runs all auditing tools in a sequence.                                                                                                   |\n| **Debugger Mode**  | Runs all debugging tools in a sequence.                                                                                                  |\n\n---\n\n## 🛠️ Using Audit Tools\n\n### ✅ **Before You Start**\n\nEnsure you have:\n\n- An **active tab** in your browser\n- The **BrowserTools extension enabled**\n\n### ▶️ **Running Audits**\n\n**Headless Browser Automation**:  \n Puppeteer automates a headless Chrome instance to load the page and collect audit data, ensuring accurate results even for SPAs or content loaded via JavaScript.\n\nThe headless browser instance remains active for **60 seconds** after the last audit call to efficiently handle consecutive audit requests.\n\n**Structured Results**:  \n Each audit returns results in a structured JSON format, including overall scores and detailed issue lists. This makes it easy for MCP-compatible clients to interpret the findings and present actionable insights.\n\nThe MCP server provides tools to run audits on the current page. Here are example queries you can use to trigger them:\n\n#### Accessibility Audit (`runAccessibilityAudit`)\n\nEnsures the page meets accessibility standards like WCAG.\n\n> **Example Queries:**\n>\n> - \"Are there any accessibility issues on this page?\"\n> - \"Run an accessibility audit.\"\n> - \"Check if this page meets WCAG standards.\"\n\n#### Performance Audit (`runPerformanceAudit`)\n\nIdentifies performance bottlenecks and loading issues.\n\n> **Example Queries:**\n>\n> - \"Why is this page loading so slowly?\"\n> - \"Check the performance of this page.\"\n> - \"Run a performance audit.\"\n\n#### SEO Audit (`runSEOAudit`)\n\nEvaluates how well the page is optimized for search engines.\n\n> **Example Queries:**\n>\n> - \"How can I improve SEO for this page?\"\n> - \"Run an SEO audit.\"\n> - \"Check SEO on this page.\"\n\n#### Best Practices Audit (`runBestPracticesAudit`)\n\nChecks for general best practices in web development.\n\n> **Example Queries:**\n>\n> - \"Run a best practices audit.\"\n> - \"Check best practices on this page.\"\n> - \"Are there any best practices issues on this page?\"\n\n#### Audit Mode (`runAuditMode`)\n\nRuns all audits in a particular sequence. Will run a NextJS audit if the framework is detected.\n\n> **Example Queries:**\n>\n> - \"Run audit mode.\"\n> - \"Enter audit mode.\"\n\n#### NextJS Audits (`runNextJSAudit`)\n\nChecks for best practices and SEO improvements for NextJS applications\n\n> **Example Queries:**\n>\n> - \"Run a NextJS audit.\"\n> - \"Run a NextJS audit, I'm using app router.\"\n> - \"Run a NextJS audit, I'm using page router.\"\n\n#### Debugger Mode (`runDebuggerMode`)\n\nRuns all debugging tools in a particular sequence\n\n> **Example Queries:**\n>\n> - \"Enter debugger mode.\"\n\n## Architecture\n\nThere are three core components all used to capture and analyze browser data:\n\n1. **Chrome Extension**: A browser extension that captures screenshots, console logs, network activity and DOM elements.\n2. **Node Server**: An intermediary server that facilitates communication between the Chrome extension and any instance of an MCP server.\n3. **MCP Server**: A Model Context Protocol server that provides standardized tools for AI clients to interact with the browser.\n\n```\n┌─────────────┐     ┌──────────────┐     ┌───────────────┐     ┌─────────────┐\n│  MCP Client │ ──► │  MCP Server  │ ──► │  Node Server  │ ──► │   Chrome    │\n│  (e.g.      │ ◄── │  (Protocol   │ ◄── │ (Middleware)  │ ◄── │  Extension  │\n│   Cursor)   │     │   Handler)   │     │               │     │             │\n└─────────────┘     └──────────────┘     └───────────────┘     └─────────────┘\n```\n\nModel Context Protocol (MCP) is a capability supported by Anthropic AI models that\nallow you to create custom tools for any compatible client. MCP clients like Claude\nDesktop, Cursor, Cline or Zed can run an MCP server which \"teaches\" these clients\nabout a new tool that they can use.\n\nThese tools can call out to external APIs but in our case, **all logs are stored locally** on your machine and NEVER sent out to any third-party service or API. BrowserTools MCP runs a local instance of a NodeJS API server which communicates with the BrowserTools Chrome Extension.\n\nAll consumers of the BrowserTools MCP Server interface with the same NodeJS API and Chrome extension.\n\n#### Chrome Extension\n\n- Monitors XHR requests\u002Fresponses and console logs\n- Tracks selected DOM elements\n- Sends all logs and current element to the BrowserTools Connector\n- Connects to Websocket server to capture\u002Fsend screenshots\n- Allows user to configure token\u002Ftruncation limits + screenshot folder path\n\n#### Node Server\n\n- Acts as middleware between the Chrome extension and MCP server\n- Receives logs and currently selected element from Chrome extension\n- Processes requests from MCP server to capture logs, screenshot or current element\n- Sends Websocket command to the Chrome extension for capturing a screenshot\n- Intelligently truncates strings and # of duplicate objects in logs to avoid token limits\n- Removes cookies and sensitive headers to avoid sending to LLMs in MCP clients\n\n#### MCP Server\n\n- Implements the Model Context Protocol\n- Provides standardized tools for AI clients\n- Compatible with various MCP clients (Cursor, Cline, Zed, Claude Desktop, etc.)\n\n## Installation\n\nInstallation steps can be found in our documentation:\n\n- [BrowserTools MCP Docs](https:\u002F\u002Fbrowsertools.agentdesk.ai\u002F)\n\n## Usage\n\nOnce installed and configured, the system allows any compatible MCP client to:\n\n- Monitor browser console output\n- Capture network traffic\n- Take screenshots\n- Analyze selected elements\n- Wipe logs stored in our MCP server\n- Run accessibility, performance, SEO, and best practices audits\n\n## Compatibility\n\n- Works with any MCP-compatible client\n- Primarily designed for Cursor IDE integration\n- Supports other AI editors and MCP clients\n","BrowserTools MCP 是一个浏览器监控和交互工具，通过Anthropic的Model Context Protocol (MCP)使AI应用程序能够捕获并分析浏览器数据。其核心功能包括自动粘贴截图到Cursor、集成Lighthouse进行SEO及性能分析、支持NextJS特定提示以优化SEO等。此外，它还提供了调试模式和审计模式，以及改进了网络连接和服务器管理机制。该工具适用于需要增强AI工具与浏览器交互能力的场景，如开发过程中对网站性能和SEO进行实时分析和优化。",2,"2026-06-11 03:42:52","high_star"]