Vue MCP server: code graph for AI agents
TL;DR. Which parent views render a specific Vue component, and what props or emits link them? trace-mcp indexes your existing Vue.js repository into a local static code graph. AI coding agents navigate Single File Component (SFC) render trees, <script setup> bindings, and composables through MCP without loading unrelated components into context.
What trace-mcp extracts in Vue
Vue Single File Components (SFCs) bundle template, script, and styling together. The vue plugin extracts:
- Single File Components (SFC): Full AST parsing for
.vuefiles, extracting template references, scripts, and component declarations. - Composition & Options API: Complete support for
<script setup>,defineProps,defineEmits,defineExpose, and Options API options (methods,computed,props). - Template Tag Resolution: Automatic bidirectional mapping between kebab-case
<custom-card>and PascalCaseCustomCard.vuecomponent files. - Component Render Trees: Parent-child edges connecting components to subcomponents instantiated in their templates.
- Composable Usage: Edges tracking imports and invocations of reusable composables (
use*) across views and components. - TypeScript Integration: Type-aware analysis linking exported interfaces and types to component props.
Installation & Quickstart
Install trace-mcp globally, run initialization, and connect your Vue repository:
npm i -g trace-mcp && trace init && trace add
Example question to your agent
“Which components render
UserProfile.vue, what props do they pass, and what events are emitted back to parent views?”
The agent queries trace-mcp tools to trace the component hierarchy and props interface without dumping entire Vue SFC files into context.
Without graph vs with trace-mcp
Measurements below reflect corpus-level benchmarks from our PR review context benchmark across 60 pull requests.
| Capability | Without graph | With trace-mcp |
|---|---|---|
| Median input tokens | ~13595 tokens | ~3291 tokens (-72.7%) |
| Component hierarchy | Must read every parent SFC | Direct parent-child render tree edges |
| Props & Emits validation | Read prop declarations | Typed symbol signatures from AST |
| Tag casing resolution | Misses kebab-case matches | Automatic kebab ↔ PascalCase resolution |
| Composable dependency | Greps for function names | Graph edges from composable to consumer |
| Tools exposed | None (reads full files) | 182 specialized MCP tools |
Frequently asked questions
Does trace-mcp support script setup and TypeScript in Vue SFCs?
Yes. trace-mcp uses full AST parsing for Vue Single File Components, extracting defineProps, defineEmits, composables, and TypeScript types directly from <script setup> blocks.
How does trace-mcp resolve PascalCase vs kebab-case component tags?
The Vue resolver handles component naming bidirectional resolution, mapping template tags like <user-avatar /> to UserAvatar.vue and building parent-child component render tree edges.
Can trace-mcp track shared composables across components?
Yes. trace-mcp traces composables (such as useAuth or useCart) from definition to usage, connecting state management and utility imports across components.
Next steps
Explore the full Tools reference for available query tools, see the Language capability matrix for Vue SFC parser details, view Comparisons against other tools, or browse all Supported frameworks.
Catalogue: Articles / frameworks
Last updated: October 20, 2026