Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
39 commits
Select commit Hold shift + click to select a range
37269d1
Add Lighthouse Audits via Puppeteer for Accessibility & Performance
emilneander Feb 26, 2025
0d995a3
Refactor Lighthouse audit utilities and improve error handling
emilneander Feb 26, 2025
69408d7
Add Lighthouse audit documentation to README files
emilneander Feb 26, 2025
7fa9cab
Add SEO Audit functionality to Lighthouse tools
emilneander Feb 26, 2025
1603764
Refactor audit endpoints with generic setup method
emilneander Feb 27, 2025
70cb154
Refactor Lighthouse audit modules to standardize result processing
emilneander Feb 27, 2025
f0ced79
Refactor remove comments and add type
emilneander Feb 27, 2025
9eb96df
Update README.md
emilneander Feb 27, 2025
46e6cf3
Add Windows compatibility features: path conversion and configurable …
tedjames Mar 2, 2025
a71e00d
Add server discovery to Chrome extension with configurable host/port …
tedjames Mar 2, 2025
60248f9
Add server identity verification to prevent connecting to incorrect w…
tedjames Mar 2, 2025
bc4629d
fixed windows paths and added host + port autodiscovery
tedjames Mar 2, 2025
b829891
Added auto-paste of screenshot into cursor for macos
tedjames Mar 2, 2025
8aa1aa4
Merge pull request #41 from AgentDeskAI/feature/windows-compatibility
tedjames Mar 3, 2025
925317f
Merge remote-tracking branch 'upstream/staging' into mirror-staging
emilneander Mar 5, 2025
f4cb92b
Refactor browser connection and config with new Puppeteer service
emilneander Mar 6, 2025
4f7eefa
docs: update readme
emilneander Mar 6, 2025
246566c
refactor: improve Chrome launcher error handling in browser detection
emilneander Mar 6, 2025
085aabc
refactor: improve Lighthouse performance audit with AI-optimized data…
emilneander Mar 6, 2025
7a7bf8c
refactor: standardize Lighthouse audit reports with AI-optimized data…
emilneander Mar 6, 2025
0e3614b
feat: Add Best Practices audit to Lighthouse tools
emilneander Mar 6, 2025
934ac6b
docs: Update README with Best Practices audit details and usage instr…
emilneander Mar 6, 2025
e7404ff
docs: update to offical docs
emilneander Mar 6, 2025
ad7c61a
docs: move audit documentation part to browser-tools-server
emilneander Mar 6, 2025
d8355d6
refactor: Remove debug logging
emilneander Mar 6, 2025
c155686
docs: Update README
emilneander Mar 6, 2025
1efe7a8
refactor: remove redudant code and improve intial url retrieval
emilneander Mar 6, 2025
1f33030
added audit and debugger mode
tedjames Mar 10, 2025
b1a5818
Merge pull request #64 from AgentDeskAI/feature/audit-modes
tedjames Mar 10, 2025
7b83894
resolved merge conflicts
tedjames Mar 10, 2025
e55410b
bugfix: Implement Graceful WebSocket Server Shutdown Mechanism
adispring Mar 10, 2025
03cb3ca
edited prompts + added toggle for autopaste screenshots
tedjames Mar 10, 2025
1a3cc1d
Merge pull request #67 from AgentDeskAI/feature/screenshot-to-cursor
tedjames Mar 10, 2025
1bae863
resolved merge conflicts
tedjames Mar 10, 2025
1f78ac0
updated docs and bumped versions
tedjames Mar 10, 2025
a1b1276
Finalize version 1.2.0 with graceful shutdown and updated documentation
tedjames Mar 10, 2025
105aadf
Merge pull request #68 from AgentDeskAI/bugfix/graceful-server-shutdown
tedjames Mar 10, 2025
596979e
Update README.md
tedjames Mar 10, 2025
48c1c57
Update README.md
tedjames Mar 10, 2025
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
133 changes: 130 additions & 3 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,13 +8,23 @@ Read our [docs](https://browsertools.agentdesk.ai/) for the full installation, q

## Updates

v1.1.0 is out! This includes several bug fixes for logging + screenshots.
v1.2.0 is out! Here's a quick breakdown of the update:
- 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/click into the Agent input field in Cursor, otherwise it won't work!)
- Integrated a suite of SEO, performance, accessibility, and best practice analysis tools via Lighthouse
- Implemented a NextJS specific prompt used to improve SEO for a NextJS application
- Added Debugger Mode as a tool which executes all debugging tools in a particular sequence, along with a prompt to improve reasoning
- Added Audit Mode as a tool to execute all auditing tools in a particular sequence
- Resolved Windows connectivity issues
- Improved networking between BrowserTools server, extension and MCP server with host/port auto-discovery, auto-reconnect, and graceful shutdown mechanisms
- Added ability to more easily exit out of the Browser Tools server with Ctrl+C



Please make sure to update the version in your IDE / MCP client as so:
`npx @agentdeskai/browser-tools-mcp@1.1.0`
`npx @agentdeskai/browser-tools-mcp@1.2.0`

Also make sure to download the latest version of the chrome extension here:
[v1.1.0 BrowserToolsMCP Chrome Extension](https://github.com/AgentDeskAI/browser-tools-mcp/releases/download/v1.1.0/chrome-extension-v1-1-0.zip)
[v1.2.0 BrowserToolsMCP Chrome Extension](https://github.com/AgentDeskAI/browser-tools-mcp/releases/download/v1.1.0/chrome-extension-v1-1-0.zip)

From there you can run the local node server as usual like so:
`npx @agentdeskai/browser-tools-server`
Expand All @@ -23,6 +33,122 @@ And once you've opened your chrome dev tools, logs should be getting sent to you

If 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://x.com/tedx_ai)

## Full Update Notes:

Coding agents like Cursor can run these audits against the current page seamlessly. By leveraging Puppeteer and the Lighthouse npm library, BrowserTools MCP can now:

- Evaluate pages for WCAG compliance
- Identify performance bottlenecks
- Flag on-page SEO issues
- Check adherence to web development best practices
- Review NextJS specific issues with SEO

...all without leaving your IDE 🎉

---

## 🔑 Key Additions

| Audit Type | Description |
| ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------- |
| **Accessibility** | WCAG-compliant checks for color contrast, missing alt text, keyboard navigation traps, ARIA attributes, and more. |
| **Performance** | Lighthouse-driven analysis of render-blocking resources, excessive DOM size, unoptimized images, and other factors affecting page speed. |
| **SEO** | Evaluates on-page SEO factors (like metadata, headings, and link structure) and suggests improvements for better search visibility. |
| **Best Practices** | Checks for general best practices in web development. |
| **NextJS Audit** | Injects a prompt used to perform a NextJS audit. |
| **Audit Mode** | Runs all audting tools in a sequence. |
| **Debugger Mode** | Runs all debugging tools in a sequence. |

---

## 🛠️ Using Audit Tools

### ✅ **Before You Start**

Ensure you have:

- An **active tab** in your browser
- The **BrowserTools extension enabled**

### ▶️ **Running Audits**

**Headless Browser Automation**:
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.

The headless browser instance remains active for **60 seconds** after the last audit call to efficiently handle consecutive audit requests.

**Structured Results**:
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.

The MCP server provides tools to run audits on the current page. Here are example queries you can use to trigger them:

#### Accessibility Audit (`runAccessibilityAudit`)

Ensures the page meets accessibility standards like WCAG.

> **Example Queries:**
>
> - "Are there any accessibility issues on this page?"
> - "Run an accessibility audit."
> - "Check if this page meets WCAG standards."

#### Performance Audit (`runPerformanceAudit`)

Identifies performance bottlenecks and loading issues.

> **Example Queries:**
>
> - "Why is this page loading so slowly?"
> - "Check the performance of this page."
> - "Run a performance audit."

#### SEO Audit (`runSEOAudit`)

Evaluates how well the page is optimized for search engines.

> **Example Queries:**
>
> - "How can I improve SEO for this page?"
> - "Run an SEO audit."
> - "Check SEO on this page."

#### Best Practices Audit (`runBestPracticesAudit`)

Checks for general best practices in web development.

> **Example Queries:**
>
> - "Run a best practices audit."
> - "Check best practices on this page."
> - "Are there any best practices issues on this page?"

#### Audit Mode (`runAuditMode`)

Runs all audits in a particular sequence. Will run a NextJS audit if the framework is detected.

> **Example Queries:**
>
> - "Run audit mode."
> - "Enter audit mode."

#### NextJS Audits (`runNextJSAudit`)

Checks for best practices and SEO improvements for NextJS applications

> **Example Queries:**
>
> - "Run a NextJS audit."
> - "Run a NextJS audit, I'm using app router."
> - "Run a NextJS audit, I'm using page router."

#### Debugger Mode (`runDebuggerMode`)

Runs all debugging tools in a particular sequence

> **Example Queries:**
>
> - "Enter debugger mode."

## Architecture

There are three core components all used to capture and analyze browser data:
Expand Down Expand Up @@ -86,6 +212,7 @@ Once installed and configured, the system allows any compatible MCP client to:
- Take screenshots
- Analyze selected elements
- Wipe logs stored in our MCP server
- Run accessibility, performance, SEO, and best practices audits

## Compatibility

Expand Down
12 changes: 12 additions & 0 deletions browser-tools-mcp/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,13 @@ A Model Context Protocol (MCP) server that provides AI-powered browser tools int
- Screenshot capture capabilities
- Element selection and inspection
- Real-time browser state monitoring
- Accessibility, performance, SEO, and best practices audits

## Prerequisites

- Node.js 14 or higher
- Browser Tools Server running
- Chrome or Chromium browser installed (required for audit functionality)

## Installation

Expand Down Expand Up @@ -44,6 +51,7 @@ npx @agentdeskai/browser-tools-mcp
- Screenshot capture
- Element selection
- Browser state analysis
- Accessibility and performance audits

## MCP Functions

Expand All @@ -55,6 +63,10 @@ The server provides the following MCP functions:
- `mcp_getNetworkSuccess` - Get successful network requests
- `mcp_getNetworkLogs` - Get all network logs
- `mcp_getSelectedElement` - Get the currently selected DOM element
- `mcp_runAccessibilityAudit` - Run a WCAG-compliant accessibility audit
- `mcp_runPerformanceAudit` - Run a performance audit
- `mcp_runSEOAudit` - Run an SEO audit
- `mcp_runBestPracticesAudit` - Run a best practices audit

## Integration

Expand Down
Loading