CSS Inspector MCP - Portfolio

The Bridge

Browser to AI Pipeline

Two components connected by the Model Context Protocol. The Chrome extension captures CSS data; the MCP server makes it available to Claude Code.

🌐

Chrome Browser

Web page under inspection

→ DevTools API

🔌

Chrome Extension

CSS capture + element picker

→ MCP Protocol

🖨

MCP Server

Data normalization + serving

→ Claude Code

🤖

Claude Code

AI-assisted CSS debugging

How It Works

Four-Step Flow

Select Element in Browser

Use the Chrome extension's element picker to click on any element on the page. The extension captures all computed CSS properties, inherited styles, and the element's position in the DOM.

Extension Captures CSS Data

The Chrome extension reads computed styles, applied stylesheets, specificity chains, and box model dimensions. Everything DevTools shows, captured programmatically.

MCP Server Normalizes and Serves

The MCP server receives the raw CSS data, normalizes property names, groups related styles, and exposes them through the Model Context Protocol for AI consumption.

Claude Code Debugs with Context

Ask Claude Code "why is this element misaligned?" and it has the actual computed CSS to work with -- not guesses. It sees the real specificity chain, the real box model, the real inherited styles.

Try it: click the button to inspect its CSS

Inspect Me

background: linear-gradient(135deg, #4488ff, #a78bfa); color: #ffffff; padding: 16px 32px; border-radius: 8px; font-weight: 600; font-size: 16px; cursor: pointer; transition: all 0.3s; display: inline-block; box-sizing: border-box;

mcp-server.js
// MCP server exposes CSS inspection tools to Claude Code
const server = new MCPServer({
  name: 'css-inspector',
  version: '1.0.0',
});

server.addTool({
  name: 'inspect-element',
  description: 'Get computed CSS for the selected element',
  async execute() {
    const styles = await chrome.getComputedStyles();
    const boxModel = await chrome.getBoxModel();
    const specificity = await chrome.getSpecificityChain();

    return {
      styles: normalizeProperties(styles),
      boxModel,
      specificity,
      selector: chrome.getSelector(),
    };
  },
});

Key Features

What It Does

🔍

Live CSS Inspection

Click any element in your browser and get its full computed CSS, inherited properties, and specificity chain sent to your AI assistant in real-time.

🤖

AI-Assisted Debugging

Ask Claude Code why something looks wrong and it has the actual CSS data -- not screenshots to interpret, but the real property values to analyze.

🔌

Chrome Extension

Lightweight extension with element picker overlay. Non-intrusive -- only activates when you need it. No performance impact on the inspected page.

🖨

MCP Protocol

Standard Model Context Protocol server that any MCP-compatible AI tool can connect to. Not locked to Claude Code -- works with any MCP client.

The Story

What This Project Taught

"My first MCP server. The idea of bridging browser tools with AI assistants felt like the future."

First MCP server -- Learning the Model Context Protocol from scratch. Understanding how tools, resources, and prompts map to AI capabilities. The protocol is elegant once you grasp its design philosophy.

Chrome extension development -- Manifest V3, content scripts, service workers, message passing between contexts. The Chrome extension model is its own ecosystem with its own patterns.

Bridging browser and AI -- The core insight: AI assistants are blind to what you see in the browser. Giving them structured access to DevTools data transforms CSS debugging from "describe the problem" to "here is the problem."