gemini-design-mcp 3.3.0 → 3.4.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

@@ -1,4 +1,4 @@
-import { GoogleGenAI, ThinkingLevel } from "@google/genai";
+import { GoogleGenAI } from "@google/genai";
 const apiKey = process.env.API_KEY;
 if (!apiKey) {
     console.error("ERROR: API_KEY environment variable is required");
@@ -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: {
@@ -37,7 +37,7 @@ async function generateViaProxy(systemPrompt, userPrompt, model) {
             generationConfig: {
                 temperature: 1,
                 thinkingConfig: {
-                    thinkingBudget: 1024, // LOW thinking level
+                    thinkingLevel: thinkingMode,
                 },
             },
         }),
@@ -57,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");
     }
@@ -68,19 +68,19 @@ async function generateViaSdk(systemPrompt, userPrompt, model) {
             systemInstruction: systemPrompt,
             temperature: 1,
             thinkingConfig: {
-                thinkingLevel: ThinkingLevel.LOW,
+                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.js

@@ -64,7 +64,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,85 @@
+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"
+
+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.",
+    "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}
+   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.0",
+  "version": "3.4.0",
   "description": "MCP server that uses Gemini 3 Pro for frontend/design code generation",
   "main": "build/index.js",
   "bin": {