---
title: "Install Nuxt MCP Toolkit"
description: "Install and configure the Nuxt MCP module in your project."
canonical_url: "https://mcp-toolkit.nuxt.dev/getting-started/installation"
---
# Install Nuxt MCP Toolkit

> Install and configure the Nuxt MCP module in your project.

<prompt :actions="["copy","cursor","windsurf"]" description="Set up an MCP server in a Nuxt app" icon="i-lucide-download">

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

- Auto install the module using `npx nuxt add mcp`
- 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](http://localhost:3000/mcp)
- Connect your IDE (Cursor or VS Code) to [http://localhost:3000/mcp](http://localhost:3000/mcp)

Docs: [https://mcp-toolkit.nuxt.dev/getting-started/installation](https://mcp-toolkit.nuxt.dev/getting-started/installation)

</prompt>

## 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">



</install-button>

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:

```bash
npx nuxt add mcp
```

#### Manual Installation

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

<code-group>

```bash [pnpm]
pnpm add @nuxtjs/mcp-toolkit zod
```

```bash [npm]
npm install @nuxtjs/mcp-toolkit zod
```

```bash [yarn]
yarn add @nuxtjs/mcp-toolkit zod
```

```bash [bun]
bun add @nuxtjs/mcp-toolkit zod
```

</code-group>

### Add to Nuxt config

Add the module to your `nuxt.config.ts`:

```typescript [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:

```typescript [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/)
  },
})
```

</steps>

## 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:

```typescript [server/mcp/tools/test.ts]
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:

```text
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>

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



</install-button>

For manual configuration, the [add-mcp](https://npmx.dev/package/add-mcp) CLI, and install buttons for your own documentation, see the [Connection](https://mcp-toolkit.nuxt.dev/getting-started/connection) guide.

## Next Steps

Now that you have the module installed:

- [Configuration](https://mcp-toolkit.nuxt.dev/getting-started/configuration) - Learn about all configuration options
- [Connection](https://mcp-toolkit.nuxt.dev/getting-started/connection) - Connect AI assistants to your MCP server and add install buttons to your documentation
- [Tools](https://mcp-toolkit.nuxt.dev/tools/overview) - Create your first tool


## Sitemap

See the full [sitemap](https://mcp-toolkit.nuxt.dev/sitemap.md) for all pages.