Introduction

What is Model Context Protocol?

The Model Context Protocol (MCP) is an open protocol that enables AI assistants to securely access external data sources and tools. It provides a standardized way for AI applications to:

• Access Tools: Execute functions and operations
• Read Resources: Access files, databases, APIs, and other data sources
• Use Prompts: Leverage predefined prompt templates

MCP servers act as bridges between AI assistants and external systems, enabling them to interact with your application's data and functionality in a secure, controlled manner.

What is Nuxt MCP Toolkit?

The Nuxt MCP Toolkit makes it incredibly easy to create MCP servers directly in your Nuxt application. Instead of building a separate MCP server, you can define tools, resources, and prompts right alongside your Nuxt application code.

Key Benefits

How It Works

The module automatically:

1. Scans your server/mcp/ directory (or custom path) for definitions
2. Discovers tools, resources, and prompts from your files
3. Registers them with the MCP server
4. Exposes an HTTP endpoint for MCP clients to connect

server/
└── mcp/
    ├── tools/
    │   ├── echo.ts
    │   └── calculator.ts
    ├── resources/
    │   ├── readme.ts
    │   └── files.ts
    └── prompts/
        ├── greeting.ts
        └── summarize.ts

Core Concepts

Tools

Tools are functions that AI assistants can call. They accept input parameters (validated with Zod) and return results.

import { defineMcpTool } from '@nuxtjs/mcp-toolkit/server' // optional

export default defineMcpTool({
  name: 'calculate-bmi',
  inputSchema: {
    weightKg: z.number(),
    heightM: z.number(),
  },
  handler: async ({ weightKg, heightM }) => {
    const bmi = weightKg / (heightM * heightM)
    return {
      content: [{ type: 'text', text: `BMI: ${bmi}` }],
    }
  },
})

Resources

Resources provide access to data via URIs. They can be static files or dynamic data sources.

import { defineMcpResource } from '@nuxtjs/mcp-toolkit/server' // optional

export default defineMcpResource({
  name: 'readme',
  uri: 'file:///README.md',
  handler: async (uri: URL) => {
    const content = await readFile(uri.pathname, 'utf-8')
    return {
      contents: [{ uri: uri.toString(), text: content }],
    }
  },
})

Prompts

Prompts are reusable message templates that can include dynamic arguments.

import { defineMcpPrompt } from '@nuxtjs/mcp-toolkit/server' // optional

export default defineMcpPrompt({
  name: 'greeting',
  inputSchema: {
    name: z.string(),
  },
  handler: async ({ name }) => {
    return {
      messages: [{
        role: 'user',
        content: { type: 'text', text: `Hello, ${name}!` },
      }],
    }
  },
})

Next Steps

Ready to get started? Check out:

• Installation Guide - Set up the module in your project
• Configuration - Configure the module
• Tools Guide - Create your first MCP tool