Skip to content

2.installation.md

Latest commit

 

History

History
175 lines (124 loc) · 4.66 KB

2.installation.md

File metadata and controls

175 lines (124 loc) · 4.66 KB
title Installation
description Install and configure the Nuxt MCP module in your project.
navigation
icon
i-lucide-download
seo
title description
Installation Guide
Install and configure the Nuxt MCP module in your project.

::code-collapse

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:

::install-button

name: "nuxt-mcp-toolkit-docs" url: "https://mcp-toolkit.nuxt.dev/mcp"

::

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

::steps

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:

::code-group

pnpm add @nuxtjs/mcp-toolkit zod
npm install @nuxtjs/mcp-toolkit zod
yarn add @nuxtjs/mcp-toolkit zod
bun add @nuxtjs/mcp-toolkit zod

::

Add to Nuxt config

Add the module to your 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:

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}`,
})
  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-button{name="local-mcp" url="http://localhost:3000/mcp" ide="cursor"} ::

::install-button{name="local-mcp" url="http://localhost:3000/mcp" ide="vscode"} ::

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