Nuxt MCP Toolkit

Nuxt MCP Toolkit

What is Nuxt MCP Toolkit about?

Nuxt MCP Toolkit provides a Nuxt module that automatically discovers and registers tools, resources, prompts, and apps for Model Context Protocol servers. By simply adding files in predefined directories, developers get fully typed MCP endpoints without manual wiring.

How to use Nuxt MCP Toolkit?

1. Add the module:

   npx nuxt module add mcp-toolkit
   

2. (Optional) install peer dependency:

   npx npm install -D @nuxtjs/mcp-toolkit zod
   

3. Create files under tools/, resources/, prompts/, or apps/ in your Nuxt project. The module will auto‑import them and expose MCP endpoints.
4. Run your Nuxt app (npx nuxt dev). The built‑in inspector in Nuxt DevTools lets you view and debug the MCP definitions.

Key features

• Zero configuration – automatic discovery of tools, resources, prompts, and apps.
• File‑based organization – intuitive directory structure for MCP definitions.
• Multiple handlers – host several MCP endpoints in one Nuxt app.
• MCP Apps – ship interactive Vue UI widgets compatible with MCP‑Apps hosts.
• Built‑in inspector – visual debugging via Nuxt DevTools.
• TypeScript first – full type safety with auto‑imports.
• Zod validation – declarative input/output validation.

Use cases

• Building AI assistants that need custom toolsets or data sources.
• Exposing domain‑specific prompts and resources as MCP services.
• Rapid prototyping of AI‑driven features inside an existing Nuxt project.
• Providing interactive UI widgets for AI‑enabled platforms.

FAQ

• Do I need to configure anything manually? No. Once the module is added, any file placed in the supported folders is automatically registered.
• Which package manager should I use? The module works with npm, yarn, pnpm, and bun. Installation commands are provided for each.
• How do I debug my MCP definitions? Use the built‑in inspector available in Nuxt DevTools during development.
• Is TypeScript required? Not required, but full type safety is provided when using TypeScript.
• Can I run multiple MCP servers? Yes. Define multiple handlers in separate directories, and each will be exposed as its own endpoint.

Nuxt MCP Toolkit

A Nuxt module to easily create a Model Context Protocol (MCP) server directly in your Nuxt application. Define MCP tools, resources, and prompts with zero configuration - just create files and they're automatically discovered and registered.

✨ Features

• 🎯 Zero Configuration - Automatic discovery of tools, resources, prompts, and apps
• 📦 File-based - Organize definitions in intuitive directory structures
• 🚀 Multiple Handlers - Create multiple MCP endpoints in a single app
• 🖼️ MCP Apps - Ship interactive Vue UI widgets to MCP Apps-compatible hosts
• 🔍 Built-in Inspector - Visual debugging tool in Nuxt DevTools
• 📝 TypeScript First - Full type safety with auto-imports
• 🔒 Zod Validation - Built-in input/output validation

🧩 Agent Skills

Nuxt MCP Toolkit provides Agent Skills to help AI coding assistants build and manage MCP servers in your Nuxt application.

Installation

Install the skill from the published documentation site (Docus Agent Skills):

npx skills add https://mcp-toolkit.nuxt.dev

What it does

Once installed, your AI assistant will:

• Setup and configure MCP servers in your Nuxt apps
• Create tools, resources, and prompts following best practices
• Review your MCP implementation for anti-patterns and improvements
• Troubleshoot auto-imports, endpoints, and validation issues
• Create eval suites to verify tool selection

Examples

Setup an MCP server in my Nuxt app
Create a tool to fetch user data
Review my MCP implementation

Learn more about the skill →

🚀 Installation

Use nuxt to install the module automatically:

npx nuxt module add mcp-toolkit

Or install manually:

# npm
npm install -D @nuxtjs/mcp-toolkit zod

# yarn
yarn add -D @nuxtjs/mcp-toolkit zod

# pnpm
pnpm add -D @nuxtjs/mcp-toolkit zod

# bun
bun add -D @nuxtjs/mcp-toolkit zod

📖 Documentation

📖 Full Documentation →

🤝 Contributing

Contributions are welcome! Feel free to open an issue or submit a pull request.

# Install dependencies
pnpm install

# Generate type stubs
pnpm run dev:prepare

# Start the playground
pnpm run dev

# Run tests
pnpm run test

❓ Questions & Support

• Issues: Open an issue for bugs or feature requests
• X: Follow @hugorcd for updates

📄 License

Published under the MIT license.

Made by @HugoRCD and community 💛