@gemini-designer/mcp-server 0.1.2 → 0.1.29

package/src/tools/generate-component-variants.ts

@@ -23,23 +23,31 @@ import { writeFile } from '../output/file-writer.js';
 import { DESIGN_PRINCIPLES_COMPACT } from '../design/principles.js';
 
 const inputSchema = {
-    componentFile: z.string().describe('Path to an existing component file (e.g., src/components/Button.tsx).'),
-    variants: z
-        .object({
-            sizes: z.array(z.string()).optional(),
-            intents: z.array(z.string()).optional(),
-            states: z.array(z.string()).optional(),
-            themes: z.array(z.string()).optional(),
-            custom: z.array(z.string()).optional().describe('Any additional variant requirements.'),
-        })
-        .optional()
-        .describe('Variant dimensions to generate.'),
-    instruction: z.string().optional().describe('Extra guidance about behavior, styling, or API.'),
-    storybook: z.boolean().default(true).describe('Generate a Storybook stories file if true.'),
-    storyFile: z.string().optional().describe('Optional path for the stories file (defaults next to component).'),
-    context: z.array(z.string()).optional().describe('Related files (tokens, theme, utilities).'),
-    applyChanges: z.boolean().default(false).describe('If true, write files to disk.'),
-    backup: z.boolean().default(true).describe('Create .bak backups before overwriting existing files.'),
+  componentFile: z
+    .string()
+    .describe('Path to an existing component file (e.g., src/components/Button.tsx).'),
+  variants: z
+    .object({
+      sizes: z.array(z.string()).optional(),
+      intents: z.array(z.string()).optional(),
+      states: z.array(z.string()).optional(),
+      themes: z.array(z.string()).optional(),
+      custom: z.array(z.string()).optional().describe('Any additional variant requirements.'),
+    })
+    .optional()
+    .describe('Variant dimensions to generate.'),
+  instruction: z.string().optional().describe('Extra guidance about behavior, styling, or API.'),
+  storybook: z.boolean().default(true).describe('Generate a Storybook stories file if true.'),
+  storyFile: z
+    .string()
+    .optional()
+    .describe('Optional path for the stories file (defaults next to component).'),
+  context: z.array(z.string()).optional().describe('Related files (tokens, theme, utilities).'),
+  applyChanges: z.boolean().default(false).describe('If true, write files to disk.'),
+  backup: z
+    .boolean()
+    .default(true)
+    .describe('Create .bak backups before overwriting existing files.'),
 };
 
 const SYSTEM_PROMPT = `You are a senior frontend engineer creating DISTINCTIVE component variants.
@@ -68,67 +76,76 @@ API guidance:
 - Apply distinctive typography and color for each variant.`;
 
 function cleanJson(response: string): string {
-    let out = response.trim();
-    const fenced = out.match(/```(?:json)?\n([\s\S]*?)```/);
-    if (fenced) out = fenced[1].trim();
-    return out;
+  let out = response.trim();
+  const fenced = out.match(/```(?:json)?\n([\s\S]*?)```/);
+  if (fenced) out = fenced[1].trim();
+  return out;
 }
 
 function defaultStoryPath(componentFile: string): string {
-    const dir = path.dirname(componentFile);
-    const base = path.basename(componentFile).replace(/\.(tsx|jsx|ts|js)$/, '');
-    return path.join(dir, `${base}.stories.tsx`);
+  const dir = path.dirname(componentFile);
+  const base = path.basename(componentFile).replace(/\.(tsx|jsx|ts|js)$/, '');
+  return path.join(dir, `${base}.stories.tsx`);
 }
 
 export function registerGenerateComponentVariants(server: McpServer, config: Config): void {
-    server.registerTool(
-        'generate_component_variants',
-        {
-            title: 'Generate Component Variants',
-            description:
-                'Enhance an existing component with variants (sizes/intents/states) and optionally generate Storybook stories.',
-            inputSchema,
-        },
-        async (args) => {
-            const componentFile = args.componentFile as string;
-            const variants = (args.variants as any) || {};
-            const instruction = (args.instruction as string | undefined) || '';
-            const storybook = args.storybook !== false;
-            const storyFile = (args.storyFile as string | undefined) || defaultStoryPath(componentFile);
-            const contextPaths = args.context as string[] | undefined;
-            const applyChanges = args.applyChanges === true;
-            const backup = args.backup !== false;
-
-            let safeComponent: string;
-            try {
-                safeComponent = assertReadablePath(componentFile, config);
-            } catch (error) {
-                const message = error instanceof Error ? error.message : 'Invalid componentFile';
-                return { content: [{ type: 'text' as const, text: `Error: ${message}` }], isError: true };
+  server.registerTool(
+    'generate_component_variants',
+    {
+      title: 'Generate Component Variants',
+      description:
+        'Enhance an existing component with variants (sizes/intents/states) and optionally generate Storybook stories.',
+      inputSchema,
+    },
+    async (args) => {
+      const componentFile = args.componentFile as string;
+      const variants =
+        (args.variants as
+          | {
+              sizes?: string[];
+              intents?: string[];
+              states?: string[];
+              themes?: string[];
+              custom?: string[];
             }
-
-            let componentContent: string;
-            try {
-                componentContent = fs.readFileSync(safeComponent, 'utf-8');
-            } catch {
-                return {
-                    content: [{ type: 'text' as const, text: `Error: Could not read ${componentFile}` }],
-                    isError: true,
-                };
-            }
-
-            let contextContent = '';
-            if (contextPaths && contextPaths.length > 0) {
-                contextContent = await buildContext(contextPaths, config);
-            }
-
-            // Deterministic repo grounding (stack + reusable components)
-            const grounding = await buildRepoGrounding(config, {
-                focusFileAbs: safeComponent,
-                instruction,
-            });
-
-            const userPrompt = `Enhance the component to support variants.
+          | undefined) || {};
+      const instruction = (args.instruction as string | undefined) || '';
+      const storybook = args.storybook !== false;
+      const storyFile = (args.storyFile as string | undefined) || defaultStoryPath(componentFile);
+      const contextPaths = args.context as string[] | undefined;
+      const applyChanges = args.applyChanges === true;
+      const backup = args.backup !== false;
+
+      let safeComponent: string;
+      try {
+        safeComponent = assertReadablePath(componentFile, config);
+      } catch (error) {
+        const message = error instanceof Error ? error.message : 'Invalid componentFile';
+        return { content: [{ type: 'text' as const, text: `Error: ${message}` }], isError: true };
+      }
+
+      let componentContent: string;
+      try {
+        componentContent = fs.readFileSync(safeComponent, 'utf-8');
+      } catch {
+        return {
+          content: [{ type: 'text' as const, text: `Error: Could not read ${componentFile}` }],
+          isError: true,
+        };
+      }
+
+      let contextContent = '';
+      if (contextPaths && contextPaths.length > 0) {
+        contextContent = await buildContext(contextPaths, config);
+      }
+
+      // Deterministic repo grounding (stack + reusable components)
+      const grounding = await buildRepoGrounding(config, {
+        focusFileAbs: safeComponent,
+        instruction,
+      });
+
+      const userPrompt = `Enhance the component to support variants.
 
 ${grounding}
 
@@ -154,69 +171,72 @@ ${contextContent ? `RELATED FILES FOR CONTEXT:\n${contextContent}` : ''}
 
 Remember: Output JSON only: {"files": [{"path": string, "content": string}]}`;
 
-            try {
-                const resp = await generateWithGemini(config, SYSTEM_PROMPT, userPrompt, {
-                    toolName: 'generate_component_variants',
-                });
-                const cleaned = cleanJson(resp);
-                const parsed = JSON.parse(cleaned) as { files?: Array<{ path: string; content: string }> };
-
-                if (!parsed || !Array.isArray(parsed.files) || parsed.files.length === 0) {
-                    return {
-                        content: [
-                            {
-                                type: 'text' as const,
-                                text: 'Error: Model output did not match expected JSON format: {"files": [...]}',
-                            },
-                        ],
-                        isError: true,
-                    };
-                }
-
-                if (!applyChanges) {
-                    return { content: [{ type: 'text' as const, text: JSON.stringify(parsed, null, 2) }] };
-                }
-
-                const writes: Array<{ file: string; backup?: string }> = [];
-                for (const f of parsed.files) {
-                    const target = f.path;
-                    const content = f.content;
-                    let safeOut: string;
-                    try {
-                        safeOut = assertWritablePath(target, config);
-                    } catch (error) {
-                        const message = error instanceof Error ? error.message : 'Invalid output path';
-                        return { content: [{ type: 'text' as const, text: `Error: ${message}` }], isError: true };
-                    }
-
-                    const result = await writeFile(safeOut, content, { format: true, backup });
-                    if (!result.success) {
-                        return {
-                            content: [
-                                {
-                                    type: 'text' as const,
-                                    text: `Error: Failed writing ${target}: ${result.error || 'Unknown error'}`,
-                                },
-                            ],
-                            isError: true,
-                        };
-                    }
-                    writes.push({ file: result.filePath, backup: result.backupPath });
-                }
-
-                const summary = [
-                    '✅ Generated component variants and wrote files:',
-                    ...writes.map((w) => `- ${w.file}${w.backup ? ` (backup: ${w.backup})` : ''}`),
-                ].join('\n');
-
-                return { content: [{ type: 'text' as const, text: summary }] };
-            } catch (error) {
-                const message = error instanceof Error ? error.message : 'Unknown error';
-                return {
-                    content: [{ type: 'text' as const, text: `Error generating variants: ${message}` }],
-                    isError: true,
-                };
-            }
+      try {
+        const resp = await generateWithGemini(config, SYSTEM_PROMPT, userPrompt, {
+          toolName: 'generate_component_variants',
+        });
+        const cleaned = cleanJson(resp);
+        const parsed = JSON.parse(cleaned) as { files?: Array<{ path: string; content: string }> };
+
+        if (!parsed || !Array.isArray(parsed.files) || parsed.files.length === 0) {
+          return {
+            content: [
+              {
+                type: 'text' as const,
+                text: 'Error: Model output did not match expected JSON format: {"files": [...]}',
+              },
+            ],
+            isError: true,
+          };
+        }
+
+        if (!applyChanges) {
+          return { content: [{ type: 'text' as const, text: JSON.stringify(parsed, null, 2) }] };
         }
-    );
+
+        const writes: Array<{ file: string; backup?: string }> = [];
+        for (const f of parsed.files) {
+          const target = f.path;
+          const content = f.content;
+          let safeOut: string;
+          try {
+            safeOut = assertWritablePath(target, config);
+          } catch (error) {
+            const message = error instanceof Error ? error.message : 'Invalid output path';
+            return {
+              content: [{ type: 'text' as const, text: `Error: ${message}` }],
+              isError: true,
+            };
+          }
+
+          const result = await writeFile(safeOut, content, { format: true, backup });
+          if (!result.success) {
+            return {
+              content: [
+                {
+                  type: 'text' as const,
+                  text: `Error: Failed writing ${target}: ${result.error || 'Unknown error'}`,
+                },
+              ],
+              isError: true,
+            };
+          }
+          writes.push({ file: result.filePath, backup: result.backupPath });
+        }
+
+        const summary = [
+          '✅ Generated component variants and wrote files:',
+          ...writes.map((w) => `- ${w.file}${w.backup ? ` (backup: ${w.backup})` : ''}`),
+        ].join('\n');
+
+        return { content: [{ type: 'text' as const, text: summary }] };
+      } catch (error) {
+        const message = error instanceof Error ? error.message : 'Unknown error';
+        return {
+          content: [{ type: 'text' as const, text: `Error generating variants: ${message}` }],
+          isError: true,
+        };
+      }
+    }
+  );
 }

package/src/tools/generate-vibes.ts

@@ -14,39 +14,41 @@ import { generateWithGemini } from '../generation/gemini-client.js';
 import { DESIGN_PRINCIPLES_COMPACT, BANNED_FONTS, SUGGESTED_FONTS } from '../design/principles.js';
 
 const inputSchema = {
-    projectContext: z
-        .string()
-        .optional()
-        .describe('Brief description of the project (e.g., "Modern SaaS dashboard for analytics")'),
-    existingTokens: z
-        .string()
-        .optional()
-        .describe('Path to existing design tokens or CSS file to analyze (optional)'),
-    vibeCount: z
-        .number()
-        .min(1)
-        .max(5)
-        .default(3)
-        .describe('Number of vibe options to generate (1-5)'),
-    preferences: z
-        .object({
-            colorTemp: z.enum(['warm', 'cool', 'neutral']).optional(),
-            density: z.enum(['compact', 'comfortable', 'spacious']).optional(),
-            style: z.enum([
-                'minimal',
-                'playful',
-                'corporate',
-                'brutalist',
-                'glassmorphism',
-                'editorial',
-                'retro-futuristic',
-                'luxury',
-                'organic',
-                'art-deco',
-            ]).optional(),
-        })
-        .optional()
-        .describe('Optional style preferences to guide generation'),
+  projectContext: z
+    .string()
+    .optional()
+    .describe('Brief description of the project (e.g., "Modern SaaS dashboard for analytics")'),
+  existingTokens: z
+    .string()
+    .optional()
+    .describe('Path to existing design tokens or CSS file to analyze (optional)'),
+  vibeCount: z
+    .number()
+    .min(1)
+    .max(5)
+    .default(3)
+    .describe('Number of vibe options to generate (1-5)'),
+  preferences: z
+    .object({
+      colorTemp: z.enum(['warm', 'cool', 'neutral']).optional(),
+      density: z.enum(['compact', 'comfortable', 'spacious']).optional(),
+      style: z
+        .enum([
+          'minimal',
+          'playful',
+          'corporate',
+          'brutalist',
+          'glassmorphism',
+          'editorial',
+          'retro-futuristic',
+          'luxury',
+          'organic',
+          'art-deco',
+        ])
+        .optional(),
+    })
+    .optional()
+    .describe('Optional style preferences to guide generation'),
 };
 
 const SYSTEM_PROMPT = `You are an expert UI/UX designer who creates DISTINCTIVE, memorable design systems.
@@ -106,98 +108,100 @@ SUGGESTED FONTS:
 }`;
 
 export function registerGenerateVibes(server: McpServer, config: Config): void {
-    server.registerTool(
-        'generate_vibes',
-        {
-            title: 'Generate Design Vibes',
-            description:
-                'Generate design direction options (vibes) with color palettes, typography, and spacing. Call this before create_ui to establish design consistency.',
-            inputSchema,
-        },
-        async (args) => {
-            const projectContext = args.projectContext as string | undefined;
-            const vibeCount = args.vibeCount as number | undefined;
-            const preferences = args.preferences as
-                | {
-                    colorTemp?: 'warm' | 'cool' | 'neutral';
-                    density?: 'compact' | 'comfortable' | 'spacious';
-                    style?: 'minimal' | 'playful' | 'corporate' | 'brutalist' | 'glassmorphism';
-                }
-                | undefined;
-
-            const existingTokensPath = args.existingTokens as string | undefined;
-
-            let existingTokensContext = '';
-            if (existingTokensPath) {
-                // Use the same context pipeline (path allowlist + sensitive file filtering + truncation)
-                existingTokensContext = await buildContext([existingTokensPath], config);
-            }
-
-            let userPrompt = buildPrompt({
-                projectContext,
-                vibeCount,
-                preferences,
-            });
-
-            if (existingTokensContext) {
-                userPrompt += `\n\nExisting design tokens / styles to respect:\n${existingTokensContext}`;
-            }
-
-            try {
-                const response = await generateWithGemini(config, SYSTEM_PROMPT, userPrompt, { toolName: 'generate_vibes' });
-
-                return {
-                    content: [
-                        {
-                            type: 'text' as const,
-                            text: response.trim(),
-                        },
-                    ],
-                };
-            } catch (error) {
-                const message = error instanceof Error ? error.message : 'Unknown error';
-                return {
-                    content: [
-                        {
-                            type: 'text' as const,
-                            text: `Error generating vibes: ${message}`,
-                        },
-                    ],
-                    isError: true,
-                };
-            }
-        }
-    );
+  server.registerTool(
+    'generate_vibes',
+    {
+      title: 'Generate Design Vibes',
+      description:
+        'Generate design direction options (vibes) with color palettes, typography, and spacing. Call this before create_ui to establish design consistency.',
+      inputSchema,
+    },
+    async (args) => {
+      const projectContext = args.projectContext as string | undefined;
+      const vibeCount = args.vibeCount as number | undefined;
+      const preferences = args.preferences as
+        | {
+            colorTemp?: 'warm' | 'cool' | 'neutral';
+            density?: 'compact' | 'comfortable' | 'spacious';
+            style?: 'minimal' | 'playful' | 'corporate' | 'brutalist' | 'glassmorphism';
+          }
+        | undefined;
+
+      const existingTokensPath = args.existingTokens as string | undefined;
+
+      let existingTokensContext = '';
+      if (existingTokensPath) {
+        // Use the same context pipeline (path allowlist + sensitive file filtering + truncation)
+        existingTokensContext = await buildContext([existingTokensPath], config);
+      }
+
+      let userPrompt = buildPrompt({
+        projectContext,
+        vibeCount,
+        preferences,
+      });
+
+      if (existingTokensContext) {
+        userPrompt += `\n\nExisting design tokens / styles to respect:\n${existingTokensContext}`;
+      }
+
+      try {
+        const response = await generateWithGemini(config, SYSTEM_PROMPT, userPrompt, {
+          toolName: 'generate_vibes',
+        });
+
+        return {
+          content: [
+            {
+              type: 'text' as const,
+              text: response.trim(),
+            },
+          ],
+        };
+      } catch (error) {
+        const message = error instanceof Error ? error.message : 'Unknown error';
+        return {
+          content: [
+            {
+              type: 'text' as const,
+              text: `Error generating vibes: ${message}`,
+            },
+          ],
+          isError: true,
+        };
+      }
+    }
+  );
 }
 
 function buildPrompt(input: {
-    projectContext?: string;
-    vibeCount?: number;
-    preferences?: {
-        colorTemp?: 'warm' | 'cool' | 'neutral';
-        density?: 'compact' | 'comfortable' | 'spacious';
-        style?: 'minimal' | 'playful' | 'corporate' | 'brutalist' | 'glassmorphism';
-    };
+  projectContext?: string;
+  vibeCount?: number;
+  preferences?: {
+    colorTemp?: 'warm' | 'cool' | 'neutral';
+    density?: 'compact' | 'comfortable' | 'spacious';
+    style?: 'minimal' | 'playful' | 'corporate' | 'brutalist' | 'glassmorphism';
+  };
 }): string {
-    const vibeCount = input.vibeCount ?? 3;
-    let prompt = `Generate ${vibeCount} distinct design vibes`;
+  const vibeCount = input.vibeCount ?? 3;
+  let prompt = `Generate ${vibeCount} distinct design vibes`;
 
-    if (input.projectContext) {
-        prompt += ` for this project: "${input.projectContext}"`;
-    }
+  if (input.projectContext) {
+    prompt += ` for this project: "${input.projectContext}"`;
+  }
 
-    if (input.preferences) {
-        const prefs = [];
-        if (input.preferences.colorTemp) prefs.push(`${input.preferences.colorTemp} color temperature`);
-        if (input.preferences.density) prefs.push(`${input.preferences.density} spacing density`);
-        if (input.preferences.style) prefs.push(`${input.preferences.style} style`);
+  if (input.preferences) {
+    const prefs = [];
+    if (input.preferences.colorTemp) prefs.push(`${input.preferences.colorTemp} color temperature`);
+    if (input.preferences.density) prefs.push(`${input.preferences.density} spacing density`);
+    if (input.preferences.style) prefs.push(`${input.preferences.style} style`);
 
-        if (prefs.length > 0) {
-            prompt += `. Preferences: ${prefs.join(', ')}`;
-        }
+    if (prefs.length > 0) {
+      prompt += `. Preferences: ${prefs.join(', ')}`;
     }
+  }
 
-    prompt += '. Return valid JSON only.';
+  prompt += '. Return valid JSON only.';
 
-    return prompt;
+  return prompt;
 }

package/src/tools/index.ts

@@ -22,21 +22,21 @@ import { registerAnalyzeScreenshotUI } from './analyze-screenshot-ui.js';
  * Register all MCP tools
  */
 export function registerTools(server: McpServer, config: Config): void {
-    console.error('[tools] Registering MCP tools...');
+  console.error('[tools] Registering MCP tools...');
 
-    registerGenerateVibes(server, config);
-    registerCreateUI(server, config);
-    registerModifyUI(server, config);
-    registerSnippetUI(server, config);
-    registerScaffoldProject(server, config);
-    registerAnalyzeTokens(server, config);
+  registerGenerateVibes(server, config);
+  registerCreateUI(server, config);
+  registerModifyUI(server, config);
+  registerSnippetUI(server, config);
+  registerScaffoldProject(server, config);
+  registerAnalyzeTokens(server, config);
 
-    // New grounding + power tools
-    registerDetectUIStack(server, config);
-    registerSyncDesignTokens(server, config);
-    registerCatalogComponents(server, config);
-    registerGenerateComponentVariants(server, config);
-    registerAnalyzeScreenshotUI(server, config);
+  // New grounding + power tools
+  registerDetectUIStack(server, config);
+  registerSyncDesignTokens(server, config);
+  registerCatalogComponents(server, config);
+  registerGenerateComponentVariants(server, config);
+  registerAnalyzeScreenshotUI(server, config);
 
-    console.error('[tools] All tools registered');
+  console.error('[tools] All tools registered');
 }