Nuxt MCP Dev
nuxt-mcp-dev / vite-plugin-mcp
A Nuxt module and a Vite plugin start an MCP server on the dev server port so the agent sees config, pages, components, auto-imports and the module graph
- 913 ★ on the repository
- Last commit
- MIT
Extended access
Why this level
- The `nuxt-scaffold` tool creates files in the project through `nuxi add`
- The module edits client configuration files itself, including the global Windsurf file in the home folder
- The server listens on the dev server port on the local machine without authentication
Install
- Works in
Manual install
Add `nuxt-mcp-dev` to `modules` in `nuxt.config.ts`: `export default defineNuxtConfig({ modules: ['nuxt-mcp-dev'] })`. For a Vite project add `ViteMcp()` from `vite-plugin-mcp` to `plugins`. Start the dev server and point the MCP client to `http://localhost:3000/__mcp/sse` (port 5173 for Vite). Remember the packages are experimental and the module edits client configs unless you set `updateConfig: false`.
Access and checks
How we reviewExtended accessThe tool runs code or makes network calls and only reads external data.
- The `nuxt-scaffold` tool creates files in the project through `nuxi add`
- The module edits client configuration files itself, including the global Windsurf file in the home folder
- The server listens on the dev server port on the local machine without authentication
This is third-party code. Review the repository files before installing.
What it does
Anthony Fu's repository holds two packages. `nuxt-mcp-dev` plugs into a Nuxt project with one line in `modules` of `nuxt.config.ts`, and `vite-plugin-mcp` adds the `ViteMcp()` plugin to `vite.config`. While the dev server runs, an MCP server is available on it at an address like `http://localhost:3000/__mcp/sse` for Nuxt or `http://localhost:5173/__mcp/sse` for Vite. No separate process is needed. In Nuxt the agent gets `get-nuxt-config` (`ssr`, `srcDir`, `rootDir`, aliases, public `runtimeConfig`, installed modules), `list-nuxt-pages`, `list-nuxt-components` and `list-nuxt-auto-imports-items`. The last three let the agent use existing pages, components and functions instead of inventing imports. The `nuxt-scaffold` tool calls `nuxi add` and creates a component, page, layer, plugin, server route and other templates. The Vite plugin adds `get-vite-config` and `get-vite-module-info`: for a file it returns importing and imported modules and the compiled result. The module registers the server in client configs on its own. The files depend on the client: `.cursor/mcp.json`, `.vscode/settings.json`, `~/.codeium/windsurf/mcp_config.json` and `.mcp.json` for Claude Code. By default it also adds the remote documentation server `https://nuxt.com/mcp`, which `includeNuxtDocsMcp: false` turns off. Other Nuxt modules can extend the tool set through the `mcp:setup` hook.
Who it is for. For Nuxt and Vite developers who write code with Cursor, Claude Code, Windsurf or VS Code and want the agent to know how their app is built.
Good fit when
- An agent adds a component and invents imports: `list-nuxt-components` and `list-nuxt-auto-imports-items` show what the app already has
- You need a page or plugin that follows project conventions: `nuxt-scaffold` runs `nuxi add` in the app root
- You need to know why a module landed in the build or where it is imported from: `get-vite-module-info` returns the import graph by file path
- The project uses several agent clients: the module updates `.cursor/mcp.json`, `.vscode/settings.json`, `.mcp.json` and Windsurf settings itself
- You write your own Nuxt module and want to hand the agent your own data: the `mcp:setup` hook does that
Not a fit when
- You need an MCP server for your own Nuxt app that serves data to users: the author points to the `@nuxtjs/mcp-toolkit` module
- You only need Nuxt documentation and the module list: the remote server `https://nuxt.com/mcp` is enough
- The project uses neither Nuxt nor Vite: both packages work only inside the dev server of those tools
- You work in production or in a server-side build: the plugin is meant for the dev server and the author marks the packages as experimental
Example request
Check which components and auto-imports the app already has and create a profile page without duplicating anythingMCP
- Transport
- sse
- Authentication
- not required
Limitations
- The author marks `nuxt-mcp-dev` as experimental and asks for caution, and `vite-plugin-mcp` as not ready for production.
- The server is available only while the dev server runs. It listens on the dev server port, 3000 for Nuxt and 5173 for Vite by default, and prints the address to the console.
- `updateConfig: 'auto'` edits client configs itself, including the global Windsurf file in the home folder. Set `updateConfig: false` to keep files untouched.
- Alongside the module a remote `nuxt-docs` server at `https://nuxt.com/mcp` appears in client configs. `includeNuxtDocsMcp: false` turns it off.
- The `nuxt-scaffold` tool creates project files. Review the result in git before committing.
How to disable. Remove `nuxt-mcp-dev` from `modules` in `nuxt.config.ts` or `ViteMcp()` from the Vite plugins. Delete the server entries the module added to `.cursor/mcp.json`, `.vscode/settings.json`, `.mcp.json` and the Windsurf config by hand. To stop the module from changing client files, set `updateConfig: false`.
FAQ
Which tools does the agent get in Nuxt?
`get-nuxt-config`, `list-nuxt-pages`, `list-nuxt-components`, `list-nuxt-auto-imports-items` and `nuxt-scaffold`. The module sits on the Vite plugin, so `get-vite-config` and `get-vite-module-info` come with it.
Which templates can nuxt-scaffold create?
A list of sixteen: `api`, `app`, `app-config`, `component`, `composable`, `error`, `layer`, `layout`, `middleware`, `module`, `page`, `plugin`, `server-middleware`, `server-plugin`, `server-route` and `server-util`. Each needs a name.
How do I extend the tool set from my own Nuxt module?
Hook `mcp:setup` in the module's `setup` and register a tool with `mcp.tool` giving a name, description, parameter schema and a function. In the repository example the `get-nuxt-root` tool returns the project root folder.
How do I stop the module from changing client files?
Set `updateConfig: false`. To limit the list, pass one or more types: `cursor`, `vscode`, `windsurf`, `claude-code`. `updateConfigServerName` changes the server name in the files.
What about the Nuxt documentation server?
`includeNuxtDocsMcp` is `true` by default and a `nuxt-docs` entry pointing to `https://nuxt.com/mcp` with current documentation and the module list is added to the config. Remove it with `includeNuxtDocsMcp: false`.
Discussion
No questions or reviews yet.
Related
MCP serversA Vite plugin with an MCP server that shows the agent the components, routes and Pinia stores of a running Vue app
Svelte's official MCP server and plugin: current docs, component autofixing and Svelte 5 skills
Connects an agent to a running Next.js 16+ dev server: errors, routes, logs and docs for your installed version
Vibe MCP gives an agent components, icons and tokens of the monday.com Vibe design system
21st.dev MCP server and plugin: search ready React/Tailwind components and logos and generate UI from your agent
Inspo
inspo
An MCP server with a reference of real working sites an agent studies for design before writing an interface. Take techniques and do not copy pages
Comparison with similar tools
Entries that share the main search query, and how they differ.
| Entry | Official | Authentication | Repository stars | Main difference |
|---|---|---|---|---|
| Nuxt MCP Dev (this entry) | no | not required | 913 | |
| Anthony Fu's Skills | no | 6,019 | the antfu/skills repository holds skills with the author's conventions and Vue, Vite and Nuxt documentation; Nuxt MCP Dev gives the agent data from the running app | |
| vite-plugin-vue-mcp | no | not required | 578 | a Vite plugin with an MCP server that shows the agent the components |
README in short
The root documentation briefly introduces the monorepo with two packages, warns about the experimental status and points to `@nuxtjs/mcp-toolkit` and the Nuxt AI documentation. Each package's documentation has a setup example, the server address and a description of automatic client configuration, and the Nuxt one adds the `mcp:setup` hook. The repository holds TypeScript sources, playgrounds for both packages and export tests.