viewgate-mcp 1.0.59 → 1.0.61

package/dist/index.js

@@ -398,38 +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 = args.styleHandler || 'css';
-                    let isOverridden = !!args.styleHandler;
-                    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());
-                            const projectStyle = configData?.settings?.styleHandler;
-                            if (!isOverridden && projectStyle) {
-                                styleHandler = projectStyle;
-                            }
-                            console.error(`[MCP] Style handler identified: ${styleHandler} (Project: ${configData?.settings?.projectName || 'unknown'}, Overridden: ${isOverridden})`);
-                        }
-                        else {
-                            console.error(`[MCP] Could not fetch project config, status: ${configRes.status}. Defaulting to: ${styleHandler}`);
+                    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] Exception fetching project config:', e.message);
-                    }
+                    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)',
@@ -445,28 +442,12 @@ function createMcpServer(apiKey, personalKey) {
                         '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.`,
+                        'tailwind': `Use Tailwind's standard 'primary' color class which is dynamically injected by the preview engine. Example: className="bg-primary hover:bg-primary-hover text-primary-foreground". If manually overriding, use: style={{ backgroundColor: theme?.primary || 'var(--vg-primary)' }}. NEVER use fixed 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");
-                    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) }] };
                     }
@@ -488,25 +469,26 @@ function createMcpServer(apiKey, personalKey) {
                                 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.',
+                                description: 'CRITICAL: The component MUST accept an optional `theme` prop. This is non-negotiable for production-ready components.',
                                 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)',
+                                    primary: 'string — main brand/accent color (buttons, active states)',
+                                    primaryHover: 'string — hover state of primary',
+                                    primaryLight: 'string — light tint of primary for backgrounds',
+                                    primaryForeground: 'string — contrasting text color for primary backgrounds (white/black)',
                                     surface: 'string — card/panel background color',
-                                    surfaceAlt: 'string — alternative surface for inputs/hover states',
+                                    surfaceAlt: 'string — alternative surface for inputs',
                                     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")',
+                                    radius: 'string — base border radius (e.g. "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.',
+                                fallbackMechanism: 'When theme prop is not provided, you MUST fall back to CSS custom properties: var(--vg-primary), var(--vg-surface), etc. This ensures the component is self-theming via global dashboard injection.',
                                 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',
+                                    'NEVER hardcode hex, rgb, or named colors. Use theme props or var(--vg-*) fallbacks.',
+                                    'MUST use Tailwind standard "primary" class (e.g. bg-primary, text-primary-foreground) as these are dynamically injected in the dashboard.',
+                                    'The theme prop MUST be optional and typed in the component interface.',
+                                    'Micro-animations MUST be implemented with Framer Motion (use whileHover, whileTap, etc.)',
                                 ]
                             },
                             constraints: {
@@ -576,8 +558,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.59",
+  "version": "1.0.61",
   "main": "dist/index.js",
   "bin": {
     "viewgate-mcp": "./dist/index.js"