Installation

Set up an MCP server in my Nuxt app using @nuxtjs/mcp-toolkit.

- Auto install the module using `npx nuxt module add mcp-toolkit`
- Create the server/mcp/ directory with tools/, resources/, and prompts/ subdirectories
- defineMcpTool, defineMcpResource, defineMcpPrompt, and defineMcpHandler are auto-imported
- Create a test tool in server/mcp/tools/test.ts using defineMcpTool with a Zod inputSchema
- Start the dev server and verify the MCP endpoint at http://localhost:3000/mcp
- Connect your IDE (Cursor or VS Code) to http://localhost:3000/mcp

Docs: https://mcp-toolkit.nuxt.dev/getting-started/installation

Try the Documentation MCP Server

Before installing the module, you can try connecting to this documentation's MCP server to explore the available tools and prompts:

This will give you access to prompts like setup-mcp-server, create-tool, create-resource, and troubleshoot to help you get started.

Prerequisites

• Nuxt 3.x or 4.x
• Node.js 18.x or higher
• A package manager (npm, pnpm, yarn, or bun)

If you enable Code Mode, that feature specifically requires Node.js >=18.16.0.

Installation

npx nuxt module add mcp-toolkit

pnpm add @nuxtjs/mcp-toolkit zod

npm install @nuxtjs/mcp-toolkit zod

yarn add @nuxtjs/mcp-toolkit zod

bun add @nuxtjs/mcp-toolkit zod

export default defineNuxtConfig({
  modules: ['@nuxtjs/mcp-toolkit'],
})

export default defineNuxtConfig({
  modules: ['@nuxtjs/mcp-toolkit'],
  mcp: {
    name: 'My MCP Server',
    route: '/mcp', // Default route for the MCP server
    dir: 'mcp', // Base directory for MCP definitions (relative to server/)
  },
})

Verify Installation

After installation, you can verify everything is working by:

1. Checking the server route: Start your Nuxt dev server and visit http://localhost:3000/mcp (or your custom route). You should be redirected to your configured browserRedirect URL.
2. Creating a test tool: Create a simple tool to test:

import { z } from 'zod'
import { defineMcpTool } from '@nuxtjs/mcp-toolkit/server'

export default defineMcpTool({
  name: 'test',
  description: 'A simple test tool',
  inputSchema: {
    message: z.string(),
  },
  handler: async ({ message }) => `Test successful: ${message}`,
})

3. Checking auto-imports: The defineMcpTool, defineMcpResource, defineMcpPrompt, and defineMcpHandler functions should be auto-imported in your server files.

Project Structure

After installation, your project structure should look like this:

your-project/
├── server/
│   └── mcp/
│       ├── tools/
│       │   └── echo.ts          # Your tool definitions
│       ├── resources/
│       │   └── readme.ts       # Your resource definitions
│       └── prompts/
│           └── greeting.ts     # Your prompt definitions
├── nuxt.config.ts
└── package.json

Connect Your IDE

Once your Nuxt app is running, connect your AI assistant to the MCP server:

For manual configuration, the add-mcp CLI, and install buttons for your own documentation, see the Connection guide.

Next Steps

Now that you have the module installed:

• Configuration - Learn about all configuration options
• Connection - Connect AI assistants to your MCP server and add install buttons to your documentation
• Tools - Create your first tool