vue-harvest-mcp

MCP server for AI-assisted Vue component extraction and design system analysis
1,114
vue ai design-system mcp model-context-protocol component-extraction
Install
npm install vue-harvest-mcp
Latest Version:0.0.4
License:MIT
Last Updated:Mar 31, 2026
Links: GitHub  ·  npm
Maintainer: virgilvox

vue-harvest-mcp

MCP server for AI-assisted Vue component extraction and design system analysis.

This is the intelligence layer for vue-harvest. It picks up where the CLI leaves off, handling the components in the 30-70% confidence range that need reasoning to extract safely.

Setup

Claude Desktop

Add to ~/Library/Application Support/Claude/claude_desktop_config.json:

{
  "mcpServers": {
    "vue-harvest": {
      "command": "vue-harvest-mcp"
    }
  }
}

Claude Code

claude mcp add vue-harvest vue-harvest-mcp

Cursor / other MCP clients

npx vue-harvest-mcp

The server communicates over stdio using the Model Context Protocol.

Tools

The server exposes 12 tools:

Analysis

Tool Description
analyze-project Runs the full vue-harvest pipeline on a project. Required before using other tools. Takes a path argument.
list-components Lists components with optional filters: tier, minConfidence, maxConfidence.
inspect-component Returns the full analysis of a component including source code, interface, dependencies, and coupling issues.
coupling-report Generates a project-wide coupling report grouped by issue type. Good for spotting systemic patterns.

Extraction

Tool Description
extract-component Extracts a component into a standalone bundle. Set force: true to extract below threshold.
deep-analyze Structured coupling analysis with source code. Returns data the LLM can reason about to suggest fixes.
suggest-refactor Generates concrete refactoring suggestions with before/after code snippets.
generate-wrapper Creates a composable wrapper that abstracts store access away from a component.
adapt-and-extract Rewrites a component to remove all coupling, then extracts it. Best for the 30-70% confidence range.
batch-triage Triages all reviewable components at once with prioritized effort estimates.

Design system

Tool Description
analyze-design-system Extracts design tokens (colors, typography, spacing, shadows) from a project.
get-design-tokens Returns extracted tokens, optionally filtered by type (color, font-size, spacing, etc).

Resources

After running analyze-project, these resources become available:

  • harvest://registry : full component registry JSON
  • harvest://graph : dependency graph (nodes, edges, cycles)
  • harvest://summary : analysis summary
  • harvest://component/{name} : individual component analysis
  • harvest://design-system : extracted design tokens

Prompts

Prompt Description
analyze-new-project Guided first analysis of a Vue project
extraction-sprint Batch refactor and extract session
refactor-component Single component deep refactor
extract-design-system Design token extraction and analysis

Typical workflow

  1. Ask the LLM to analyze your project. It will run analyze-project.
  2. Ask what needs review. It will use list-components and batch-triage.
  3. For each reviewable component, the LLM can deep-analyze it, figure out the right approach, and either suggest-refactor, generate-wrapper, or adapt-and-extract.
  4. For design tokens, ask the LLM to run analyze-design-system and recommend a naming convention.

Example prompts you can use

"Analyze my Vue project at /path/to/project"

"Show me all components between 40% and 70% confidence"

"Deep analyze the UserProfileCard and suggest how to remove the store dependency"

"Do an extraction sprint, start with the easiest wins"

"Extract the design tokens and suggest a consistent naming scheme"

Requirements

  • Node.js 20+
  • An MCP-compatible client (Claude Desktop, Claude Code, Cursor, etc)

License

MIT

Related Packages

@vizejs/musea-mcp-server

MCP server for building Vue.js design systems - component analysis, documentatio...

78,243 908
ai design-system mcp model-context-protocol vue component-analysis musea
@mcpapps/vite-plugin-vue

Compile a Vue SFC into a self-contained ui:// HTML resource for an MCP App.

1,405 0
ai mcp model-context-protocol hono mcp-apps mcp-ui
@mcpapps/vue

Vue renderer for MCP Apps: useToolResult/useCallTool/useTheme hooks + renderer a...

1,274 0
ai mcp model-context-protocol hono mcp-apps mcp-ui
@primevue/mcp

Model Context Protocol (MCP) server for PrimeVue component library

76,898
ai mcp model-context-protocol vue components llm primevue
@regle/mcp-server

MCP Server for Regle

23,800 510
ai mcp model-context-protocol vue forms regle validation

Version History

Version Released License
0.0.4 MIT
0.0.3 MIT
0.0.2 MIT
0.0.1 MIT