Nuxt DevTools
MCP server helping models to understand your Vite/Nuxt app better.
What is Nuxt DevTools?
Nuxt DevTools is a Model Context Protocol (MCP) server that allows AI assistants like Claude, Cursor, and VS Code to mcp server helping models to understand your vite/nuxt app better.
MCP server helping models to understand your Vite/Nuxt app better.
This server falls under the Developer Tools category on MCPgee, the world's largest MCP server directory with 33,000+ servers.
Features
- MCP server helping models to understand your Vite/Nuxt app b
Use Cases
Maintainer
Works with
Installation
NPM
npx -y vite-plugin-mcpManual Installation
npx -y vite-plugin-mcpConfiguration
Configuration Details
claude_desktop_config.json
Performance
Response Metrics
Resource Usage
How to Set Up and Use Nuxt DevTools
vite-plugin-mcp (also distributed as nuxt-mcp-dev) is a Vite plugin and Nuxt module that embeds a live MCP server directly into your development server, giving AI coding assistants real-time introspection into your app's Vite configuration, module graph, and installed plugins. When the plugin is active, AI tools like Claude Code, Cursor, and Windsurf can automatically receive updated context about your local app structure without manual copy-pasting. It is designed to reduce the back-and-forth of explaining your project setup to an AI by making that information available through the Model Context Protocol.
Prerequisites
- Node.js 18+ and npm or pnpm installed
- A Vite-based project (any framework) or a Nuxt 3 application
- An MCP-compatible AI coding client such as Claude Code, Cursor, Windsurf, or VS Code with MCP support
- The project is marked experimental — suitable for development use only
Install vite-plugin-mcp
Install the plugin as a development dependency in your Vite or Nuxt project.
npm install -D vite-plugin-mcpAdd the plugin to your Vite config
Import ViteMcp from vite-plugin-mcp and add it to the plugins array in your vite.config.ts (or vite.config.js). The plugin is active only during development.
import { defineConfig } from 'vite'
import { ViteMcp } from 'vite-plugin-mcp'
export default defineConfig({
plugins: [
ViteMcp()
]
})For Nuxt 3 projects, use the Nuxt module
Instead of the Vite plugin, Nuxt users can install and register the nuxt-mcp-dev module in their nuxt.config.ts.
npm install -D nuxt-mcp-dev
# then in nuxt.config.ts:
# modules: ['nuxt-mcp-dev']Start your development server
Run your Vite or Nuxt dev server as normal. The MCP server starts automatically on the same port under the /__mcp/sse path.
npm run dev
# MCP endpoint available at: http://localhost:5173/__mcp/sseConnect your AI client to the MCP server
For Claude Code, Cursor, and Windsurf, the plugin can auto-update your config files. For manual setup, add the server URL to your client's MCP configuration.
{
"mcpServers": {
"vite-mcp": {
"type": "sse",
"url": "http://localhost:5173/__mcp/sse"
}
}
}Nuxt DevTools Examples
Client configuration (Claude Code, SSE connection)
Connect Claude Code to your running Vite dev server's MCP endpoint:
{
"mcpServers": {
"vite-mcp": {
"type": "sse",
"url": "http://localhost:5173/__mcp/sse"
}
}
}Prompts to try
Ask your AI assistant questions about your running Vite/Nuxt app:
- "What Vite plugins are currently loaded in my project?"
- "Show me the module graph for my main entry point"
- "What version of Vue is being used in this Vite project?"
- "List all the routes defined in my Nuxt app"
- "What build optimizations are configured in my Vite setup?"Troubleshooting Nuxt DevTools
MCP server endpoint at /__mcp/sse returns 404
Ensure the ViteMcp() plugin is listed in your vite.config.ts plugins array and that the dev server has been restarted after adding the plugin. The MCP endpoint is only active during dev mode (not in production builds).
AI client does not auto-update its config as promised
The auto-update feature works for VS Code, Cursor, and Windsurf. For Claude Code, you may need to manually add the SSE URL to your .claude/mcp.json. The updateConfig option in ViteMcp() can be set to false if you prefer to manage configs manually.
Plugin causes HMR (hot module replacement) to behave unexpectedly
This is a known risk with experimental plugins. If HMR breaks, try removing ViteMcp() from the plugins array temporarily to confirm it is the cause, then report the issue on the GitHub repository.
Frequently Asked Questions about Nuxt DevTools
What is Nuxt DevTools?
Nuxt DevTools is a Model Context Protocol (MCP) server that mcp server helping models to understand your vite/nuxt app better. It connects AI assistants to external tools and data sources through a standardized interface.
How do I install Nuxt DevTools?
Install via npm with the command: npx -y vite-plugin-mcp. Then add the server configuration to your AI client's JSON config file (e.g., claude_desktop_config.json or .cursor/mcp.json).
Which AI clients work with Nuxt DevTools?
Nuxt DevTools works with all major MCP-compatible AI clients including Claude Desktop, Claude Code, Cursor, VS Code (GitHub Copilot), Windsurf, and Cline.
Is Nuxt DevTools free to use?
Yes, Nuxt DevTools is open source and available under the MIT license. You can use it freely in both personal and commercial projects.
Nuxt DevTools Alternatives — Similar Developer Tools Servers
Looking for alternatives to Nuxt DevTools? 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 Nuxt DevTools 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 Nuxt DevTools?
Browse our complete directory of 33,000+ MCP servers, read setup guides for your editor, and start building with the Model Context Protocol.