BBansalMarketplace
All tools
🎨
🎨

InspectFlow

Open source

Developer Tools

Edit a style in Chrome DevTools — it writes the Tailwind class to your source file.

Download the extension (latest release)

What is it

InspectFlow closes the loop between tweaking styles in Chrome DevTools and committing them to code. You change a value live in the Styles panel, InspectFlow detects it, maps the CSS change to the right Tailwind class, shows you a diff, and writes the source file on one click — your dev server's hot reload does the rest, and the change survives a refresh.

It's two pieces working together: a Chrome MV3 extension that watches the element you've selected, and a local MCP server that finds the matching source file (by the element's className — no SDK, no annotations) and performs an approval-gated edit via Babel AST. A deterministic Tailwind mapper handles the common edits instantly with no API key; a Gemini fallback covers the ambiguous ones like box-shadow.

Why you need it

  • The usual flow is broken: you nudge padding in DevTools, eyeball the number, then hunt for the file and hand-edit the class. InspectFlow removes that round-trip entirely.
  • Zero setup in your app — it discovers the source file by searching for the element's className, so there's nothing to install or annotate in your codebase.
  • Instant and free for common edits via the deterministic Tailwind map; AI only kicks in when you ask for it, so you're not burning API quota on a padding change.
  • Every write is approval-gated — you see a unified diff before anything touches disk.

User guide — quickstart

  1. 1

    Load the Chrome extension

    Download the extension build from the latest release and unzip it. Open chrome://extensions, toggle on Developer mode, click Load unpacked, and select the unzipped folder. The indigo InspectFlow icon appears in your toolbar.

  2. 2

    Start the MCP server in your project

    Run this from your project's root directory. The server starts on http://localhost:4399 and treats the current directory as the project root — the only place it reads and writes files.

    npx inspectflow-server@latest
  3. 3

    (Optional) Enable AI analysis

    For properties the deterministic mapper can't handle (e.g. box-shadow), provide a Gemini key. The free tier is ~20 requests/day; fall back to the plain Analyze button if you hit the quota.

    GEMINI_API_KEY=your_key npx inspectflow-server@latest
  4. 4

    Connect the DevTools panel

    Open your app in Chrome, open DevTools (F12 / ⌘⌥I), and click the InspectFlow tab. Confirm the server URL is http://127.0.0.1:4399, click Test → you should see Connected, then click Start Capture (the button turns red).

  5. 5

    Make a live edit

    In the Elements panel, click an element. In Styles, change a value — say padding from 16px to 32px — and press Enter to commit it. A change card appears in the InspectFlow panel within about half a second.

  6. 6

    Analyze and apply

    Click Analyze to map the CSS change to a Tailwind class swap instantly, or Analyze with AI for trickier properties. Review the diff, then click Apply — the file is written via Babel AST and your dev server hot-reloads.

Under the hood

Node + TypeScriptExpress MCP serverChrome MV3 extensionBabel ASTGemini (optional)

Works with: React · Next.js (App Router) · Tailwind CSS · plain CSS / CSS Modules

Published on npm

npminspectflow-serverv0.2.0

Ready to try InspectFlow?