Getting Started

Installation

Install and configure the Nuxt MCP module in your project.

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:

Install MCP in Cursor

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

Install the module

You can install the module automatically or manually.

Automatic Installation

Use the nuxt command to install the module and add it to your configuration automatically:

npx nuxt module add mcp-toolkit

Manual Installation

Install @nuxtjs/mcp-toolkit and its peer dependency zod:

pnpm add @nuxtjs/mcp-toolkit zod

Add to Nuxt config

Add the module to your nuxt.config.ts:

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

Configure the module (optional)

The module works with sensible defaults, but you can customize it:

nuxt.config.ts
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:
server/mcp/tools/test.ts
import { z } from 'zod'

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}`,
      }],
    }
  },
})
  1. 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:

Install MCP in CursorInstall MCP in VS Code

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