Fourteenth in a series about migrating from legacy architectures to a modern Nuxt 4 stack.
Beyond Code Completion
Most discussions about AI in development stop at code completion. That is the least interesting use case. In a complex application, the real value comes from live debugging, architectural reasoning, and automated testing — tasks that depend on understanding the running system, not just the source code.
The core question is simple: how do you give an AI assistant enough context to be useful? The answer is structured interfaces between the application and the AI.
The Model Context Protocol (MCP)
MCP is a standard for connecting AI assistants to external tools and data sources. Instead of pasting code into a chat window, the AI connects to MCP servers that expose application internals programmatically.
The project integrates MCP at three levels:
┌────────────────────────────────────────────────────────────┐
│ AI Assistant (IDE) │
│ │
│ ┌──────────────┐ ┌──────────────┐ ┌──────────────┐ │
│ │ Application │ │ Browser │ │ Node.js │ │
│ │ MCP Server │ │ DevTools │ │ Debugger │ │
│ │ │ │ MCP Server │ │ MCP Server │ │
│ │ • Env config │ │ • Navigate │ │ • Breakpoints│ │
│ │ • Modules │ │ • Click │ │ • Variables │ │
│ │ • CMS space │ │ • Screenshot │ │ • Call stack │ │
│ │ • Auth state │ │ • Console │ │ • Step │ │
│ │ • GraphQL │ │ • Network │ │ │ │
│ │ endpoints │ │ • Perf trace │ │ │ │
│ └──────┬───────┘ └──────┬───────┘ └──────┬───────┘ │
│ │ │ │ │
└───────────┼─────────────────┼─────────────────┼────────────┘
▼ ▼ ▼
Nuxt Dev Server Chrome Browser Node.js ProcessLevel 1: Application MCP Server
A Nuxt module exposes the dev server’s context through an SSE endpoint. The AI assistant can query:
- Environment configuration: which API endpoints, which CMS space, which auth provider
- Active Nuxt modules: what features are loaded
- GraphQL schema introspection: what data is available
- Authentication state: who is logged in, what roles they have
This provides architectural context — the AI understands the system before writing or debugging code.
Level 2: Browser DevTools MCP
A Chrome DevTools MCP server lets the AI control the browser:
- Navigate to pages, click elements, fill forms
- Take screenshots and snapshots
- Inspect console logs and network requests
- Start and stop performance traces
- Execute JavaScript in the browser context
This provides runtime context — the AI sees what the user sees and interacts as a user would.
Level 3: Node.js Debugger MCP
A debugger MCP server lets the AI attach to the running Nuxt server:
- Set breakpoints in server handlers and composables
- Inspect variable values at breakpoints
- Step through code execution
- Examine the call stack
This provides execution context — tracing the flow of a request through server-side code.
The Debug Chatbot: 30+ Browser-Side Tools
The three MCP layers cover server-side logic and browser UI. What they do not fully cover is client-side application state — Pinia stores, Vue component trees, event bus messages, cookies, GraphQL results. Browser DevTools MCP can see the DOM, but not the Vue reactivity layer.
debug-chatbot fills that gap with 30+ tools that expose the Vue application’s internals:
| Tool Category | Examples | What It Exposes |
|---|---|---|
| State | get-pinia-stores, get-pinia-store | Live reactive store state |
| Components | get-vue-components, get-route-info | Component tree, current route |
| Browser | get-console-logs, get-cookies, get-local-storage | Browser environment |
| GraphQL | execute-graphql-query | Run queries against the live app |
| A/B Tests | get-ab-tests, set-ab-test | Read and modify A/B test state |
A developer can ask the AI assistant: “The checkout form shows the wrong price on the confirmation page. Debug this.”
The AI then:
- Uses Browser DevTools to navigate to the checkout form
- Fills the form with test data and submits it
- Uses
get-pinia-store('shopping-cart')to inspect the cart state - Uses
execute-graphql-queryto run the same pricing query the form uses - Compares the query result with the store state
- Identifies the discrepancy and suggests a fix
No manual debugging, no console.log, no breakpoint-and-step ritual.
The Shared Language Principle
AI assistants work best when they share a language with the codebase. This project establishes several.
GraphQL as the Universal API Language
Every data interaction — whether from a human developer, an AI assistant using execute-graphql-query, or a generated composable — uses the same GraphQL schema. The AI knows what data is available because it can introspect the schema.
CMS Content Types as Structured Data
Generated TypeScript types from the CMS schema give the AI a precise understanding of what a Page, Section, or Teaser contains. When asked to add an FAQ section, it knows the exact fields and types.
Module Patterns as Conventions
Every module follows the same structure: index.ts, runtime/composables/, runtime/server/, README.md. An AI that has seen one module can navigate all 35+. The consistency helps machines as much as humans.
Design Tokens as a Shared Vocabulary
The UIKit compose pattern maps to design component properties. Given a design spec, the AI can reason about props and variants because the naming matches between design and code.
AGENTS.md: Onboarding Document for AI
The project includes a top-level AGENTS.md — an onboarding document written for machine readers:
AGENTS.md contents:
┌─────────────────────────────────────────────────────┐
│ • Setup commands (yarn dev, yarn build, yarn test) │
│ • Module development conventions │
│ • Naming patterns (composables, components, routes) │
│ • Common pitfalls and their fixes │
│ • PR checklist items │
│ • Environment variable documentation │
│ • GraphQL endpoint locations │
│ • Testing strategies per module type │
└─────────────────────────────────────────────────────┘AI assistants read this file on first interaction with the codebase. It provides what a human would get from a team onboarding session, but in a format machines can consume instantly.
The Inversion of Control Pattern for MCP Tools
Modules register their own MCP tools without importing the chatbot. The chatbot fires a Nitro hook, and other modules subscribe:
debug-chatbot module:
nitroApp.hooks.callHook('mcp:setup', tools)
// tools is an array that modules can push to
shopping-cart module:
nitroApp.hooks.hook('mcp:setup', (tools) => {
tools.push({
name: 'get-cart-contents',
description: 'Returns current shopping cart items',
handler: () => getCartState()
})
})This is inversion of control at the plugin level — the chatbot does not know about the shopping cart, and the shopping cart does not import the chatbot. They connect through a hook.
Practical AI Debugging Scenarios
Scenario 1: End-to-End Funnel Testing
“Test the complete purchase funnel from the homepage to the confirmation page. Report any console errors or visual inconsistencies.”
The AI navigates the funnel, fills forms, clicks buttons, monitors console logs, takes screenshots at each step, and produces a report — with no human interaction.
Scenario 2: A/B Test Verification
“Verify that both variants of the pricing display A/B test render correctly.”
The AI switches between variants via set-ab-test, captures screenshots of both, compares the rendering, and reports the differences.
Scenario 3: Performance Investigation
“The /products page feels slow. Investigate.”
The AI starts a performance trace, navigates to the page, stops the trace, analyzes the results, checks network requests for slow GraphQL calls, inspects cache hit rates, and identifies the bottleneck.
Lessons Learned
AI assistants need structured access, not source code dumps
Pasting 1,000 lines of code into a chat window is less effective than five well-designed MCP tools that expose application state. Structured access lets the AI interact with the application rather than merely read about it.
The shared language investment pays compound returns
Every abstraction that makes the codebase consistent for humans — GraphQL schemas, module patterns, compose files, TypeScript types — also makes it legible to AI. Consistency pays dividends in both human and machine productivity.
AGENTS.md is the most underrated file in a repository
Explicitly telling AI assistants how the codebase works — naming conventions, common pitfalls, test strategies — eliminates the most common AI mistakes: plausible but wrong code that violates project conventions.
The debug chatbot is more useful than code generation
Code completion saves minutes per task. An AI debugger that inspects live state, runs queries, navigates the browser, and identifies bugs saves hours per issue. The ROI difference is substantial.
What’s Next
- Article 15: Load Testing Results — 15× Faster, 5× More Capacity — The measured proof that architecture decisions produce real outcomes.
- Article 16: The Full Picture — What the New Concept Delivers — Synthesis for decision-makers and architects.
- Article 17: The
@delegateDirective Deep Dive — Cross-Subgraph Field Resolution — A technical deep dive into the most powerful schema stitching feature.
Munir Husseini is a software architect specializing in full-stack TypeScript, .NET, and cloud-native architectures.
Leave a Reply