@xiaou66/vite-plugin-vue-mcp-next 1.0.0 → 1.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +54 -12
- package/dist/index.cjs +320 -38
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +22 -8
- package/dist/index.d.ts +22 -8
- package/dist/index.js +320 -38
- package/dist/index.js.map +1 -1
- package/package.json +2 -1
- package/skills/vite-mcp-next/SKILL.md +71 -0
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@xiaou66/vite-plugin-vue-mcp-next",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.2",
|
|
4
4
|
"description": "Runtime DevTools MCP plugin for Vite and Vue development.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"private": false,
|
|
@@ -32,6 +32,7 @@
|
|
|
32
32
|
},
|
|
33
33
|
"files": [
|
|
34
34
|
"dist",
|
|
35
|
+
"skills",
|
|
35
36
|
"README.md",
|
|
36
37
|
"LICENSE"
|
|
37
38
|
],
|
|
@@ -0,0 +1,71 @@
|
|
|
1
|
+
<!-- Generated by vite-plugin-vue-mcp-next. Safe to edit, but automatic updates only apply while this marker remains. -->
|
|
2
|
+
---
|
|
3
|
+
name: vite-mcp-next
|
|
4
|
+
description: Use when debugging Vite + Vue local pages with vite-plugin-vue-mcp-next MCP, including DOM, screenshots, console logs, network requests, Vue components, router, or Pinia state.
|
|
5
|
+
---
|
|
6
|
+
|
|
7
|
+
# vite-mcp-next
|
|
8
|
+
|
|
9
|
+
## Overview
|
|
10
|
+
|
|
11
|
+
vite-mcp-next exposes local Vite + Vue runtime state through MCP. Use it before guessing from source code when the task asks to inspect a running page, verify UI, debug browser errors, trace requests, or inspect Vue app state.
|
|
12
|
+
|
|
13
|
+
## When to Use
|
|
14
|
+
|
|
15
|
+
- User asks to inspect, open, verify, screenshot, or debug a local Vite/Vue page
|
|
16
|
+
- The answer depends on actual browser DOM, Console, Network, Vue component state, Router, or Pinia
|
|
17
|
+
- You need evidence from the running app before changing code
|
|
18
|
+
- You need to compare source expectations with runtime behavior
|
|
19
|
+
|
|
20
|
+
Do not use it for static code-only questions where reading files is enough.
|
|
21
|
+
|
|
22
|
+
## Quick Reference
|
|
23
|
+
|
|
24
|
+
| Need | Tool |
|
|
25
|
+
| --- | --- |
|
|
26
|
+
| Find available pages and targets | `list_pages` |
|
|
27
|
+
| Refresh the current page | `reload_page` |
|
|
28
|
+
| Inspect DOM structure | `get_dom_tree` |
|
|
29
|
+
| Find elements by selector | `query_dom` |
|
|
30
|
+
| Capture visual evidence | `take_screenshot` |
|
|
31
|
+
| Read browser logs | `get_console_logs` |
|
|
32
|
+
| Reset old browser logs | `clear_console_logs` |
|
|
33
|
+
| Inspect requests | `get_network_requests` |
|
|
34
|
+
| Inspect one request deeply | `get_network_request_detail` |
|
|
35
|
+
| Reset old request records | `clear_network_requests` |
|
|
36
|
+
| Inspect Vue component tree | `get_component_tree` |
|
|
37
|
+
| Inspect one component state | `get_component_state` |
|
|
38
|
+
| Edit runtime component state | `edit_component_state` |
|
|
39
|
+
| Highlight a component | `highlight_component` |
|
|
40
|
+
| Inspect Vue Router | `get_router_info` |
|
|
41
|
+
| Inspect Pinia stores | `get_pinia_tree`, `get_pinia_state` |
|
|
42
|
+
| Evaluate page expression | `evaluate_script` |
|
|
43
|
+
|
|
44
|
+
## Tool Order
|
|
45
|
+
|
|
46
|
+
1. Call `list_pages` first. Confirm the page, runtime connection, and any `cdp:*` target.
|
|
47
|
+
2. For layout or content questions, call `get_dom_tree` or `query_dom`.
|
|
48
|
+
3. For visual verification, call `take_screenshot` and report whether `source` is `cdp` or `snapdom`.
|
|
49
|
+
4. For browser errors, call `get_console_logs`.
|
|
50
|
+
5. For API behavior, call `get_network_requests`, then `get_network_request_detail` for the relevant id.
|
|
51
|
+
6. For Vue-specific behavior, call `get_component_tree`, `get_component_state`, `get_router_info`, `get_pinia_tree`, or `get_pinia_state`.
|
|
52
|
+
|
|
53
|
+
## Channel Boundaries
|
|
54
|
+
|
|
55
|
+
- DOM, Console, Network, and Screenshot should use CDP when available.
|
|
56
|
+
- Without CDP, DOM, Console, and Network fall back to Runtime Hook; screenshots fall back to snapdom.
|
|
57
|
+
- Vue component, Router, and Pinia tools always use Vue Runtime Bridge. Do not replace them with CDP DOM inspection when Vue semantic state is needed.
|
|
58
|
+
|
|
59
|
+
## Risk Boundaries
|
|
60
|
+
|
|
61
|
+
- `evaluate_script` is disabled unless the project sets `runtime.evaluate.enabled: true`.
|
|
62
|
+
- Prefer `evaluate_script` for read-only diagnosis. Do not mutate page state unless the user asked for it.
|
|
63
|
+
- `edit_component_state` mutates runtime Vue state. Use it only when state editing is the explicit goal.
|
|
64
|
+
- Network data can include token, cookie, or authorization values. Do not write sensitive values into source code, docs, commits, or final replies.
|
|
65
|
+
|
|
66
|
+
## Failure Handling
|
|
67
|
+
|
|
68
|
+
- If `list_pages` has no runtime page, ask the user to start or refresh the Vite page.
|
|
69
|
+
- If a CDP target is missing, use the runtime page tools instead of blocking.
|
|
70
|
+
- If screenshot fails, state whether the failure came from CDP or snapdom.
|
|
71
|
+
- If MCP is disconnected, ask the user to verify the Vite log URL ending in `/__mcp/sse` or `/__mcp/mcp`.
|