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

With Pacy Devtools, you can easily switch between your favorite AI agents, inspect, edit, prompt, review the generated code, all within the browser.

0:45

Pacy Devtools - In 45 seconds

Get Started in Seconds

Install Pacy Devtools

First, install it globally from npm:

npm i -g pacy-devtools

Install IDE extension (optional)

Pacy Devtools supports the following agents:

Claude Code

Cursor

Windsurf

VSCode

Cline

RooCode

For sending prompts to Claude Code, no installation is required. For other agents, you can install the IDE extension and the MCP server.

pacy install-mcp

Get Extensionfor VSCode

Get Extensionfor Cursor

Get Extensionfor Windsurf

Start your project with Pacy Devtools

Go to your project directory and run:

pacy

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

✅

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.

Nuxt

Solid

Preact

Astro

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.

Navigate to Code

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

Inspect Elements

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

Measure spacing

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

Review Changes

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

Console & Network tabs

Reduce the need to open the browser's devtools even more.

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.