gemini-design-mcp 3.3.1 → 3.5.0

package/build/index.js

@@ -4,6 +4,7 @@ import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js"
 import { createFrontendSchema, createFrontend } from "./tools/create-frontend.js";
 import { modifyFrontendSchema, modifyFrontend } from "./tools/modify-frontend.js";
 import { snippetFrontendSchema, snippetFrontend } from "./tools/snippet-frontend.js";
+import { generateVibesSchema, generateVibes } from "./tools/generate-vibes.js";
 // Create MCP server
 const server = new McpServer({
     name: "gemini-design-mcp",
@@ -50,13 +51,8 @@ C) PROJECT EXISTS with existing frontend code:
 
 STEP 2: VIBE SELECTION (Required for new designs)
 ──────────────────────────────────────────────────
-Generate 5 vibe options with RICH descriptions (2-3 sentences each):
-
-🏛️ "Pristine Museum" - Ultra-clean, white-cube aesthetic...
-⚡ "Technical Precision" - Grid-focused, architectural...
-🌊 "Fluid & Organic" - Soft curves, flowing gradients...
-🔥 "Bold & Unapologetic" - High contrast, oversized typography...
-🌙 "Dark Luxe" - Deep darks, metallic accents...
+Call generate_vibes tool FIRST to get 5 creative vibes from Gemini.
+Present options to user, they select one, then pass it here via designSystem.vibe.
 
 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 📤 OUTPUT
@@ -216,6 +212,44 @@ You (Claude) are responsible for:
 - Merging new imports
 - Inserting the snippet at the correct location`, snippetFrontendSchema, snippetFrontend);
 // =============================================================================
+// TOOL 4: GENERATE_VIBES
+// =============================================================================
+server.tool("generate_vibes", `Generate 5 unique design vibes for a new project using Gemini AI.
+
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+🎯 WHEN TO USE THIS TOOL
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+Use this tool BEFORE calling create_frontend on a NEW project that has no existing design.
+
+This tool generates creative, unique design vibes tailored to the project context.
+The user then selects one, and you pass it to create_frontend.
+
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+📋 FLOW
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+1. User asks to create frontend for a NEW project
+2. Call generate_vibes with project description
+3. Present the 5 vibes to the user
+4. User selects their preferred vibe
+5. Call create_frontend with the selected vibe in designSystem.vibe
+
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+📤 OUTPUT
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+Returns 5 vibes, each with:
+- emoji: Visual identifier
+- name: Memorable vibe name
+- description: 2-3 evocative sentences
+- keywords: Style keywords for the designer
+
+Example vibe:
+🏛️ "Pristine Museum"
+An ultra-clean, 'white-cube' aesthetic focused on vast negative space.
+Keywords: minimal, whitespace, gallery, clean, sophisticated`, generateVibesSchema, generateVibes);
+// =============================================================================
 // START SERVER
 // =============================================================================
 async function main() {

package/build/lib/gemini.d.ts

@@ -1,4 +1,5 @@
 import { GoogleGenAI } from "@google/genai";
+export type ThinkingMode = "minimal" | "low" | "medium" | "high";
 export declare const ai: GoogleGenAI | null;
 export declare const DEFAULT_MODEL = "gemini-3-flash-preview";
-export declare function generateWithGemini(systemPrompt: string, userPrompt: string, model?: string): Promise<string>;
+export declare function generateWithGemini(systemPrompt: string, userPrompt: string, model?: string, thinkingMode?: ThinkingMode): Promise<string>;

package/build/lib/gemini.js

@@ -16,7 +16,7 @@ export const DEFAULT_MODEL = "gemini-3-flash-preview";
 /**
  * Generate content via the hosted proxy service
  */
-async function generateViaProxy(systemPrompt, userPrompt, model) {
+async function generateViaProxy(systemPrompt, userPrompt, model, thinkingMode = "minimal") {
     const response = await fetch(PROXY_URL, {
         method: "POST",
         headers: {
@@ -36,6 +36,9 @@ async function generateViaProxy(systemPrompt, userPrompt, model) {
             },
             generationConfig: {
                 temperature: 1,
+                thinkingConfig: {
+                    thinkingLevel: thinkingMode,
+                },
             },
         }),
     });
@@ -54,7 +57,7 @@ async function generateViaProxy(systemPrompt, userPrompt, model) {
 /**
  * Generate content directly via Google SDK
  */
-async function generateViaSdk(systemPrompt, userPrompt, model) {
+async function generateViaSdk(systemPrompt, userPrompt, model, thinkingMode = "minimal") {
     if (!ai) {
         throw new Error("SDK not initialized");
     }
@@ -64,17 +67,20 @@ async function generateViaSdk(systemPrompt, userPrompt, model) {
         config: {
             systemInstruction: systemPrompt,
             temperature: 1,
+            thinkingConfig: {
+                thinkingLevel: thinkingMode,
+            },
         },
     });
     return response.text ?? "";
 }
-export async function generateWithGemini(systemPrompt, userPrompt, model = DEFAULT_MODEL) {
+export async function generateWithGemini(systemPrompt, userPrompt, model = DEFAULT_MODEL, thinkingMode = "minimal") {
     try {
         if (isHostedKey) {
-            return await generateViaProxy(systemPrompt, userPrompt, model);
+            return await generateViaProxy(systemPrompt, userPrompt, model, thinkingMode);
         }
         else {
-            return await generateViaSdk(systemPrompt, userPrompt, model);
+            return await generateViaSdk(systemPrompt, userPrompt, model, thinkingMode);
         }
     }
     catch (error) {

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

@@ -8,26 +8,31 @@ export declare const createFrontendSchema: {
         vibe: z.ZodObject<{
             name: z.ZodString;
             description: z.ZodString;
+            scale: z.ZodEnum<["refined", "balanced", "zoomed"]>;
             keywords: z.ZodArray<z.ZodString, "many">;
         }, "strip", z.ZodTypeAny, {
             name: string;
             description: string;
+            scale: "refined" | "balanced" | "zoomed";
             keywords: string[];
         }, {
             name: string;
             description: string;
+            scale: "refined" | "balanced" | "zoomed";
             keywords: string[];
         }>;
     }, "strip", z.ZodTypeAny, {
         vibe: {
             name: string;
             description: string;
+            scale: "refined" | "balanced" | "zoomed";
             keywords: string[];
         };
     }, {
         vibe: {
             name: string;
             description: string;
+            scale: "refined" | "balanced" | "zoomed";
             keywords: string[];
         };
     }>>;
@@ -41,6 +46,7 @@ export declare function createFrontend(params: {
         vibe: {
             name: string;
             description: string;
+            scale: "refined" | "balanced" | "zoomed";
             keywords: string[];
         };
     };

package/build/tools/create-frontend.js

@@ -16,10 +16,11 @@ export const createFrontendSchema = {
         vibe: z.object({
             name: z.string().describe("Vibe name (e.g., 'Pristine Museum', 'Dark Luxe')"),
             description: z.string().describe("Rich, evocative description of the mood (2-3 sentences)"),
+            scale: z.enum(["refined", "balanced", "zoomed"]).describe("Scale: 'refined' (small, elegant), 'balanced' (standard), 'zoomed' (large elements)"),
             keywords: z.array(z.string()).describe("Style keywords (e.g., ['minimal', 'whitespace', 'gallery'])"),
         }).describe("The selected design vibe"),
     }).optional().describe("Design system with selected vibe. REQUIRED for new projects without existing design. " +
-        "The calling agent generates 5 vibe options, user selects, then pass the selection here."),
+        "Call generate_vibes first, user selects, then pass the selection here."),
 };
 export async function createFrontend(params) {
     const { request, filePath, techStack, context, designSystem } = params;
@@ -27,19 +28,17 @@ export async function createFrontend(params) {
     let designSystemInstructions = '';
     if (designSystem?.vibe) {
         const { vibe } = designSystem;
+        const scale = vibe.scale || "balanced";
         designSystemInstructions = `
 MANDATORY DESIGN SYSTEM (User Selected Vibe):
 
 **Design Vibe: "${vibe.name}"**
 ${vibe.description}
 
-Keywords to embody: ${vibe.keywords.join(', ')}
+**Scale: ${scale}**
+Keywords: ${vibe.keywords.join(', ')}
 
-Interpret this vibe creatively:
-- Choose colors, gradients, and visual styling that embody this atmosphere
-- Select a font from Google Fonts that perfectly matches this vibe
-- Apply consistent visual language throughout the entire interface
-- You have freedom in the specific implementation, but the overall feel MUST match this vibe
+Interpret this vibe creatively — choose colors, typography, and styling that embody this atmosphere.
 `;
     }
     // Build context instructions (ignore empty strings and "null" strings)
@@ -64,7 +63,7 @@ TECH STACK: ${techStack}
 FILE PATH: ${filePath}
 
 Remember: Return a COMPLETE file ready to save at ${filePath}`.trim();
-    const result = await generateWithGemini(systemPrompt, request);
+    const result = await generateWithGemini(systemPrompt, request, undefined, "high");
     return {
         content: [{ type: "text", text: result }],
     };

package/build/tools/generate-vibes.d.ts

@@ -0,0 +1,23 @@
+import { z } from "zod";
+export declare const generateVibesSchema: {
+    projectDescription: z.ZodString;
+    projectType: z.ZodOptional<z.ZodString>;
+    targetAudience: z.ZodOptional<z.ZodString>;
+};
+export declare function generateVibes(params: {
+    projectDescription: string;
+    projectType?: string;
+    targetAudience?: string;
+}): Promise<{
+    content: {
+        type: "text";
+        text: string;
+    }[];
+    vibes: any;
+} | {
+    content: {
+        type: "text";
+        text: string;
+    }[];
+    vibes?: undefined;
+}>;

package/build/tools/generate-vibes.js

@@ -0,0 +1,94 @@
+import { z } from "zod";
+import { generateWithGemini } from "../lib/gemini.js";
+export const generateVibesSchema = {
+    projectDescription: z.string().describe("Brief description of the project. " +
+        "Example: 'A SaaS dashboard for managing customer support tickets'"),
+    projectType: z.string().optional().describe("Type of project. " +
+        "Examples: 'landing page', 'dashboard', 'e-commerce', 'portfolio', 'blog', 'mobile app'"),
+    targetAudience: z.string().optional().describe("Who will use this app. " +
+        "Examples: 'developers', 'enterprise clients', 'young consumers', 'creative professionals'"),
+};
+const GENERATE_VIBES_PROMPT = `Generate 5 distinct mood/atmosphere options (VIBES) that match different interpretations of the project.
+
+Each vibe should represent a unique visual direction and feeling.
+Describe the mood, not specific colors - let the designer interpret creatively.
+Think: "Corporate & Trustworthy" vs "Playful & Vibrant" vs "Dark & Techy"
+
+IMPORTANT - Each vibe MUST include a SCALE recommendation:
+- "zoomed" = Large elements, big buttons, big text, full-width cards (e.g., kids apps, accessibility-focused)
+- "refined" = Subtle scale, smaller typography, contained elements, elegant proportions (e.g., luxury, Linear.app, Raycast)
+- "balanced" = Standard scale, middle ground
+
+The scale is NOT about density (dense vs sparse), it's about the SIZE of elements.
+A luxury watch e-commerce site has refined/small scale. A kids learning platform has zoomed/large scale.
+
+OUTPUT FORMAT (JSON):
+Return ONLY a valid JSON array with exactly 5 vibes. No markdown, no explanation.
+
+[
+  {
+    "emoji": "🏛️",
+    "name": "Vibe Name",
+    "description": "2-3 sentences describing the mood and atmosphere.",
+    "scale": "refined" | "balanced" | "zoomed",
+    "keywords": ["keyword1", "keyword2", "keyword3"]
+  }
+]`;
+export async function generateVibes(params) {
+    const { projectDescription, projectType, targetAudience } = params;
+    // Build context for Gemini
+    let contextParts = [`Project: ${projectDescription}`];
+    if (projectType) {
+        contextParts.push(`Type: ${projectType}`);
+    }
+    if (targetAudience) {
+        contextParts.push(`Target Audience: ${targetAudience}`);
+    }
+    const userPrompt = contextParts.join("\n");
+    const result = await generateWithGemini(GENERATE_VIBES_PROMPT, userPrompt, undefined, // default model
+    "high" // high thinking for creative vibes
+    );
+    // Parse the JSON response
+    try {
+        // Clean the response (remove potential markdown code blocks)
+        let cleanedResult = result.trim();
+        if (cleanedResult.startsWith("```json")) {
+            cleanedResult = cleanedResult.slice(7);
+        }
+        if (cleanedResult.startsWith("```")) {
+            cleanedResult = cleanedResult.slice(3);
+        }
+        if (cleanedResult.endsWith("```")) {
+            cleanedResult = cleanedResult.slice(0, -3);
+        }
+        cleanedResult = cleanedResult.trim();
+        const vibes = JSON.parse(cleanedResult);
+        // Format vibes for display
+        const formattedVibes = vibes.map((vibe, index) => {
+            return `${index + 1}. ${vibe.emoji} "${vibe.name}"
+   ${vibe.description}
+   Scale: ${vibe.scale} | Keywords: ${vibe.keywords.join(", ")}`;
+        }).join("\n\n");
+        return {
+            content: [
+                {
+                    type: "text",
+                    text: `Here are 5 design vibes generated for your project:\n\n${formattedVibes}\n\n---\n\nAsk the user to select one vibe. Once selected, pass it to create_frontend via the designSystem.vibe parameter with:\n- name: The vibe name (e.g., "Pristine Museum")\n- description: The full description\n- keywords: The array of keywords`,
+                },
+            ],
+            // Also return structured data for programmatic use
+            vibes,
+        };
+    }
+    catch {
+        // If parsing fails, return raw result
+        return {
+            content: [
+                {
+                    type: "text",
+                    text: `Generated vibes:\n\n${result}\n\n---\n\nNote: Could not parse as JSON. Please extract the vibes manually.`,
+                },
+            ],
+        };
+    }
+}

package/build/tools/modify-frontend.js

@@ -37,7 +37,7 @@ ${targetCode}
 MODIFICATION REQUESTED: ${modification}
 
 Remember: Return ONLY the find/replace block. ONE modification, surgical precision.`.trim();
-    const result = await generateWithGemini(systemPrompt, modification);
+    const result = await generateWithGemini(systemPrompt, modification, undefined, "minimal");
     return {
         content: [{ type: "text", text: result }],
     };

package/build/tools/snippet-frontend.js

@@ -39,7 +39,7 @@ INSERTION CONTEXT:
 ${insertionContext}
 
 Generate a snippet that will integrate smoothly at this location.`.trim();
-    const result = await generateWithGemini(systemPrompt, request);
+    const result = await generateWithGemini(systemPrompt, request, undefined, "minimal");
     return {
         content: [{ type: "text", text: result }],
     };

package/package.json

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