viewgate-mcp 1.0.51 → 1.0.53

package/dist/index.js

@@ -401,6 +401,45 @@ function createMcpServer(apiKey, personalKey) {
                 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';
+                        }
+                    }
+                    catch (e) {
+                        console.error('[MCP] Could not fetch project config for styleHandler:', e);
+                    }
+                    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)',
+                        'tailwind': 'Tailwind CSS (use Tailwind utility classes exclusively for all styling)',
+                        'css-modules': 'CSS Modules (import styles from a separate .module.css file; use styles.className pattern)',
+                        'css-in-js': 'CSS-in-JS / styled-components (define all styles as JS template literals using styled.div`...` pattern)',
+                        'bootstrap': 'Bootstrap 5 (use Bootstrap class names exclusively; no custom CSS unless necessary)',
+                        'mui': 'Material UI / MUI v5 (use @mui/material components and sx prop for styling; avoid raw CSS)',
+                    };
+                    const styleLabel = styleHandlerLabels[styleHandler] ?? styleHandler;
+                    // Per-handler theming guidance so the LLM generates theme-aware components
+                    const themingByHandler = {
+                        'css': `Use CSS custom properties for all colors. Read theme values like: const primary = theme?.primary || 'var(--vg-primary)'. Apply them inline or inject a <style> block using these variables. Never hardcode colors.`,
+                        'sass': `Use CSS custom properties as values. Resolve theme at runtime: const primary = theme?.primary || 'var(--vg-primary)'. Apply via inline style or injected <style>.`,
+                        'css-modules': `CSS Modules can use CSS vars. In JS: const primary = theme?.primary || 'var(--vg-primary)'. Pass primary as CSS var via style={{ '--component-primary': primary }} on the root element and reference it inside the .module.css.`,
+                        'tailwind': `Use Tailwind's arbitrary value syntax for theme colors: className={\`bg-[\${theme?.primary || 'var(--vg-primary)'}]\`}. For text and borders follow the same pattern. Never use fixed Tailwind color classes like text-blue-500.`,
+                        'css-in-js': `In styled-components template literals, read the theme prop: color: \${({ theme: t }) => t?.primary || 'var(--vg-primary)'}. Accept the full theme object via props and propagate it through styled-components ThemeProvider if needed.`,
+                        'bootstrap': `Override Bootstrap CSS vars on the root element: style={{ '--bs-primary': theme?.primary || 'var(--vg-primary)' }}. Use btn-primary, text-primary etc. classes which will inherit the overridden variable.`,
+                        '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");
@@ -433,12 +472,42 @@ function createMcpServer(apiKey, personalKey) {
                             htmlContent: item.htmlContent,
                             cssContent: item.cssContent,
                             sourceType: item.sourceType,
+                            stylingTechnology: {
+                                handler: styleHandler,
+                                instruction: `You MUST use ${styleLabel} for ALL styling. Do not mix or use any other styling approach. The component must be fully styled using this technology and be production-ready.`
+                            },
+                            themingTokens: {
+                                description: 'The component MUST accept an optional `theme` prop for color customization. This is the primary mechanism for users to apply their own brand colors via a JSON file in their project.',
+                                propInterface: {
+                                    primary: 'string — main brand/accent color (buttons, links, active states)',
+                                    primaryHover: 'string — hover state of primary, slightly darker',
+                                    primaryLight: 'string — light tint of primary for backgrounds (10% opacity)',
+                                    surface: 'string — card/panel background color',
+                                    surfaceAlt: 'string — alternative surface for inputs/hover states',
+                                    border: 'string — border and divider color',
+                                    text: 'string — primary text color',
+                                    textMuted: 'string — secondary/muted text color',
+                                    radius: 'string — base border radius (e.g. "8px", "12px")',
+                                },
+                                fallbackMechanism: 'When theme prop is not provided, fall back to CSS custom properties: var(--vg-primary), var(--vg-surface), etc. This allows the ViewGate dashboard preview (which injects CSS vars) and custom ThemeProviders to work without explicit props.',
+                                handlerSpecificInstruction: themingInstruction,
+                                criticalRules: [
+                                    'NEVER hardcode any color value (no #hex, no rgb(), no named colors like blue/red)',
+                                    'ALWAYS prefer theme prop values first, then var(--vg-*) CSS vars as fallback',
+                                    'The theme prop must be optional — component must work without it using CSS var fallbacks',
+                                    'Expose the theme prop explicitly in the component TypeScript/PropTypes interface',
+                                ]
+                            },
                             constraints: {
                                 mustBeFunctional: true,
                                 mustSupportRequiredProps: true,
                                 mustSupportCommonProps: true,
                                 avoidBreakingChanges: true,
-                                useProvidedHtmlAndCssIfAvailable: true
+                                useProvidedHtmlAndCssIfAvailable: true,
+                                mustBeGeneric: true,
+                                mustBeProductionReady: true,
+                                mustUseFramerMotionForAnimations: true,
+                                stylingHandlerIsStrict: true
                             }
                         };
                         results.push({
@@ -447,6 +516,7 @@ function createMcpServer(apiKey, personalKey) {
                             requiredProps,
                             commonProps,
                             db: item._id,
+                            styleHandler,
                             llmInstruction
                         });
                     }
@@ -456,7 +526,8 @@ function createMcpServer(apiKey, personalKey) {
                                 text: JSON.stringify({
                                     ok: true,
                                     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.",
+                                    styleHandler,
+                                    instruction: `IMPORTANTE: Este tool NO debe generar código ni escribir archivos. Solo entrega al LLM la especificación (componentType + props + stylingTechnology) para que el LLM implemente un componente GENÉRICO, reutilizable y listo para producción. OBLIGATORIO: usar ${styleLabel} para todos los estilos.`,
                                     results
                                 }, null, 2)
                             }]

package/package.json

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