Guides9 min read

Best MCP Servers for Vue.js Developers in 2026: Complete Guide

The top MCP servers for Vue.js developers: codebase access, Pinia state management context, component testing, API integration, and deployment tools to supercharge your Vue AI workflow.

By MyMCPTools Team·

Vue.js is one of the world's most-loved frontend frameworks, renowned for its approachable progressive architecture, excellent developer experience, and the Composition API that debuted in Vue 3. AI assistants can accelerate Vue development dramatically — but only when they have real context about your component hierarchy, your Pinia stores, your composables, and your build configuration. Generic AI responses miss project-specific patterns and suggest outdated Options API patterns in Vue 3 codebases.

MCP servers give your AI assistant the live context it needs to generate Vue code that actually fits your project. This guide covers the essential servers for Vue 3 developers in 2026.

1. Filesystem MCP Server — Your Vue Codebase, AI-Accessible

The Filesystem server is the foundation of any serious Vue development workflow. It gives your AI assistant direct read access to your SFCs (Single File Components), composables, Pinia stores, and project configuration — enabling it to understand your actual component structure before generating code.

Vue-specific workflows:

  • Composable audits: "Read all composables in /src/composables and identify any that could be simplified with newer Vue 3.4 APIs" — reads your actual code
  • Pinia store analysis: "Look at my useUserStore and explain why the computed getter is running on every state change"
  • Component tree mapping: "Map the component hierarchy under DashboardLayout and identify deeply nested prop drilling"
  • Package.json inspection: "What version of Vue am I on? What's changed since then that I should adopt?"
  • Tailwind class audit: "Find all components using old color classes and migrate them to our custom design tokens"

Recommended setup: Point the server at your project root or /src directory.

{
  "mcpServers": {
    "filesystem": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-filesystem", "/path/to/your/vue-app/src"]
    }
  }
}

2. GitHub MCP Server — PR Reviews and Org Code Search

The GitHub MCP server is essential for collaborative Vue development. It lets your AI assistant read pull requests, review component diffs, search across your organization's codebase, and manage issues without switching context.

Vue developer workflows:

  • "Review this PR and flag any Vue 3 anti-patterns: v-for without keys, mutating props directly, reactive leaks in composables"
  • "Search our org for how we've implemented infinite scroll before — I need the same pattern"
  • "Create a GitHub issue: the ProductCard component causes a layout shift on mobile below 375px"
  • "What breaking changes are in the latest vue-router 4.x release?"
  • "Show me all open PRs touching the auth composables"

3. Brave Search MCP Server — Current Vue 3 Docs

Vue 3's ecosystem has matured significantly. The Composition API, the <script setup> syntax sugar, Pinia replacing Vuex, and Vue Router 4 all represent substantial changes from Vue 2 patterns. AI assistants trained on older data frequently suggest Options API patterns and Vuex store syntax in codebases that have fully migrated to Vue 3.

The Brave Search server gives your AI access to current Vue documentation, RFC discussions, and package changelogs.

Where current docs matter most:

  • Vue 3.4+ improvements — defineModel, v-bind shorthand, improved hydration errors
  • Pinia vs Vuex migration patterns
  • Vue Router 4 composition API integration
  • Nuxt 4 breaking changes and new directory structure
  • Third-party library changelogs — "What changed in VueUse 11 vs 10?"

4. Vite MCP Server — Build and Dev Server Configuration

Vite was built by Evan You (Vue's creator) and is the first-class build tool for Vue projects. The Vite MCP server gives your AI assistant full visibility into your build configuration for optimization and troubleshooting.

Vue + Vite workflows:

  • "Analyze my vite.config.ts and suggest optimizations for production bundle size"
  • "Configure the Vue plugin to enable the Composition API transform for all .vue files"
  • "Set up path aliases so I can import from @/components and @/composables"
  • "Configure code splitting so each route loads its dependencies lazily"
  • "Why is HMR not preserving Pinia state when I edit this component?"

5. Vitest MCP Server — Component Test Generation

Vue 3 testing with Vue Test Utils and Vitest is the standard workflow. The Vitest MCP server lets your AI read your existing test suite to understand patterns and generate consistent new tests that match your project conventions.

Vue testing workflows:

  • "Read the existing tests for UserCard and write similar tests for ProductCard"
  • "This test is failing because the Pinia store isn't initialized in the test environment — fix the setup"
  • "Generate tests for the useAuth composable covering loading, success, and error states"
  • "Identify which components in /src/components have no test coverage"
  • "Write a test that verifies this component emits the correct event on form submit"

6. Figma MCP Server — Design System to Vue Components

The Figma MCP server gives your AI direct access to Figma designs — component specs, design tokens, and spacing values. For Vue developers building from design systems, this enables accurate component generation instead of approximate eyeballed implementations.

Design-to-Vue workflows:

  • "Read the Button component in this Figma file and generate a Vue SFC with all size and variant props"
  • "Extract the design tokens and create a Tailwind theme config that matches the Figma design system"
  • "The designer shared this layout frame — build it as a responsive Vue component with Tailwind"

7. Vercel MCP Server — Nuxt and Vue App Deployment

Vue apps and Nuxt applications commonly deploy to Vercel. The Vercel MCP server provides deployment status, build logs, environment variable management, and preview URL access.

Deployment workflows:

  • "Check if the latest deployment succeeded — show the build log if it failed"
  • "List environment variables set for production"
  • "The preview deployment for this PR shows a hydration mismatch — what's different?"

8. Supabase MCP Server — Full-Stack Vue Data Access

Vue applications using Supabase as a backend benefit from the Supabase MCP server's ability to run queries against your actual schema, inspect your auth setup, and troubleshoot real-time subscriptions.

Full-stack Vue workflows:

  • "What does the products table schema look like? I need to build a listing with filters"
  • "Generate composable types for all my Supabase tables"
  • "Why is the real-time subscription on the messages table not firing in this component?"

Vue Developer MCP Stack by Role

RoleEssential servers
Vue frontend engineerFilesystem + GitHub + Brave Search + Vite
Full-stack Vue/Nuxt devFilesystem + GitHub + Supabase + Vercel + Figma
Vue + design systemFilesystem + Figma + Tailwind CSS + GitHub
Vue testing specialistFilesystem + Vitest + GitHub + Brave Search
Nuxt developerFilesystem + Vite + Vercel + GitHub + Brave Search

Getting Started: Minimal Vue Dev Stack

Start with three servers that cover 80% of Vue development friction:

  1. Filesystem — points at your /src directory; enables all component-aware assistance
  2. GitHub — PR reviews, code search, issue creation without context switching
  3. Brave Search — current Vue 3 docs and Pinia/VueRouter changelogs, not stale training data

Add Figma when working from a design system. Add Supabase or PostgreSQL for full-stack data access. Add Vercel for Nuxt deployment debugging.

Browse all Vue-relevant MCP servers at MyMCPTools. See also Best MCP Servers for JavaScript Developers and Best MCP Servers for Developers.

Recommended Tools

Better Stack

Free Plan

Get alerted when your APIs, browser tests, payment pipelines, or MCP server dependencies go down. Used by 100K+ developers.

Start monitoring free →

1Password

14-day Free Trial

Store and inject API keys, payment credentials, tokens, and file access secrets into your MCP server configs. Trusted by 150K+ developers.

Try 1Password free →

🔧 MCP Servers Mentioned in This Article

📁

Filesystem MCP Server

sandboxed read, write, edit, move and search access to an explicit whitelist of local directories, and it is the reference implementation most other filesystem MCP servers are modelled on. Shipped by Anthropic in the official modelcontextprotocol/servers monorepo (89,000+ stars, actively maintained), it is a Node.js server published to npm as @modelcontextprotocol/server-filesystem. The part worth understanding before you install is the access-control model, because there are now two ways to grant directories and they do not compose. Method one is command-line arguments: `npx -y @modelcontextprotocol/server-filesystem /path/one /path/two`. Method two, and the one the maintainers recommend, is MCP Roots — a client that supports the roots protocol sends its roots at initialization, and those roots COMPLETELY REPLACE any directories passed on the command line, then get replaced again on every `notifications/roots/list_changed`. That means allowed directories can change at runtime without restarting the server, but it also means a roots-capable client silently overrides your CLI arguments. If the server starts with no arguments and the client either does not support roots or sends an empty list, initialization throws an error. The tool surface is broad: `read_text_file` (with mutually exclusive `head`/`tail` line windows), `read_media_file` returning base64 image/audio content blocks, `read_multiple_files` which keeps going when individual reads fail, `write_file`, `edit_file`, `create_directory`, `list_directory`, `list_directory_with_sizes`, `move_file`, `search_files`, `directory_tree`, `get_file_info` and `list_allowed_directories`. `edit_file` is the one to learn — it does line-based and multi-line pattern matching with indentation detection and preservation, returns a git-style diff with context, and supports `dryRun: true` so you can preview a change before applying it; the maintainers recommend always running a dry run first. Every operation is refused outside the allowed set, and `list_allowed_directories` is the fastest way to confirm what the server actually believes it can touch.

Local
💻

GitHub MCP Server

authenticated access to the whole GitHub platform — repositories, files, branches, issues, pull requests, Actions runs, security alerts, discussions and notifications — from Claude, Cursor, VS Code, Copilot CLI and any other MCP host. There is no npm package for this server, and that trips up most people who try to install it: `@github/mcp-server` is not published to the npm registry, so any `npx` line you find for it will fail. GitHub ships it three other ways. The easiest is the hosted remote server at https://api.githubcopilot.com/mcp/, which needs no install at all — point an HTTP-transport MCP client at that URL and log in with OAuth (VS Code 1.101+, Claude Desktop, Claude Code, Cursor and Windsurf all support this). The second is the official Docker image ghcr.io/github/github-mcp-server, which is what the copy-paste command on this page runs; on github.com it now performs a browser-based OAuth login on first use and keeps the token in memory only, which is why the published Docker configs map a fixed loopback callback port (-p 127.0.0.1:8085:8085 with GITHUB_OAUTH_CALLBACK_PORT=8085) so the container can receive the callback. Prefer a token? Set GITHUB_PERSONAL_ACCESS_TOKEN instead — it takes precedence over OAuth, and the minimum useful scopes are repo, read:org and read:packages. The third is the native Go binary from the repository's releases, which needs no fixed port for the OAuth flow. GitHub Enterprise Server has no hosted option: use the local server with --gh-host or GITHUB_HOST set to your instance (include the https:// scheme — it defaults to http://, which GHES rejects). Toolsets can be narrowed with GITHUB_TOOLSETS, and an insiders channel is available at /mcp/insiders or via the X-MCP-Insiders header.

Auth required📘
💻

Git

Tools to read, search, and manipulate Git repositories. Full Git operations support.

Local
🔍

Brave Search MCP Server

The Brave Search MCP Server is the official server from Brave that gives AI assistants privacy-first web search through the independent Brave Search API — no tracking, no profiling, and results drawn from Brave's own web index rather than Google or Bing. It exposes five distinct tools that map directly to the Brave Search API endpoints: brave_web_search for general queries with pagination, freshness filters, and safe-search controls; brave_local_search for businesses, restaurants, and points of interest with automatic location filtering; brave_news_search for recent articles and current events; brave_image_search for image discovery; and brave_video_search for finding videos across the web. Authentication uses a single BRAVE_API_KEY (free tier available at brave.com/search/api) or a mounted BRAVE_API_KEY_FILE for Docker-secret setups. Install in Claude Desktop, Cursor, Windsurf, or VS Code with one npx command and choose stdio or streamable-HTTP transport. Because Brave operates its own crawler and index, the Brave Search MCP server is a strong choice for developers who want an alternative to Google-dependent search tools, need reproducible non-personalized results, or care about data privacy in agent workflows — Claude can pull fresh web context, verify facts, and research topics without leaking queries to ad-tech pipelines.

Local
🌐

Fetch

Web content fetching and conversion for efficient LLM usage. Extract readable content from any URL.

Local
☁️

Vercel MCP Server

The Vercel MCP server is a powerful Model Context Protocol integration that allows AI assistants like Claude, Cursor, and Cline to interact directly with your Vercel infrastructure. It exposes essential platform capabilities as AI-callable tools, meaning you can manage projects, trigger deployments, inspect build logs, and configure custom domains via natural language prompts. For frontend developers and DevOps teams working within the Vercel ecosystem, this eliminates the need to constantly context-switch between an IDE, terminal, and the Vercel dashboard. You can simply ask your AI agent to "check the status of the latest production deployment", "fetch the build logs for the staging environment and identify the Next.js hydration error", or "list all environment variables for the current project". By bridging the gap between your codebase and your hosting platform, the Vercel MCP server turns your AI assistant into an embedded DevOps engineer capable of diagnosing build failures and managing serverless deployments in real time. Vercel ships this as an official hosted (remote) MCP server at https://mcp.vercel.com — there is no package to install locally. Connect an MCP client to that URL and authenticate through the browser-based OAuth flow, which scopes access to the Vercel teams and projects your account can already reach rather than a long-lived Personal Access Token. For example, add it to Claude Code with `claude mcp add --transport http vercel https://mcp.vercel.com`, then complete the OAuth consent screen; the repo vercel/vercel-mcp-overview is the official public overview of this server, with full docs at vercel.com/docs/mcp/vercel-mcp.

Auth required📘
💻

Figma MCP Server

There are three different Figma MCP servers and the install command on most listings belongs to the one Figma no longer leads with, so start with which you are choosing. **Figma's recommended server is now the hosted remote one at `https://mcp.figma.com/mcp`** — nothing to install, OAuth in the client, attached with `claude mcp add --transport http figma https://mcp.figma.com/mcp`. It is also the only one with the write and cross-file tools (`use_figma`, `generate_figma_design`, `generate_diagram`, `create_new_file`, `search_design_system`, asset upload and download). **The Dev Mode desktop server ships inside the Figma Desktop app** — enable it in Dev Mode (Shift+D) from the MCP server section of the inspect panel and the app opens a local endpoint at `http://127.0.0.1:3845/mcp`. Figma's docs now describe the desktop server as being for specific organisation and enterprise cases and recommend the remote one instead. Because it runs in the app, it reads whatever you have selected on the canvas: exact colors, typography, spacing, auto-layout constraints, component variants, and — the part a token-based reader cannot do — your Code Connect mappings, so it emits your component names rather than generic divs. It requires a Dev or Full seat on a paid plan and the desktop app must be open. The repository linked here is `figma/mcp-server-guide`, Figma's own setup guide; Figma does not publish the server's source. **The community alternative is Figma-Context-MCP by GLips** (15,500+ stars), installed as `npx figma-developer-mcp --figma-api-key=YOUR_FIGMA_ACCESS_TOKEN`. It authenticates with a Personal Access Token from Figma Settings → Personal Access Tokens and calls the REST API, so it needs no desktop app, works headlessly in CI, and can read any file your account can open — including from a free plan. It exposes the document JSON, node lookup by ID, component listing, text extraction, and rendered-image download. The practical split: pick the official server when design-to-code fidelity and Code Connect matter and you are already paying for Dev Mode; pick GLips when you need automation, a free plan, or a machine with no Figma app installed. Both let an assistant translate a frame into accurate React, Tailwind, or plain HTML/CSS instead of guessing from a screenshot.

Auth required📘
💻

Vite

Next-generation frontend build tool MCP. Inspect bundle contents, analyze dependencies, troubleshoot HMR issues, and optimize build configurations.

Local
💻

Vitest

Next-generation unit testing framework MCP. Run Vitest tests, inspect coverage reports, snapshot testing, and debug failures in Vite-powered projects.

Local
💻

Tailwind CSS MCP

Get Tailwind CSS class suggestions, documentation lookups, and component generation assistance. Accelerates front-end development with AI-powered Tailwind knowledge.

Local
🗄️

PostgreSQL MCP Server

The PostgreSQL MCP server was the Model Context Protocol reference server for Postgres, and it is retired: the source now sits in modelcontextprotocol/servers-archived — a repository GitHub reports as archived, described as "Reference MCP servers that are no longer maintained" — and the npm package @modelcontextprotocol/server-postgres carries a deprecation notice reading "Package no longer supported." It still installs and still runs, which is why most third-party setup articles have not caught up. What it provides is deliberately small: a single tool, query, which executes read-only SQL inside a READ ONLY transaction, plus per-table schema information exposed as MCP resources at postgres://<host>/<table>/schema, with column names and data types discovered from database metadata. There is no index advice, no health check, no separate schema-listing tool, and no write mode. Install is npx @modelcontextprotocol/server-postgres with a postgres:// connection string as the argument. For active work against Postgres, the maintained alternative is Postgres MCP Pro (crystaldba/postgres-mcp), which exposes nine tools including index tuning against hypothetical indexes and a database health check, and has an explicit restricted access mode; if your database is hosted on Supabase or Neon, their platform servers add branching and logs that a raw Postgres connection cannot see. Reach for this archived server only when you want the smallest possible surface — one process, one read-only query tool, nothing else.

Local📘
🗄️

Supabase MCP Server

Supabase MCP Server connects Cursor, Claude Code, Claude Desktop, Windsurf and other MCP clients to a Supabase project, and the first thing to know is that the personal access token setup most guides still describe is gone. Supabase now runs a hosted server at https://mcp.supabase.com/mcp using OAuth 2.1 with dynamic client registration — you add the URL, your client opens a browser, you pick the organization, and there is no PAT to mint or rotate. For Claude Code that is `claude mcp add --scope project --transport http supabase "https://mcp.supabase.com/mcp"` followed by `/mcp` in a plain terminal (not the IDE extension) to run the auth flow. Three URL query parameters do the real configuration work: `read_only=true` runs every statement as a read-only Postgres role, `project_ref=<id>` scopes the server to one project and drops the account-management tools entirely, and `features=` selects the tool groups. Those groups are database (list_tables, list_extensions, list_migrations, apply_migration, execute_sql), debugging (get_logs across API/Postgres/Edge Functions/Auth/Storage/Realtime, plus get_advisors for security and performance findings), development (get_project_url, get_publishable_keys, generate_typescript_types), Edge Functions (list, get, deploy), account management, docs search, experimental branching on paid plans, and storage — storage is the one group disabled by default. Running Supabase locally with the CLI exposes a reduced server at http://localhost:54321/mcp with no OAuth; self-hosted installs are similar. The npm package `@supabase/mcp-server-supabase` still exists for stdio clients and also exports `createToolSchemas()` so Vercel AI SDK users get typed tool inputs and outputs. Read Supabase's security best-practices page before pointing this at anything with production data — the mutating tools are real.

Auth required📘

📚 More from the Blog