Nuxt MCP Dev / Vite Plugin MCP
Author: antfu
Description: Experimental MCP (Model Context Protocol) server tooling to help AI models understand a local Vite or Nuxt app during development. Monorepo provides (1) `nuxt-mcp-dev` Nuxt module that adds MCP support to the Nuxt dev server, and (2) `vite-plugin-mcp` Vite plugin that adds MCP support to a Vite app. Includes an MCP inspector workflow (`npx @modelcontextprotocol/inspector`). Maintainer/provider: Anthony Fu (antfu). Install via npm/pnpm as packages `nuxt-mcp-dev` and/or `vite-plugin-mcp` (typically as dev dependencies) and enable in your Nuxt/Vite dev setup.
Stars: 897
Forks: 50
License: MIT License
Category: Open Source
Overview
Installation
FAQs
How do I fix the VS Code initialization hang issue when using nuxt-mcp-dev?
The content notes the initialization hang exists in an open GitHub issue but does not provide a fix. Check issue twenty-one in the repository for workarounds or updates from maintainers. Common MCP server debugging steps include verifying the SSE endpoint responds, checking MCP Inspector connectivity, and temporarily disabling other VS Code extensions that might conflict with MCP client initialization.
How can I create custom MCP tools using the mcp:setup hook in Nuxt?
Register custom tools in a Nuxt module by tapping the mcp:setup hook in your module definition, passing a callback that receives the server instance. Inside that callback, call server.addTool with your tool name, schema, and handler function. The handler receives parameters and returns data that AI assistants can query through the MCP protocol.
What specific data does get-vite-module-info return and how can I use it to debug import issues?
The tool returns importers, imported modules, HMR timestamps, and compiled transform result for a specified filepath. Use it to trace circular dependencies, verify which files actually import your module, inspect the transformed code after plugins run, and confirm HMR updates propagate correctly by comparing timestamps across the import chain.
How do I configure nuxt-mcp-dev in a monorepo without config file conflicts between multiple dev servers?
Set `updateConfig: false` in each dev server's configuration to prevent automatic config file writes. You'll then manually create one shared MCP config file that lists all dev servers as separate entries with distinct ports, allowing your IDE to connect to multiple endpoints simultaneously without overwrites.
How do I manually configure Claude Desktop or ChatGPT to connect to the vite-plugin-mcp SSE endpoint?
For Claude Desktop, add an SSE transport entry to your MCP config file pointing to http://localhost:5173/__mcp/sse (or your custom port). For ChatGPT, configure the SSE endpoint through the GPT builder's actions panel or custom instructions that reference the local MCP server URL, ensuring your dev server is running before initiating the connection.
What is the difference between nuxt-mcp-dev and @nuxtjs/mcp-toolkit, and when should I use each one?
Use nuxt-mcp-dev to introspect your running dev server's config and module graph during debugging. Use mcp-toolkit to build MCP servers inside your Nuxt application that expose custom APIs or data to AI clients. They solve different problems: one observes your dev environment, the other extends your production app with AI capabilities.