viewgate-mcp 1.0.58 → 1.0.60

package/dist/index.js

@@ -238,9 +238,11 @@ function createMcpServer(apiKey, personalKey) {
                     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" },
+                            limit: { type: "number", description: "How many pending components to generate." },
+                            framework: { type: "string", description: "Target: react or react+vite (both output React components)." },
+                            styleHandler: { type: "string", description: "Override project styling tech (css, tailwind, sass, css-modules, css-in-js, bootstrap, mui)." }
                         },
+                        required: []
                     },
                 },
                 {
@@ -396,30 +398,35 @@ function createMcpServer(apiKey, personalKey) {
                         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) }] };
+                    const data = (await response.json());
+                    const styleHandler = data?.settings?.styleHandler || 'unknown';
+                    const language = data?.settings?.language || 'en';
+                    const contextHeader = `*** [PROJECT CONTEXT: styleHandler=${styleHandler}, language=${language}] ***\n\n`;
+                    return { content: [{ type: "text", text: contextHeader + JSON.stringify(data, null, 2) }] };
                 }
                 case "generate_ui_components": {
                     const args = argsAny;
                     const limit = Math.min(args.limit || 1, 10);
-                    // Fetch project styleHandler from config
-                    let styleHandler = 'css';
-                    try {
-                        const configRes = await fetch(`${BACKEND_URL}/api/mcp/config`, {
-                            headers: {
-                                'x-api-key': apiKey,
-                                'x-mcp-tool-name': 'generate_ui_components',
-                                ...(personalKey ? { 'x-personal-key': personalKey } : {})
-                            }
-                        });
-                        if (configRes.ok) {
-                            const configData = (await configRes.json());
-                            styleHandler = configData?.settings?.styleHandler || 'css';
+                    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,
+                            'x-mcp-tool-name': toolName,
+                            ...(personalKey ? { 'x-personal-key': personalKey } : {})
                         }
+                    });
+                    if (!response.ok) {
+                        const errorBody = await response.text();
+                        throw new Error(`Backend responded with ${response.status}: ${errorBody}`);
                     }
-                    catch (e) {
-                        console.error('[MCP] Could not fetch project config for styleHandler:', e);
-                    }
+                    const payload = (await response.json());
+                    const items = payload?.data || [];
+                    // Use project settings from the components response root
+                    const projectSettings = payload?.settings || {};
+                    let styleHandler = args.styleHandler || projectSettings.styleHandler || 'css';
+                    const isOverridden = !!args.styleHandler;
                     const styleHandlerLabels = {
                         'css': 'Plain CSS (vanilla, no framework dependencies)',
                         'sass': 'SASS/SCSS (use .scss syntax conventions in comments, output as CSS-in-string or inline styles for compatibility)',
@@ -441,22 +448,6 @@ function createMcpServer(apiKey, personalKey) {
                         'mui': `Use createTheme({ palette: { primary: { main: theme?.primary || 'var(--vg-primary)' } } }) inside the component and wrap with ThemeProvider. Accept the theme prop and recreate the MUI theme from it.`,
                     };
                     const themingInstruction = themingByHandler[styleHandler] ?? themingByHandler['css'];
-                    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,
-                            'x-mcp-tool-name': toolName,
-                            ...(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) }] };
                     }
@@ -529,7 +520,15 @@ function createMcpServer(apiKey, personalKey) {
                                     ok: true,
                                     generated: 0,
                                     styleHandler,
-                                    instruction: `IMPORTANTE: Esta tool te entrega las especificaciones. TÚ (EL LLM) DEBES: 1) Escribir el archivo físico del componente en el workspace local del proyecto (ej: src/components/[Name].jsx) usando tus tools de escritura/multi_replace. 2) Registrar la preview usando 'mark_ui_component_generated'. OBLIGATORIO: usar ${styleLabel} para los estilos. DEBES respetar estrictamente las themingTokens: NUNCA uses colores hardcodeados (#HEX o rgba), debes usar SIEMPRE la prop theme o su fallback var(--vg-*). No uses cssContent directamente si styleHandler indica otra tecnología.`,
+                                    isOverridden,
+                                    instruction: `IMPORTANTE: Esta tool te entrega las especificaciones para generar componentes de producción.
+                                TÚ (EL LLM) DEBES: 
+                                1) ESCRIBIR EL ARCHIVO FÍSICO en el workspace local (ej: 'src/components/[Name].jsx') usando 'write_to_file' o 'multi_replace'. 
+                                2) REGISTRAR LA PREVIEW usando 'mark_ui_component_generated'.
+
+                                REQUISITO TECNOLÓGICO OBLIGATORIO: Usar ${styleLabel} para TODOS los estilos.
+                                REQUISITO DE THEMING: DEBES respetar las themingTokens. NUNCA hardcodees colores (#hex, etc). Usa SIEMPRE la prop 'theme' o el fallback 'var(--vg-*)'.
+                                NOTA: Si styleHandler es '${styleHandler}', NO utilices otra tecnología distinta aunque los archivos originales (Figma HTML/CSS) digan lo contrario.`,
                                     results
                                 }, null, 2)
                             }]
@@ -558,8 +557,9 @@ function createMcpServer(apiKey, personalKey) {
                         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) }] };
+                    const data = (await response.json());
+                    const confirmation = `Component registered successfully. PREVIEW AVAILABLE in dashboard. The generated code has been validated against the project's mandated styling technology.`;
+                    return { content: [{ type: "text", text: JSON.stringify({ ...data, confirmation }, null, 2) }] };
                 }
                 case "get_annotations": {
                     const args = argsAny;

package/package.json

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