@gemini-designer/mcp-server 0.1.2 → 0.1.29

package/src/tools/modify-ui.ts

@@ -18,28 +18,31 @@ import { writeFile } from '../output/file-writer.js';
 import { DESIGN_PRINCIPLES_COMPACT } from '../design/principles.js';
 
 const inputSchema = {
-    targetFile: z.string().describe('Path to the file to modify'),
-    instruction: z
-        .string()
-        .describe('What to change (e.g., "Make the header sticky and add a subtle shadow")'),
-    context: z
-        .array(z.string())
-        .optional()
-        .describe('Related files for awareness (design tokens, parent components)'),
-    preserveLogic: z
-        .boolean()
-        .default(true)
-        .describe('Never touch non-UI code like API calls, state logic, etc.'),
-    returnDiff: z.boolean().default(false).describe('Return unified diff instead of full file'),
-    applyChanges: z
-        .boolean()
-        .default(false)
-        .describe('If true, apply the modifications directly to the file (only when returnDiff=false)'),
-    backup: z.boolean().default(true).describe('If true (default), create a .bak backup before modifying'),
+  targetFile: z.string().describe('Path to the file to modify'),
+  instruction: z
+    .string()
+    .describe('What to change (e.g., "Make the header sticky and add a subtle shadow")'),
+  context: z
+    .array(z.string())
+    .optional()
+    .describe('Related files for awareness (design tokens, parent components)'),
+  preserveLogic: z
+    .boolean()
+    .default(true)
+    .describe('Never touch non-UI code like API calls, state logic, etc.'),
+  returnDiff: z.boolean().default(false).describe('Return unified diff instead of full file'),
+  applyChanges: z
+    .boolean()
+    .default(false)
+    .describe('If true, apply the modifications directly to the file (only when returnDiff=false)'),
+  backup: z
+    .boolean()
+    .default(true)
+    .describe('If true (default), create a .bak backup before modifying'),
 };
 
 function getSystemPrompt(returnDiff: boolean): string {
-    const base = `You are a senior frontend engineer performing surgical code modifications that are VISUALLY DISTINCTIVE.
+  const base = `You are a senior frontend engineer performing surgical code modifications that are VISUALLY DISTINCTIVE.
 
 ${DESIGN_PRINCIPLES_COMPACT}
 
@@ -58,98 +61,98 @@ CRITICAL RULES (must follow):
 8. Output MUST NOT contain explanations, markdown, or code fences.
 9. When modifying styles, apply design principles (depth, motion, typography).`;
 
-    if (returnDiff) {
-        return `${base}\n\nOutput a UNIFIED DIFF only.`;
-    }
+  if (returnDiff) {
+    return `${base}\n\nOutput a UNIFIED DIFF only.`;
+  }
 
-    return `${base}\n\nOutput the COMPLETE modified file only (raw code).`;
+  return `${base}\n\nOutput the COMPLETE modified file only (raw code).`;
 }
 
 /**
  * Extract code from a model response that might contain fences.
  */
 function cleanResponse(response: string): string {
-    let out = response.trim();
-    const codeBlockMatch = out.match(/```(?:\w+)?\n([\s\S]*?)```/);
-    if (codeBlockMatch) {
-        out = codeBlockMatch[1].trim();
-    }
-    return out;
+  let out = response.trim();
+  const codeBlockMatch = out.match(/```(?:\w+)?\n([\s\S]*?)```/);
+  if (codeBlockMatch) {
+    out = codeBlockMatch[1].trim();
+  }
+  return out;
 }
 
 export function registerModifyUI(server: McpServer, config: Config): void {
-    server.registerTool(
-        'modify_ui',
-        {
-            title: 'Modify UI Component',
-            description:
-                'Make surgical edits to existing UI components. Preserves logic and only modifies UI-related code. Set applyChanges=true to write directly.',
-            inputSchema,
-        },
-        async (args) => {
-            const targetFile = args.targetFile as string;
-            const instruction = args.instruction as string;
-            const contextPaths = args.context as string[] | undefined;
-            const preserveLogic = args.preserveLogic !== false;
-            const returnDiff = args.returnDiff === true;
-            const shouldApply = args.applyChanges === true;
-            const shouldBackup = args.backup !== false;
-
-            if (shouldApply && returnDiff) {
-                return {
-                    content: [
-                        {
-                            type: 'text' as const,
-                            text: 'Error: applyChanges=true is not supported when returnDiff=true. Set returnDiff=false to apply changes.',
-                        },
-                    ],
-                    isError: true,
-                };
-            }
-
-            // Resolve and validate the target path
-            let safeReadPath: string;
-            try {
-                safeReadPath = assertReadablePath(targetFile, config);
-            } catch (error) {
-                const message = error instanceof Error ? error.message : 'Invalid targetFile';
-                return {
-                    content: [{ type: 'text' as const, text: `Error: ${message}` }],
-                    isError: true,
-                };
-            }
-
-            // Read the target file
-            let fileContent: string;
-            try {
-                fileContent = fs.readFileSync(safeReadPath, 'utf-8');
-            } catch {
-                return {
-                    content: [
-                        {
-                            type: 'text' as const,
-                            text: `Error: Could not read file at ${targetFile}`,
-                        },
-                    ],
-                    isError: true,
-                };
-            }
-
-            // Build context from related files
-            let contextContent = '';
-            if (contextPaths && contextPaths.length > 0) {
-                contextContent = await buildContext(contextPaths, config);
-            }
-
-            // Auto-inject deterministic project grounding (stack + reusable components)
-            const grounding = await buildRepoGrounding(config, {
-                focusFileAbs: safeReadPath,
-                instruction,
-            });
-
-            const systemPrompt = getSystemPrompt(returnDiff);
-
-            const userPrompt = `Modify this file according to the instruction.
+  server.registerTool(
+    'modify_ui',
+    {
+      title: 'Modify UI Component',
+      description:
+        'Make surgical edits to existing UI components. Preserves logic and only modifies UI-related code. Set applyChanges=true to write directly.',
+      inputSchema,
+    },
+    async (args) => {
+      const targetFile = args.targetFile as string;
+      const instruction = args.instruction as string;
+      const contextPaths = args.context as string[] | undefined;
+      const preserveLogic = args.preserveLogic !== false;
+      const returnDiff = args.returnDiff === true;
+      const shouldApply = args.applyChanges === true;
+      const shouldBackup = args.backup !== false;
+
+      if (shouldApply && returnDiff) {
+        return {
+          content: [
+            {
+              type: 'text' as const,
+              text: 'Error: applyChanges=true is not supported when returnDiff=true. Set returnDiff=false to apply changes.',
+            },
+          ],
+          isError: true,
+        };
+      }
+
+      // Resolve and validate the target path
+      let safeReadPath: string;
+      try {
+        safeReadPath = assertReadablePath(targetFile, config);
+      } catch (error) {
+        const message = error instanceof Error ? error.message : 'Invalid targetFile';
+        return {
+          content: [{ type: 'text' as const, text: `Error: ${message}` }],
+          isError: true,
+        };
+      }
+
+      // Read the target file
+      let fileContent: string;
+      try {
+        fileContent = fs.readFileSync(safeReadPath, 'utf-8');
+      } catch {
+        return {
+          content: [
+            {
+              type: 'text' as const,
+              text: `Error: Could not read file at ${targetFile}`,
+            },
+          ],
+          isError: true,
+        };
+      }
+
+      // Build context from related files
+      let contextContent = '';
+      if (contextPaths && contextPaths.length > 0) {
+        contextContent = await buildContext(contextPaths, config);
+      }
+
+      // Auto-inject deterministic project grounding (stack + reusable components)
+      const grounding = await buildRepoGrounding(config, {
+        focusFileAbs: safeReadPath,
+        instruction,
+      });
+
+      const systemPrompt = getSystemPrompt(returnDiff);
+
+      const userPrompt = `Modify this file according to the instruction.
 
 ${grounding}
 
@@ -166,69 +169,71 @@ ${contextContent ? `\n\nRELATED FILES FOR CONTEXT:\n${contextContent}\n` : ''}
 
 ${returnDiff ? 'Return a unified diff only.' : 'Return the full modified file only.'}`;
 
-            try {
-                const response = await generateWithGemini(config, systemPrompt, userPrompt, { toolName: 'modify_ui' });
-                const cleaned = cleanResponse(response);
-
-                // Apply changes if requested (and not returning diff)
-                if (shouldApply) {
-                    let safeWritePath: string;
-                    try {
-                        safeWritePath = assertWritablePath(targetFile, config);
-                    } catch (error) {
-                        const message = error instanceof Error ? error.message : 'Invalid targetFile';
-                        return {
-                            content: [{ type: 'text' as const, text: `Error: ${message}` }],
-                            isError: true,
-                        };
-                    }
-
-                    const result = await writeFile(safeWritePath, cleaned, {
-                        format: true,
-                        backup: shouldBackup,
-                    });
-
-                    if (!result.success) {
-                        return {
-                            content: [
-                                {
-                                    type: 'text' as const,
-                                    text: `❌ Failed to apply changes: ${result.error || 'Unknown error'}`,
-                                },
-                            ],
-                            isError: true,
-                        };
-                    }
-
-                    const msg = [
-                        `✅ Applied changes successfully.`,
-                        `File: ${result.filePath}`,
-                        result.backupPath ? `Backup: ${result.backupPath}` : undefined,
-                    ]
-                        .filter(Boolean)
-                        .join('\n');
-
-                    return {
-                        content: [{ type: 'text' as const, text: msg }],
-                    };
-                }
-
-                // Return diff or full file ONLY (no wrappers) for best agent compatibility
-                return {
-                    content: [{ type: 'text' as const, text: cleaned }],
-                };
-            } catch (error) {
-                const message = error instanceof Error ? error.message : 'Unknown error';
-                return {
-                    content: [
-                        {
-                            type: 'text' as const,
-                            text: `Error modifying UI: ${message}`,
-                        },
-                    ],
-                    isError: true,
-                };
-            }
+      try {
+        const response = await generateWithGemini(config, systemPrompt, userPrompt, {
+          toolName: 'modify_ui',
+        });
+        const cleaned = cleanResponse(response);
+
+        // Apply changes if requested (and not returning diff)
+        if (shouldApply) {
+          let safeWritePath: string;
+          try {
+            safeWritePath = assertWritablePath(targetFile, config);
+          } catch (error) {
+            const message = error instanceof Error ? error.message : 'Invalid targetFile';
+            return {
+              content: [{ type: 'text' as const, text: `Error: ${message}` }],
+              isError: true,
+            };
+          }
+
+          const result = await writeFile(safeWritePath, cleaned, {
+            format: true,
+            backup: shouldBackup,
+          });
+
+          if (!result.success) {
+            return {
+              content: [
+                {
+                  type: 'text' as const,
+                  text: `❌ Failed to apply changes: ${result.error || 'Unknown error'}`,
+                },
+              ],
+              isError: true,
+            };
+          }
+
+          const msg = [
+            `✅ Applied changes successfully.`,
+            `File: ${result.filePath}`,
+            result.backupPath ? `Backup: ${result.backupPath}` : undefined,
+          ]
+            .filter(Boolean)
+            .join('\n');
+
+          return {
+            content: [{ type: 'text' as const, text: msg }],
+          };
         }
-    );
+
+        // Return diff or full file ONLY (no wrappers) for best agent compatibility
+        return {
+          content: [{ type: 'text' as const, text: cleaned }],
+        };
+      } catch (error) {
+        const message = error instanceof Error ? error.message : 'Unknown error';
+        return {
+          content: [
+            {
+              type: 'text' as const,
+              text: `Error modifying UI: ${message}`,
+            },
+          ],
+          isError: true,
+        };
+      }
+    }
+  );
 }

package/src/tools/scaffold-project.ts

@@ -11,22 +11,22 @@ import { Config } from '../config/index.js';
 import { generateWithGemini } from '../generation/gemini-client.js';
 
 const inputSchema = {
-    projectType: z
-        .enum(['landing', 'dashboard', 'ecommerce', 'saas', 'blog', 'portfolio', 'docs', 'custom'])
-        .describe('Type of project to scaffold'),
-    name: z.string().describe('Project name'),
-    pages: z
-        .array(z.string())
-        .describe('List of pages to plan (e.g., ["Home", "Pricing", "About", "Contact"])'),
-    vibe: z.string().optional().describe('Selected design vibe from generate_vibes'),
-    features: z
-        .array(z.string())
-        .optional()
-        .describe('Special features (e.g., ["dark mode", "i18n", "auth", "animations"])'),
-    framework: z
-        .enum(['vanilla', 'react', 'vue', 'svelte', 'nextjs'])
-        .optional()
-        .describe('Target framework'),
+  projectType: z
+    .enum(['landing', 'dashboard', 'ecommerce', 'saas', 'blog', 'portfolio', 'docs', 'custom'])
+    .describe('Type of project to scaffold'),
+  name: z.string().describe('Project name'),
+  pages: z
+    .array(z.string())
+    .describe('List of pages to plan (e.g., ["Home", "Pricing", "About", "Contact"])'),
+  vibe: z.string().optional().describe('Selected design vibe from generate_vibes'),
+  features: z
+    .array(z.string())
+    .optional()
+    .describe('Special features (e.g., ["dark mode", "i18n", "auth", "animations"])'),
+  framework: z
+    .enum(['vanilla', 'react', 'vue', 'svelte', 'nextjs'])
+    .optional()
+    .describe('Target framework'),
 };
 
 const SYSTEM_PROMPT = `You are a senior frontend architect creating a comprehensive UI plan for a new project.
@@ -76,63 +76,65 @@ Focus on:
 - Accessibility defaults (WCAG AA) for interactive components`;
 
 export function registerScaffoldProject(server: McpServer, config: Config): void {
-    server.registerTool(
-        'scaffold_project',
-        {
-            title: 'Scaffold Project',
-            description:
-                'Create a complete UI architecture plan for a new project including component hierarchy, pages, and design tokens.',
-            inputSchema,
-        },
-        async (args) => {
-            const projectType = args.projectType as string;
-            const name = args.name as string;
-            const pages = args.pages as string[];
-            const vibe = args.vibe as string | undefined;
-            const features = args.features as string[] | undefined;
-            const framework =
-                (args.framework as 'vanilla' | 'react' | 'vue' | 'svelte' | 'nextjs') ||
-                config.defaultFramework;
+  server.registerTool(
+    'scaffold_project',
+    {
+      title: 'Scaffold Project',
+      description:
+        'Create a complete UI architecture plan for a new project including component hierarchy, pages, and design tokens.',
+      inputSchema,
+    },
+    async (args) => {
+      const projectType = args.projectType as string;
+      const name = args.name as string;
+      const pages = args.pages as string[];
+      const vibe = args.vibe as string | undefined;
+      const features = args.features as string[] | undefined;
+      const framework =
+        (args.framework as 'vanilla' | 'react' | 'vue' | 'svelte' | 'nextjs') ||
+        config.defaultFramework;
 
-            let userPrompt = `Create a UI scaffold for a ${projectType} project called "${name}".
+      let userPrompt = `Create a UI scaffold for a ${projectType} project called "${name}".
 
 Framework: ${framework}
 Pages: ${pages.join(', ')}`;
 
-            if (features && features.length > 0) {
-                userPrompt += `\nFeatures: ${features.join(', ')}`;
-            }
+      if (features && features.length > 0) {
+        userPrompt += `\nFeatures: ${features.join(', ')}`;
+      }
 
-            if (vibe) {
-                userPrompt += `\n\nDesign vibe/tokens:\n${vibe}`;
-            }
+      if (vibe) {
+        userPrompt += `\n\nDesign vibe/tokens:\n${vibe}`;
+      }
 
-            userPrompt += '\n\nReturn valid JSON only.';
+      userPrompt += '\n\nReturn valid JSON only.';
 
-            try {
-                const response = await generateWithGemini(config, SYSTEM_PROMPT, userPrompt, { toolName: 'scaffold_project' });
+      try {
+        const response = await generateWithGemini(config, SYSTEM_PROMPT, userPrompt, {
+          toolName: 'scaffold_project',
+        });
 
-                // IMPORTANT: Return raw JSON ONLY (no wrappers) so agents can parse it reliably.
-                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 scaffolding project: ${message}`,
-                        },
-                    ],
-                    isError: true,
-                };
-            }
-        }
-    );
+        // IMPORTANT: Return raw JSON ONLY (no wrappers) so agents can parse it reliably.
+        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 scaffolding project: ${message}`,
+            },
+          ],
+          isError: true,
+        };
+      }
+    }
+  );
 }