Vite MCP Plugin
Pluggable Vite MCP plugin that brings client-side tools to your existing Vite setup
What is Vite MCP Plugin?
Vite MCP Plugin is a Model Context Protocol (MCP) server that allows AI assistants like Claude, Cursor, and VS Code to pluggable vite mcp plugin that brings client-side tools to your existing vite setup
Pluggable Vite MCP plugin that brings client-side tools to your existing Vite setup
This server falls under the Developer Tools category on MCPgee, the world's largest MCP server directory with 33,000+ servers.
Features
- Pluggable Vite MCP plugin that brings client-side tools to y
Use Cases
Maintainer
Works with
Installation
Manual Installation
npx vite-plugin-mcp-client-toolsConfiguration
Configuration Details
claude_desktop_config.json
Performance
Response Metrics
Resource Usage
How to Set Up and Use Vite MCP Plugin
vite-plugin-mcp-client-tools is a Vite plugin that exposes client-side browser tools to AI assistants through the Model Context Protocol, turning your running Vite dev server into an MCP endpoint. It ships two built-in tools: one for capturing screenshots of the browser tab and one for reading the browser console log, enabling AI agents to see your UI and debug frontend issues in real time. Frontend developers use it to give AI coding assistants live visibility into what the app looks like and what errors are appearing in the browser without manual copy-paste.
Prerequisites
- Node.js 16+ installed
- Vite 4.0+ configured in your project
- A modern browser supporting the Screen Capture API (Chrome or Edge recommended)
- An MCP-compatible client that supports HTTP/SSE connections (Claude Code, VS Code)
Install the plugin
Install vite-plugin-mcp-client-tools as a development dependency in your Vite project.
npm install vite-plugin-mcp-client-toolsAdd the plugin to vite.config.js
Import viteMcpPlugin and the tools you want to expose, then add the plugin to your Vite config. Both readConsoleTool and takeScreenshotTool are included.
import { defineConfig } from "vite";
import { viteMcpPlugin } from "vite-plugin-mcp-client-tools";
import { readConsoleTool } from "vite-plugin-mcp-client-tools/tools/read-console";
import { takeScreenshotTool } from "vite-plugin-mcp-client-tools/tools/take-screenshot";
export default defineConfig({
plugins: [
viteMcpPlugin({
tools: [readConsoleTool, takeScreenshotTool],
}),
],
});Start your Vite dev server
Run the Vite dev server as usual. The MCP endpoint is automatically served at http://localhost:5173/mcp (adjust the port to match your Vite config).
npm run devConfigure your MCP client to connect
Point your MCP client (e.g., Claude Code) at the Vite dev server MCP endpoint using the HTTP URL.
Grant screen capture permission in the browser
When the AI assistant first calls take-screenshot, your browser will prompt you to select a tab to share. Select the tab running your Vite app. The permission persists for the session.
Vite MCP Plugin Examples
Client configuration
Claude Code configuration to connect to the Vite dev server MCP endpoint. Adjust the port number to match your project.
{
"mcpServers": {
"vite-dev": {
"url": "http://localhost:5173/mcp"
}
}
}Prompts to try
Example prompts once the plugin is running and your AI client is connected.
- "Take a screenshot of my app and tell me if the layout looks correct"
- "Read the browser console and show me any errors or warnings"
- "Check the console logs from the last 20 entries for any React warnings"
- "Screenshot the current state of the page and describe the UI components you see"Troubleshooting Vite MCP Plugin
The MCP endpoint at http://localhost:5173/mcp returns a 404
Confirm the viteMcpPlugin is correctly added to the plugins array in vite.config.js and the dev server was restarted after the config change. Also verify the port number matches your actual Vite dev server port.
take-screenshot fails or returns a blank image
The Screen Capture API requires a browser permission prompt. Make sure you are using Chrome or Edge (Firefox has limited support). If the prompt was dismissed, reload the page and try again to trigger the permission dialog.
read-console returns no entries even though errors are visible in DevTools
The plugin intercepts console calls made after it is initialized. Console messages that occurred before the page loaded will not appear. Reproduce the error after the connection is established, or use the tail parameter to limit the window of captured logs.
Frequently Asked Questions about Vite MCP Plugin
What is Vite MCP Plugin?
Vite MCP Plugin is a Model Context Protocol (MCP) server that pluggable vite mcp plugin that brings client-side tools to your existing vite setup It connects AI assistants to external tools and data sources through a standardized interface.
How do I install Vite MCP Plugin?
Follow the installation instructions on the Vite MCP Plugin GitHub repository. Clone the repo, install dependencies, and add the server config to your AI client.
Which AI clients work with Vite MCP Plugin?
Vite MCP Plugin works with all major MCP-compatible AI clients including Claude Desktop, Claude Code, Cursor, VS Code (GitHub Copilot), Windsurf, and Cline.
Is Vite MCP Plugin free to use?
Yes, Vite MCP Plugin is open source and available under the MIT license. You can use it freely in both personal and commercial projects.
Vite MCP Plugin Alternatives — Similar Developer Tools Servers
Looking for alternatives to Vite MCP Plugin? 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 Vite MCP Plugin 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 Vite MCP Plugin?
Browse our complete directory of 33,000+ MCP servers, read setup guides for your editor, and start building with the Model Context Protocol.