Atlas / MCP servers / webfansplz / Vue Mcp

Vue McpSAFE

Name: Vue Mcp
Author: webfansplz

mcp/webfansplz/vue-mcp

MCP server by webfansplz · Audited 2026-09-29

⚑ Report / re-scan Source ↗

Vite plugin that enables a MCP server helping models to understand your Vue app better.

Verdict

SAFE

Grade

Trust score

89 /100

Exposed tools

7 6r · 1w · 0d

Transport

sse

License

MIT

Stars

580

Overview

From the repository's own README, as read at the audited commit. Badges and raw HTML are left out.

[![npm version][npm-version-src]][npm-version-href] [![npm downloads][npm-downloads-src]][npm-downloads-href] [![bundle][bundle-src]][bundle-href] [![License][license-src]][license-href]

Vite plugin that enables a MCP server for your Vue app to provide information about the component tree, state, routes, and pinia tree and state.

Installation 📦

pnpm install vite-plugin-vue-mcp -D

Usage 🔨

// vite.config.ts
import { VueMcp } from 'vite-plugin-vue-mcp'

export default defineConfig({
plugins: [VueMcp()],
})

Then the MCP server will be available at http://localhost:[port]/__mcp/sse.

If you are using Cursor, create a .cursor/mcp.json file in your project root, this plugin will automatically update it for you. For more details about the MCP, check the official Cursor documentation.

Options

export interface VueMcpOptions {
/**
* The host to listen on, default is `localhost`
*/
host?: string

/**
* Print the MCP server URL in the console
*
* @default true
*/
printUrl?: boolean

/**
* The MCP server info. Ingored when `mcpServer` is provided
*/
mcpServerInfo?: McpServerInfo

/**
* Custom MCP server, when this is provided, the built-in MCP tools will be ignored
*/
mcpServer?: (viteServer: ViteDevServer) => Awaitable

/**
* Setup the MCP server, this is called when the MCP server is created
* You may also return a new MCP server to replace the default one
*/
mcpServerSetup?: (server: McpServer, viteServer: ViteDevServer) => Awaitable

/**
* The path to the MCP server, default is `/__mcp`
*/
mcpPath?: string

/**
* Update the address of the MCP server in the cursor config file `.cursor/mcp.json`,
* if `.cursor` folder exists.
*
* @default true
*/
updateCursorMcpJson?: boolean | {
enabled: boolean
/**
* The name of the M

Read from source at commit 7dac07470ac2OBSERVED · 2026-09-29

Connect

Built from this server's own package name, version and transport as found in its source — not copied from anyone's documentation, so it cannot drift against a page we do not control.

claude-code

claude mcp add playground -- npx -y playground

claude-desktop

{
  "mcpServers": {
    "playground": {
      "command": "npx",
      "args": [
        "-y",
        "playground"
      ]
    }
  }
}

Exposed tools (7)

6 read · 1 write · 0 destructive.

Tool	Risk	Description
`edit-component-state`	write	Edit the Vue component state.
`get-component-state`	read	Get the Vue component state in JSON structure format.
`get-component-tree`	read	Get the Vue component tree in markdown tree syntax format.
`get-pinia-state`	read	Get the Pinia state in JSON structure format.
`get-pinia-tree`	read	Get the Pinia tree in JSON structure format.
`get-router-info`	read	Get the Vue router info in JSON structure format.
`highlight-component`	read	Highlight the Vue component.

Trust audit

SAFEgrade B · trust 89/100 Nothing in the source contradicts what it says it does. Grade A is reserved for packages that have also passed the behavioural sandbox.

Layer	What it checks	Result
L0	Provenance & inventory	PASS
L1	Static analysis of the code	PASS
L2	Instruction surface (what it tells the agent)	PASS
L3	Class-specific surface	WARN
L4	Behavioural (sandbox)	SKIPPED

What the source does

Filesystem: none-observed
Network: none-observed
Shell: none-observed
Dependencies: pinned
Secrets in source: none-found

Findings (6)

MEDIUMAuth / authz · mcp.remote_no_auth · CWE-287, CWE-862

sse

Why it matters. a network transport with no auth environment variable found

Fix. require a token