viewgate-mcp 1.0.38 → 1.0.39

package/dist/index.js

@@ -23,6 +23,8 @@ 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") });
@@ -49,6 +51,28 @@ function createMcpServer(apiKey, personalKey) {
     server.setRequestHandler(ListToolsRequestSchema, async () => {
         return {
             tools: [
+                {
+                    name: "get_ui_components",
+                    description: "Fetch UI components created by UX/UI (progressive). Returns ONLY the pending components requested and their required props.",
+                    inputSchema: {
+                        type: "object",
+                        properties: {
+                            limit: { type: "number", description: "Max results.", default: 1 },
+                            status: { type: "string", description: "Component status filter (pending,generated).", default: "pending" },
+                        },
+                    },
+                },
+                {
+                    name: "generate_ui_components",
+                    description: "Generate real UI components into /components (no overwrite). Also generates and uploads a preview, then marks the component as generated.",
+                    inputSchema: {
+                        type: "object",
+                        properties: {
+                            limit: { type: "number", description: "How many pending components to generate.", default: 1 },
+                            framework: { type: "string", description: "Target: react or react+vite (both output React components).", default: "react" },
+                        },
+                    },
+                },
                 {
                     name: "get_annotations",
                     description: "Fetch feedback. Keys ('VG-XXXX') or IDs. Workflow: 1. Fetch, 2. Fix, 3. Mark Ready.",
@@ -165,11 +189,213 @@ 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 writeComponentFile = async (componentType, model) => {
+        const cwd = process.cwd();
+        const componentsDir = path.join(cwd, 'components');
+        await fsp.mkdir(componentsDir, { recursive: true });
+        const baseName = toPascalCase(componentType) || 'Component';
+        const hasTs = fs.existsSync(path.join(cwd, '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>`;
+    };
     server.setRequestHandler(CallToolRequestSchema, async (request) => {
         const toolName = request.params.name;
         console.error(`[MCP] Handling tool call: ${toolName}`);
         try {
             switch (toolName) {
+                case "get_ui_components": {
+                    const args = request.params.arguments;
+                    const limit = args.limit || 1;
+                    const status = args.status || 'pending';
+                    const fetchUrl = new URL(`${BACKEND_URL}/api/mcp/components`);
+                    fetchUrl.searchParams.append("limit", limit.toString());
+                    fetchUrl.searchParams.append("status", status);
+                    const response = await fetch(fetchUrl, {
+                        headers: {
+                            'x-api-key': apiKey,
+                            ...(personalKey ? { 'x-personal-key': personalKey } : {})
+                        }
+                    });
+                    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 "generate_ui_components": {
+                    const args = request.params.arguments;
+                    const limit = Math.min(args.limit || 1, 10);
+                    const fetchUrl = new URL(`${BACKEND_URL}/api/mcp/components`);
+                    fetchUrl.searchParams.append("limit", limit.toString());
+                    fetchUrl.searchParams.append("status", "pending");
+                    const response = await fetch(fetchUrl, {
+                        headers: {
+                            'x-api-key': apiKey,
+                            ...(personalKey ? { 'x-personal-key': personalKey } : {})
+                        }
+                    });
+                    if (!response.ok) {
+                        const errorBody = await response.text();
+                        throw new Error(`Backend responded with ${response.status}: ${errorBody}`);
+                    }
+                    const payload = (await response.json());
+                    const items = payload?.data || [];
+                    if (!Array.isArray(items) || items.length === 0) {
+                        return { content: [{ type: "text", text: JSON.stringify({ ok: true, generated: 0, message: "No pending UI components." }, null, 2) }] };
+                    }
+                    const results = [];
+                    for (const item of items) {
+                        const componentType = item.componentType;
+                        const requiredProps = (item.requiredProps || []);
+                        const commonProps = (item.commonProps || []);
+                        const model = buildPropModel(commonProps, requiredProps);
+                        const fileInfo = await writeComponentFile(componentType, model);
+                        // 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 })
+                        });
+                        if (!markResp.ok) {
+                            const errorBody = await markResp.text();
+                            throw new Error(`Mark generated failed (${markResp.status}): ${errorBody}`);
+                        }
+                        const marked = (await markResp.json());
+                        results.push({
+                            componentType,
+                            figmaUrl: item.figmaUrl,
+                            requiredProps,
+                            written: fileInfo,
+                            previewImage: previewUrl,
+                            db: marked?.data?._id || item._id
+                        });
+                    }
+                    return { content: [{ type: "text", text: JSON.stringify({ ok: true, generated: results.length, results }, 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.38",
+  "version": "1.0.39",
   "main": "dist/index.js",
   "bin": {
     "viewgate-mcp": "./dist/index.js"