viewgate-mcp 1.0.42 → 1.0.43

package/dist/index.js

@@ -23,8 +23,6 @@ import dotenv from "dotenv";
 import path from "path";
 import os from "os";
 import { fileURLToPath } from "url";
-import fs from "fs";
-import fsp from "fs/promises";
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
 dotenv.config({ path: path.join(__dirname, "..", ".env") });
@@ -73,6 +71,19 @@ function createMcpServer(apiKey, personalKey) {
                         },
                     },
                 },
+                {
+                    name: "mark_ui_component_generated",
+                    description: "Mark a UI component as generated by submitting its code and props to the backend. This enables the dashboard iframe preview (/preview/:id).",
+                    inputSchema: {
+                        type: "object",
+                        properties: {
+                            id: { type: "string", description: "Internal UI component id." },
+                            code: { type: "string", description: "Generated component code used for iframe preview." },
+                            props: { type: "object", description: "Props object used for iframe preview." }
+                        },
+                        required: ["id", "code"]
+                    }
+                },
                 {
                     name: "get_annotations",
                     description: "Fetch feedback. Keys ('VG-XXXX') or IDs. Workflow: 1. Fetch, 2. Fix, 3. Mark Ready.",
@@ -189,247 +200,6 @@ function createMcpServer(apiKey, personalKey) {
             ],
         };
     });
-    const toPascalCase = (input) => {
-        return (input || '')
-            .replace(/[^a-zA-Z0-9 ]+/g, ' ')
-            .split(' ')
-            .map((w) => w.trim())
-            .filter(Boolean)
-            .map((w) => w.charAt(0).toUpperCase() + w.slice(1))
-            .join('');
-    };
-    const normalizePropTokens = (raw) => {
-        const line = (raw || '').trim();
-        if (!line)
-            return [];
-        // Split "onClick / onChange / onFocus / onBlur" style
-        const parts = line.split('/').map((s) => s.trim()).filter(Boolean);
-        return parts.flatMap((p) => {
-            // Take part before spaces or parentheses for "variant (primary...)" patterns
-            const base = p.split('(')[0].trim();
-            const token = base.split(' ')[0].trim();
-            return token ? [token] : [];
-        });
-    };
-    const buildPropModel = (commonProps, requiredProps) => {
-        const out = {
-            hasChildren: false,
-            hasAs: false,
-            hasDataIndex: false,
-            hasAriaIndex: false,
-            common: [],
-            required: [],
-        };
-        const add = (arr, target) => {
-            for (const raw of arr) {
-                for (const token of normalizePropTokens(raw)) {
-                    if (token === 'children')
-                        out.hasChildren = true;
-                    if (token === 'as')
-                        out.hasAs = true;
-                    if (token.startsWith('data-'))
-                        out.hasDataIndex = true;
-                    if (token.startsWith('aria-'))
-                        out.hasAriaIndex = true;
-                    if (token === 'ref')
-                        continue; // handled via forwardRef if needed later
-                    if (token === 'data-*' || token === 'aria-*')
-                        continue;
-                    // skip wildcard tokens, handled by index signatures
-                    if (token.endsWith('*'))
-                        continue;
-                    target.push(token);
-                }
-            }
-        };
-        add(commonProps || [], out.common);
-        add(requiredProps || [], out.required);
-        const uniq = (xs) => [...new Set(xs)].filter(Boolean);
-        out.common = uniq(out.common);
-        out.required = uniq(out.required);
-        return out;
-    };
-    const readJsonIfExists = async (p) => {
-        try {
-            const txt = await fsp.readFile(p, 'utf8');
-            return JSON.parse(txt);
-        }
-        catch {
-            return null;
-        }
-    };
-    const looksLikeFrontendPackageJson = (pkg) => {
-        const deps = { ...(pkg?.dependencies || {}), ...(pkg?.devDependencies || {}) };
-        const hasReact = typeof deps.react === 'string';
-        const hasViteOrNext = typeof deps.vite === 'string' || typeof deps.next === 'string';
-        return hasReact && hasViteOrNext;
-    };
-    const listSubdirs = async (dir) => {
-        try {
-            const entries = await fsp.readdir(dir, { withFileTypes: true });
-            return entries.filter((e) => e.isDirectory()).map((e) => path.join(dir, e.name));
-        }
-        catch {
-            return [];
-        }
-    };
-    const findFrontendRoot = async () => {
-        // In many MCP clients, INIT_CWD points to the directory where `npx viewgate-mcp` was launched.
-        const baseDir = process.env.VIEWGATE_WORKSPACE || process.env.INIT_CWD || process.cwd();
-        // Scan baseDir and one level deep for candidate frontends.
-        const candidates = [baseDir, ...(await listSubdirs(baseDir))];
-        const hits = [];
-        for (const c of candidates) {
-            const pkg = await readJsonIfExists(path.join(c, 'package.json'));
-            if (pkg && looksLikeFrontendPackageJson(pkg))
-                hits.push(c);
-        }
-        if (hits.length === 0)
-            return null;
-        if (hits.length === 1)
-            return hits[0];
-        // Prefer common names when multiple projects exist.
-        const preferred = hits.find((h) => {
-            const name = path.basename(h).toLowerCase();
-            return name === 'dashboard' || name === 'view-gate-dashboard' || name.includes('dashboard');
-        });
-        return preferred || hits[0];
-    };
-    const resolveComponentsDir = async () => {
-        const frontendRoot = await findFrontendRoot();
-        const cwd = process.cwd();
-        // Order matters: prefer src/components for SPA projects like Vite.
-        const rootsToTry = [
-            ...(frontendRoot ? [frontendRoot] : []),
-            cwd,
-        ];
-        for (const root of rootsToTry) {
-            const c1 = path.join(root, 'src', 'components');
-            if (fs.existsSync(c1))
-                return c1;
-            const c2 = path.join(root, 'components');
-            if (fs.existsSync(c2))
-                return c2;
-        }
-        // Fallback: create in src/components under detected frontendRoot if present.
-        if (frontendRoot)
-            return path.join(frontendRoot, 'src', 'components');
-        return path.join(cwd, 'components');
-    };
-    const writeComponentFile = async (componentType, model) => {
-        const componentsDir = await resolveComponentsDir();
-        await fsp.mkdir(componentsDir, { recursive: true });
-        const baseName = toPascalCase(componentType) || 'Component';
-        const projectRoot = path.dirname(componentsDir);
-        const hasTs = fs.existsSync(path.join(projectRoot, 'tsconfig.json'));
-        const ext = hasTs ? 'tsx' : 'jsx';
-        const fileBase = `${baseName}.${ext}`;
-        let filePath = path.join(componentsDir, fileBase);
-        if (fs.existsSync(filePath)) {
-            // never overwrite existing
-            let i = 2;
-            while (fs.existsSync(path.join(componentsDir, `${baseName}.${i}.${ext}`)))
-                i++;
-            filePath = path.join(componentsDir, `${baseName}.${i}.${ext}`);
-        }
-        const isTs = ext === 'tsx';
-        const commonOptional = model.common.map((p) => `${p}${isTs ? '?: any' : ''}`);
-        const required = model.required.map((p) => `${p}${isTs ? ': any' : ''}`);
-        const ariaIndex = model.hasAriaIndex ? (isTs ? `\n  [key: \`aria-\${string}\`]: any;` : '') : '';
-        const dataIndex = model.hasDataIndex ? (isTs ? `\n  [key: \`data-\${string}\`]: any;` : '') : '';
-        const propsBlock = isTs
-            ? `export type ${baseName}Props = {\n${[
-                model.hasAs ? `  as?: React.ElementType;` : null,
-                model.hasChildren ? `  children?: React.ReactNode;` : null,
-                ...required.map((l) => `  ${l};`),
-                ...commonOptional.map((l) => `  ${l};`),
-            ].filter(Boolean).join('\n')}${ariaIndex}${dataIndex}\n};`
-            : '';
-        const destructure = [
-            model.hasAs ? 'as: Comp = "div"' : null,
-            model.hasChildren ? 'children' : null,
-            ...model.required,
-            ...model.common,
-            '...rest'
-        ].filter(Boolean).join(', ');
-        const jsxTag = model.hasAs ? '<Comp' : '<div';
-        const jsxClose = model.hasAs ? '</Comp>' : '</div>';
-        const content = isTs
-            ? `import React from 'react';\n\n${propsBlock}\n\nexport function ${baseName}({ ${destructure} }: ${baseName}Props) {\n  return (\n    ${jsxTag} {...rest}>\n      {children}\n    ${jsxClose}\n  );\n}\n`
-            : `import React from 'react';\n\nexport function ${baseName}(props) {\n  const { ${destructure} } = props || {};\n  return (\n    ${jsxTag} {...rest}>\n      {children}\n    ${jsxClose}\n  );\n}\n`;
-        await fsp.writeFile(filePath, content, 'utf8');
-        return { filePath, fileName: path.basename(filePath) };
-    };
-    const makePreviewSvg = (title, props) => {
-        const safeTitle = (title || '').replace(/[<>]/g, '');
-        const list = (props || []).slice(0, 14).map((p) => p.replace(/[<>]/g, '')).join(' • ');
-        const text = `${safeTitle}${list ? ' — ' + list : ''}`;
-        return `<?xml version="1.0" encoding="UTF-8"?>\n<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="420">\n  <defs>\n    <linearGradient id="g" x1="0" y1="0" x2="1" y2="1">\n      <stop offset="0" stop-color="#0f172a"/>\n      <stop offset="1" stop-color="#111827"/>\n    </linearGradient>\n  </defs>\n  <rect width="1200" height="420" rx="32" fill="url(#g)"/>\n  <rect x="40" y="40" width="1120" height="340" rx="28" fill="#0b1220" stroke="rgba(255,255,255,0.08)"/>\n  <text x="80" y="150" font-family="Inter,ui-sans-serif,system-ui" font-size="46" font-weight="800" fill="#e2e8f0">${safeTitle}</text>\n  <text x="80" y="220" font-family="ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace" font-size="22" font-weight="700" fill="#94a3b8">Preview (fast)</text>\n  <text x="80" y="280" font-family="Inter,ui-sans-serif,system-ui" font-size="18" font-weight="600" fill="#64748b">${text}</text>\n</svg>`;
-    };
-    const buildDefaultProps = (propNames) => {
-        const defaults = {};
-        for (const p of propNames || []) {
-            if (!p)
-                continue;
-            const name = String(p);
-            if (name === 'disabled' || name === 'loading' || name === 'fullWidth') {
-                defaults[name] = false;
-                continue;
-            }
-            if (name === 'variant') {
-                defaults[name] = 'primary';
-                continue;
-            }
-            if (name === 'size') {
-                defaults[name] = 'md';
-                continue;
-            }
-            if (name === 'type') {
-                defaults[name] = 'button';
-                continue;
-            }
-            if (name === 'href') {
-                defaults[name] = '#';
-                continue;
-            }
-            if (name.toLowerCase().startsWith('on')) {
-                defaults[name] = null;
-                continue;
-            }
-            if (name === 'iconLeft' || name === 'iconRight') {
-                defaults[name] = null;
-                continue;
-            }
-            // Fallback
-            defaults[name] = '';
-        }
-        return defaults;
-    };
-    const buildComponentCode = (componentType, requiredProps) => {
-        const safeName = toPascalCase(componentType) || 'Component';
-        const props = (requiredProps || []).filter(Boolean);
-        const destructure = props.length > 0 ? `{ ${props.join(', ')} }` : 'props';
-        // IMPORTANT: This code is executed inside a browser ESM module where React is already imported.
-        // Avoid JSX to keep it runnable without a build step.
-        const lines = [];
-        lines.push(`const ${safeName} = (${destructure}) => {`);
-        lines.push(`  return React.createElement(`);
-        lines.push(`    "div",`);
-        lines.push(`    { style: { fontFamily: 'ui-sans-serif, system-ui', padding: 12 } },`);
-        lines.push(`    React.createElement(`);
-        lines.push(`      "div",`);
-        lines.push(`      { style: { fontSize: 14, fontWeight: 700, marginBottom: 8 } },`);
-        lines.push(`      ${JSON.stringify(safeName)}
-    ),`);
-        lines.push(`    React.createElement(`);
-        lines.push(`      "pre",`);
-        lines.push(`      { style: { fontSize: 12, opacity: 0.8, whiteSpace: 'pre-wrap' } },`);
-        lines.push(`      JSON.stringify({ ${props.join(', ')} }, null, 2)
-    )`);
-        lines.push(`  );`);
-        lines.push(`};`);
-        return { exportName: safeName, code: lines.join('\n') };
-    };
     server.setRequestHandler(CallToolRequestSchema, async (request) => {
         const toolName = request.params.name;
         console.error(`[MCP] Handling tool call: ${toolName}`);
@@ -458,7 +228,6 @@ function createMcpServer(apiKey, personalKey) {
                 case "generate_ui_components": {
                     const args = request.params.arguments;
                     const limit = Math.min(args.limit || 1, 10);
-                    const targetComponentsDir = await resolveComponentsDir();
                     const fetchUrl = new URL(`${BACKEND_URL}/api/mcp/components`);
                     fetchUrl.searchParams.append("limit", limit.toString());
                     fetchUrl.searchParams.append("status", "pending");
@@ -482,51 +251,25 @@ function createMcpServer(apiKey, personalKey) {
                         const componentType = item.componentType;
                         const requiredProps = (item.requiredProps || []);
                         const commonProps = (item.commonProps || []);
-                        const defaults = buildDefaultProps(requiredProps);
-                        const built = buildComponentCode(componentType, requiredProps);
-                        // Fast preview generation (SVG placeholder) + upload
-                        const svg = makePreviewSvg(componentType, requiredProps);
-                        const svg64 = Buffer.from(svg, 'utf8').toString('base64');
-                        const imageDataUrl = `data:image/svg+xml;base64,${svg64}`;
-                        const uploadResp = await fetch(`${BACKEND_URL}/api/screenshots/upload`, {
-                            method: 'POST',
-                            headers: {
-                                'Content-Type': 'application/json',
-                                'x-api-key': apiKey,
-                                ...(personalKey ? { 'x-personal-key': personalKey } : {})
-                            },
-                            body: JSON.stringify({ image: imageDataUrl })
-                        });
-                        if (!uploadResp.ok) {
-                            const errorBody = await uploadResp.text();
-                            throw new Error(`Preview upload failed (${uploadResp.status}): ${errorBody}`);
-                        }
-                        const uploaded = (await uploadResp.json());
-                        const previewUrl = uploaded?.url || null;
-                        const markResp = await fetch(`${BACKEND_URL}/api/mcp/components/${item._id}/generated`, {
-                            method: 'PATCH',
-                            headers: {
-                                'Content-Type': 'application/json',
-                                'x-api-key': apiKey,
-                                ...(personalKey ? { 'x-personal-key': personalKey } : {})
-                            },
-                            body: JSON.stringify({ previewImage: previewUrl, code: built.code, props: defaults })
-                        });
-                        if (!markResp.ok) {
-                            const errorBody = await markResp.text();
-                            throw new Error(`Mark generated failed (${markResp.status}): ${errorBody}`);
-                        }
-                        const marked = (await markResp.json());
+                        const llmInstruction = {
+                            componentType,
+                            requiredProps,
+                            commonProps,
+                            figmaUrl: item.figmaUrl,
+                            constraints: {
+                                mustBeFunctional: true,
+                                mustSupportRequiredProps: true,
+                                mustSupportCommonProps: true,
+                                avoidBreakingChanges: true,
+                            }
+                        };
                         results.push({
                             componentType,
                             figmaUrl: item.figmaUrl,
                             requiredProps,
-                            target: {
-                                componentsDir: targetComponentsDir,
-                                suggestedFileName: `${toPascalCase(componentType) || 'Component'}.jsx`
-                            },
-                            previewImage: previewUrl,
-                            db: marked?.data?._id || item._id
+                            commonProps,
+                            db: item._id,
+                            llmInstruction
                         });
                     }
                     return {
@@ -534,14 +277,34 @@ function createMcpServer(apiKey, personalKey) {
                                 type: "text",
                                 text: JSON.stringify({
                                     ok: true,
-                                    generated: results.length,
-                                    instruction: `IMPORTANTE: Generar/guardar el componente React real dentro del proyecto frontend detectado. Ruta objetivo sugerida: ${targetComponentsDir}. No escribir en rutas globales del editor.`,
-                                    targetComponentsDir,
+                                    generated: 0,
+                                    instruction: "IMPORTANTE: Este tool NO debe generar código ni escribir archivos. Solo entrega al LLM la especificación (componentType + props) para que el LLM implemente un componente real y funcional en el repo.",
                                     results
                                 }, null, 2)
                             }]
                     };
                 }
+                case "mark_ui_component_generated": {
+                    const args = request.params.arguments;
+                    if (!args?.id || !args?.code) {
+                        throw new Error("id and code are required");
+                    }
+                    const response = await fetch(`${BACKEND_URL}/api/mcp/components/${args.id}/generated`, {
+                        method: 'PATCH',
+                        headers: {
+                            'Content-Type': 'application/json',
+                            'x-api-key': apiKey,
+                            ...(personalKey ? { 'x-personal-key': personalKey } : {})
+                        },
+                        body: JSON.stringify({ code: args.code, props: args.props })
+                    });
+                    if (!response.ok) {
+                        const errorBody = await response.text();
+                        throw new Error(`Backend responded with ${response.status}: ${errorBody}`);
+                    }
+                    const data = await response.json();
+                    return { content: [{ type: "text", text: JSON.stringify(data, null, 2) }] };
+                }
                 case "get_annotations": {
                     const args = request.params.arguments;
                     const limit = args.limit || 3;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "viewgate-mcp",
-  "version": "1.0.42",
+  "version": "1.0.43",
   "main": "dist/index.js",
   "bin": {
     "viewgate-mcp": "./dist/index.js"