Vibe Coding
Made Easier

Inspect, edit, and prompt without leaving your flow.

npm install -g pacy-devtools

<htmllang="en"dir="ltr"class="dark overflow-x-hidden"style="color-scheme:dark">

<head>…</head>

<bodyclass="h-auto w-full">

<divclass="relative flex h-full w-full flex-col bg-[#050911]">

<navclass="sticky top-1.5 z-50 mx-auto border rounded-xl flex w-full max-w-screen-lg items-center justify-between px-3 py-2 transition-background duration-300 bg-[#0f131b99] backdrop-blur border-primary/05">…</nav>

<divclass="absolute left-0 top-0 hero-bg flex items-center justify-center flex-col">…</div>

<divclass="z-20 mx-auto flex w-full max-w-screen-lg flex-col gap-4 px-6">

<divclass="z-40 mb-[200px] flex h-full w-full flex-col items-center justify-center gap-4 p-6 md:p-10 mt-[1px]">…</div>

<divclass="z-10 flex w-full flex-col items-center justify-center gap-6 px-6">…</div>

<divid="get-started"class="z-10 flex w-full flex-col items-center justify-center gap-12 p-12 sm:p-6 scroll-mt-16 mt-10">…</div>

<divid="features"class="p-6 relative scroll-mt-16 mt-10">…</div>

<divclass="z-10 flex w-full flex-col items-center justify-center gap-6 px-6">

<h2class="text-center text-4xl font-bold leading-tight text-primary md:text-5xl">…</h2>

<pclass="text-center text-lg text-primary/60">…</p>

<divclass="flex min-h-[400px] w-full items-center justify-center py-20">…</div>

</div>

<divclass="relative z-10 flex flex-col border border-border backdrop-blur-sm lg:flex-row">…</div>

</div>

<imgsrc="/public/images/shadow.png"alt="Hero"class="fixed pointer-events-none left-0 top-0 z-0 h-full w-full opacity-10 invert"></img>

<divclass="base-grid fixed h-screen w-screen opacity-15 z-10 pointer-events-none"></div>

</div>

<scriptnonce>…</script>

<sectionaria-label="Notifications alt+T"tabindex="-1"aria-live="polite"aria-relevant="additions text"aria-atomic="false"></section>

<script>…</script>

<script>…</script>

<scriptnonce>…</script>

<scriptnonce>…</script>

</body>

</html>

const Button = (props: {
  variant?: 'primary' | 'secondary';
}) => {
  const { variant = 'primary', size = 'md', children } = props;
  
  return (
    <button className={cn(
      'rounded font-medium transition-colors',
      variant === 'primary' && 'bg-primary text-white',
      variant === 'secondary' && 'bg-secondary text-primary',
      size === 'sm' && 'px-3 py-1.5 text-sm',
      size === 'md' && 'px-4 py-2 text-base',
      size === 'lg' && 'px-6 py-3 text-lg'
    )}>
      {children}
    </button>
  );
}

Your localhost alternative to Lovable, Bolt.new, v0

Pacy Devtools turns your AI agents into visual coding tools, along with awesome devtools features.

0:45

Pacy Devtools - In 45 seconds

Claude Code

Codex

Cursor

Windsurf

VS Code

Cline

RooCode

One interface for all your AI agents

Pacy Devtools lets you control your AI agents from the same place, making it easier to switch between your favorite agents.

First-class support for your favorite frameworks

Pacy Devtools integrates with your frameworks with pinpoint accuracy, using exact files and lines of code.

React

Vue

Svelte

Next.js

Nuxt

Remix

Astro

Solid

Preact

Qwik

Features

Quick Chats

Send prompts to your favorite AI agents, right from your browser.

Quick Edits

Edit code directly and instantly reflect changes.

Your Favorite Frameworks

(Most versions of) React, Vue, Svelte, Remix, Next.js are supported out of the box. More are supported through plugins.

Element Inspector

You don't need to open Chrome Devtools for a quick inspection of the DOM.

CSS Inspector

Tweak classnames, inline styles, stylesheet rules, and properties with a comprehensive style inspector.

Measure spacing

Hover between elements to measure spacing, margins, and paddings — just like in design tools.

Navigate to Code

Click, and instantly jump to the matching line of code in your editor.

Review Changes

Easily review, accept, and reject changes without leaving the browser.

Console

View console logs and errors right inside a panel without needing to open Chrome Devtools.

Network

Monitor fetch and XHR requests and responses in real-time without leaving your workflow.

Get Started in Seconds

Install Pacy Devtools

First, install it globally using npm:

npm i -g pacy-devtools

Then, go to your project directory and run the following command:

pacy dev

This command will automatically detect your package manager, dev server and start it with the devtools overlay. You can use it manually as pacy dev --command 'npm run dev' --port 5173too.

Install IDE extension (optional)

For sending prompts to Claude Code Claude Code and Codex Codex, this step is not needed. For Cursor Cursor, Windsurf Windsurf, VSCode VSCode, Cline Cline, or RooCode RooCode, you need to install the IDE extension and the MCP server.

Get Extensionfor Cursor

You can use the following command to install the MCP server to multiple clients at once:

pacy install-mcp

✅

Done!

Start building instantly. In many cases, it supports React, Vue, Svelte, and Next.js out of the box.

React

Vue

Svelte

Next.js

Remix

In other cases, framework support can be achieved through @pacy-dev/plugin-devtools. This plugin is generally recommended, as it results in more accurate code navigation. See more here.

Nuxt

Solid

Preact

Astro

Qwik

Frequently Asked Questions

Modern development has changed, but our tools haven't caught up.

As developers, we are increasingly interacting with AI, yet we still jump between browser tabs, devtools, and our editor just to do something simple: inspect a UI, tweak some code, or ask an AI assistant a question.

This constant context-switching slows us down and pulls us out of flow.

That's why we built Pacy Devtools.

Pacy Devtools is designed for the way you actually work — fast, focused, and deeply integrated.