@gemini-designer/mcp-server 0.1.2 → 0.1.29

package/src/tools/create-ui.ts

@@ -3,6 +3,9 @@
  *
  * Scaffolds new UI components or views.
  * Generates complete, responsive, accessible frontend code.
+ *
+ * Automatically detects project styling approach (Tailwind, CSS Modules, styled-components, etc.)
+ * and generates code matching the project conventions.
  */
 
 import { McpServer } from '@modelcontextprotocol/sdk/server/mcp.js';
@@ -14,60 +17,129 @@ import { generateWithGemini } from '../generation/gemini-client.js';
 import { writeFile } from '../output/file-writer.js';
 import { formatCode } from '../output/formatter.js';
 import { buildRepoHints } from '../context/repo-hints.js';
-
 import { DESIGN_PRINCIPLES } from '../design/principles.js';
+import {
+  detectStylingApproach,
+  getStylingInstructions,
+  StylingApproach,
+  StylingInfo,
+} from '../context/styling-detector.js';
+
+interface GeneratedFile {
+  path: string;
+  content: string;
+  type: 'component' | 'styles' | 'types' | 'index';
+}
 
 const inputSchema = {
-    description: z.string().describe('Description of the UI to create (component or view)'),
-    framework: z.enum(['react', 'vue', 'svelte', 'html']).default('react'),
-    vibe: z.string().optional().describe('Design tokens/vibe from generate_vibes'),
-    contextFiles: z.array(z.string()).optional().describe('Paths to relevant UI files for context'),
-    targetPath: z.string().describe('Target file path to generate (e.g. src/components/Button.tsx)'),
-    includeStyles: z.boolean().default(true).describe('Include styling in the generated code'),
-    writeToFile: z.boolean().default(false).describe('Write the generated code to targetPath'),
-    backup: z.boolean().default(true).describe('Create .bak backup if overwriting an existing file'),
-    format: z.boolean().default(true).describe('Format the code with Prettier before returning/writing'),
+  description: z.string().describe('Description of the UI to create (component or view)'),
+  framework: z.enum(['react', 'vue', 'svelte', 'html']).default('react'),
+  vibe: z.string().optional().describe('Design tokens/vibe from generate_vibes'),
+  contextFiles: z.array(z.string()).optional().describe('Paths to relevant UI files for context'),
+  targetPath: z.string().describe('Target file path for component (e.g. src/components/Hero.tsx)'),
+  projectRoot: z
+    .string()
+    .optional()
+    .describe('Project root for auto-detecting styling approach (defaults to cwd)'),
+  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 to use (auto-detects from project if "auto")'),
+  writeToFile: z
+    .boolean()
+    .default(false)
+    .describe('Write generated files to disk (default: return JSON only)'),
+  backup: z.boolean().default(true).describe('Create .bak backup if overwriting existing files'),
+  format: z.boolean().default(true).describe('Format code with Prettier before returning/writing'),
 };
 
-const SYSTEM_PROMPT = `You are a senior frontend engineer and designer who creates DISTINCTIVE, memorable UI.
+function buildSystemPrompt(stylingInfo: StylingInfo): string {
+  return `You are a senior frontend engineer and designer who creates DISTINCTIVE, memorable UI.
 
 Your task: generate production-ready UI code that avoids generic AI aesthetics.
 
 ${DESIGN_PRINCIPLES}
 
-## Code Requirements
+${getStylingInstructions(stylingInfo)}
 
-Hard rules (must follow):
-- Output ONLY the final code. No explanations. No markdown. No code fences.
-- Use the specified framework idiomatically.
-- NO new dependencies unless explicitly requested.
-- Accessibility: WCAG AA default (semantic HTML, labels, aria-*, keyboard nav, :focus-visible)
-- Responsive by default (mobile-first)
-- If vibe/tokens provided, use them (prefer CSS variables). Don't hard-code random colors.
+## Output Structure (CRITICAL)
 
-## Quality Bar
+You MUST return a valid JSON object with this exact structure:
+{
+  "files": [
+    {
+      "path": "<filePath>",
+      "content": "<file content>",
+      "type": "component" | "styles" | "types"
+    }
+  ],
+  "stylingApproach": "${stylingInfo.approach}"
+}
+
+## File Requirements Based on Styling Approach
+
+${
+  stylingInfo.approach === 'tailwind' ||
+  stylingInfo.approach === 'panda-css' ||
+  stylingInfo.approach === 'uno-css' ||
+  stylingInfo.approach === 'styled-components' ||
+  stylingInfo.approach === 'emotion'
+    ? `For ${stylingInfo.approach.toUpperCase()}: Return ONLY the component file. Styles are embedded.`
+    : `For ${stylingInfo.approach.toUpperCase()}: Return component file AND separate styles file.`
+}
+
+Component file rules:
 - TypeScript types where applicable
-- No unused imports/vars
-- Clean component structure and clear naming
-- Animations should use CSS or framework-native solutions
-- Background treatments should create depth (not flat solid colors)`;
+- Accessible by default (WCAG AA)
+- Responsive (mobile-first)
+- Use the detected styling approach correctly
+
+NEVER output markdown, code fences, or explanations. ONLY the JSON object.`;
+}
 
 function buildUserPrompt(args: {
-    description: string;
-    framework: string;
-    vibe?: string;
-    context?: string;
-    targetPath: string;
-    includeStyles: boolean;
-    repoHints?: string;
+  description: string;
+  framework: string;
+  vibe?: string;
+  context?: string;
+  targetPath: string;
+  stylingInfo: StylingInfo;
+  repoHints?: string;
 }): string {
-    return `Create UI code.
+  const needsSeparateStyleFile = ![
+    'tailwind',
+    'panda-css',
+    'uno-css',
+    'styled-components',
+    'emotion',
+  ].includes(args.stylingInfo.approach);
+
+  let stylingInstructions = '';
+  if (needsSeparateStyleFile) {
+    const ext = args.stylingInfo.fileExtension;
+    const stylePath = args.targetPath.replace(/\.(tsx?|jsx?|vue|svelte)$/, ext);
+    stylingInstructions = `Style file: ${stylePath}\n`;
+  }
+
+  return `Create UI using ${args.stylingInfo.approach.toUpperCase()} styling.
 
 ${args.repoHints || ''}
 
 Framework: ${args.framework}
-Target file: ${args.targetPath}
-
+Component file: ${args.targetPath}
+${stylingInstructions}
 Description:
 ${args.description}
 
@@ -77,122 +149,203 @@ ${args.vibe || '(none)'}
 Project UI context (if provided):
 ${args.context || '(none)'}
 
-Styling:
-- includeStyles = ${args.includeStyles}
-- If Tailwind classes appear in context, prefer Tailwind.
-- Otherwise use simple CSS variables + className patterns, minimal inline styles.
-
-Return ONLY the code for the target file.`;
+Return a JSON object with "files" array containing the generated files.
+${
+  needsSeparateStyleFile
+    ? 'Include both component and style files.'
+    : 'Include only the component file (styles are embedded).'
+}`;
 }
 
 /**
- * Extract code from a model response that might contain fences.
- * (We still tell the model not to use fences, but this makes the tool resilient.)
+ * Extract JSON from model response (handles code fences)
  */
-function extractCode(response: string): string {
-    const codeBlockMatch = response.match(/```[a-zA-Z]*\n([\s\S]*?)```/);
-    if (codeBlockMatch) {
-        return codeBlockMatch[1].trim();
-    }
-    return response.trim();
+function extractJson(response: string): string {
+  // Try to find JSON in code fences first
+  const jsonBlockMatch = response.match(/```(?:json)?\s*\n?([\s\S]*?)```/);
+  if (jsonBlockMatch) {
+    return jsonBlockMatch[1].trim();
+  }
+
+  // Try to find raw JSON object
+  const jsonMatch = response.match(/\{[\s\S]*"files"[\s\S]*\}/);
+  if (jsonMatch) {
+    return jsonMatch[0];
+  }
+
+  return response.trim();
 }
 
 export function registerCreateUI(server: McpServer, config: Config) {
-    server.registerTool(
-        'create_ui',
-        {
-            title: 'Create UI Component/View',
-            description: 'Generate a complete UI component or view from description and design vibe',
-            inputSchema,
-        },
-        async (args) => {
+  server.registerTool(
+    'create_ui',
+    {
+      title: 'Create UI Component/View',
+      description:
+        'Generate a complete UI component. Auto-detects project styling (Tailwind, CSS Modules, styled-components, etc.) and outputs matching code structure.',
+      inputSchema,
+    },
+    async (args) => {
+      try {
+        const description = args.description as string;
+        const framework = (args.framework as string) || config.defaultFramework;
+        const vibe = args.vibe as string | undefined;
+        const contextFiles = (args.contextFiles as string[]) || [];
+        const targetPath = args.targetPath as string;
+        const projectRoot = (args.projectRoot as string) || process.cwd();
+        const requestedApproach = (args.stylingApproach as string) || 'auto';
+        const shouldWrite = args.writeToFile === true;
+        const backup = args.backup !== false;
+        const format = args.format !== false;
+
+        // Detect or use specified styling approach
+        let stylingInfo: StylingInfo;
+        if (requestedApproach === 'auto') {
+          stylingInfo = detectStylingApproach(projectRoot);
+          if (config.debug) {
+            console.error(
+              `[create_ui] Auto-detected styling: ${stylingInfo.approach} (${stylingInfo.confidence})`
+            );
+            console.error(`[create_ui] Detected from: ${stylingInfo.detectedFrom}`);
+          }
+        } else {
+          stylingInfo = {
+            approach: requestedApproach as StylingApproach,
+            confidence: 'high',
+            detectedFrom: 'user specified',
+            fileExtension: getFileExtension(requestedApproach as StylingApproach),
+            importStatement: '',
+            usage: '',
+          };
+        }
+
+        // Build context from files (token-optimized)
+        let context = '';
+        if (contextFiles.length > 0) {
+          context = await buildContext(contextFiles, config);
+        }
+
+        const systemPrompt = buildSystemPrompt(stylingInfo);
+        const userPrompt = buildUserPrompt({
+          description,
+          framework,
+          vibe,
+          context,
+          targetPath,
+          stylingInfo,
+          repoHints: buildRepoHints(config),
+        });
+
+        if (config.debug) {
+          console.error(`[create_ui] Generating UI for: ${description}`);
+          console.error(`[create_ui] Framework: ${framework}, Styling: ${stylingInfo.approach}`);
+        }
+
+        // Generate code with Gemini
+        const response = await generateWithGemini(config, systemPrompt, userPrompt, {
+          toolName: 'create_ui',
+        });
+        const jsonStr = extractJson(response);
+
+        let parsed: { files?: GeneratedFile[]; stylingApproach?: string };
+        try {
+          parsed = JSON.parse(jsonStr);
+        } catch {
+          return {
+            content: [
+              {
+                type: 'text' as const,
+                text: `Error: Model did not return valid JSON. Raw response:\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 description = args.description as string;
-                const framework = (args.framework as string) || config.defaultFramework;
-                const vibe = args.vibe as string | undefined;
-                const contextFiles = (args.contextFiles as string[]) || [];
-                const targetPath = args.targetPath as string;
-                const includeStyles = args.includeStyles as boolean;
-                const writeToFile = args.writeToFile as boolean;
-                const backup = args.backup as boolean;
-                const format = args.format as boolean;
-
-                // Build context from files (token-optimized)
-                let context = '';
-                if (contextFiles.length > 0) {
-                    context = await buildContext(contextFiles, config);
-                }
-
-                const userPrompt = buildUserPrompt({
-                    description,
-                    framework,
-                    vibe,
-                    context,
-                    targetPath,
-                    includeStyles,
-                    repoHints: buildRepoHints(config),
-                });
-
-                if (config.debug) {
-                    console.error(`[create_ui] Generating UI for: ${description}`);
-                    console.error(`[create_ui] Framework: ${framework}`);
-                    console.error(`[create_ui] Context files: ${contextFiles.length}`);
-                }
-
-                // Generate code with Gemini
-                const response = await generateWithGemini(config, SYSTEM_PROMPT, userPrompt, { toolName: 'create_ui' });
-                let code = extractCode(response);
-
-                // Format if requested
-                if (format) {
-                    try {
-                        code = await formatCode(code, { filePath: targetPath });
-                    } catch {
-                        // ignore formatting errors
-                    }
-                }
-
-                // Write to file if requested
-                if (writeToFile) {
-                    const safePath = assertWritablePath(targetPath, config);
-                    const result = await writeFile(safePath, code, { backup, format });
-
-                    if (!result.success) {
-                        return {
-                            content: [
-                                {
-                                    type: 'text',
-                                    text: `Error writing file: ${result.error || 'Unknown error'}`,
-                                },
-                            ],
-                            isError: true,
-                        };
-                    }
-
-                    const msg = [
-                        `✅ UI written successfully.`,
-                        `File: ${result.filePath}`,
-                        result.backupPath ? `Backup: ${result.backupPath}` : undefined,
-                    ]
-                        .filter(Boolean)
-                        .join('\n');
-
-                    return {
-                        content: [{ type: 'text', text: msg }],
-                    };
-                }
-
-                // Return code only (no wrappers) for best compatibility with agents
-                return {
-                    content: [{ type: 'text', text: code }],
-                };
-            } catch (error) {
-                const message = error instanceof Error ? error.message : 'Unknown error';
-                return {
-                    content: [{ type: 'text', text: `Error: ${message}` }],
-                    isError: true,
-                };
+              file.content = await formatCode(file.content, { filePath: file.path });
+            } catch {
+              // Ignore formatting errors
+            }
+          }
+        }
+
+        // Add metadata about styling approach used
+        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 = [
+            `✅ UI 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: ${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';
 }

package/src/tools/detect-ui-stack.ts

@@ -18,47 +18,47 @@ import { assertReadableDir } from '../context/guards.js';
 import { detectUiStack } from '../stack/detect.js';
 
 const inputSchema = {
-    root: z
-        .string()
-        .optional()
-        .describe('Project root directory (defaults to current working directory)')
-        .default(process.cwd()),
+  root: z
+    .string()
+    .optional()
+    .describe('Project root directory (defaults to current working directory)')
+    .default(process.cwd()),
 };
 
 export function registerDetectUIStack(server: McpServer, config: Config): void {
-    server.registerTool(
-        'detect_ui_stack',
-        {
-            title: 'Detect UI Stack',
-            description:
-                'Detect framework/styling/component libraries from the repo (no LLM). Useful to ground other tools.',
-            inputSchema,
-        },
-        async (args) => {
-            const root = (args.root as string) || process.cwd();
+  server.registerTool(
+    'detect_ui_stack',
+    {
+      title: 'Detect UI Stack',
+      description:
+        'Detect framework/styling/component libraries from the repo (no LLM). Useful to ground other tools.',
+      inputSchema,
+    },
+    async (args) => {
+      const root = (args.root as string) || process.cwd();
 
-            let safeRoot: string;
-            try {
-                safeRoot = assertReadableDir(root, config);
-            } catch (error) {
-                const message = error instanceof Error ? error.message : 'Invalid root directory';
-                return {
-                    content: [{ type: 'text' as const, text: `Error: ${message}` }],
-                    isError: true,
-                };
-            }
+      let safeRoot: string;
+      try {
+        safeRoot = assertReadableDir(root, config);
+      } catch (error) {
+        const message = error instanceof Error ? error.message : 'Invalid root directory';
+        return {
+          content: [{ type: 'text' as const, text: `Error: ${message}` }],
+          isError: true,
+        };
+      }
 
-            const result = detectUiStack(safeRoot);
+      const result = detectUiStack(safeRoot);
 
-            // Normalize paths for agent readability
-            const normalized = {
-                ...result,
-                root: path.resolve(result.root),
-            };
+      // Normalize paths for agent readability
+      const normalized = {
+        ...result,
+        root: path.resolve(result.root),
+      };
 
-            return {
-                content: [{ type: 'text' as const, text: JSON.stringify(normalized, null, 2) }],
-            };
-        }
-    );
+      return {
+        content: [{ type: 'text' as const, text: JSON.stringify(normalized, null, 2) }],
+      };
+    }
+  );
 }