Building a Blog app with Nuxt Content and Agentic AI

You can go from zero to a fully styled Nuxt Content blog in under 30 minutes, but you have to know how to talk to your AI agent.

Not "autocomplete" or Copilot suggesting the next line while you type. Agentic AI is where you describe what you want, and the agent scaffolds your project, installs dependencies, writes components, and iterates based on your feedback. All in one conversation.

If you're a developer in 2026, this changes how you work. Here's how:

What Are MCPs?

The thing that makes agentic AI actually useful for real projects is MCP (Model Context Protocol).

Think of MCPs as plugins for your AI agent. They give the agent access to tools and data it wouldn't otherwise have: maybe your filesystem, a database, documentation, deployment services. Without MCPs, the agent is guessing about your project structure. With them, it knows.

Here's what an MCP configuration looks like in Claude Code:

{
  "mcpServers": {
    "filesystem": {
      "command": "npx",
      "args": [
        "-y",
        "@anthropic-ai/mcp-filesystem",
        "/path/to/your/project"
      ]
    }
  }
}

That's it. Now the agent can read your project files, understand your directory structure, and make informed decisions about where to put things and how to name them.

Setting Up: Nuxt + Claude Code

You'll need Node.js (best is to use the LTS version), and Claude Code installed (npm install -g @anthropic-ai/claude-code). That's the entire prerequisites list.

Open your terminal, navigate to where you want your project, and start a conversation:

claude "Create a Nuxt 4 app with Nuxt Content module for a blog project.
Use TypeScript, add Tailwind CSS for styling."

The agent doesn't just generate a file and hand it to you. It runs the commands: npx nuxi init, installs @nuxt/content and @nuxtjs/tailwindcss, configures nuxt.config.ts, creates the content directory, and sets up the initial file structure. You watch it happen in real-time.

Guiding the Agent to Building Components

Here's where the skill shift happens. You're not writing code, you're directing code. And the quality of your direction determines the quality of the output.

A vague prompt:

"Make a blog page"

A good prompt:

"Create a BlogList component in components/blog/BlogList.vue that uses
queryContent() to fetch all markdown posts from content/blog/. Display
them as cards showing the title, published date, and a 2-line excerpt.
Sort by date descending. Use Tailwind for styling."

The second prompt gives the agent everything it needs. It knows the file path, the data source, the display requirements, and the styling approach. The generated component:

<script setup lang="ts">
const { data: posts } = await useAsyncData('blog-posts', () =>
  queryContent('blog')
    .sort({ date: -1 })
    .find()
)
</script>

<template>
  <div class="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
    <NuxtLink
      v-for="post in posts"
      :key="post._path"
      :to="post._path"
      class="block rounded-lg border p-6 hover:shadow-lg transition-shadow"
    >
      <time class="text-sm text-gray-500">
        {{ new Date(post.date).toLocaleDateString() }}
      </time>
      <h2 class="mt-2 text-xl font-semibold">{{ post.title }}</h2>
      <p class="mt-2 text-gray-600 line-clamp-2">{{ post.description }}</p>
    </NuxtLink>
  </div>
</template>

And now you can iterate to add tag filtering or show tag chips above the grid, clicking one filters the posts. The agent reads the existing component, understands its structure, and extends it. No context is lost here and there is no need to start over.

This is the core loop: prompt, review, refine. You bring the product vision. The agent handles the implementation.

The MCP Advantage: Context-Aware Development

Here's what separates agentic AI with MCPs from a chatbot that generates code snippets.

When you ask the agent to "add a dark mode toggle," it doesn't generate a generic toggle component. It uses MCP tools to read your nuxt.config.ts, checks that you're using Tailwind, reads your existing layout component, and generates a toggle that uses Tailwind's dark: variant with useColorMode() from @nuxtjs/color-mode which it also installs and configures.

Without MCP context, you get generic code you have to adapt. With it, you get code that fits your project.

The agent reads your conventions. If your existing components use defineProps with TypeScript interfaces, the new ones will too. If you use <script setup>, so will the generated code. The game changing factor is that MCPs give the agent eyes into your codebase.

Final touches with Deploying and Polishing

The last mile is where agentic AI really shines, because it's the part developers usually rush through.

"Add SEO meta tags to all blog pages using useHead(). Use the post
title for og:title, description for og:description."

"Add an RSS feed using the @nuxt/content hooks."

"Configure the app for Vercel deployment with proper nitro preset."

Each of these is a 30-second prompt that would otherwise be 15 minutes of documentation reading and boilerplate writing. Now the agent handles the wiring and you make the decisions.

What This Means for Developers

Agentic AI doesn't replace your expertise but it amplifies it. The better you understand Nuxt's (or any other framework’s) conventions, the better you can guide the agent. You still need to know that queryContent() exists, that useHead() handles meta tags, that Nitro presets control deployment targets.

The difference is that you no longer spend time on the mechanical translation of knowledge into code. You spend it on thinking about what to build, not how to type it.

MCPs are the bridge between "generic AI that writes JavaScript" and "an AI that understands your Nuxt project." Set them up. and investigate in writing good prompts.