Ability to inspect an element's HTML and CSS using a CSS selector

README.md

@@ -4,6 +4,20 @@
 
 This 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.
 
+## Quick Start
+
+**Step 1**: Download this repo and load the `chrome-extension` directory in developer mode.
+
+**Step 2**: Run MCP server (configure your IDE with this):
+```sh
+npx -y @munawwar-forks/browser-tools-mcp@1.2.3
+```
+
+**Step 3**: Run browser-connector server in a terminal
+```sh
+npx -y @munawwar-forks/browser-tools-server@1.2.3
+```
+
 Read our [docs](https://browsertools.agentdesk.ai/) for the full installation, quickstart and contribution guides.
 
 ## Roadmap
@@ -12,6 +26,8 @@ Check out our project roadmap here: [Github Roadmap / Project Board](https://git
 
 ## Updates
 
+v1.2.3 - Added ability for agent to inspect any element's HTML, computed styling and dimensions.
+
 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
@@ -76,6 +92,7 @@ Coding agents like Cursor can run these audits against the current page seamless
 | **NextJS Audit**   | Injects a prompt used to perform a NextJS audit.                                                                                         |
 | **Audit Mode**     | Runs all auditing tools in a sequence.                                                                                                   |
 | **Debugger Mode**  | Runs all debugging tools in a sequence.                                                                                                  |
+| **Element Inspection** | Inspect HTML elements and their CSS properties using CSS selectors.                                                                  |
 
 ---
 
@@ -167,6 +184,17 @@ Runs all debugging tools in a particular sequence
 >
 > - "Enter debugger mode."
 
+#### Inspect Elements By Selector (`inspectElementsBySelector`)
+
+Finds HTML elements that match a CSS selector and returns their HTML and CSS styles.
+
+> **Example Queries:**
+>
+> - "Inspect the body element."
+> - "Show me all the button elements."
+> - "What CSS styles are applied to the header?"
+> - "Inspect the element with class 'container' and show its font properties."
+
 ## Architecture
 
 There are three core components all used to capture and analyze browser data:
@@ -229,6 +257,7 @@ Once installed and configured, the system allows any compatible MCP client to:
 - Capture network traffic
 - Take screenshots
 - Analyze selected elements
+- Inspect elements HTML and CSS using CSS selectors
 - Wipe logs stored in our MCP server
 - Run accessibility, performance, SEO, and best practices audits
 

browser-tools-mcp/README.md

@@ -5,6 +5,7 @@ A Model Context Protocol (MCP) server that provides AI-powered browser tools int
 ## Features
 
 - MCP protocol implementation
+- Get HTML of all matches to a CSS selector (new)
 - Browser console log access
 - Network request analysis
 - Screenshot capture capabilities
@@ -21,31 +22,32 @@ A Model Context Protocol (MCP) server that provides AI-powered browser tools int
 ## Installation
 
 ```bash
-npx @agentdeskai/browser-tools-mcp
+npx @munawwar-forks/browser-tools-mcp
 ```
 
 Or install globally:
 
 ```bash
-npm install -g @agentdeskai/browser-tools-mcp
+npm install -g @munawwar-forks/browser-tools-mcp
 ```
 
 ## Usage
 
 1. First, make sure the Browser Tools Server is running:
 
 ```bash
-npx @agentdeskai/browser-tools-server
+npx @munawwar-forks/browser-tools-server
 ```
 
 2. Then start the MCP server:
 
 ```bash
-npx @agentdeskai/browser-tools-mcp
+npx @munawwar-forks/browser-tools-mcp
 ```
 
 3. The MCP server will connect to the Browser Tools Server and provide the following capabilities:
 
+- Get HTML by selector 
 - Console log retrieval
 - Network request monitoring
 - Screenshot capture
@@ -57,6 +59,7 @@ npx @agentdeskai/browser-tools-mcp
 
 The server provides the following MCP functions:
 
+- `mcp_getHtmlBySelector` - Retrieve HTML by CSS selector
 - `mcp_getConsoleLogs` - Retrieve browser console logs
 - `mcp_getConsoleErrors` - Get browser console errors
 - `mcp_getNetworkErrors` - Get network error logs

browser-tools-mcp/mcp-server.ts

@@ -4,6 +4,9 @@ import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
 import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js";
 import path from "path";
 import fs from "fs";
+// Using zod from the @modelcontextprotocol/sdk dependencies
+// This avoids adding zod as a direct dependency to package.json
+import { z } from "zod";
 
 // Create the MCP server
 const server = new McpServer({
@@ -319,6 +322,62 @@ server.tool(
   }
 );
 
+server.tool(
+  "inspectElementsBySelector",
+  "Get HTML elements and their CSS styles matching a CSS selector",
+  { 
+    selector: z.string().describe("CSS selector to find elements (e.g., '.classname', '#id', 'div.container > p'). Use $0 to inspect the current element."),
+    resultLimit: z.number().optional().default(1).describe("Maximum number of elements to process (default: 1)"),
+    includeComputedStyles: z.array(z.string()).optional().default([]).describe("Array of specific CSS properties to include in the computed styles output (empty array means no computed styles)")
+  },
+  async ({ selector, resultLimit = 1, includeComputedStyles = [] }) => {
+    return await withServerConnection(async () => {
+      try {
+        // Call the browser-connector endpoint
+        const response = await fetch(
+          `http://${discoveredHost}:${discoveredPort}/inspect-elements-by-selector`,
+          {
+            method: "POST",
+            headers: {
+              "Content-Type": "application/json"
+            },
+            body: JSON.stringify({ selector, resultLimit, includeComputedStyles })
+          }
+        );
+
+        const result = await response.json().catch(() => null);
+        if (result?.error) {
+          throw new Error(result.error);
+        }
+        if (!response.ok || result === null) {
+          throw new Error(`Server returned error: ${response.status}`);
+        }
+
+        return {
+          content: [
+            {
+              type: "text",
+              text: JSON.stringify(result.data || {}, null, 2)
+            }
+          ]
+        };
+      } catch (error) {
+        const errorMessage = error instanceof Error ? error.message : String(error);
+        console.error("Error inspecting elements by selector:", errorMessage);
+        return {
+          content: [
+            {
+              type: "text",
+              text: `Failed to inspect elements by selector: ${errorMessage}`
+            }
+          ],
+          isError: true
+        };
+      }
+    });
+  }
+);
+
 server.tool("wipeLogs", "Wipe all browser logs from memory", async () => {
   return await withServerConnection(async () => {
     const response = await fetch(

browser-tools-mcp/package.json

@@ -1,14 +1,21 @@
 {
-  "name": "@agentdeskai/browser-tools-mcp",
-  "version": "1.2.0",
+  "name": "@munawwar-forks/browser-tools-mcp",
+  "version": "1.2.3",
   "description": "MCP (Model Context Protocol) server for browser tools integration",
   "main": "dist/mcp-server.js",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Munawwar/browser-tools-mcp"
+  },
   "bin": {
     "browser-tools-mcp": "dist/mcp-server.js"
   },
+  "publishConfig": {
+    "access": "public"
+  },
   "scripts": {
     "inspect": "tsc && npx @modelcontextprotocol/inspector node -- dist/mcp-server.js",
-    "inspect-live": "npx @modelcontextprotocol/inspector npx -- @agentdeskai/browser-tools-mcp",
+    "inspect-live": "npx @modelcontextprotocol/inspector npx -- @munawwar-forks/browser-tools-mcp",
     "build": "tsc",
     "start": "tsc && node dist/mcp-server.js",
     "prepublishOnly": "npm run build",

browser-tools-server/README.md

@@ -15,21 +15,21 @@ A powerful browser tools server for capturing and managing browser events, logs,
 ## Installation
 
 ```bash
-npx @agentdeskai/browser-tools-server
+npx @munawwar-forks/browser-tools-server
 ```
 
 Or install globally:
 
 ```bash
-npm install -g @agentdeskai/browser-tools-server
+npm install -g @munawwar-forks/browser-tools-server
 ```
 
 ## Usage
 
 1. Start the server:
 
 ```bash
-npx @agentdeskai/browser-tools-server
+npx @munawwar-forks/browser-tools-server
 ```
 
 2. The server will start on port 3025 by default
@@ -48,6 +48,7 @@ npx @agentdeskai/browser-tools-server
 - `/accessibility-audit` - Run accessibility audit on current page
 - `/performance-audit` - Run performance audit on current page
 - `/seo-audit` - Run SEO audit on current page
+- `/inspect-elements-by-selector` - Get HTML and CSS information for elements matching a given CSS selector
 
 ## API Documentation
 
@@ -69,6 +70,7 @@ npx @agentdeskai/browser-tools-server
 - `POST /accessibility-audit` - Run a WCAG-compliant accessibility audit on the current page
 - `POST /performance-audit` - Run a performance audit on the current page
 - `POST /seo-audit` - Run a SEO audit on the current page
+- `POST /inspect-elements-by-selector` - Returns HTML and CSS information for elements matching a given CSS selector
 
 # Audit Functionality