gemini-design-mcp 3.10.1 → 3.11.0

package/build/index.js

@@ -17,7 +17,7 @@ import { generateVibesSchema, generateVibes } from "./tools/generate-vibes.js";
 function createMcpServer() {
     const server = new McpServer({
         name: "gemini-design-mcp",
-        version: "3.10.0",
+        version: "3.10.1",
     });
 
     // TOOL 1: CREATE_FRONTEND
@@ -222,25 +222,20 @@ Bad: "In the dashboard"
 📤 OUTPUT FORMAT
 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 
+If external dependency required:
+// REQUIRED DEPENDENCY: <package-name> (<install command>)
+
 // NEW IMPORTS NEEDED:
-import { Search } from "lucide-react";
+<import statements>
 
 // SNIPPET:
-<div className="relative">
-  <Search className="absolute left-3 top-1/2 -translate-y-1/2 text-zinc-400" />
-  <input
-    value={searchQuery}
-    onChange={(e) => setSearchQuery(e.target.value)}
-    className="w-full pl-10 pr-4 py-2 bg-zinc-800 rounded-xl ..."
-  />
-  {showDropdown && (
-    <div className="absolute top-full mt-2 w-full bg-zinc-800 rounded-xl shadow-2xl ...">
-      {/* Premium designed dropdown content */}
-    </div>
-  )}
-</div>
+<functional, interactive code>
+
+⚠️ Gemini ALWAYS returns FUNCTIONAL code - never static mockups.
+If a component needs a library to work properly, Gemini specifies which one.
 
 YOU (the agent) are responsible for:
+- Installing any REQUIRED DEPENDENCY specified by Gemini
 - Adding the logic (useState, handlers) BEFORE calling this tool
 - Inserting the returned snippet into the correct location in the file`, snippetFrontendSchema, snippetFrontend);
 
@@ -312,7 +307,7 @@ async function main() {
             res.json({
                 status: "ok",
                 service: "gemini-design-mcp",
-                version: "3.10.0",
+                version: "3.10.1",
                 transport: "streamable-http",
                 timestamp: Date.now(),
             });
@@ -473,7 +468,7 @@ async function main() {
 
         const port = parseInt(process.env.PORT || "3000", 10);
         app.listen(port, "0.0.0.0", () => {
-            console.log(`gemini-design-mcp v3.10.0 running on Streamable HTTP transport`);
+            console.log(`gemini-design-mcp v3.10.1 running on Streamable HTTP transport`);
             console.log(`  MCP endpoint: http://0.0.0.0:${port}/mcp`);
             console.log(`  Legacy SSE: http://0.0.0.0:${port}/sse`);
             console.log(`  Health check: http://0.0.0.0:${port}/health`);
@@ -483,7 +478,7 @@ async function main() {
         const server = createMcpServer();
         const transport = new StdioServerTransport();
         await server.connect(transport);
-        console.error("gemini-design-mcp v3.10.0 running on stdio");
+        console.error("gemini-design-mcp v3.10.1 running on stdio");
     }
 }
 

package/build/prompts/system.js

@@ -282,6 +282,12 @@ When existing project context is provided, you MUST:
 - The code must be ready to use as-is, no modifications needed
 - Follow the tech stack conventions exactly
 - Return ONLY the code, no explanations or markdown fences
+- If the component requires external dependencies, add at the TOP of the file:
+  // REQUIRED DEPENDENCIES:
+  // - <package-name> (<install command>)
+  // - <another-package> (<install command>)
+- ALWAYS return FUNCTIONAL, INTERACTIVE code - never static mockups or visual-only representations
+- NEVER fake interactivity with hardcoded positions or visual tricks
 
 ---
 
@@ -301,6 +307,11 @@ export const MODIFY_FRONTEND_PROMPT = `You are an elite UI/UX Designer making a
 
 YOUR TASK: Apply ONE design modification and return ONLY the changed code.
 
+CRITICAL RULE - FUNCTIONAL CODE ONLY:
+- You MUST return WORKING, FUNCTIONAL, INTERACTIVE code - NEVER static mockups
+- If the modification requires an external dependency, specify it: "// REQUIRED DEPENDENCY: <package-name> (<install command>)"
+- NEVER fake interactivity with hardcoded positions or visual tricks
+
 CRITICAL RULES:
 
 1. **SINGLE MODIFICATION ONLY**
@@ -333,8 +344,10 @@ OUTPUT FORMAT - STRICTLY FOLLOW THIS:
 <new redesigned code>
 \`\`\`
 
-If new imports are needed, add them at the top:
+If external dependency is required, add it at the top:
 \`\`\`
+// REQUIRED DEPENDENCY: <package-name> (<install command>)
+
 // NEW IMPORTS NEEDED:
 import { X } from "y";
 
@@ -349,7 +362,8 @@ IMPORTANT:
 - The "FIND THIS CODE" must be an EXACT match of existing code (copy-paste precision)
 - Include enough context in "FIND THIS CODE" to make it unique in the file
 - Return ONLY what needs to change, nothing else
-- No explanations, no full file, just the find/replace block`;
+- No explanations, no full file, just the find/replace block
+- The code you return MUST be functional and interactive - never static mockups`;
 // =============================================================================
 // SNIPPET_FRONTEND PROMPT
 // Used for generating code snippets to INSERT into existing files
@@ -358,6 +372,14 @@ export const SNIPPET_FRONTEND_PROMPT = `You are an elite UI/UX Designer generati
 
 YOUR TASK: Generate a focused code snippet that will be INSERTED into an existing file.
 
+CRITICAL RULE - FUNCTIONAL CODE ONLY:
+- You MUST return WORKING, FUNCTIONAL, INTERACTIVE code - NEVER static mockups or visual-only representations
+- If a component requires an external library/package/dependency to work properly (e.g., range sliders, date pickers, rich text editors, charts, maps, etc.), you MUST:
+  1. Specify the required dependency at the top: "// REQUIRED DEPENDENCY: <package-name> (<install command>)"
+  2. Generate code that USES that dependency
+- NEVER fake interactivity with hardcoded positions, static values, or visual tricks - the code must actually work
+- If you cannot provide functional code for a requested component, say so clearly and suggest alternatives
+
 SNIPPET PRINCIPLES:
 
 1. **DESIGN SYSTEM INTEGRATION (CRITICAL - READ THIS FIRST)**
@@ -398,19 +420,30 @@ SNIPPET PRINCIPLES:
 
 OUTPUT FORMAT:
 
-If new imports are needed:
+If the component requires an external dependency:
 \`\`\`
+// REQUIRED DEPENDENCY: <package-name> (<install command for the tech stack>)
+
 // NEW IMPORTS NEEDED:
-import { X } from "y";
+<import statements>
+
+// SNIPPET:
+<your functional code here>
+\`\`\`
+
+If new imports are needed (but no external dependency):
+\`\`\`
+// NEW IMPORTS NEEDED:
+<import statements>
 
 // SNIPPET:
-<your code here>
+<your functional code here>
 \`\`\`
 
 If no new imports needed:
 \`\`\`
 // SNIPPET:
-<your code here>
+<your functional code here>
 \`\`\`
 
-Return ONLY the code, no explanations.`;
+CRITICAL: The code you return MUST be functional and interactive. Never return static mockups or visual-only representations.`;

package/build/tools/modify-frontend.js

@@ -45,7 +45,7 @@ ${targetCode}
 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");
+    const result = await generateWithGemini(systemPrompt, modification, undefined, "high", "modify_frontend");
     // Return the find/replace instructions for the agent to apply
     return {
         content: [{ type: "text", text: result }],

package/build/tools/snippet-frontend.js

@@ -45,7 +45,7 @@ INSERTION CONTEXT:
 ${insertionContext}
 
 Generate a snippet that will integrate smoothly at this location.`.trim();
-    const result = await generateWithGemini(systemPrompt, request, undefined, "minimal", "snippet_frontend");
+    const result = await generateWithGemini(systemPrompt, request, undefined, "high", "snippet_frontend");
     // 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.10.1",
+  "version": "3.11.0",
   "description": "MCP server that uses Gemini 3 Pro for frontend/design code generation",
   "main": "build/index.js",
   "bin": {