unplugin-devpilot

中文版本

A universal plugin framework for development tools that enables seamless browser-server communication and MCP (Model Context Protocol) integration with AI/LLM systems.

Features

• 🔌 Universal Plugin System - Create plugins once, use everywhere
• 🌐 Multi-Bundler Support - Works with Vite, Webpack, Rspack, Farm, and more via unplugin
• 🔄 Real-time Communication - WebSocket-based bidirectional RPC between browser and development server (works with HTTP and HTTPS)
• 🤖 MCP Integration - Built-in Model Context Protocol server for AI/LLM automation
• 🎯 DOM Inspector Plugin - Out-of-the-box DOM inspection and manipulation for web automation
• 🛠️ Development-Only - Zero production overhead, only runs in dev mode
• 🔒 HTTPS Support - Works seamlessly with HTTPS dev servers via automatic WebSocket proxy

Quick Start

Installation

npm install -D unplugin-devpilot
npm install -D devpilot-plugin-dom-inspector

Setup

// vite.config.ts
import DomInspector from 'devpilot-plugin-dom-inspector';
import Devpilot from 'unplugin-devpilot/vite';
import { defineConfig } from 'vite';

export default defineConfig({
  plugins: [
    Devpilot({
      plugins: [DomInspector],
    }),
  ],
});

// webpack.config.js
import DomInspector from 'devpilot-plugin-dom-inspector';
import Devpilot from 'unplugin-devpilot/webpack';

export default {
  plugins: [
    Devpilot({
      plugins: [DomInspector],
    }),
  ],
};

// rspack.config.ts
import DomInspector from 'devpilot-plugin-dom-inspector';
import Devpilot from 'unplugin-devpilot/rspack';

export default {
  plugins: [
    Devpilot({
      plugins: [DomInspector],
    }),
  ],
};

// farm.config.ts
import DomInspector from 'devpilot-plugin-dom-inspector';
import Devpilot, { getProxyConfig } from 'unplugin-devpilot/farm';

// Note: wsPort is the WebSocket server port (obtained from console output)
export default defineConfig({
  plugins: [
    Devpilot({
      plugins: [DomInspector],
    }),
  ],
  server: {
    proxy: getProxyConfig(60427),
  },
});

Client Import

Add this import to your project entry point to enable the devpilot client:

// main.ts or main.js (entry point)
import 'virtual:devpilot-client';

For TypeScript projects, add type support for the virtual module in your tsconfig.json:

{
  "compilerOptions": {
    "types": ["unplugin-devpilot/virtual"]
  }
}

This import activates the WebSocket connection to the development server and initializes all registered plugins on the client side.

In dev, a Lit + Shadow DOM task overlay loads: Tasks polls the queue every second and lists pending + in progress; use Get approval token before complete_task in MCP. Alt+Shift+I enqueues a task; the agent uses get_pending_tasks (often with clearAfterFetch: false), claim_task, then complete_task with a developer-issued token. The Devpilot badge shows the pending count.

Plugins can export a taskPayloadHook from their client module to enrich the task payload before submission. For example, devpilot-plugin-dom-inspector lazil

... View full README on GitHub