🛡️ ViewGate Wrapper

Landing: view-gate-landing.vercel.app | Dashboard: view-gate-dashboard.vercel.app

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).

📦 Installation

npm install viewgate-wrapper

🚀 Quick Setup (Automatic)

The easiest way to configure ViewGate for High-Precision Mapping and AI Automation is using our CLI tool:

npx viewgate-wrapper setup

This command automatically detects your framework (Next.js, Vite, Webpack, etc.) and injects the necessary plugins/loaders into your configuration files.

🛠️ Manual Configuration

If the automatic setup doesn't fit your needs, you can configure the build-time plugins manually to achieve Surgical Precision.

⚡ Vite (Vite, Remix, Astro)

Add the plugin to your vite.config.ts. Works with React, Remix, and Astro.

import { viewgatePlugin } from 'viewgate-wrapper/vite';

export default defineConfig({
  plugins: [
    react(),
    viewgatePlugin()
  ]
});

📦 Next.js

Add the loader to your next.config.js or next.config.mjs:

/** @type {import('next').NextConfig} */
const nextConfig = {
  webpack: (config) => {
    config.module.rules.push({
      test: /\.(js|jsx|ts|tsx)$/,
      exclude: /node_modules/,
      use: ['viewgate-wrapper/next-loader'],
    });
    return config;
  },
};

module.exports = nextConfig;

📦 Webpack (CRA Ejected, Craco, Custom)

Add the loader to your webpack.config.js:

module.exports = {
  module: {
    rules: [
      {
        test: /\.(tsx|jsx|ts|js)$/,
        exclude: /node_modules/,
        use: [{ loader: 'viewgate-wrapper/webpack-loader' }],
      },
    ],
  },
};

🍄 Babel (Universal Fallback)

Add the plugin to your .babelrc, babel.config.js, or the babel key in package.json:

{
  "plugins": ["viewgate-wrapper/babel"]
}

⚛️ Zero-Config React (Fiber Fallback)

If you can't use a build-time plugin (e.g., non-ejected Create React App), ViewGate automatically uses React Fiber Detection in development.

• Precision: High (inspects the live React tree).
• Setup: None. Works out of the box.
• Heuristics: Uses Semantic Fingerprinting as a safety net.

[!IMPORTANT] For the best experience with AI automation (Surgical Precision), we recommend using one of the build-time plugins mentioned above.

🛠️ Usage

1. Wrap your Application

In your main entry point (e.g., main.tsx or _app.tsx), wrap your app with the ViewGate provider.

import { ViewGate } from 'viewgate-wrapper';
import 'viewgate-wrapper/dist/viewgate-wrapper.css';

function Root() {
  return (
    <ViewGate 
      apiKey="VG-YOUR-PROJECT-KEY" 
      language="es"
    >
      <App />
    </ViewGate>
  );
}

2. Component Props (<ViewGate />)

| Prop | Type | Default | Description | | :--- | :--- | :--- | :--- | | apiKey | string | Required | Your project's unique API key from the ViewGate dashboard. | | language | 'en' \| 'es' | 'es' | The UI language for the feedback overlay. |

🤖 AI Integration (MCP Server)

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.

Configuration

The npx viewgate-wrapper setup command handles this for you. Manually, you can add this to your MCP settings:

{
  "mcpServers": {
    "viewgate": {
      "command": "npx",
      "args": ["-y", "viewgate-mcp@latest"],
      "env": {
        "VIEWGATE_API_KEY": "VG-YOUR-PROJECT-KEY",
        "VIEWGATE_PERSONAL_KEY": "YOUR-PERSONAL-KEY"
      }
    }
  }
}

⚡ Example Commands

Once configured, you can simply ask your AI assistant:

• "Read ViewGate annotations and apply the changes"
• "Resolve UI feedback in this project"

License

ISC © Mauro Aceituno