@gemini-designer/mcp-server 0.1.2 → 0.1.29

package/src/tools/snippet-ui.ts

@@ -3,7 +3,9 @@
  *
  * Generate standalone UI components (modals, tables, forms, etc.)
  * for injection into an existing architecture.
- * Can optionally write directly to a file if requested.
+ *
+ * Auto-detects project styling approach (Tailwind, CSS Modules, styled-components, etc.)
+ * and generates matching code structure.
  */
 
 import { McpServer } from '@modelcontextprotocol/sdk/server/mcp.js';
@@ -14,215 +16,364 @@ import { buildContext } from '../context/builder.js';
 import { buildRepoHints } from '../context/repo-hints.js';
 import { assertWritablePath } from '../context/guards.js';
 import { writeFile } from '../output/file-writer.js';
+import { formatCode } from '../output/formatter.js';
 import { DESIGN_PRINCIPLES_COMPACT } from '../design/principles.js';
+import {
+  detectStylingApproach,
+  getStylingInstructions,
+  StylingApproach,
+  StylingInfo,
+} from '../context/styling-detector.js';
+
+interface GeneratedFile {
+  path: string;
+  content: string;
+  type: 'component' | 'styles' | 'types';
+}
 
 const inputSchema = {
-    type: z
-        .enum(['modal', 'table', 'chart', 'form', 'card', 'nav', 'hero', 'footer', 'sidebar', 'custom'])
-        .describe('Type of UI component to generate'),
-    description: z
-        .string()
-        .describe(
-            'Detailed description of the component (e.g., "A data table with sorting, filtering, and pagination")'
-        ),
-    framework: z
-        .enum(['vanilla', 'react', 'vue', 'svelte', 'nextjs'])
-        .optional()
-        .describe('Target framework'),
-    context: z
-        .array(z.string())
-        .optional()
-        .describe('Paths to design tokens or existing components to match style'),
-    propsInterface: z
-        .string()
-        .optional()
-        .describe('TypeScript interface for component props (if applicable)'),
-    animated: z.boolean().default(false).describe('Include animations/transitions'),
-    targetPath: z.string().optional().describe('Where to write the output file (if writeToFile=true)'),
-    writeToFile: z.boolean().default(false).describe('If true, write the generated code to targetPath'),
+  type: z
+    .enum(['modal', 'table', 'chart', 'form', 'card', 'nav', 'hero', 'footer', 'sidebar', 'custom'])
+    .describe('Type of UI component to generate'),
+  description: z
+    .string()
+    .describe(
+      'Detailed description of the component (e.g., "A data table with sorting, filtering, and pagination")'
+    ),
+  framework: z
+    .enum(['vanilla', 'react', 'vue', 'svelte', 'nextjs'])
+    .optional()
+    .describe('Target framework'),
+  targetPath: z.string().describe('Target file path for component (e.g. src/components/Modal.tsx)'),
+  projectRoot: z.string().optional().describe('Project root for auto-detecting styling approach'),
+  stylingApproach: z
+    .enum([
+      'auto',
+      'tailwind',
+      'css-modules',
+      'styled-components',
+      'emotion',
+      'scss',
+      'vanilla-extract',
+      'panda-css',
+      'uno-css',
+      'stylex',
+      'vanilla-css',
+    ])
+    .default('auto')
+    .describe('Styling approach (auto-detects from project if "auto")'),
+  context: z
+    .array(z.string())
+    .optional()
+    .describe('Paths to design tokens or existing components to match style'),
+  propsInterface: z
+    .string()
+    .optional()
+    .describe('TypeScript interface for component props (if applicable)'),
+  animated: z.boolean().default(false).describe('Include animations/transitions'),
+  writeToFile: z.boolean().default(false).describe('Write generated files to disk'),
+  backup: z.boolean().default(true).describe('Create .bak backup if overwriting'),
+  format: z.boolean().default(true).describe('Format code with Prettier'),
 };
 
-function getSystemPrompt(type: string, framework: string): string {
-    return `You are a senior frontend engineer and designer creating DISTINCTIVE, memorable UI.
+function getSystemPrompt(type: string, framework: string, stylingInfo: StylingInfo): string {
+  const needsSeparateStyleFile = ![
+    'tailwind',
+    'panda-css',
+    'uno-css',
+    'styled-components',
+    'emotion',
+  ].includes(stylingInfo.approach);
+
+  return `You are a senior frontend engineer creating DISTINCTIVE, memorable UI components.
 
 Generate a standalone ${type} component in ${framework} that avoids generic AI aesthetics.
 
 ${DESIGN_PRINCIPLES_COMPACT}
 
+${getStylingInstructions(stylingInfo)}
+
+## Output Structure (CRITICAL)
+
+You MUST return a valid JSON object:
+{
+  "files": [
+    {
+      "path": "<componentPath>",
+      "content": "<component code>",
+      "type": "component"
+    }${
+      needsSeparateStyleFile
+        ? `,
+    {
+      "path": "<stylePath>",
+      "content": "<styles>",
+      "type": "styles"
+    }`
+        : ''
+    }
+  ]
+}
+
 Hard rules:
-- Output ONLY the code. No explanations. No markdown. No code fences.
-- Accessible by default (WCAG AA): semantic HTML, labels, aria-* where needed, keyboard support, focus-visible.
+- Output ONLY valid JSON. No markdown. No code fences. No explanations.
+- Accessible by default (WCAG AA): semantic HTML, labels, aria-*, keyboard support, focus-visible.
 - Responsive by default (mobile-first).
-- Do not add new dependencies unless explicitly requested.
 - Avoid placeholder TODOs. Provide complete, production-ready implementation.
-- Use distinctive typography (avoid Inter, Roboto, Arial).
-- Create visual depth with backgrounds (gradients, textures, shadows).
-- Include purposeful animations for polish.
+- Use the detected styling approach correctly.
 
 Type-specific requirements:
 ${getComponentGuidelines(type)}`;
 }
 
 function getComponentGuidelines(type: string): string {
-    const guidelines: Record<string, string> = {
-        modal: [
-            '- Trap focus inside the modal',
-            '- Close on Escape',
-            '- Close on backdrop click',
-            '- Ensure aria-modal, role=dialog, accessible title/description wiring',
-        ].join('\n'),
-        table: [
-            '- Optional sortable columns (no external deps)',
-            '- Responsive: horizontal scroll or stacked layout on small screens',
-            '- Accessible headers and caption support',
-        ].join('\n'),
-        form: [
-            '- Accessible labels and error messages',
-            '- Validation states and disabled/loading submit state',
-            '- Keyboard submit behavior',
-        ].join('\n'),
-        card: ['- Flexible content slots', '- Hover/focus states', '- Optional media support'].join('\n'),
-        nav: [
-            '- Mobile hamburger pattern if needed',
-            '- Active state indication',
-            '- Keyboard navigation (tab, arrow keys if menus)',
-        ].join('\n'),
-        hero: ['- Responsive layout', '- CTA buttons', '- Ensure text contrast/legibility'].join('\n'),
-        footer: ['- Responsive multi-column layout', '- Social links', '- Legal/copyright'].join('\n'),
-        sidebar: ['- Collapsible (optional)', '- Active item highlighting', '- Nested items support'].join('\n'),
-        chart: [
-            '- Responsive sizing',
-            '- Provide an accessible table fallback for data',
-            '- Avoid heavy chart deps unless explicitly requested',
-        ].join('\n'),
-        custom: '- Follow best practices for the described component type',
-    };
-
-    return guidelines[type] || guidelines.custom;
+  const guidelines: Record<string, string> = {
+    modal: [
+      '- Trap focus inside the modal',
+      '- Close on Escape',
+      '- Close on backdrop click',
+      '- Ensure aria-modal, role=dialog, accessible title/description wiring',
+    ].join('\n'),
+    table: [
+      '- Optional sortable columns (no external deps)',
+      '- Responsive: horizontal scroll or stacked layout on small screens',
+      '- Accessible headers and caption support',
+    ].join('\n'),
+    form: [
+      '- Accessible labels and error messages',
+      '- Validation states and disabled/loading submit state',
+      '- Keyboard submit behavior',
+    ].join('\n'),
+    card: ['- Flexible content slots', '- Hover/focus states', '- Optional media support'].join(
+      '\n'
+    ),
+    nav: [
+      '- Mobile hamburger pattern if needed',
+      '- Active state indication',
+      '- Keyboard navigation (tab, arrow keys if menus)',
+    ].join('\n'),
+    hero: ['- Responsive layout', '- CTA buttons', '- Ensure text contrast/legibility'].join('\n'),
+    footer: ['- Responsive multi-column layout', '- Social links', '- Legal/copyright'].join('\n'),
+    sidebar: [
+      '- Collapsible (optional)',
+      '- Active item highlighting',
+      '- Nested items support',
+    ].join('\n'),
+    chart: [
+      '- Responsive sizing',
+      '- Provide an accessible table fallback for data',
+      '- Avoid heavy chart deps unless explicitly requested',
+    ].join('\n'),
+    custom: '- Follow best practices for the described component type',
+  };
+
+  return guidelines[type] || guidelines.custom;
 }
 
 /**
- * Extract code from markdown code blocks.
- * (We still instruct the model not to use fences; this is a safety net.)
+ * Extract JSON from model response
  */
-function extractCode(response: string): string {
-    const codeBlockMatch = response.match(/```(?:\w+)?\n([\s\S]*?)```/);
-    if (codeBlockMatch) {
-        return codeBlockMatch[1].trim();
-    }
-    return response.trim();
+function extractJson(response: string): string {
+  const jsonBlockMatch = response.match(/```(?:json)?\s*\n?([\s\S]*?)```/);
+  if (jsonBlockMatch) {
+    return jsonBlockMatch[1].trim();
+  }
+  const jsonMatch = response.match(/\{[\s\S]*"files"[\s\S]*\}/);
+  if (jsonMatch) {
+    return jsonMatch[0];
+  }
+  return response.trim();
+}
+
+/**
+ * Derive style file path from component path
+ */
+function deriveStylePath(componentPath: string, stylingInfo: StylingInfo): string {
+  const ext = stylingInfo.fileExtension;
+  if (!ext) return '';
+  return componentPath.replace(/\.(tsx?|jsx?|vue|svelte)$/, ext);
 }
 
 export function registerSnippetUI(server: McpServer, config: Config): void {
-    server.registerTool(
-        'snippet_ui',
-        {
-            title: 'Generate UI Snippet',
-            description:
-                'Generate standalone UI components (modals, tables, forms, etc.) ready to inject. Set writeToFile=true to write directly.',
-            inputSchema,
-        },
-        async (args) => {
-            const type = args.type as string;
-            const description = args.description as string;
-            const framework =
-                (args.framework as 'vanilla' | 'react' | 'vue' | 'svelte' | 'nextjs') ||
-                config.defaultFramework;
-            const contextPaths = args.context as string[] | undefined;
-            const propsInterface = args.propsInterface as string | undefined;
-            const animated = args.animated === true;
-            const targetPath = args.targetPath as string | undefined;
-            const shouldWrite = args.writeToFile === true;
-
-            // Build context from existing files
-            let contextContent = '';
-            if (contextPaths && contextPaths.length > 0) {
-                contextContent = await buildContext(contextPaths, config);
-            }
+  server.registerTool(
+    'snippet_ui',
+    {
+      title: 'Generate UI Snippet',
+      description:
+        'Generate standalone UI components (modals, tables, forms, etc.). Auto-detects project styling and outputs matching code structure.',
+      inputSchema,
+    },
+    async (args) => {
+      try {
+        const type = args.type as string;
+        const description = args.description as string;
+        const framework =
+          (args.framework as 'vanilla' | 'react' | 'vue' | 'svelte' | 'nextjs') ||
+          config.defaultFramework;
+        const targetPath = args.targetPath as string;
+        const projectRoot = (args.projectRoot as string) || process.cwd();
+        const requestedApproach = (args.stylingApproach as string) || 'auto';
+        const contextPaths = args.context as string[] | undefined;
+        const propsInterface = args.propsInterface as string | undefined;
+        const animated = args.animated === true;
+        const shouldWrite = args.writeToFile === true;
+        const backup = args.backup !== false;
+        const format = args.format !== false;
 
-            const systemPrompt = getSystemPrompt(type, framework);
+        // Detect or use specified styling approach
+        let stylingInfo: StylingInfo;
+        if (requestedApproach === 'auto') {
+          stylingInfo = detectStylingApproach(projectRoot);
+          if (config.debug) {
+            console.error(`[snippet_ui] Auto-detected styling: ${stylingInfo.approach}`);
+          }
+        } else {
+          stylingInfo = {
+            approach: requestedApproach as StylingApproach,
+            confidence: 'high',
+            detectedFrom: 'user specified',
+            fileExtension: getFileExtension(requestedApproach as StylingApproach),
+            importStatement: '',
+            usage: '',
+          };
+        }
 
-            let userPrompt = `Create a ${type} component.
+        // Build context from existing files
+        let contextContent = '';
+        if (contextPaths && contextPaths.length > 0) {
+          contextContent = await buildContext(contextPaths, config);
+        }
+
+        const stylePath = deriveStylePath(targetPath, stylingInfo);
+        const systemPrompt = getSystemPrompt(type, framework, stylingInfo);
+
+        let userPrompt = `Create a ${type} component using ${stylingInfo.approach.toUpperCase()} styling.
 
 ${buildRepoHints(config)}
 
+Component file: ${targetPath}
+${stylePath ? `Style file: ${stylePath}` : ''}
+
 Description:
 ${description}`;
 
-            if (propsInterface) {
-                userPrompt += `\n\nProps interface:\n${propsInterface}`;
-            }
+        if (propsInterface) {
+          userPrompt += `\n\nProps interface:\n${propsInterface}`;
+        }
 
-            if (animated) {
-                userPrompt += `\n\nInclude smooth, subtle animations/transitions (respect reduced motion).`;
-            }
+        if (animated) {
+          userPrompt += `\n\nInclude smooth, subtle animations/transitions (respect reduced motion).`;
+        }
 
-            if (contextContent) {
-                userPrompt += `\n\nMatch the style/tokens from these existing files:\n${contextContent}`;
-            }
+        if (contextContent) {
+          userPrompt += `\n\nMatch the style/tokens from these existing files:\n${contextContent}`;
+        }
+
+        userPrompt += `\n\nReturn a JSON object with "files" array.`;
+
+        const response = await generateWithGemini(config, systemPrompt, userPrompt, {
+          toolName: 'snippet_ui',
+        });
+        const jsonStr = extractJson(response);
 
+        let parsed: { files?: GeneratedFile[] };
+        try {
+          parsed = JSON.parse(jsonStr);
+        } catch {
+          return {
+            content: [
+              {
+                type: 'text' as const,
+                text: `Error: Model did not return valid JSON.\n${response}`,
+              },
+            ],
+            isError: true,
+          };
+        }
+
+        if (!parsed.files || !Array.isArray(parsed.files) || parsed.files.length === 0) {
+          return {
+            content: [{ type: 'text' as const, text: 'Error: Model output missing "files" array' }],
+            isError: true,
+          };
+        }
+
+        // Format files if requested
+        if (format) {
+          for (const file of parsed.files) {
             try {
-                const response = await generateWithGemini(config, systemPrompt, userPrompt, { toolName: 'snippet_ui' });
-                const code = extractCode(response);
-
-                // Write to file if requested
-                if (shouldWrite) {
-                    if (!targetPath) {
-                        return {
-                            content: [
-                                {
-                                    type: 'text' as const,
-                                    text: `Error: writeToFile=true but no targetPath was provided.`,
-                                },
-                            ],
-                            isError: true,
-                        };
-                    }
-
-                    const safePath = assertWritablePath(targetPath, config);
-                    const result = await writeFile(safePath, code, { format: true, backup: true });
-
-                    if (!result.success) {
-                        return {
-                            content: [
-                                {
-                                    type: 'text' as const,
-                                    text: `❌ Failed to write file: ${result.error || 'Unknown error'}`,
-                                },
-                            ],
-                            isError: true,
-                        };
-                    }
-
-                    const msg = [
-                        `✅ Snippet written successfully.`,
-                        `File: ${result.filePath}`,
-                        result.backupPath ? `Backup: ${result.backupPath}` : undefined,
-                    ]
-                        .filter(Boolean)
-                        .join('\n');
-
-                    return {
-                        content: [{ type: 'text' as const, text: msg }],
-                    };
-                }
-
-                // Return code only (no wrappers) for best agent compatibility
-                return {
-                    content: [{ type: 'text' as const, text: code }],
-                };
-            } catch (error) {
-                const message = error instanceof Error ? error.message : 'Unknown error';
-                return {
-                    content: [
-                        {
-                            type: 'text' as const,
-                            text: `Error generating snippet: ${message}`,
-                        },
-                    ],
-                    isError: true,
-                };
+              file.content = await formatCode(file.content, { filePath: file.path });
+            } catch {
+              // Ignore formatting errors
+            }
+          }
+        }
+
+        const result = {
+          stylingApproach: stylingInfo.approach,
+          detectedFrom: stylingInfo.detectedFrom,
+          confidence: stylingInfo.confidence,
+          files: parsed.files,
+        };
+
+        // Write to files if requested
+        if (shouldWrite) {
+          const writes: Array<{ file: string; backup?: string }> = [];
+
+          for (const file of parsed.files) {
+            const safePath = assertWritablePath(file.path, config);
+            const writeResult = await writeFile(safePath, file.content, { backup, format: false });
+
+            if (!writeResult.success) {
+              return {
+                content: [
+                  {
+                    type: 'text' as const,
+                    text: `Error writing ${file.path}: ${writeResult.error}`,
+                  },
+                ],
+                isError: true,
+              };
             }
+            writes.push({ file: writeResult.filePath, backup: writeResult.backupPath });
+          }
+
+          const msg = [
+            `✅ Snippet files written (${stylingInfo.approach} styling):`,
+            ...writes.map((w) => `- ${w.file}${w.backup ? ` (backup: ${w.backup})` : ''}`),
+          ].join('\n');
+
+          return { content: [{ type: 'text' as const, text: msg }] };
         }
-    );
+
+        // Return JSON with files and metadata
+        return {
+          content: [{ type: 'text' as const, text: JSON.stringify(result, null, 2) }],
+        };
+      } catch (error) {
+        const message = error instanceof Error ? error.message : 'Unknown error';
+        return {
+          content: [{ type: 'text' as const, text: `Error generating snippet: ${message}` }],
+          isError: true,
+        };
+      }
+    }
+  );
+}
+
+function getFileExtension(approach: StylingApproach): string {
+  const extensions: Record<StylingApproach, string> = {
+    tailwind: '',
+    'css-modules': '.module.css',
+    'styled-components': '.tsx',
+    emotion: '.tsx',
+    scss: '.module.scss',
+    'vanilla-extract': '.css.ts',
+    'panda-css': '',
+    'uno-css': '',
+    stylex: '.stylex.ts',
+    'css-in-js': '.tsx',
+    'vanilla-css': '.css',
+  };
+  return extensions[approach] || '.css';
 }