Skip to content

Commit 9209830

Browse files
yaonyanyaonyan
committed
feat: Add Angular example project and introduce Angular compiler transformation with config detection utilities.
1 parent 50877a9 commit 9209830

32 files changed

+13438
-142
lines changed

‎README.md‎

Lines changed: 61 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,13 @@
1-
---
2-
title: Inspect Web Mcp
3-
emoji: 😻
4-
colorFrom: purple
5-
colorTo: red
6-
sdk: gradio
7-
sdk_version: 5.49.1
8-
app_file: app.py
9-
pinned: false
10-
short_description: AI-powered web debugging with visual element inspection
11-
tags:
12-
- building-mcp-track-creative
13-
- mcp-in-action-track-creative
14-
---
1+
<p align="center">
2+
<img src="./assets/logo.svg" alt="DevInspector Logo" width="200" height="200" />
3+
</p>
154

165
# @mcpc-tech/unplugin-dev-inspector-mcp
176

187
[![npm version](https://img.shields.io/npm/v/@mcpc-tech/unplugin-dev-inspector-mcp.svg)](https://www.npmjs.com/package/@mcpc-tech/unplugin-dev-inspector-mcp)
198
[![npm downloads](https://img.shields.io/npm/dm/@mcpc-tech/unplugin-dev-inspector-mcp.svg)](https://www.npmjs.com/package/@mcpc-tech/unplugin-dev-inspector-mcp)
209

21-
**AI-powered visual debugging for React, Vue, Svelte, Preact & Next.js via MCP and ACP.**
10+
**AI-powered visual debugging for React, Vue, Svelte, SolidJS, Preact & Next.js via MCP and ACP.**
2211

2312
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.
2413

@@ -29,6 +18,7 @@ Works with any MCP-compatible AI client. Supports ACP agents: **Claude Code**, *
2918
- [Demo Video](#-demo-video)
3019
- [Key Features](#-key-features)
3120
- [Quick Start](#-quick-start)
21+
- [Framework Support](#framework-support)
3222
- [Configuration](#-configuration)
3323
- [How It Works](#-what-it-does)
3424
- [Workflow Modes](#-two-workflow-modes)
@@ -88,12 +78,49 @@ yarn add -D @mcpc-tech/unplugin-dev-inspector-mcp
8878

8979
Add DevInspector to your project:
9080

81+
### ⚡ Automated Setup (Recommended)
82+
83+
Run the setup command to automatically configure your `vite.config.ts`, `webpack.config.js`, or `next.config.js`:
84+
85+
```bash
86+
npx @mcpc-tech/unplugin-dev-inspector-mcp setup
87+
```
88+
89+
**Options:**
90+
- `--dry-run` - Preview changes without applying them
91+
- `--config <path>` - Specify config file path (auto-detect by default)
92+
- `--bundler <type>` - Specify bundler type: vite, webpack, nextjs
93+
- `--no-backup` - Skip creating backup files
94+
- `--help` - Show help message
95+
96+
**Examples:**
97+
```bash
98+
# Preview changes before applying
99+
npx @mcpc-tech/unplugin-dev-inspector-mcp setup --dry-run
100+
101+
# Setup specific config file
102+
npx @mcpc-tech/unplugin-dev-inspector-mcp setup --config vite.config.ts
103+
104+
# Setup for specific bundler
105+
npx @mcpc-tech/unplugin-dev-inspector-mcp setup --bundler vite
106+
```
107+
108+
This will:
109+
- Detect your bundler configuration
110+
- Add the necessary import
111+
- Add the plugin to your configuration
112+
- Create a backup of your config file
113+
114+
### Manual Configuration
115+
116+
If you prefer to configure it manually:
117+
91118
### Vite
92119

93120
```diff
94121
// vite.config.ts
95122
+import DevInspector from '@mcpc-tech/unplugin-dev-inspector-mcp';
96-
import react from '@vitejs/plugin-react'; // or vue(), svelte(), preact()
123+
import react from '@vitejs/plugin-react'; // or vue(), svelte(), solid(), preact()
97124

98125
export default {
99126
plugins: [
@@ -102,12 +129,12 @@ Add DevInspector to your project:
102129
showInspectorBar: true, // Default: true. Set to false to hide the UI.
103130
+ autoOpenBrowser: false, // Default: false. Automatically open browser when server starts.
104131
}),
105-
react(), // or vue(), svelte(), preact()
132+
react(), // or vue(), svelte(), solid(), preact()
106133
],
107134
};
108135
```
109136

110-
> ⚠️ **Plugin order matters:** Place `DevInspector.vite()` **before** `react()`, `vue()`, `svelte()`, or `preact()`. Otherwise source locations may show `unknown:0:0`.
137+
> ⚠️ **Plugin order matters:** Place `DevInspector.vite()` **before** `react()`, `vue()`, `svelte()`, `solid()`, or `preact()`. Otherwise source locations may show `unknown:0:0`.
111138
112139
#### For Non-HTML Projects (Miniapps, Library Bundles)
113140

@@ -201,6 +228,22 @@ export default function RootLayout({ children }) {
201228

202229
> 💡 **Note:** Webpack and Next.js use a standalone server on port 8888. Run `next dev --webpack` for Webpack mode (Next.js 16+ defaults to Turbopack).
203230
231+
## Framework Support
232+
233+
### ✅ Fully Supported
234+
235+
- **React** - `.jsx` and `.tsx` files (Vite, Webpack, Next.js)
236+
- **Vue** - `.vue` single-file components (Vite, Webpack)
237+
- **Svelte** - `.svelte` components (Vite, Webpack)
238+
- **SolidJS** - `.jsx` and `.tsx` files (Vite, Webpack)
239+
- **Preact** - `.jsx` and `.tsx` files (Vite, Webpack)
240+
- **Next.js** - React with Webpack mode
241+
242+
### 🚧 In Progress
243+
244+
- **Angular** - Support coming soon
245+
246+
204247

205248
## Configuration
206249

‎assets/logo.svg‎

Lines changed: 35 additions & 0 deletions
Loading

‎examples/angular/.cursor/mcp.json‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"mcpServers": {
3+
"dev-inspector": {
4+
"url": "http://localhost:5173/__mcp__/sse?clientId=cursor&puppetId=inspector"
5+
}
6+
}
7+
}

‎examples/angular/.editorconfig‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
# Editor configuration, see https://editorconfig.org
2+
root = true
3+
4+
[*]
5+
charset = utf-8
6+
indent_style = space
7+
indent_size = 2
8+
insert_final_newline = true
9+
trim_trailing_whitespace = true
10+
11+
[*.ts]
12+
quote_type = single
13+
ij_typescript_use_double_quotes = false
14+
15+
[*.md]
16+
max_line_length = off
17+
trim_trailing_whitespace = false

‎examples/angular/.gitignore‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
# See https://docs.github.com/get-started/getting-started-with-git/ignoring-files for more about ignoring files.
2+
3+
# Compiled output
4+
/dist
5+
/tmp
6+
/out-tsc
7+
/bazel-out
8+
9+
# Node
10+
/node_modules
11+
npm-debug.log
12+
yarn-error.log
13+
14+
# IDEs and editors
15+
.idea/
16+
.project
17+
.classpath
18+
.c9/
19+
*.launch
20+
.settings/
21+
*.sublime-workspace
22+
23+
# Visual Studio Code
24+
.vscode/*
25+
!.vscode/settings.json
26+
!.vscode/tasks.json
27+
!.vscode/launch.json
28+
!.vscode/extensions.json
29+
.history/*
30+
31+
# Miscellaneous
32+
/.angular/cache
33+
.sass-cache/
34+
/connect.lock
35+
/coverage
36+
/libpeerconnection.log
37+
testem.log
38+
/typings
39+
__screenshots__/
40+
41+
# System files
42+
.DS_Store
43+
Thumbs.db

‎examples/angular/.vscode/extensions.json‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=827846
3+
"recommendations": ["angular.ng-template"]
4+
}

‎examples/angular/.vscode/launch.json‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
{
2+
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
3+
"version": "0.2.0",
4+
"configurations": [
5+
{
6+
"name": "ng serve",
7+
"type": "chrome",
8+
"request": "launch",
9+
"preLaunchTask": "npm: start",
10+
"url": "http://localhost:4200/"
11+
},
12+
{
13+
"name": "ng test",
14+
"type": "chrome",
15+
"request": "launch",
16+
"preLaunchTask": "npm: test",
17+
"url": "http://localhost:9876/debug.html"
18+
}
19+
]
20+
}

‎examples/angular/.vscode/tasks.json‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
{
2+
// For more information, visit: https://go.microsoft.com/fwlink/?LinkId=733558
3+
"version": "2.0.0",
4+
"tasks": [
5+
{
6+
"type": "npm",
7+
"script": "start",
8+
"isBackground": true,
9+
"problemMatcher": {
10+
"owner": "typescript",
11+
"pattern": "$tsc",
12+
"background": {
13+
"activeOnStart": true,
14+
"beginsPattern": {
15+
"regexp": "(.*?)"
16+
},
17+
"endsPattern": {
18+
"regexp": "bundle generation complete"
19+
}
20+
}
21+
}
22+
},
23+
{
24+
"type": "npm",
25+
"script": "test",
26+
"isBackground": true,
27+
"problemMatcher": {
28+
"owner": "typescript",
29+
"pattern": "$tsc",
30+
"background": {
31+
"activeOnStart": true,
32+
"beginsPattern": {
33+
"regexp": "(.*?)"
34+
},
35+
"endsPattern": {
36+
"regexp": "bundle generation complete"
37+
}
38+
}
39+
}
40+
}
41+
]
42+
}

‎examples/angular/README.md‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
# Angular
2+
3+
This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 21.0.2.
4+
5+
## Development server
6+
7+
To start a local development server, run:
8+
9+
```bash
10+
ng serve
11+
```
12+
13+
Once the server is running, open your browser and navigate to `http://localhost:4200/`. The application will automatically reload whenever you modify any of the source files.
14+
15+
## Code scaffolding
16+
17+
Angular CLI includes powerful code scaffolding tools. To generate a new component, run:
18+
19+
```bash
20+
ng generate component component-name
21+
```
22+
23+
For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run:
24+
25+
```bash
26+
ng generate --help
27+
```
28+
29+
## Building
30+
31+
To build the project run:
32+
33+
```bash
34+
ng build
35+
```
36+
37+
This will compile your project and store the build artifacts in the `dist/` directory. By default, the production build optimizes your application for performance and speed.
38+
39+
## Running unit tests
40+
41+
To execute unit tests with the [Vitest](https://vitest.dev/) test runner, use the following command:
42+
43+
```bash
44+
ng test
45+
```
46+
47+
## Running end-to-end tests
48+
49+
For end-to-end (e2e) testing, run:
50+
51+
```bash
52+
ng e2e
53+
```
54+
55+
Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.
56+
57+
## Additional Resources
58+
59+
For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.

‎examples/angular/index.html‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Angular</title>
6+
<base href="/">
7+
<meta name="viewport" content="width=device-width, initial-scale=1">
8+
<link rel="icon" type="image/x-icon" href="favicon.ico">
9+
</head>
10+
<body>
11+
<app-root></app-root>
12+
<script type="module" src="/src/main.ts"></script>
13+
</body>
14+
</html>

0 commit comments

Comments
 (0)