Agentic & MCP Workflows

How to optimize Nuxt Auto CRUD for AI-assisted development using the Model Context Protocol.

This template is built to be "Agent-First." By utilizing the Model Context Protocol (MCP), AI agents can understand and interact with your application with minimal context ingestion.

The Agentic Toolkit

These MCP servers are highly useful and highly recommended for a smooth development experience. Adding them to your AI configuration allows the assistant to understand your project's unique structure in real-time.

To get started, simply copy and paste the mcp_config.json provided below into your local configuration file (e.g., ~/.gemini/antigravity/mcp_config.json for Antigravity users).

Sample mcp_config.json

{
  "mcpServers": {
    "nuxt": {
      "serverUrl": "https://nuxt.com/mcp"
    },
    "nuxt-ui": {
      "serverUrl": "https://ui.nuxt.com/mcp"
    },
    "nac-schema-inspector": {
      "command": "npx",
      "args": [
        "-y",
        "mcp-server-fetch-typescript"
      ],
      "env": {
        "ALLOWED_URLS": "[\"http://localhost:3000/api/_meta?format=md&token=YOUR_ENCODED_TOKEN\"]"
      }
    }
  }
}

1. nuxt (Framework Intelligence)

Provides deep, real-time knowledge of the Nuxt 4 ecosystem.

  • Role: Direct access to Nuxt documentation, modules, and architectural patterns.
  • Workflow: Agents use this to verify auto-imports, Nitro routes, and app/ directory conventions.
  • Benefit: Guarantees that your code is performant and follows modern Nuxt standards.

2. nuxt-ui (Design Logic)

Essential for maintaining the premium aesthetics of the template.

  • Role: Accesses Nuxt UI 4 component specifications and examples.
  • Workflow: Agents retrieve U- component metadata to build sophisticated, consistent interfaces.
  • Benefit: Eliminates the need for manual styling by leveraging the built-in design system.

3. nac-schema-inspector (Discovery)

Since nuxt-auto-crud is a headless engine driven by runtime reflection, traditional source code analysis isn't enough for AI. This server acts as the agent's "eyes" into the live system.

  • Role: Introspects the live /api/_meta manifest.
  • Workflow: Converts structured JSON metadata into readable Markdown.
  • Benefit: Ensures the agent uses correct pluralized endpoints, accurate field names, and respects permission constraints.

Standard Workflow

For maximum efficiency, AI agents follow this two-step loop:

  1. Reconnaissance: Invoke nac-schema-inspector to map the current data structures.
  2. Implementation: Leverage nuxt and nuxt-ui intelligence to write framework-native, UI-compliant code.

Configuration & Setup

To enable this workflow, add the following to your mcp_config.json. Don't forget to replace YOUR_ENCODED_TOKEN with your actual token from your .env file (see the encoding tip below).

💡 Critical Tip: Token Encoding

The NUXT_API_SECRET_TOKEN used in the ALLOWED_URLS often contains a plus sign (+). When configuring the MCP server, you must URI-encode the + character as %2B. Failure to do this will result in a signature mismatch during discovery.

Example:

  • Raw: ...token=AbC+123
  • Encoded: ...token=AbC%2B123