Unleash the power of Nuxt with AI

Nuxt has quietly become one of the most AI-friendly frameworks around. Official MCP servers stream the framework documentation straight into your coding assistant, a Nuxt UI skill teaches agents how to build interfaces the right way, and a dedicated module can even turn your own site into an llms.txt that other AIs can read. In this guide, I'll walk through each of these pieces and show you how to combine them into an AI setup that genuinely understands the Nuxt ecosystem.

Plug in the Nuxt MCP servers

Let's start by bringing Nuxt's knowledge into your AI assistant. MCP (Model Context Protocol) is a standardized protocol that lets AI assistants access external data sources and tools. Between Nuxt core and its ecosystem, there are several remote MCP servers over HTTP worth wiring up straight away:

Because these servers speak plain HTTP, wiring them up is mostly a matter of dropping the right URL into your tool's configuration. Here's how to register all three across the most common assistants:

claude mcp add --transport http nuxt https://nuxt.com/mcp
claude mcp add --transport http nuxt-ui https://ui.nuxt.com/mcp
claude mcp add --transport http nuxt-seo https://nuxtseo.com/mcp

{
  "mcpServers": {
    "nuxt": {
      "type": "http",
      "url": "https://nuxt.com/mcp"
    },
    "nuxt-ui": {
      "type": "http",
      "url": "https://ui.nuxt.com/mcp"
    },
    "nuxt-seo": {
      "type": "http",
      "url": "https://nuxtseo.com/mcp"
    }
  }
}

{
  "mcpServers": {
    "nuxt": {
      "url": "https://nuxt.com/mcp"
    },
    "nuxt-ui": {
      "url": "https://ui.nuxt.com/mcp"
    },
    "nuxt-seo": {
      "url": "https://nuxtseo.com/mcp"
    }
  }
}

{
  "servers": {
    "nuxt": {
      "type": "http",
      "url": "https://nuxt.com/mcp"
    },
    "nuxt-ui": {
      "type": "http",
      "url": "https://ui.nuxt.com/mcp"
    },
    "nuxt-seo": {
      "type": "http",
      "url": "https://nuxtseo.com/mcp"
    }
  }
}

mcp_servers = [
    { name = "nuxt", transport = "http", url = "https://nuxt.com/mcp" },
    { name = "nuxt_ui", transport = "http", url = "https://ui.nuxt.com/mcp" },
    { name = "nuxt_seo", transport = "http", url = "https://nuxtseo.com/mcp" },
]

Once connected, your assistant gains a set of tools it can call on demand: listing and reading documentation pages, browsing blog posts and deployment guides, searching components and icons, fetching component props, pulling migration guides, and even auditing a live URL's meta tags, Schema.org, and sitemaps. Instead of hallucinating an outdated API, it queries the source of truth.

Install the Nuxt UI skill

MCP servers give your assistant live tool access, but Skills take a different approach: they load structured knowledge directly into the agent's context so it can reference best practices throughout the whole conversation. Nuxt UI ships an official usage skill that teaches AI agents how to build interfaces properly, covering installation across frameworks, theming with semantic colors, all 125+ components with their props, composables like useToast and useOverlay, form validation, and layout composition.

The easiest way to install it is with the skills CLI, which supports 35+ agents including Claude Code, Cursor, Kiro, Codex, Windsurf, and Cline:

npx skills add nuxt/ui

npx skills add nuxt/ui --agent kiro

npx skills add nuxt/ui --global

Prefer to wire it up manually? The skill files live in the Nuxt UI repository, so you can point Claude Code (claude skill add <url>), Cursor, Kiro, or any tool that supports custom context straight at them.

Configure your own AI Agent

The MCP servers and the Nuxt UI skill are building blocks. An Agent is where they come together: an assistant scoped to a purpose, shaped by instructions, and armed with exactly the tools it needs. The nice thing is that almost every modern AI coding tool exposes the same three extension points, they just live in slightly different places:

For editor and CLI agents, the most portable approach is to drop your instructions and guardrails into a plain Markdown rules file at the root of your project, then commit it so the whole team shares the same agent behavior:

# Nuxt Development Agent

You are an expert web development agent specialized in building modern web
applications with Nuxt and Nuxt UI. You write clean, performant, and
maintainable code, and you always steer toward the Nuxt ecosystem.

## Guardrails

Use Nuxt UI components exclusively for all UI elements. Never reach for raw
HTML form elements, third-party component libraries (Vuetify, PrimeVue,
Headless UI directly, etc.), or custom-built components when a Nuxt UI
equivalent exists.

Combine that rules file with the MCP servers and the Nuxt UI skill from the previous sections, and you have an agent that reasons over live Nuxt documentation, generates real Nuxt UI components, and respects your conventions, regardless of the assistant behind it.

With MCP feeding it live documentation, the skill keeping its output on the rails, and your instructions setting the guardrails, your agent is a genuine Nuxt specialist, whatever assistant sits behind it. There's one last trick worth knowing, and it flips the whole idea on its head.

Generate your llms.txt with the Nuxt LLMs module

So far, everything has been about pulling Nuxt knowledge into your tools. Let's flip it around and make your own Nuxt application understandable to LLMs. This is exactly what nuxt-llms is built for. It automatically generates and prerenders an /llms.txt route, a structured Markdown document that follows the llms.txt specification and gives AI tools a clean, curated entry point into your site.

Installation

Add the module to your project and register it in your nuxt.config.ts.

npm install nuxt-llms

pnpm add nuxt-llms

yarn add nuxt-llms

export default defineNuxtConfig({
  modules: ['nuxt-llms']
})

Configuration

The module is configured entirely from your nuxt.config.ts. At minimum you need a domain, but adding a title, a description, and a few sections makes the generated document far more useful. Here's a trimmed-down version of the configuration powering this very blog:

export default defineNuxtConfig({
  modules: ['nuxt-llms', '@nuxt/content'],
  llms: {
    domain: 'https://sebastien.tech',
    title: 'sebastien.tech',
    description: 'Sébastien Serre\'s technical blog covering DevOps, Security, AI, AWS, Sustainability, and Web Development.',
    sections: [
      {
        title: 'Posts',
        description: 'List of all guides, tutorials, reviews, and news published to this date.',
        contentCollection: 'p',
      },
    ],
  },
})

Pairing it with Nuxt Content

The real magic happens when you combine nuxt-llms with @nuxt/content (version ^3.2.0 and above). Content ships with built-in support for the LLMs module: it hooks into nuxt-llms and automatically injects every page collection into your llms.txt and llms-full.txt. You write your Markdown as usual, and your AI-ready documentation is generated for free.

If you need to go further, nuxt-llms exposes runtime hooks (llms:generate and llms:generate:full) that let you push extra sections or content from a Nitro server plugin, perfect for surfacing your API routes or dynamic data.

And that's the whole picture. Your assistant queries live Nuxt, Nuxt UI, and SEO documentation through MCP, the Nuxt UI skill keeps its output on the rails, your custom agent ties it all together, and your own site speaks fluent LLM through llms.txt. Nuxt gives you every ingredient, all that's left is deciding what you want to build.