gemini-design-mcp 3.6.13 → 3.7.0

package/README.md

@@ -1,100 +1,27 @@
 # gemini-design-mcp
 
-MCP server that uses **Google Gemini 3 Pro** for frontend/design code generation.
+MCP server that uses **Google Gemini 3** for frontend/design code generation.
 
-## Why?
+Combine your favorite AI (Claude, GPT, etc.) with Gemini's design capabilities while keeping full conversation context.
 
-Gemini excels at UI/UX design and frontend code generation. This MCP lets any AI agent (Claude Code, Codex, etc.) delegate frontend tasks to Gemini.
+## Get Started
 
-**Key principle:** The calling agent manages context. No config files needed.
+Visit **[gemini-design-mcp.com](https://gemini-design-mcp.com)** for:
 
-## Installation
-
-Add to your Claude Desktop config (`~/.claude/claude_desktop_config.json`):
-
-```json
-{
-  "mcpServers": {
-    "gemini-design": {
-      "command": "npx",
-      "args": ["-y", "gemini-design-mcp"],
-      "env": {
-        "GEMINI_API_KEY": "your-api-key-here"
-      }
-    }
-  }
-}
-```
-
-Get your Gemini API key at: https://aistudio.google.com/app/apikey
+- Documentation & setup guide
+- Create your free account
+- Get your API key
+- Pricing plans
 
 ## Tools
 
-### generate_frontend
-
-Main tool for creating frontend code.
-
-**Parameters:**
-- `request` (required): What to create (e.g., "A hero section with gradient background")
-- `context` (nullable): Existing code for style reference. Pass `null` for new projects.
-- `techStack` (optional): Tech stack (e.g., "React + Tailwind", "Vue + CSS", "Next.js + shadcn")
-- `preferences` (optional): Style preferences (e.g., "dark mode", "glassmorphism", "minimal")
-
-### improve_frontend
-
-Improve existing frontend code.
-
-**Parameters:**
-- `code` (required): Current code to improve
-- `feedback` (required): What to improve (e.g., "Make it more modern", "Add hover effects")
-- `context` (optional): Additional context for consistency
-
-### suggest_design
-
-Get design suggestions without generating code. Saves tokens.
-
-**Parameters:**
-- `description` (required): What you're designing
-- `currentApproach` (optional): Current approach or constraints
-
-## How Context Works
-
-The calling agent (Claude, Codex) is responsible for passing relevant context:
-
-- **New project**: Pass `context: null`, Gemini creates from scratch
-- **Existing project**: Agent reads relevant components and passes them as context
-
-This ensures design consistency without requiring any user configuration.
-
-## Example Usage
-
-```
-Agent: "Create a pricing card component"
-
-→ Calls generate_frontend({
-    request: "A pricing card with 3 tiers, toggle for monthly/yearly",
-    context: "<existing Button and Card components>",
-    techStack: "React + Tailwind",
-    preferences: "glassmorphism, dark mode"
-  })
-
-← Returns complete, production-ready component code
-```
-
-## Development
-
-```bash
-# Clone and install
-git clone <repo>
-cd gemini-design-mcp
-npm install
+- **create_frontend** - Generate complete responsive views
+- **modify_frontend** - Make surgical edits to existing components
+- **snippet_frontend** - Create standalone UI components
 
-# Build
-npm run build
+## Compatibility
 
-# Test locally
-GEMINI_API_KEY=your-key node build/index.js
-```
+Works with Claude Code, Cursor, VS Code, Windsurf, Zed, JetBrains AI, Neovim, and more.
 
 ## License
 

package/build/index.js

@@ -59,7 +59,7 @@ Present options to user, they select one, then pass it here via designSystem.vib
 📤 OUTPUT
 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 
-Returns a confirmation message after writing to disk (lightweight context).`, createFrontendSchema, createFrontend);
+Returns the complete code. YOU (the agent) are responsible for writing it to disk.`, createFrontendSchema, createFrontend);
 // =============================================================================
 // TOOL 2: MODIFY_FRONTEND
 // =============================================================================
@@ -112,7 +112,7 @@ import { X } from "y";
 // REPLACE WITH:
 <new redesigned code>
 
-The modification is applied directly to disk by default.`, modifyFrontendSchema, modifyFrontend);
+YOU (the agent) are responsible for applying this find/replace to the file.`, modifyFrontendSchema, modifyFrontend);
 // =============================================================================
 // TOOL 3: SNIPPET_FRONTEND
 // =============================================================================
@@ -234,11 +234,9 @@ import { Search } from "lucide-react";
   )}
 </div>
 
-You (Claude) are responsible for:
+YOU (the agent) are responsible for:
 - Adding the logic (useState, handlers) BEFORE calling this tool
-- Providing insertAtLine or insertAfterPattern for direct insertion
-
-The snippet is inserted directly to disk by default (requires insertAtLine OR insertAfterPattern).`, snippetFrontendSchema, snippetFrontend);
+- Inserting the returned snippet into the correct location in the file`, snippetFrontendSchema, snippetFrontend);
 // =============================================================================
 // TOOL 4: GENERATE_VIBES
 // =============================================================================

package/build/lib/gemini.js

@@ -7,11 +7,11 @@ function getApiKey() {
     const apiKey = process.env.API_KEY;
     if (!apiKey) {
         throw new Error("Missing API_KEY environment variable. " +
-            "Get your API key at https://gemini-design.com/dashboard/api-keys");
+            "Get your API key at https://gemini-design-mcp.com/dashboard/api-keys");
     }
     if (!apiKey.startsWith("gd_")) {
         throw new Error("Invalid API key format. API keys must start with 'gd_'. " +
-            "Get your API key at https://gemini-design.com/dashboard/api-keys");
+            "Get your API key at https://gemini-design-mcp.com/dashboard/api-keys");
     }
     return apiKey;
 }
@@ -45,7 +45,17 @@ export async function generateWithGemini(systemPrompt, userPrompt, model = DEFAU
         });
         const result = await response.json();
         if (!response.ok) {
-            throw new Error(result.error || `API error: ${response.status}`);
+            const errorMsg = result.error || `API error: ${response.status}`;
+            // Check for credit/quota related errors
+            if (errorMsg.toLowerCase().includes('credit') ||
+                errorMsg.toLowerCase().includes('quota') ||
+                errorMsg.toLowerCase().includes('insufficient') ||
+                errorMsg.toLowerCase().includes('limit') ||
+                response.status === 402 ||
+                response.status === 429) {
+                throw new Error(`${errorMsg}\n\n💳 Top up your credits here: https://gemini-design-mcp.com/settings/billing`);
+            }
+            throw new Error(errorMsg);
         }
         // Extract text from Gemini response format
         const text = result.candidates?.[0]?.content?.parts?.[0]?.text;

package/build/tools/create-frontend.js

@@ -1,7 +1,7 @@
 import { z } from "zod";
 import { generateWithGemini } from "../lib/gemini.js";
 import { CREATE_FRONTEND_PROMPT } from "../prompts/system.js";
-import { writeFileWithDirs, getFileSize, stripCodeFences } from "../lib/filesystem.js";
+import { stripCodeFences } from "../lib/filesystem.js";
 import { scaleSchema, scaleDescriptions } from "../lib/scale.js";
 export const createFrontendSchema = {
     request: z.string().describe("What to create: describe the page, component, or section. " +
@@ -24,12 +24,9 @@ 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().default(false).describe("Write the file directly to disk instead of returning the code. " +
-        "Returns a confirmation message instead of the full code, keeping context lightweight. " +
-        "Defaults to false."),
 };
 export async function createFrontend(params) {
-    const { request, filePath, techStack, context, designSystem, writeFile } = params;
+    const { request, filePath, techStack, context, designSystem } = params;
     // Build design system instructions if provided
     let designSystemInstructions = '';
     if (designSystem?.vibe) {
@@ -74,18 +71,7 @@ Remember: Return a COMPLETE file ready to save at ${filePath}`.trim();
     const rawResult = await generateWithGemini(systemPrompt, request, undefined, "high", "create_frontend");
     // Strip markdown code fences from the result
     const result = stripCodeFences(rawResult);
-    // 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 the code for the agent to write
     return {
         content: [{ type: "text", text: result }],
     };

package/build/tools/modify-frontend.js

@@ -1,7 +1,6 @@
 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";
 import { scaleSchema, getScaleInstructions } from "../lib/scale.js";
 export const modifyFrontendSchema = {
     modification: z.string().describe("The SINGLE design modification to make. Be specific. " +
@@ -20,13 +19,9 @@ export const modifyFrontendSchema = {
         "Example: 'Project uses: var(--font-heading), var(--bg-primary), .section-padding class'"),
     scale: scaleSchema.optional().describe("Element sizing: 'refined' (small, elegant), 'balanced' (standard), 'zoomed' (large). " +
         "Controls button sizes, typography, spacing, icons."),
-    writeFile: z.boolean().default(true).describe("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. " +
-        "Defaults to true."),
 };
 export async function modifyFrontend(params) {
-    const { modification, targetCode, filePath, context, scale, writeFile } = params;
+    const { modification, targetCode, filePath, context, scale } = params;
     // Build context instructions
     let contextInstructions = '';
     if (context) {
@@ -51,52 +46,7 @@ MODIFICATION REQUESTED: ${modification}
 
 Remember: Return ONLY the find/replace block. ONE modification, surgical precision.`.trim();
     const result = await generateWithGemini(systemPrompt, modification, undefined, "minimal", "modify_frontend");
-    // 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 the find/replace instructions for the agent to apply
     return {
         content: [{ type: "text", text: result }],
     };

package/build/tools/snippet-frontend.js

@@ -1,7 +1,6 @@
 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";
 import { scaleSchema, getScaleInstructions } from "../lib/scale.js";
 export const snippetFrontendSchema = {
     request: z.string().describe("What code snippet to generate. Be specific about what you need. " +
@@ -23,18 +22,9 @@ export const snippetFrontendSchema = {
         "Without this, Gemini will create standalone styles that won't match your design system."),
     scale: scaleSchema.optional().describe("Element sizing: 'refined' (small, elegant), 'balanced' (standard), 'zoomed' (large). " +
         "Controls button sizes, typography, spacing, icons."),
-    writeFile: z.boolean().default(true).describe("Insert the snippet directly into the file on disk. " +
-        "Requires insertAtLine OR insertAfterPattern to know where to insert. " +
-        "Defaults to true."),
-    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, scale, writeFile, insertAtLine: lineNumber, insertAfterPattern: pattern, } = params;
+    const { request, targetFile, techStack, insertionContext, context, scale } = params;
     // Build context instructions
     let contextInstructions = '';
     if (context) {
@@ -56,69 +46,7 @@ ${insertionContext}
 
 Generate a snippet that will integrate smoothly at this location.`.trim();
     const result = await generateWithGemini(systemPrompt, request, undefined, "minimal", "snippet_frontend");
-    // 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 the snippet for the agent to insert
     return {
         content: [{ type: "text", text: result }],
     };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gemini-design-mcp",
-  "version": "3.6.13",
+  "version": "3.7.0",
   "description": "MCP server that uses Gemini 3 Pro for frontend/design code generation",
   "main": "build/index.js",
   "bin": {
@@ -11,7 +11,7 @@
     "build": "tsc",
     "dev": "tsc --watch",
     "start": "node build/index.js",
-    "prepublishOnly": "npm run build"
+    "prepublishOnly": "echo 'Publishing...'"
   },
   "keywords": [
     "mcp",