---
canonical_url: "https://mcp-toolkit.nuxt.dev"
---
<landing-hero command="npx skills add https://mcp-toolkit.nuxt.dev" installCommand="npx nuxt add mcp" linkLabel="Get Started" linkTo="/getting-started/installation">
<template v-slot:title="">

Expose your application to any AI

</template>

<template v-slot:description="">

Add a Model Context Protocol (MCP) server to your Nuxt application. Connect your features to AI clients with a Nitro-like Developer Experience.

</template>
</landing-hero>

<landing-features>
<template v-slot:title="">

Make your App accessible to AI

</template>

<template v-slot:description="">

Use the Model Context Protocol to standardize how LLMs interact with your Nuxt application.

</template>

<template v-slot:features="">
<landing-feature-item description="Use familiar patterns like defineMcpTool and defineMcpResource. It feels just like writing API routes." icon="i-lucide-code-2" title="Nitro-like API" to="https://mcp-toolkit.nuxt.dev/tools/overview">



</landing-feature-item>

<landing-feature-item description="Automatic discovery of tools, resources and prompts. Just create files in the server/mcp directory." icon="i-lucide-sparkles" title="Zero Configuration" to="https://mcp-toolkit.nuxt.dev/getting-started/installation">



</landing-feature-item>

<landing-feature-item description="Define your tools with Zod schemas and full TypeScript inference. No more guessing argument types." icon="i-lucide-shield-check" title="Type-Safe Tools" to="https://mcp-toolkit.nuxt.dev/advanced/typescript">



</landing-feature-item>

<landing-feature-item description="Built on the official MCP SDK, ensuring compatibility with all MCP clients like Claude, Cursor, ChatGPT and more." icon="i-lucide-check-circle-2" title="Standard Compatible" to="https://mcp-toolkit.nuxt.dev/getting-started/connection">



</landing-feature-item>

<landing-feature-item description="Ship interactive UI widgets to AI hosts. Author Vue SFCs in app/mcp/ — bundled, sandboxed, and rendered inline by MCP Apps-compatible hosts." icon="i-lucide-app-window" title="MCP Apps" to="https://mcp-toolkit.nuxt.dev/apps/overview">



</landing-feature-item>

<landing-feature-item description="Let LLMs write JavaScript that orchestrates tools in a secure V8 sandbox. Cut token overhead by up to 82%." icon="i-lucide-terminal" title="Code Mode" to="https://mcp-toolkit.nuxt.dev/advanced/code-mode">



</landing-feature-item>

<landing-feature-item description="Intercept requests to add authentication, logging and rate limiting. Access event context from your tools." icon="i-lucide-shield" title="Middleware" to="https://mcp-toolkit.nuxt.dev/advanced/middleware">



</landing-feature-item>

<landing-feature-item description="Cache tool and resource responses with Nitro. Just add cache: '1h' to any definition." icon="i-lucide-zap" title="Built-in Cache" to="https://mcp-toolkit.nuxt.dev/tools/errors-caching">



</landing-feature-item>

<landing-feature-item description="Persist state across tool calls with useMcpSession(). Build multi-step workflows and track conversations." icon="i-lucide-save" title="Sessions" to="https://mcp-toolkit.nuxt.dev/advanced/sessions">



</landing-feature-item>

<landing-feature-item description="Show different tools per user with enabled guards. Control visibility based on authentication, roles or context." icon="i-lucide-toggle-right" title="Dynamic Definitions" to="https://mcp-toolkit.nuxt.dev/advanced/dynamic-definitions">



</landing-feature-item>

<landing-feature-item description="InstallButton component, SVG badges and deeplinks to let users add your MCP server to their IDE instantly." icon="i-lucide-download" title="1-Click Install" to="https://mcp-toolkit.nuxt.dev/getting-started/connection">



</landing-feature-item>

<landing-feature-item description="Create separate MCP endpoints with their own tools, resources and configuration. Organize by domain or version." icon="i-lucide-server" title="Multiple Handlers" to="https://mcp-toolkit.nuxt.dev/handlers/overview">



</landing-feature-item>

<landing-feature-item description="Verify LLMs call the right tools with the AI SDK and Evalite. Catch regressions before they reach production." icon="i-lucide-flask-conical" title="Evals" to="https://mcp-toolkit.nuxt.dev/advanced/evals">



</landing-feature-item>

<landing-feature-item description="Let AI assistants help you build, review and troubleshoot your MCP server with the Agent Skills specification." icon="i-lucide-wand-2" title="Agent Skills" to="https://mcp-toolkit.nuxt.dev/getting-started/agent-skills">



</landing-feature-item>

<landing-feature-item description="Organize tools, resources and prompts into groups with tags. Auto-inferred from subdirectories or set explicitly." icon="i-lucide-tags" title="Groups & Tags" to="https://mcp-toolkit.nuxt.dev/tools/groups-organization#groups-and-tags">



</landing-feature-item>

<landing-feature-item description="Debug your MCP server in real-time with the built-in inspector. View tools, resources, prompts, connections and logs." icon="i-lucide-bug" title="DevTools Integrated" to="https://mcp-toolkit.nuxt.dev/getting-started/inspector">



</landing-feature-item>

<landing-feature-cta icon="i-lucide-arrow-right" label="Get Started" to="https://mcp-toolkit.nuxt.dev/getting-started/installation">
<template v-slot:title="">

Start building now

</template>
</landing-feature-cta>
</template>
</landing-features>

<landing-code>
<template v-slot:title="">

Just Write Code

</template>

<template v-slot:description="">

Define tools, resources and prompts using standard TypeScript files. No complex configuration or boilerplate required.

</template>

<template v-slot:tools="">

```ts
// server/mcp/tools/weather.ts
import { z } from 'zod'

export default defineMcpTool({
  description: 'Get current weather for a location',
  inputSchema: {
    city: z.string().describe('City name'),
    unit: z.enum(['celsius', 'fahrenheit']).default('celsius')
  },
  annotations: { readOnlyHint: true },
  cache: '1h',
  handler: async ({ city, unit }) => {
    const data = await fetchWeather(city)
    return { temperature: data.temp, unit, city }
  }
})
```

</template>

<template v-slot:resources="">

```ts
// server/mcp/resources/readme.ts
export default defineMcpResource({
  file: 'README.md',
  description: 'The project documentation',
  annotations: {
    audience: ['user', 'assistant'],
    lastModified: new Date().toISOString(),
  }
})
```

</template>

<template v-slot:prompts="">

```ts
// server/mcp/prompts/summarize.ts
import { z } from 'zod'

export default defineMcpPrompt({
  description: 'Summarize a text',
  inputSchema: {
    text: z.string().describe('Text to summarize'),
    format: z.enum(['bullet-points', 'paragraph']).default('paragraph')
  },
  handler: async ({ text, format }) =>
    `Summarize this text as ${format}:\n\n${text}`
})
```

</template>
</landing-code>

<landing-dev-tools darkImage="/mcp-devtools-dark.png" imageAlt="Nuxt MCP DevTools" lightImage="/mcp-devtools-light.png">
<template v-slot:title="">

Built-in Inspector

</template>

<template v-slot:description="">

Debug your MCP server in real-time. View registered tools, resources, and prompts, and monitor client connections and request logs.

</template>
</landing-dev-tools>

<landing-cta :links="[{"label":"Get Started","to":"/getting-started/installation","icon":"i-lucide-arrow-right","trailing":true,"color":"neutral","size":"xl"},{"label":"Star on GitHub","to":"https://github.com/nuxt-modules/mcp-toolkit","icon":"i-lucide-github","trailing":true,"color":"neutral","variant":"ghost","size":"xl"}]">
<template v-slot:title="">

Ready to build your first MCP Server?

</template>

<template v-slot:description="">

Get started in minutes with our comprehensive guide and examples.

</template>
</landing-cta>

## Resources for Agents

- [API catalog: every service document this site publishes](https://mcp-toolkit.nuxt.dev/.well-known/api-catalog)
- [Sitemap (XML)](https://mcp-toolkit.nuxt.dev/sitemap.xml)
- [Sitemap (Markdown): every page on the site](https://mcp-toolkit.nuxt.dev/sitemap.md)
- [MCP server card: MCP endpoint at https://mcp-toolkit.nuxt.dev/mcp](https://mcp-toolkit.nuxt.dev/.well-known/mcp/server-card.json)
- [MCP endpoint (streamable HTTP)](https://mcp-toolkit.nuxt.dev/mcp)
- [llms.txt: index of the documentation for LLMs](https://mcp-toolkit.nuxt.dev/llms.txt)
- [llms-full.txt: the full documentation as a single file](https://mcp-toolkit.nuxt.dev/llms-full.txt)
- [Agent skills index: every skill published by this site](https://mcp-toolkit.nuxt.dev/.well-known/skills/index.json)
- [Agent skill: manage-mcp](https://mcp-toolkit.nuxt.dev/.well-known/skills/manage-mcp/SKILL.md)
- [OpenAPI document: every route this site serves to agents](https://mcp-toolkit.nuxt.dev/openapi.json)


## Sitemap

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