安装

使用 @nuxtjs/mcp-toolkit 在我的 Nuxt 应用中设置 MCP 服务器。

- 使用 `npx nuxt module add mcp-toolkit` 自动安装模块
- 创建包含 tools/、resources/ 和 prompts/ 子目录的 server/mcp/ 目录
- defineMcpTool、defineMcpResource、defineMcpPrompt 和 defineMcpHandler 会自动导入
- 在 server/mcp/tools/test.ts 中使用 defineMcpTool 和 Zod inputSchema 创建一个测试工具
- 启动开发服务器并验证 http://localhost:3000/mcp 处的 MCP 端点
- 将您的 IDE（Cursor 或 VS Code）连接到 http://localhost:3000/mcp

文档：https://mcp-toolkit.nuxt.dev/getting-started/installation

尝试文档 MCP 服务器

在安装模块之前，您可以尝试连接本文档的 MCP 服务器，以探索可用的工具和提示词：

这将使您能够使用 setup-mcp-server、create-tool、create-resource 和 troubleshoot 等提示词，帮助您快速入门。

前置要求

• Nuxt 3.x 或 4.x
• Node.js 18.x 或更高版本
• 包管理器（npm、pnpm、yarn 或 bun）

如果您启用了代码模式（Code Mode），该功能特别要求 Node.js >=18.16.0。

安装

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', // MCP 服务器的默认路由
    dir: 'mcp', // MCP 定义的基目录（相对于 server/）
  },
})

验证安装

安装完成后，您可以通过以下方式验证一切是否正常运行：

1. 检查服务器路由：启动您的 Nuxt 开发服务器并访问 http://localhost:3000/mcp（或您的自定义路由）。您应该会被重定向到您配置的 browserRedirect URL。
2. 创建测试工具：创建一个简单的工具进行测试：

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. 检查自动导入：defineMcpTool、defineMcpResource、defineMcpPrompt 和 defineMcpHandler 函数应在您的服务器文件中自动导入。

项目结构

安装完成后，您的项目结构应如下所示：

your-project/
├── server/
│   └── mcp/
│       ├── tools/
│       │   └── echo.ts          # 您的工具定义
│       ├── resources/
│       │   └── readme.ts       # 您的资源定义
│       └── prompts/
│           └── greeting.ts     # 您的提示词定义
├── nuxt.config.ts
└── package.json

连接您的 IDE

Nuxt 应用运行后，将您的 AI 助手连接到 MCP 服务器：

有关手动配置、add-mcp CLI 以及为您自己的文档添加安装按钮的说明，请参阅 连接指南。

后续步骤

模块安装完成后：

• 配置 - 了解所有配置选项
• 连接 - 将 AI 助手连接到您的 MCP 服务器，并为您的文档添加安装按钮
• 工具 - 创建您的第一个工具