Framework Devtools

A build‑tool plugin that adds an in‑app chat panel and element inspector to your dev server. It connects your running app to an AI coding agent (currently Claude Code). Vite adapter available today; more adapters for other bundlers/dev servers are planned.

https://github.com/user-attachments/assets/fd57a0ad-eb63-46cf-8166-cc3af18b1967

Features

• In‑app chat panel to work with your AI coding agent (currently Claude Code).
• DOM element inspector that captures and shares precise source context with the agent.
• Streaming chat with live responses and visible tool activity.
• Supports React and Vue projects.

Requirements

• Node 18+
• Coding agent correctly installed and authorized locally (e.g., Claude Code CLI).
• A Vite-based web app (Vite 3+).
• Frameworks: React, Preact, Vue, or JSX/TSX.

Install

npm install --save-dev vibe-web-devtools
# pnpm add -D vibe-web-devtools
# yarn add -D vibe-web-devtools

Config

This example uses the Vite adapter. Register it before other framework plugins:

// vite.config.ts
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import vibeWeb from "vibe-web-devtools/vite";

export default defineConfig({
  plugins: [
    vibeWeb(),
    react(),
  ],
});

After you start the dev server and open your app, a chat icon appears in the bottom-right. Click it to open the panel — happy vibing!