@mcpc-tech/unplugin-dev-inspector-mcp 0.0.17 → 0.0.18
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 +20 -6
- package/client/dist/inspector.iife.js +320 -320
- package/dist/index.cjs +68 -69
- package/dist/index.d.cts +7 -6
- package/dist/index.d.ts +7 -6
- package/dist/index.js +68 -69
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -20,9 +20,20 @@ tags:
|
|
|
20
20
|
|
|
21
21
|
**AI-powered visual debugging for React & Vue via MCP and ACP.**
|
|
22
22
|
|
|
23
|
+
DevInspector connects your web app directly to your AI agent. Click any element to instantly send its source code, style, and network context to the AI for analysis and fixing.
|
|
24
|
+
|
|
23
25
|
Works with any MCP-compatible AI client. Supports ACP agents: **Claude Code**, **Codex CLI**, **Gemini CLI**, **OpenCode**, and [more](https://agentclientprotocol.com/overview/agents).
|
|
24
26
|
|
|
25
|
-
|
|
27
|
+
## 📑 Table of Contents
|
|
28
|
+
|
|
29
|
+
- [Demo Video](#-demo-video)
|
|
30
|
+
- [Key Features](#-key-features)
|
|
31
|
+
- [Quick Start](#-quick-start)
|
|
32
|
+
- [Configuration](#-configuration)
|
|
33
|
+
- [How It Works](#-what-it-does)
|
|
34
|
+
- [Workflow Modes](#-two-workflow-modes)
|
|
35
|
+
- [MCP Tools](#-mcp-tools)
|
|
36
|
+
- [Architecture](#-architecture)
|
|
26
37
|
|
|
27
38
|
## 🎬 Demo Video
|
|
28
39
|
|
|
@@ -32,7 +43,7 @@ Click any element → AI diagnoses issues, inspects source, analyzes network, an
|
|
|
32
43
|
|
|
33
44
|
## 📢 Social Media
|
|
34
45
|
|
|
35
|
-
🐦 **
|
|
46
|
+
🐦 **Twittter/X Post:** [https://x.com/yaoandyan/status/1995082020431753600](https://x.com/yaoandyan/status/1995082020431753600?s=20)
|
|
36
47
|
|
|
37
48
|
## 👥 Team
|
|
38
49
|
|
|
@@ -62,11 +73,15 @@ Switch between agents (Claude Code, Goose) and track their debugging progress vi
|
|
|
62
73
|
|
|
63
74
|
## Quick Start
|
|
64
75
|
|
|
76
|
+
### Installation
|
|
77
|
+
|
|
65
78
|
```bash
|
|
66
79
|
# npm
|
|
67
80
|
npm i -D @mcpc-tech/unplugin-dev-inspector-mcp
|
|
81
|
+
|
|
68
82
|
# pnpm
|
|
69
83
|
pnpm add -D @mcpc-tech/unplugin-dev-inspector-mcp
|
|
84
|
+
|
|
70
85
|
# yarn
|
|
71
86
|
yarn add -D @mcpc-tech/unplugin-dev-inspector-mcp
|
|
72
87
|
```
|
|
@@ -84,8 +99,9 @@ Add DevInspector to your project:
|
|
|
84
99
|
plugins: [
|
|
85
100
|
+ DevInspector.vite({
|
|
86
101
|
+ enabled: true,
|
|
87
|
-
|
|
88
|
-
+
|
|
102
|
+
showInspectorBar: true, // Default: true. Set to false to hide the UI.
|
|
103
|
+
+ autoOpenBrowser: false, // Default: false. Automatically open browser when server starts.
|
|
104
|
+
}),
|
|
89
105
|
react(), // or vue()
|
|
90
106
|
],
|
|
91
107
|
};
|
|
@@ -140,7 +156,6 @@ module.exports = {
|
|
|
140
156
|
plugins: [
|
|
141
157
|
+ DevInspector.webpack({
|
|
142
158
|
+ enabled: true,
|
|
143
|
-
+ enableMcp: true,
|
|
144
159
|
+ }),
|
|
145
160
|
],
|
|
146
161
|
};
|
|
@@ -246,7 +261,6 @@ export default {
|
|
|
246
261
|
plugins: [
|
|
247
262
|
DevInspector.vite({
|
|
248
263
|
enabled: true,
|
|
249
|
-
enableMcp: true,
|
|
250
264
|
// Custom agents (will be merged with default properties)
|
|
251
265
|
agents: [
|
|
252
266
|
{
|