---
title: "Introduction"
description: "Learn about the Model Context Protocol and how this module makes it easy to create MCP servers in Nuxt."
canonical_url: "https://mcp-toolkit.nuxt.dev/getting-started/introduction"
---
# Introduction

> Learn about the Model Context Protocol and how this module makes it easy to create MCP servers in Nuxt.

## What is Model Context Protocol?

The [Model Context Protocol (MCP)](https://modelcontextprotocol.io) 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

<card-group>
<card icon="i-lucide-zap" title="Zero Configuration">

Automatic discovery of definitions. Just create files in the right directories and they're automatically registered.

</card>

<card icon="i-lucide-type" title="TypeScript First">

Full TypeScript support with auto-imports and complete type safety. All helpers are available globally in your server files.

</card>

<card icon="i-lucide-code" title="Simple API">

Intuitive API that matches the MCP SDK structure, making it easy to migrate existing code or learn from examples.

</card>

<card icon="i-lucide-layers" title="Flexible Architecture">

Support for multiple MCP handlers in a single application, custom paths, and hooks for advanced use cases.

</card>
</card-group>

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

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

```typescript
import { z } from 'zod'
import { defineMcpTool } from '@nuxtjs/mcp-toolkit/server'

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

### Resources

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

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

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.

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

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

### Apps

MCP Apps are interactive UI widgets that hosts like Cursor and ChatGPT render inline. Author them as Vue Single-File Components in `app/mcp/` — the toolkit bundles them and serves them as MCP UI resources.

```vue [app/mcp/color-picker.vue]
<script setup lang="ts">
import { z } from 'zod'

defineMcpApp({
  description: 'Pick a colour and preview a palette.',
  inputSchema: { base: z.string().describe('Hex colour, e.g. #2563eb') },
  handler: async ({ base }) => ({ structuredContent: await $fetch('/api/palette', { query: { base } }) }),
})

const { data } = useMcpApp()
</script>

<template>
  <ul v-if="data" class="swatches">
    <li v-for="s in data.swatches" :key="s.hex" :style="{ background: s.hex }">{{ s.name }}</li>
  </ul>
</template>
```

## Next Steps

Ready to get started? Check out:

- [Installation Guide](https://mcp-toolkit.nuxt.dev/getting-started/installation) - Set up the module in your project
- [Configuration](https://mcp-toolkit.nuxt.dev/getting-started/configuration) - Configure the module
- [Tools Guide](https://mcp-toolkit.nuxt.dev/tools/overview) - Create your first MCP tool
- [Apps Guide](https://mcp-toolkit.nuxt.dev/apps/overview) - Build interactive UI widgets for AI hosts


## Sitemap

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