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)
— people tried this

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?