viewgate-wrapper 1.11.1 → 1.11.3
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 +131 -131
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,131 +1,131 @@
|
|
|
1
|
-
# 🛡️ ViewGate Wrapper
|
|
2
|
-
[Landing: view-gate-landing.vercel.app](https://view-gate-landing.vercel.app/) | [Dashboard: view-gate-dashboard.vercel.app](https://view-gate-dashboard.vercel.app/)
|
|
3
|
-
|
|
4
|
-
A professional, high-fidelity React feedback system and Vite/Next.js plugin. ViewGate allows clients to leave visual annotations directly on your live UI, which developers can then resolve instantly using AI-powered automation (MCP Server).
|
|
5
|
-
|
|
6
|
-
## 📦 Installation
|
|
7
|
-
|
|
8
|
-
```bash
|
|
9
|
-
npm install viewgate-wrapper
|
|
10
|
-
```
|
|
11
|
-
|
|
12
|
-
---
|
|
13
|
-
|
|
14
|
-
## 🚀 Framework Configuration
|
|
15
|
-
|
|
16
|
-
To enable **Smart Source Mapping** (allowing AI to pinpoint the exact file and line of code for a change), you must configure the plugin for your specific framework.
|
|
17
|
-
|
|
18
|
-
### ⚡ Vite
|
|
19
|
-
Add the plugin to your `vite.config.ts`:
|
|
20
|
-
|
|
21
|
-
```typescript
|
|
22
|
-
import { viewgatePlugin } from 'viewgate-wrapper';
|
|
23
|
-
|
|
24
|
-
export default defineConfig({
|
|
25
|
-
plugins: [
|
|
26
|
-
// ...
|
|
27
|
-
viewgatePlugin()
|
|
28
|
-
]
|
|
29
|
-
});
|
|
30
|
-
```
|
|
31
|
-
|
|
32
|
-
### 🌑 Next.js
|
|
33
|
-
Add the custom loader to your `next.config.js` (Webpack-based):
|
|
34
|
-
|
|
35
|
-
```javascript
|
|
36
|
-
module.exports = {
|
|
37
|
-
webpack: (config) => {
|
|
38
|
-
config.module.rules.push({
|
|
39
|
-
test: /\.(tsx|jsx)$/,
|
|
40
|
-
use: [{ loader: 'viewgate-wrapper/next-loader' }],
|
|
41
|
-
});
|
|
42
|
-
return config;
|
|
43
|
-
},
|
|
44
|
-
};
|
|
45
|
-
```
|
|
46
|
-
*Note: SWC support for Next.js 13+ is in development.*
|
|
47
|
-
|
|
48
|
-
---
|
|
49
|
-
|
|
50
|
-
## 🛠️ Usage
|
|
51
|
-
|
|
52
|
-
### 1. Wrap your Application
|
|
53
|
-
In your main entry point (e.g., `main.tsx` or `_app.tsx`), wrap your app with the `ViewGate` provider.
|
|
54
|
-
|
|
55
|
-
```tsx
|
|
56
|
-
import { ViewGate } from 'viewgate-wrapper';
|
|
57
|
-
import 'viewgate-wrapper/dist/viewgate-wrapper.css';
|
|
58
|
-
|
|
59
|
-
function Root() {
|
|
60
|
-
return (
|
|
61
|
-
<ViewGate
|
|
62
|
-
apiKey="VG-YOUR-PROJECT-KEY"
|
|
63
|
-
language="es"
|
|
64
|
-
>
|
|
65
|
-
<App />
|
|
66
|
-
</ViewGate>
|
|
67
|
-
);
|
|
68
|
-
}
|
|
69
|
-
```
|
|
70
|
-
|
|
71
|
-
### 2. Component Props (`<ViewGate />`)
|
|
72
|
-
|
|
73
|
-
| Prop | Type | Default | Description |
|
|
74
|
-
| :--- | :--- | :--- | :--- |
|
|
75
|
-
| **`apiKey`** | `string` | **Required** | Your project's unique API key from the ViewGate dashboard. |
|
|
76
|
-
| **`language`** | `'en' \| 'es'` | `'es'` | The UI language for the feedback overlay. |
|
|
77
|
-
|
|
78
|
-
---
|
|
79
|
-
|
|
80
|
-
## 🤖 AI Integration (MCP Server)
|
|
81
|
-
|
|
82
|
-
ViewGate includes a **Model Context Protocol (MCP)** server that allows AI assistants (like Claude Desktop, Cursor, or Antigravity) to read your UI feedback and apply requested code changes automatically.
|
|
83
|
-
|
|
84
|
-
### Easy Setup
|
|
85
|
-
Run the automatic configuration tool in your project root:
|
|
86
|
-
|
|
87
|
-
```bash
|
|
88
|
-
npx viewgate-wrapper setup
|
|
89
|
-
```
|
|
90
|
-
|
|
91
|
-
### Manual Configuration
|
|
92
|
-
Add this to your `claude_desktop_config.json` or Cursor MCP settings:
|
|
93
|
-
|
|
94
|
-
```json
|
|
95
|
-
{
|
|
96
|
-
"mcpServers": {
|
|
97
|
-
"viewgate": {
|
|
98
|
-
"command": "npx",
|
|
99
|
-
"args": ["-y", "viewgate-mcp@latest"],
|
|
100
|
-
"env": {
|
|
101
|
-
"VIEWGATE_API_KEY": "VG-YOUR-PROJECT-KEY"
|
|
102
|
-
}
|
|
103
|
-
}
|
|
104
|
-
}
|
|
105
|
-
}
|
|
106
|
-
```
|
|
107
|
-
|
|
108
|
-
### ⚡ Example Commands
|
|
109
|
-
Once configured, you can simply ask your AI assistant:
|
|
110
|
-
- *"Read ViewGate annotations and apply the changes"*
|
|
111
|
-
- *"Review UI feedback and resolve pending tasks"*
|
|
112
|
-
- *"Apply ViewGate changes"*
|
|
113
|
-
|
|
114
|
-
---
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
## 💡 Troubleshooting
|
|
118
|
-
|
|
119
|
-
### Layering Issues (Z-Index)
|
|
120
|
-
ViewGate's background elements (pins and selection highlights) are configured with a low `z-index` to avoid overlapping with your application's primary UI.
|
|
121
|
-
- **Pins**: `50`
|
|
122
|
-
- **Selection Highlights**: `100`
|
|
123
|
-
- **Modals**: `2,000,000`
|
|
124
|
-
|
|
125
|
-
If pins are appearing over your headers, ensure your app's headers have a `z-index` higher than `100`.
|
|
126
|
-
|
|
127
|
-
---
|
|
128
|
-
|
|
129
|
-
## License
|
|
130
|
-
|
|
131
|
-
ISC © [Mauro Aceituno](https://github.com/mauroaceituno)
|
|
1
|
+
# 🛡️ ViewGate Wrapper
|
|
2
|
+
[Landing: view-gate-landing.vercel.app](https://view-gate-landing.vercel.app/) | [Dashboard: view-gate-dashboard.vercel.app](https://view-gate-dashboard.vercel.app/)
|
|
3
|
+
|
|
4
|
+
A professional, high-fidelity React feedback system and Vite/Next.js plugin. ViewGate allows clients to leave visual annotations directly on your live UI, which developers can then resolve instantly using AI-powered automation (MCP Server).
|
|
5
|
+
|
|
6
|
+
## 📦 Installation
|
|
7
|
+
|
|
8
|
+
```bash
|
|
9
|
+
npm install viewgate-wrapper
|
|
10
|
+
```
|
|
11
|
+
|
|
12
|
+
---
|
|
13
|
+
|
|
14
|
+
## 🚀 Framework Configuration
|
|
15
|
+
|
|
16
|
+
To enable **Smart Source Mapping** (allowing AI to pinpoint the exact file and line of code for a change), you must configure the plugin for your specific framework.
|
|
17
|
+
|
|
18
|
+
### ⚡ Vite
|
|
19
|
+
Add the plugin to your `vite.config.ts`:
|
|
20
|
+
|
|
21
|
+
```typescript
|
|
22
|
+
import { viewgatePlugin } from 'viewgate-wrapper';
|
|
23
|
+
|
|
24
|
+
export default defineConfig({
|
|
25
|
+
plugins: [
|
|
26
|
+
// ...
|
|
27
|
+
viewgatePlugin()
|
|
28
|
+
]
|
|
29
|
+
});
|
|
30
|
+
```
|
|
31
|
+
|
|
32
|
+
### 🌑 Next.js
|
|
33
|
+
Add the custom loader to your `next.config.js` (Webpack-based):
|
|
34
|
+
|
|
35
|
+
```javascript
|
|
36
|
+
module.exports = {
|
|
37
|
+
webpack: (config) => {
|
|
38
|
+
config.module.rules.push({
|
|
39
|
+
test: /\.(tsx|jsx)$/,
|
|
40
|
+
use: [{ loader: 'viewgate-wrapper/next-loader' }],
|
|
41
|
+
});
|
|
42
|
+
return config;
|
|
43
|
+
},
|
|
44
|
+
};
|
|
45
|
+
```
|
|
46
|
+
*Note: SWC support for Next.js 13+ is in development.*
|
|
47
|
+
|
|
48
|
+
---
|
|
49
|
+
|
|
50
|
+
## 🛠️ Usage
|
|
51
|
+
|
|
52
|
+
### 1. Wrap your Application
|
|
53
|
+
In your main entry point (e.g., `main.tsx` or `_app.tsx`), wrap your app with the `ViewGate` provider.
|
|
54
|
+
|
|
55
|
+
```tsx
|
|
56
|
+
import { ViewGate } from 'viewgate-wrapper';
|
|
57
|
+
import 'viewgate-wrapper/dist/viewgate-wrapper.css';
|
|
58
|
+
|
|
59
|
+
function Root() {
|
|
60
|
+
return (
|
|
61
|
+
<ViewGate
|
|
62
|
+
apiKey="VG-YOUR-PROJECT-KEY"
|
|
63
|
+
language="es"
|
|
64
|
+
>
|
|
65
|
+
<App />
|
|
66
|
+
</ViewGate>
|
|
67
|
+
);
|
|
68
|
+
}
|
|
69
|
+
```
|
|
70
|
+
|
|
71
|
+
### 2. Component Props (`<ViewGate />`)
|
|
72
|
+
|
|
73
|
+
| Prop | Type | Default | Description |
|
|
74
|
+
| :--- | :--- | :--- | :--- |
|
|
75
|
+
| **`apiKey`** | `string` | **Required** | Your project's unique API key from the ViewGate dashboard. |
|
|
76
|
+
| **`language`** | `'en' \| 'es'` | `'es'` | The UI language for the feedback overlay. |
|
|
77
|
+
|
|
78
|
+
---
|
|
79
|
+
|
|
80
|
+
## 🤖 AI Integration (MCP Server)
|
|
81
|
+
|
|
82
|
+
ViewGate includes a **Model Context Protocol (MCP)** server that allows AI assistants (like Claude Desktop, Cursor, or Antigravity) to read your UI feedback and apply requested code changes automatically.
|
|
83
|
+
|
|
84
|
+
### Easy Setup
|
|
85
|
+
Run the automatic configuration tool in your project root:
|
|
86
|
+
|
|
87
|
+
```bash
|
|
88
|
+
npx viewgate-wrapper setup
|
|
89
|
+
```
|
|
90
|
+
|
|
91
|
+
### Manual Configuration
|
|
92
|
+
Add this to your `claude_desktop_config.json` or Cursor MCP settings:
|
|
93
|
+
|
|
94
|
+
```json
|
|
95
|
+
{
|
|
96
|
+
"mcpServers": {
|
|
97
|
+
"viewgate": {
|
|
98
|
+
"command": "npx",
|
|
99
|
+
"args": ["-y", "viewgate-mcp@latest"],
|
|
100
|
+
"env": {
|
|
101
|
+
"VIEWGATE_API_KEY": "VG-YOUR-PROJECT-KEY"
|
|
102
|
+
}
|
|
103
|
+
}
|
|
104
|
+
}
|
|
105
|
+
}
|
|
106
|
+
```
|
|
107
|
+
|
|
108
|
+
### ⚡ Example Commands
|
|
109
|
+
Once configured, you can simply ask your AI assistant:
|
|
110
|
+
- *"Read ViewGate annotations and apply the changes"*
|
|
111
|
+
- *"Review UI feedback and resolve pending tasks"*
|
|
112
|
+
- *"Apply ViewGate changes"*
|
|
113
|
+
|
|
114
|
+
---
|
|
115
|
+
|
|
116
|
+
|
|
117
|
+
## 💡 Troubleshooting
|
|
118
|
+
|
|
119
|
+
### Layering Issues (Z-Index)
|
|
120
|
+
ViewGate's background elements (pins and selection highlights) are configured with a low `z-index` to avoid overlapping with your application's primary UI.
|
|
121
|
+
- **Pins**: `50`
|
|
122
|
+
- **Selection Highlights**: `100`
|
|
123
|
+
- **Modals**: `2,000,000`
|
|
124
|
+
|
|
125
|
+
If pins are appearing over your headers, ensure your app's headers have a `z-index` higher than `100`.
|
|
126
|
+
|
|
127
|
+
---
|
|
128
|
+
|
|
129
|
+
## License
|
|
130
|
+
|
|
131
|
+
ISC © [Mauro Aceituno](https://github.com/mauroaceituno)
|