gemini-design-mcp 3.5.1 → 3.6.1

package/build/index.js

@@ -58,7 +58,9 @@ Present options to user, they select one, then pass it here via designSystem.vib
 📤 OUTPUT
 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 
-Returns a COMPLETE file ready to save.`, createFrontendSchema, createFrontend);
+Returns a COMPLETE file ready to save.
+
+💡 TIP: Use writeFile: true to write directly to disk (faster, lighter context).`, createFrontendSchema, createFrontend);
 // =============================================================================
 // TOOL 2: MODIFY_FRONTEND
 // =============================================================================
@@ -100,7 +102,9 @@ import { X } from "y";
 <exact existing code>
 
 // REPLACE WITH:
-<new redesigned code>`, modifyFrontendSchema, modifyFrontend);
+<new redesigned code>
+
+💡 TIP: Use writeFile: true to apply the modification directly to disk.`, modifyFrontendSchema, modifyFrontend);
 // =============================================================================
 // TOOL 3: SNIPPET_FRONTEND
 // =============================================================================
@@ -210,7 +214,9 @@ import { Search } from "lucide-react";
 You (Claude) are responsible for:
 - Adding the logic (useState, handlers) BEFORE calling this tool
 - Merging new imports
-- Inserting the snippet at the correct location`, snippetFrontendSchema, snippetFrontend);
+- Inserting the snippet at the correct location
+
+💡 TIP: Use writeFile: true + insertAtLine or insertAfterPattern to insert directly.`, snippetFrontendSchema, snippetFrontend);
 // =============================================================================
 // TOOL 4: GENERATE_VIBES
 // =============================================================================

package/build/lib/filesystem.d.ts

@@ -0,0 +1,53 @@
+/**
+ * Write a file, creating parent directories if they don't exist
+ */
+export declare function writeFileWithDirs(filePath: string, content: string): void;
+/**
+ * Read a file if it exists, return null otherwise
+ */
+export declare function readFileIfExists(filePath: string): string | null;
+/**
+ * Get file size in human readable format
+ */
+export declare function getFileSize(content: string): string;
+/**
+ * Parse FIND/REPLACE format from Gemini output
+ * Returns null if parsing fails
+ */
+export declare function parseFindReplace(geminiOutput: string): {
+    imports?: string;
+    find: string;
+    replace: string;
+} | null;
+/**
+ * Parse SNIPPET format from Gemini output
+ * Returns null if parsing fails
+ */
+export declare function parseSnippet(geminiOutput: string): {
+    imports?: string;
+    snippet: string;
+} | null;
+/**
+ * Apply find/replace to file content
+ */
+export declare function applyFindReplace(fileContent: string, find: string, replace: string): {
+    success: boolean;
+    newContent: string;
+    error?: string;
+};
+/**
+ * Merge new imports into existing file content
+ */
+export declare function mergeImports(fileContent: string, newImports: string): string;
+/**
+ * Insert snippet after a specific line number (1-indexed)
+ */
+export declare function insertAfterLine(fileContent: string, snippet: string, lineNumber: number): string;
+/**
+ * Insert snippet after a pattern match
+ */
+export declare function insertAfterPattern(fileContent: string, snippet: string, pattern: string): {
+    success: boolean;
+    newContent: string;
+    error?: string;
+};

package/build/lib/filesystem.js

@@ -0,0 +1,145 @@
+import fs from "fs";
+import path from "path";
+/**
+ * Write a file, creating parent directories if they don't exist
+ */
+export function writeFileWithDirs(filePath, content) {
+    const dir = path.dirname(filePath);
+    fs.mkdirSync(dir, { recursive: true });
+    fs.writeFileSync(filePath, content, "utf-8");
+}
+/**
+ * Read a file if it exists, return null otherwise
+ */
+export function readFileIfExists(filePath) {
+    if (fs.existsSync(filePath)) {
+        return fs.readFileSync(filePath, "utf-8");
+    }
+    return null;
+}
+/**
+ * Get file size in human readable format
+ */
+export function getFileSize(content) {
+    const bytes = Buffer.byteLength(content, "utf-8");
+    if (bytes < 1024)
+        return `${bytes} B`;
+    return `${(bytes / 1024).toFixed(1)} KB`;
+}
+/**
+ * Parse FIND/REPLACE format from Gemini output
+ * Returns null if parsing fails
+ */
+export function parseFindReplace(geminiOutput) {
+    try {
+        let imports;
+        // Extract imports if present
+        const importsMatch = geminiOutput.match(/\/\/ NEW IMPORTS NEEDED:\s*([\s\S]*?)(?=\/\/ FIND THIS CODE:)/);
+        if (importsMatch) {
+            imports = importsMatch[1].trim();
+        }
+        // Extract find section
+        const findMatch = geminiOutput.match(/\/\/ FIND THIS CODE:\s*([\s\S]*?)(?=\/\/ REPLACE WITH:)/);
+        if (!findMatch)
+            return null;
+        // Extract replace section
+        const replaceMatch = geminiOutput.match(/\/\/ REPLACE WITH:\s*([\s\S]*?)$/);
+        if (!replaceMatch)
+            return null;
+        return {
+            imports: imports || undefined,
+            find: findMatch[1].trim(),
+            replace: replaceMatch[1].trim(),
+        };
+    }
+    catch {
+        return null;
+    }
+}
+/**
+ * Parse SNIPPET format from Gemini output
+ * Returns null if parsing fails
+ */
+export function parseSnippet(geminiOutput) {
+    try {
+        let imports;
+        // Extract imports if present
+        const importsMatch = geminiOutput.match(/\/\/ NEW IMPORTS NEEDED:\s*([\s\S]*?)(?=\/\/ SNIPPET:)/);
+        if (importsMatch) {
+            imports = importsMatch[1].trim();
+        }
+        // Extract snippet
+        const snippetMatch = geminiOutput.match(/\/\/ SNIPPET:\s*([\s\S]*?)$/);
+        if (!snippetMatch) {
+            // If no SNIPPET marker, assume the whole thing (minus imports) is the snippet
+            return { imports, snippet: geminiOutput.trim() };
+        }
+        return {
+            imports: imports || undefined,
+            snippet: snippetMatch[1].trim(),
+        };
+    }
+    catch {
+        return null;
+    }
+}
+/**
+ * Apply find/replace to file content
+ */
+export function applyFindReplace(fileContent, find, replace) {
+    if (!fileContent.includes(find)) {
+        return {
+            success: false,
+            newContent: fileContent,
+            error: "Could not find the target code in file",
+        };
+    }
+    const newContent = fileContent.replace(find, replace);
+    return { success: true, newContent };
+}
+/**
+ * Merge new imports into existing file content
+ */
+export function mergeImports(fileContent, newImports) {
+    const lines = fileContent.split("\n");
+    // Find the last import line
+    let lastImportIndex = -1;
+    for (let i = 0; i < lines.length; i++) {
+        if (lines[i].startsWith("import ") || lines[i].startsWith("import{")) {
+            lastImportIndex = i;
+        }
+    }
+    if (lastImportIndex === -1) {
+        // No imports found, add at the beginning
+        return newImports + "\n" + fileContent;
+    }
+    // Insert after last import
+    lines.splice(lastImportIndex + 1, 0, newImports);
+    return lines.join("\n");
+}
+/**
+ * Insert snippet after a specific line number (1-indexed)
+ */
+export function insertAfterLine(fileContent, snippet, lineNumber) {
+    const lines = fileContent.split("\n");
+    lines.splice(lineNumber, 0, snippet);
+    return lines.join("\n");
+}
+/**
+ * Insert snippet after a pattern match
+ */
+export function insertAfterPattern(fileContent, snippet, pattern) {
+    const index = fileContent.indexOf(pattern);
+    if (index === -1) {
+        return {
+            success: false,
+            newContent: fileContent,
+            error: `Pattern not found: ${pattern}`,
+        };
+    }
+    const endOfPattern = index + pattern.length;
+    const newContent = fileContent.slice(0, endOfPattern) +
+        "\n" + snippet +
+        fileContent.slice(endOfPattern);
+    return { success: true, newContent };
+}

package/build/tools/create-frontend.d.ts

@@ -36,6 +36,7 @@ export declare const createFrontendSchema: {
             keywords: string[];
         };
     }>>;
+    writeFile: z.ZodOptional<z.ZodBoolean>;
 };
 export declare function createFrontend(params: {
     request: string;
@@ -50,6 +51,7 @@ export declare function createFrontend(params: {
             keywords: string[];
         };
     };
+    writeFile?: boolean;
 }): Promise<{
     content: {
         type: "text";

package/build/tools/create-frontend.js

@@ -1,6 +1,7 @@
 import { z } from "zod";
 import { generateWithGemini } from "../lib/gemini.js";
 import { CREATE_FRONTEND_PROMPT } from "../prompts/system.js";
+import { writeFileWithDirs, getFileSize } from "../lib/filesystem.js";
 export const createFrontendSchema = {
     request: z.string().describe("What to create: describe the page, component, or section. " +
         "Be specific about functionality and content. " +
@@ -21,24 +22,53 @@ export const createFrontendSchema = {
         }).describe("The selected design vibe"),
     }).optional().describe("Design system with selected vibe. REQUIRED for new projects without existing design. " +
         "Call generate_vibes first, user selects, then pass the selection here."),
+    writeFile: z.boolean().optional().describe("If true, write the file directly to disk instead of returning the code. " +
+        "Returns a confirmation message instead of the full code, keeping context lightweight."),
 };
 export async function createFrontend(params) {
-    const { request, filePath, techStack, context, designSystem } = params;
+    const { request, filePath, techStack, context, designSystem, writeFile } = params;
     // Build design system instructions if provided
     let designSystemInstructions = '';
     if (designSystem?.vibe) {
         const { vibe } = designSystem;
         const scale = vibe.scale || "balanced";
+        // Conceptual scale descriptions - let Gemini decide exact values
+        const scaleDescriptions = {
+            refined: `**SCALE: REFINED**
+This is about ELEMENT SIZE, not density. Refined means:
+- Smaller, more elegant typography — avoid oversized headlines
+- Compact, contained buttons — not chunky or oversized
+- Cards and containers with constrained widths — not full-width sprawling layouts
+- Tighter, purposeful spacing between elements
+- Smaller icons that complement rather than dominate
+
+Reference: Linear.app, Raycast, Notion — these apps feel sophisticated because their elements are proportionally small and refined, never billboard-sized or bloated.
+
+The interface should feel like a premium Swiss watch: precise, elegant, where every element is intentionally sized smaller than the default.`,
+            balanced: `**SCALE: BALANCED**
+Standard, conventional sizing. Use typical defaults — nothing particularly large or small. A middle-ground that works for most general-purpose applications.`,
+            zoomed: `**SCALE: ZOOMED**
+This is about ELEMENT SIZE, not density. Zoomed means:
+- Large, prominent typography — bold headlines that command attention
+- Big, chunky buttons — easy to see and click/tap
+- Wide cards and containers — full-width or near full-width layouts
+- Generous spacing and padding throughout
+- Large icons that stand out
+
+Reference: Kids apps, accessibility-focused interfaces, bold marketing sites — elements are intentionally oversized for impact and ease of use.`
+        };
         designSystemInstructions = `
 MANDATORY DESIGN SYSTEM (User Selected Vibe):
 
 **Design Vibe: "${vibe.name}"**
 ${vibe.description}
 
-**Scale: ${scale}**
+${scaleDescriptions[scale] || scaleDescriptions.balanced}
+
 Keywords: ${vibe.keywords.join(', ')}
 
 Interpret this vibe creatively — choose colors, typography, and styling that embody this atmosphere.
+The scale above is MANDATORY and defines how large or small UI elements should be.
 `;
     }
     // Build context instructions (ignore empty strings and "null" strings)
@@ -64,6 +94,18 @@ FILE PATH: ${filePath}
 
 Remember: Return a COMPLETE file ready to save at ${filePath}`.trim();
     const result = await generateWithGemini(systemPrompt, request, undefined, "high");
+    // Write file directly if requested
+    if (writeFile) {
+        writeFileWithDirs(filePath, result);
+        const size = getFileSize(result);
+        return {
+            content: [{
+                    type: "text",
+                    text: `✅ Created: ${filePath} (${size})`,
+                }],
+        };
+    }
+    // Default: return the code
     return {
         content: [{ type: "text", text: result }],
     };

package/build/tools/modify-frontend.d.ts

@@ -4,12 +4,14 @@ export declare const modifyFrontendSchema: {
     targetCode: z.ZodString;
     filePath: z.ZodString;
     context: z.ZodOptional<z.ZodString>;
+    writeFile: z.ZodOptional<z.ZodBoolean>;
 };
 export declare function modifyFrontend(params: {
     modification: string;
     targetCode: string;
     filePath: string;
     context?: string;
+    writeFile?: boolean;
 }): Promise<{
     content: {
         type: "text";

package/build/tools/modify-frontend.js

@@ -1,6 +1,7 @@
 import { z } from "zod";
 import { generateWithGemini } from "../lib/gemini.js";
 import { MODIFY_FRONTEND_PROMPT } from "../prompts/system.js";
+import { readFileIfExists, writeFileWithDirs, parseFindReplace, applyFindReplace, mergeImports, } from "../lib/filesystem.js";
 export const modifyFrontendSchema = {
     modification: z.string().describe("The SINGLE design modification to make. Be specific. " +
         "Examples: " +
@@ -14,9 +15,12 @@ export const modifyFrontendSchema = {
         "Example: 'src/components/Sidebar.tsx'"),
     context: z.string().optional().describe("Additional context about the file's design system. " +
         "Example: 'Uses Tailwind, dark theme with zinc colors, rounded-xl borders'"),
+    writeFile: z.boolean().optional().describe("If true, apply the modification directly to the file on disk. " +
+        "Reads the file, applies find/replace, and writes back. " +
+        "Returns a confirmation instead of the find/replace instructions."),
 };
 export async function modifyFrontend(params) {
-    const { modification, targetCode, filePath, context } = params;
+    const { modification, targetCode, filePath, context, writeFile } = params;
     // Build context instructions
     let contextInstructions = '';
     if (context) {
@@ -38,6 +42,52 @@ MODIFICATION REQUESTED: ${modification}
 
 Remember: Return ONLY the find/replace block. ONE modification, surgical precision.`.trim();
     const result = await generateWithGemini(systemPrompt, modification, undefined, "minimal");
+    // Apply modification directly if requested
+    if (writeFile) {
+        const fileContent = readFileIfExists(filePath);
+        if (!fileContent) {
+            return {
+                content: [{
+                        type: "text",
+                        text: `❌ Error: File not found: ${filePath}`,
+                    }],
+            };
+        }
+        const parsed = parseFindReplace(result);
+        if (!parsed) {
+            // Fallback: return raw result if parsing fails
+            return {
+                content: [{
+                        type: "text",
+                        text: `⚠️ Could not parse Gemini output. Raw result:\n\n${result}`,
+                    }],
+            };
+        }
+        // Apply the find/replace
+        const { success, newContent, error } = applyFindReplace(fileContent, parsed.find, parsed.replace);
+        if (!success) {
+            return {
+                content: [{
+                        type: "text",
+                        text: `❌ Error: ${error}\n\nExpected to find:\n${parsed.find.slice(0, 200)}...`,
+                    }],
+            };
+        }
+        // Merge imports if any
+        let finalContent = newContent;
+        if (parsed.imports) {
+            finalContent = mergeImports(newContent, parsed.imports);
+        }
+        // Write the file
+        writeFileWithDirs(filePath, finalContent);
+        return {
+            content: [{
+                    type: "text",
+                    text: `✅ Modified: ${filePath}${parsed.imports ? `\n   Added imports` : ""}`,
+                }],
+        };
+    }
+    // Default: return the find/replace instructions
     return {
         content: [{ type: "text", text: result }],
     };

package/build/tools/snippet-frontend.d.ts

@@ -5,6 +5,9 @@ export declare const snippetFrontendSchema: {
     techStack: z.ZodString;
     insertionContext: z.ZodString;
     context: z.ZodOptional<z.ZodString>;
+    writeFile: z.ZodOptional<z.ZodBoolean>;
+    insertAtLine: z.ZodOptional<z.ZodNumber>;
+    insertAfterPattern: z.ZodOptional<z.ZodString>;
 };
 export declare function snippetFrontend(params: {
     request: string;
@@ -12,6 +15,9 @@ export declare function snippetFrontend(params: {
     techStack: string;
     insertionContext: string;
     context?: string;
+    writeFile?: boolean;
+    insertAtLine?: number;
+    insertAfterPattern?: string;
 }): Promise<{
     content: {
         type: "text";

package/build/tools/snippet-frontend.js

@@ -1,6 +1,7 @@
 import { z } from "zod";
 import { generateWithGemini } from "../lib/gemini.js";
 import { SNIPPET_FRONTEND_PROMPT } from "../prompts/system.js";
+import { readFileIfExists, writeFileWithDirs, parseSnippet, mergeImports, insertAfterLine, insertAfterPattern, } from "../lib/filesystem.js";
 export const snippetFrontendSchema = {
     request: z.string().describe("What code snippet to generate. Be specific about what you need. " +
         "Examples: " +
@@ -19,9 +20,17 @@ export const snippetFrontendSchema = {
     context: z.string().optional().describe("Additional project files for design/pattern reference. " +
         "Pass components, styles, or utilities that the snippet should match. " +
         "Optional but recommended for consistency."),
+    writeFile: z.boolean().optional().describe("If true, insert the snippet directly into the file on disk. " +
+        "Requires insertAtLine OR insertAfterPattern to know where to insert."),
+    insertAtLine: z.number().optional().describe("Line number (1-indexed) where to insert the snippet. " +
+        "The snippet will be inserted AFTER this line. " +
+        "Required if writeFile is true and insertAfterPattern is not provided."),
+    insertAfterPattern: z.string().optional().describe("A string pattern to find in the file. The snippet will be inserted after this pattern. " +
+        "Example: 'return (' or '<main>' or '</header>'. " +
+        "Required if writeFile is true and insertAtLine is not provided."),
 };
 export async function snippetFrontend(params) {
-    const { request, targetFile, techStack, insertionContext, context } = params;
+    const { request, targetFile, techStack, insertionContext, context, writeFile, insertAtLine: lineNumber, insertAfterPattern: pattern, } = params;
     // Build context instructions
     let contextInstructions = '';
     if (context) {
@@ -40,6 +49,69 @@ ${insertionContext}
 
 Generate a snippet that will integrate smoothly at this location.`.trim();
     const result = await generateWithGemini(systemPrompt, request, undefined, "minimal");
+    // Insert snippet directly if requested
+    if (writeFile) {
+        if (!lineNumber && !pattern) {
+            return {
+                content: [{
+                        type: "text",
+                        text: `❌ Error: writeFile requires either insertAtLine or insertAfterPattern`,
+                    }],
+            };
+        }
+        const fileContent = readFileIfExists(targetFile);
+        if (!fileContent) {
+            return {
+                content: [{
+                        type: "text",
+                        text: `❌ Error: File not found: ${targetFile}`,
+                    }],
+            };
+        }
+        const parsed = parseSnippet(result);
+        if (!parsed) {
+            return {
+                content: [{
+                        type: "text",
+                        text: `⚠️ Could not parse snippet. Raw result:\n\n${result}`,
+                    }],
+            };
+        }
+        let newContent;
+        // Insert using line number or pattern
+        if (lineNumber) {
+            newContent = insertAfterLine(fileContent, parsed.snippet, lineNumber);
+        }
+        else if (pattern) {
+            const insertResult = insertAfterPattern(fileContent, parsed.snippet, pattern);
+            if (!insertResult.success) {
+                return {
+                    content: [{
+                            type: "text",
+                            text: `❌ Error: ${insertResult.error}`,
+                        }],
+                };
+            }
+            newContent = insertResult.newContent;
+        }
+        else {
+            // Should never reach here due to earlier check
+            newContent = fileContent;
+        }
+        // Merge imports if any
+        if (parsed.imports) {
+            newContent = mergeImports(newContent, parsed.imports);
+        }
+        // Write the file
+        writeFileWithDirs(targetFile, newContent);
+        return {
+            content: [{
+                    type: "text",
+                    text: `✅ Inserted snippet in: ${targetFile}${parsed.imports ? `\n   Added imports` : ""}${lineNumber ? `\n   After line ${lineNumber}` : ""}${pattern ? `\n   After pattern: ${pattern}` : ""}`,
+                }],
+        };
+    }
+    // Default: return the snippet
     return {
         content: [{ type: "text", text: result }],
     };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gemini-design-mcp",
-  "version": "3.5.1",
+  "version": "3.6.1",
   "description": "MCP server that uses Gemini 3 Pro for frontend/design code generation",
   "main": "build/index.js",
   "bin": {