viewgate-mcp 1.0.40 → 1.0.42

package/dist/index.js

@@ -366,6 +366,70 @@ function createMcpServer(apiKey, personalKey) {
         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}`);
@@ -394,6 +458,7 @@ 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");
@@ -417,8 +482,8 @@ function createMcpServer(apiKey, personalKey) {
                         const componentType = item.componentType;
                         const requiredProps = (item.requiredProps || []);
                         const commonProps = (item.commonProps || []);
-                        const model = buildPropModel(commonProps, requiredProps);
-                        const fileInfo = await writeComponentFile(componentType, model);
+                        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');
@@ -445,7 +510,7 @@ function createMcpServer(apiKey, personalKey) {
                                 'x-api-key': apiKey,
                                 ...(personalKey ? { 'x-personal-key': personalKey } : {})
                             },
-                            body: JSON.stringify({ previewImage: previewUrl })
+                            body: JSON.stringify({ previewImage: previewUrl, code: built.code, props: defaults })
                         });
                         if (!markResp.ok) {
                             const errorBody = await markResp.text();
@@ -456,12 +521,26 @@ function createMcpServer(apiKey, personalKey) {
                             componentType,
                             figmaUrl: item.figmaUrl,
                             requiredProps,
-                            written: fileInfo,
+                            target: {
+                                componentsDir: targetComponentsDir,
+                                suggestedFileName: `${toPascalCase(componentType) || 'Component'}.jsx`
+                            },
                             previewImage: previewUrl,
                             db: marked?.data?._id || item._id
                         });
                     }
-                    return { content: [{ type: "text", text: JSON.stringify({ ok: true, generated: results.length, results }, null, 2) }] };
+                    return {
+                        content: [{
+                                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,
+                                    results
+                                }, null, 2)
+                            }]
+                    };
                 }
                 case "get_annotations": {
                     const args = request.params.arguments;

package/package.json

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