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.
What is Unplugin DevPilot?
Unplugin DevPilot is a Model Context Protocol (MCP) server that allows AI assistants like Claude, Cursor, and VS Code to universal plugin framework for development tools that enables seamless browser-server communication and mcp (model context protocol) integration with ai/llm systems.
A universal plugin framework for development tools that enables seamless browser-server communication and MCP (Model Context Protocol) integration with AI/LLM systems.
This server falls under the Developer Tools category on MCPgee, the world's largest MCP server directory with 33,000+ servers.
Features
- A universal plugin framework for development tools that enab
Use Cases
Maintainer
Works with
Installation
Manual Installation
npx unplugin-devpilotConfiguration
Configuration Details
claude_desktop_config.json
Performance
Response Metrics
Resource Usage
How to Set Up and Use Unplugin DevPilot
unplugin-devpilot is a universal plugin framework that bridges your Vite/webpack dev server to an MCP server, enabling AI coding assistants to inspect, interact with, and automate the browser UI of your running web application. It ships a DOM Inspector plugin that exposes eight MCP tools — from capturing page snapshots and screenshots to clicking elements and reading console logs — making it ideal for LLM-driven frontend debugging and UI automation workflows. Developers who want their AI assistant to see and control their app in real time while they code will find this the missing link between the browser and the model.
Prerequisites
- Node.js 22 or later
- pnpm ~9 (the project uses pnpm as its package manager)
- A Vite-based (or webpack-compatible) development project
- An MCP client such as Claude Desktop, Cursor, or any agent that supports the Model Context Protocol
- Running dev server — the MCP server proxies through the dev server WebSocket at /__devpilot_ws
Install the packages
Add unplugin-devpilot and the DOM Inspector plugin to your project as dev dependencies.
npm install -D unplugin-devpilot devpilot-plugin-dom-inspectorRegister the plugin in your Vite config
Import and configure Devpilot in vite.config.ts, passing the DomInspector plugin. The MCP server defaults to port 3101; change mcpPort if needed.
import { defineConfig } from 'vite'
import Devpilot from 'unplugin-devpilot/vite'
import { DomInspector } from 'devpilot-plugin-dom-inspector'
export default defineConfig({
plugins: [
Devpilot({
mcpPort: 3101,
plugins: [DomInspector],
}),
],
})Add the virtual client import to your entry point
Import the virtual module in your application entry file so the in-browser client activates during development.
// src/main.ts
import 'virtual:devpilot-client'Add TypeScript types (optional but recommended)
Register the virtual module types in tsconfig.json so TypeScript recognises the import.
{
"compilerOptions": {
"types": ["unplugin-devpilot/virtual"]
}
}Start your dev server and connect your MCP client
Run your Vite dev server as usual. The MCP server starts automatically on port 3101. Point your MCP client to the server so it can start calling DOM Inspector tools.
npx viteConfigure your MCP client
Add the devpilot MCP server to your MCP client configuration. Since it runs as part of your dev server, you connect to it via SSE on the configured port rather than launching a separate process.
{
"mcpServers": {
"devpilot": {
"url": "http://localhost:3101/mcp"
}
}
}Unplugin DevPilot Examples
Client configuration (SSE transport)
Connect Claude Desktop or Cursor to the devpilot MCP server running alongside your Vite dev server on port 3101.
{
"mcpServers": {
"devpilot": {
"url": "http://localhost:3101/mcp"
}
}
}Prompts to try
Use these prompts with your MCP client once the dev server is running and the plugin is connected.
- "Take a screenshot of the current page and describe what you see."
- "Get a compact DOM snapshot and find the main navigation links."
- "Click the submit button on the login form."
- "Read the browser console logs and tell me if there are any errors."
- "Input '[email protected]' into the email field on the page."Troubleshooting Unplugin DevPilot
MCP client cannot connect to localhost:3101
Ensure your Vite dev server is running before attempting to connect. The MCP server only starts when the dev server is active. Also confirm mcpPort in your Vite config matches the port you are connecting to.
virtual:devpilot-client import fails at build time
The virtual module is only available during development (not production builds). Guard the import with an environment check, or ensure your bundler's plugin is properly registered in vite.config.ts before building.
get_page_snapshot returns an empty or incomplete DOM
Make sure the 'virtual:devpilot-client' import is in your entry file and the browser has loaded the page. The client script must be initialised in the browser before the MCP tools can query the DOM.
Frequently Asked Questions about Unplugin DevPilot
What is Unplugin DevPilot?
Unplugin DevPilot is a Model Context Protocol (MCP) server that universal plugin framework for development tools that enables seamless browser-server communication and mcp (model context protocol) integration with ai/llm systems. It connects AI assistants to external tools and data sources through a standardized interface.
How do I install Unplugin DevPilot?
Follow the installation instructions on the Unplugin DevPilot GitHub repository. Clone the repo, install dependencies, and add the server config to your AI client.
Which AI clients work with Unplugin DevPilot?
Unplugin DevPilot works with all major MCP-compatible AI clients including Claude Desktop, Claude Code, Cursor, VS Code (GitHub Copilot), Windsurf, and Cline.
Is Unplugin DevPilot free to use?
Yes, Unplugin DevPilot is open source and available under the MIT license. You can use it freely in both personal and commercial projects.
Unplugin DevPilot Alternatives — Similar Developer Tools Servers
Looking for alternatives to Unplugin DevPilot? Here are other popular developer tools servers you can use with Claude, Cursor, and VS Code.
Ecc
★ 188.2kThe agent harness performance optimization system. Skills, instincts, memory, security, and research-first development for Claude Code, Codex, Opencode, Cursor and beyond.
Javaguide
★ 155.8kJava 面试 & 后端通用面试指南，覆盖计算机基础、数据库、分布式、高并发、系统设计与 AI 应用开发
Gemini CLI
★ 104.5kA secure MCP server that wraps the Google Gemini CLI, allowing clients to query Gemini models using local OAuth sessions without requiring an API key. It provides tools for model interaction and diagnostics with built-in protection against command in
Awesome MCP Servers
★ 87.3k⭐ Curated list of Model Context Protocol (MCP) servers - tools that extend Claude Desktop, Cursor, Windsurf, and other MCP clients with custom capabilities.
MCP Servers
★ 86.0kModel Context Protocol Servers
CC Switch
★ 77.5kA cross-platform desktop All-in-One assistant for Claude Code, Codex, OpenCode, OpenClaw, Gemini CLI & Hermes Agent. Only official website: ccswitch.io
Browse More Developer Tools MCP Servers
Explore all developer tools servers available in the MCPgee directory. Each server includes setup guides for Claude, Cursor, and VS Code.
Set Up Unplugin DevPilot in Your Editor
Choose your AI client for step-by-step setup instructions.
Quick Config Preview
Add this to your claude_desktop_config.json or .cursor/mcp.json
Ready to use Unplugin DevPilot?
Browse our complete directory of 33,000+ MCP servers, read setup guides for your editor, and start building with the Model Context Protocol.