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)

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' // optional

export default defineMcpTool({
  name: 'test',
  description: 'A simple test tool',
  inputSchema: {
    message: z.string(),
  },
  handler: async ({ message }) => {
    return {
      content: [{
        type: 'text',
        text: `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 and adding install buttons to your own documentation, see the IDE 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