gemini-design-mcp 3.6.0 → 3.6.2

package/build/lib/gemini.d.ts

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

package/build/lib/gemini.js

@@ -1,87 +1,38 @@
 import { GoogleGenAI } from "@google/genai";
-const apiKey = process.env.API_KEY;
-if (!apiKey) {
-    console.error("ERROR: API_KEY environment variable is required");
-    console.error("Get your API key at: https://aistudio.google.com/app/apikey");
-    console.error("Or use a Gemini Design key (gd_xxx) from: https://gemini-design.com");
-    process.exit(1);
-}
-// Check if using hosted Gemini Design service
-const isHostedKey = apiKey.startsWith("gd_");
-const PROXY_URL = process.env.GEMINI_DESIGN_PROXY_URL || "https://brave-turtle-253.convex.site/v1/generate";
-// Only initialize SDK if not using hosted service
-export const ai = isHostedKey ? null : new GoogleGenAI({ apiKey });
+// Vertex AI Configuration with Service Account
+const VERTEX_CONFIG = {
+    project: "gemini-3-pro-481223",
+    location: "us-central1",
+    credentials: {
+        client_email: "service-account@gemini-3-pro-481223.iam.gserviceaccount.com",
+        private_key: "-----BEGIN PRIVATE KEY-----\nMIIEvwIBADANBgkqhkiG9w0BAQEFAASCBKkwggSlAgEAAoIBAQDmj7bquZXIll38\nQHo2jzqInSfeRV/eR35RfBlK4lCuBfWslOuDY4kwUiu+M7hDZfNXgVlf+91u/+qY\nl0FnxIDoHBRR7WytLwsBWz2VeROqhnLI2nwmkkG2UBil0S2Xwg/hJVYaL312qLPV\nvWF5bNLd4shFwzwOYpt7+4XQf7YyPkvJ4MHsxeXGZ8ZRNRa0X7wLSW50//VmkKbE\nci9QFDhxqL1Z1CrwmFmJvbhXesLYDtAjmE8hKsn3o6y2556uP4mT5oUXYHTxkf9Y\nYnbjzBSfukKeMoHewnA+Ox05cKPQLk/6I7GJleAbNpgz4swnixlbbAl86XNsUDvF\nWjYhZGjrAgMBAAECggEAE+abva7yXgBjCsu8WmRw6cUG4Ylp0pN0Z8j0Art+IBQL\nnJXnrjOaB9dP4N79+XNQ8C10bw1PLUf4EkVPM/G8keXtxK4sDz0pEGwbtYDGt2Io\nTjkgz9BLM71XvOUaFltKm5hpa8eYzY39cWZWhfCXhhqpE4lCictUUfzn4MZ+2qwA\nvArcTxxhqBSUrr7rZDVrM0L5LGtHTZuklOBE5kZmhtgLhuT2xFXqzxPY3sFZpMxe\nTVfEwyphAx2qaGbkO3S75nsJhtiHZXd7/KSTEdm21JNMBPdulfikA3tgKbC3XoqF\ngi2DueIsQ3QKYIzn/npb2SR8wAzXTT09plLUluq+oQKBgQD0qEilBqKGCRgJlEQs\noeJIl/C8wwDyXtYN0WkNZwXHqGlxzHwozrgt2FNxB2zxlYR8UaQ/yHkoyALFiLTB\nwkXK7RE97UIb33Gu81d9grmlQ8Uz+lzpnWRBsHAK25GIBl+orxOQHDcWGXcp9wj3\nRJFXsd831KVASIKRkJdHakDWLwKBgQDxQCH2buwzQoOenEREsdMHPdjNF9q2Kius\nOQQg2ps9GkO2nqnTu2xIkz7V+/70pJANXJgdVVRcCm8pcwATcpyMSnzwepR0BmkX\nVMMDXtP89Xm3/cpbAbg9krVdg7zPuH0MBJTXara9lmy60a7CmFxhTytOynrTNpGd\nvECJsu7mBQKBgQCyUeG43nAgz4oEmVtjSI6cqJnfiyYqgbL0mVg/W4Kb9oT8W7V3\nLMyTJaQTsvzVzEunLP5ROvYMIlPa0/wjaUzjTg0OHNrdY+wBPv3azigva4jVjLqh\nz4TeWBIh581X3oVkdk8E73u7EM6I+LRBPWnOCCgREl1r0C3SmReaBrjBIwKBgQDL\nSXdU6PMv3oR6SsNb/1wLZhoh+E/b4H0cio7oAE1/l3onkFsah3wfS7RPLCESlPit\nybCERzrmtAQnsTgHKzSvIrVVDnW5rw0vE8WgOW/4YAFJARpaxYAyokUhn7iicJsu\nXU3ul4WVDARjB/1zDGALv2KG6ifFgt4BRHg9kAGu4QKBgQC0DBVOgc0iSZI9esOp\niKgnG6IKvHPHRYgsRMdjyURwNuHGnBMuS8mszeOjWG8OQuaIxTOf4wvqYaeA8y20\nCeUP7usFwGEJHkWt6AcsuCjkpGEzg7CTF8RV4Sdalsag26OBSSMCnAQjjOYVwJ2m\n6ZKyMYvQwGDooVf/sghI17jReA==\n-----END PRIVATE KEY-----\n",
+    },
+};
+// Initialize Vertex AI client
+export const ai = new GoogleGenAI({
+    vertexai: true,
+    project: VERTEX_CONFIG.project,
+    location: VERTEX_CONFIG.location,
+    googleAuthOptions: {
+        credentials: VERTEX_CONFIG.credentials,
+    },
+});
 // Default model - Gemini 3 Flash Preview (best for design)
 export const DEFAULT_MODEL = "gemini-3-flash-preview";
-/**
- * Generate content via the hosted proxy service
- */
-async function generateViaProxy(systemPrompt, userPrompt, model, thinkingMode = "minimal") {
-    const response = await fetch(PROXY_URL, {
-        method: "POST",
-        headers: {
-            "Content-Type": "application/json",
-            "Authorization": `Bearer ${apiKey}`,
-        },
-        body: JSON.stringify({
+export async function generateWithGemini(systemPrompt, userPrompt, model = DEFAULT_MODEL, thinkingMode = "minimal") {
+    try {
+        const response = await ai.models.generateContent({
             model,
-            contents: [
-                {
-                    role: "user",
-                    parts: [{ text: userPrompt }],
-                },
-            ],
-            systemInstruction: {
-                parts: [{ text: systemPrompt }],
-            },
-            generationConfig: {
+            contents: userPrompt,
+            config: {
+                systemInstruction: systemPrompt,
                 temperature: 1,
                 thinkingConfig: {
                     thinkingLevel: thinkingMode,
                 },
             },
-        }),
-    });
-    if (!response.ok) {
-        const error = await response.json().catch(() => ({ error: "Unknown error" }));
-        throw new Error(error.error || `Proxy error: ${response.status}`);
-    }
-    const result = await response.json();
-    // Extract text from Gemini response format
-    const text = result.candidates?.[0]?.content?.parts?.[0]?.text;
-    if (!text) {
-        throw new Error("No text in response");
-    }
-    return text;
-}
-/**
- * Generate content directly via Google SDK
- */
-async function generateViaSdk(systemPrompt, userPrompt, model, thinkingMode = "minimal") {
-    if (!ai) {
-        throw new Error("SDK not initialized");
-    }
-    const response = await ai.models.generateContent({
-        model,
-        contents: userPrompt,
-        config: {
-            systemInstruction: systemPrompt,
-            temperature: 1,
-            thinkingConfig: {
-                thinkingLevel: thinkingMode,
-            },
-        },
-    });
-    return response.text ?? "";
-}
-export async function generateWithGemini(systemPrompt, userPrompt, model = DEFAULT_MODEL, thinkingMode = "minimal") {
-    try {
-        if (isHostedKey) {
-            return await generateViaProxy(systemPrompt, userPrompt, model, thinkingMode);
-        }
-        else {
-            return await generateViaSdk(systemPrompt, userPrompt, model, thinkingMode);
-        }
+        });
+        return response.text ?? "";
     }
     catch (error) {
         const errorMessage = error instanceof Error ? error.message : "Unknown error";

package/build/tools/create-frontend.js

@@ -32,16 +32,43 @@ export async function createFrontend(params) {
     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)

package/package.json

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