gemini-design-mcp 1.0.2 → 1.0.4

package/build/index.js

@@ -4,6 +4,7 @@ import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js"
 import { generateFrontendSchema, generateFrontend } from "./tools/generate-frontend.js";
 import { improveFrontendSchema, improveFrontend } from "./tools/improve-frontend.js";
 import { suggestDesignSchema, suggestDesign } from "./tools/suggest-design.js";
+import { patchFrontendSchema, patchFrontend } from "./tools/patch-frontend.js";
 // Create MCP server
 const server = new McpServer({
     name: "gemini-design-mcp",
@@ -13,13 +14,30 @@ const server = new McpServer({
 server.tool("generate_frontend", `Generate frontend code (components, pages, sections) with Gemini 3 Pro.
 The calling agent MUST provide project context to ensure design consistency.
 If new project, pass context=null and Gemini will create a new design system.
-Gemini has 1M tokens of context - feel free to send multiple files.`, generateFrontendSchema, generateFrontend);
+Gemini has 1M tokens of context - feel free to send multiple files.
+
+IMPORTANT: Do NOT include design/style preferences in the request (colors, fonts, effects, "modern", "sleek", etc.).
+Only describe WHAT to create functionally (e.g., "a login page with email/password fields and social login").
+Gemini has full creative freedom for all visual decisions.`, generateFrontendSchema, generateFrontend);
 // Tool 2: improve_frontend
 server.tool("improve_frontend", `Improve existing frontend code based on provided feedback.
 Use for design modifications, UX improvements, or visual refactoring.`, improveFrontendSchema, improveFrontend);
 // Tool 3: suggest_design
 server.tool("suggest_design", `Returns design suggestions without generating code.
 Useful for exploring directions before coding, saves tokens.`, suggestDesignSchema, suggestDesign);
+// Tool 4: patch_frontend
+server.tool("patch_frontend", `Apply targeted modifications to existing code using JSON patches.
+Returns ONLY patches, not full code - much more efficient for modifications.
+
+The calling agent should:
+1. Provide a file_structure summary (what's in the file, line ranges)
+2. Send ONLY the target_section that needs modification (not the entire file)
+3. List the modifications to apply
+
+This tool is language-agnostic and works with any programming language.
+Use the optional 'language' parameter to help Gemini understand syntax.
+
+Returns JSON patches with operations: insert_after, insert_before, replace, delete.`, patchFrontendSchema, patchFrontend);
 // Start server
 async function main() {
     const transport = new StdioServerTransport();

package/build/prompts/system.d.ts

@@ -1,3 +1,4 @@
 export declare const GENERATE_FRONTEND_PROMPT = "You are an expert UI/UX designer and frontend developer.\n\nRULES:\n1. COMPLETE and functional code - never use placeholders like \"// TODO\" or \"...\"\n2. If CONTEXT is provided, match the existing style\n3. If no context, you have full creative freedom\n4. Respect the requested tech stack/framework\n5. Return ONLY the code, no explanations";
 export declare const IMPROVE_FRONTEND_PROMPT = "You are an expert UI/UX designer and frontend developer.\nYou improve existing frontend code based on the feedback provided.\n\nRULES:\n1. Keep the general structure unless asked otherwise\n2. Only improve the aspects mentioned in the feedback\n3. Maintain consistency with the rest of the code\n4. Return the COMPLETE improved code, not just the changes\n5. No explanations, just the code";
 export declare const SUGGEST_DESIGN_PROMPT = "You are an expert UI/UX designer.\nYou provide concise and actionable design suggestions.\n\nRULES:\n1. Short and precise suggestions\n2. Focus on visual impact and UX\n3. Propose 3-5 ideas maximum\n4. Format: bullet points\n5. No code, just ideas";
+export declare const PATCH_FRONTEND_PROMPT = "You are an expert developer.\nYou return ONLY JSON patches to modify code. NEVER return full code.\n\nYou receive:\n- A file structure overview (to understand context)\n- A target section (the actual code to modify)\n- A list of modifications to apply\n\nOUTPUT FORMAT (strict JSON, no markdown fences):\n{\n  \"patches\": [\n    {\n      \"operation\": \"insert_after | insert_before | replace | delete\",\n      \"find\": \"exact unique text/code snippet to locate in target section\",\n      \"content\": \"new code to insert or replace with (omit for delete)\"\n    }\n  ]\n}\n\nRULES:\n1. NEVER return full code, ONLY the JSON patches object\n2. \"find\" MUST be an exact string that exists in the target section (copy-paste precision)\n3. \"find\" MUST be unique within the target section - use enough context to ensure uniqueness\n4. Keep patches minimal - only what's needed for each modification\n5. Preserve original indentation and code style\n6. For multi-line \"find\" or \"content\", use \\n for newlines in JSON\n7. Operations:\n   - \"insert_after\": insert content after the found text\n   - \"insert_before\": insert content before the found text\n   - \"replace\": replace the found text with content\n   - \"delete\": remove the found text (no content needed)\n8. Return ONLY valid JSON, no explanations, no markdown";

package/build/prompts/system.js

@@ -24,3 +24,35 @@ RULES:
 3. Propose 3-5 ideas maximum
 4. Format: bullet points
 5. No code, just ideas`;
+export const PATCH_FRONTEND_PROMPT = `You are an expert developer.
+You return ONLY JSON patches to modify code. NEVER return full code.
+
+You receive:
+- A file structure overview (to understand context)
+- A target section (the actual code to modify)
+- A list of modifications to apply
+
+OUTPUT FORMAT (strict JSON, no markdown fences):
+{
+  "patches": [
+    {
+      "operation": "insert_after | insert_before | replace | delete",
+      "find": "exact unique text/code snippet to locate in target section",
+      "content": "new code to insert or replace with (omit for delete)"
+    }
+  ]
+}
+
+RULES:
+1. NEVER return full code, ONLY the JSON patches object
+2. "find" MUST be an exact string that exists in the target section (copy-paste precision)
+3. "find" MUST be unique within the target section - use enough context to ensure uniqueness
+4. Keep patches minimal - only what's needed for each modification
+5. Preserve original indentation and code style
+6. For multi-line "find" or "content", use \\n for newlines in JSON
+7. Operations:
+   - "insert_after": insert content after the found text
+   - "insert_before": insert content before the found text
+   - "replace": replace the found text with content
+   - "delete": remove the found text (no content needed)
+8. Return ONLY valid JSON, no explanations, no markdown`;

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

@@ -0,0 +1,18 @@
+import { z } from "zod";
+export declare const patchFrontendSchema: {
+    file_structure: z.ZodString;
+    target_section: z.ZodString;
+    modifications: z.ZodArray<z.ZodString, "many">;
+    language: z.ZodOptional<z.ZodString>;
+};
+export declare function patchFrontend(params: {
+    file_structure: string;
+    target_section: string;
+    modifications: string[];
+    language?: string;
+}): Promise<{
+    content: {
+        type: "text";
+        text: string;
+    }[];
+}>;

package/build/tools/patch-frontend.js

@@ -0,0 +1,28 @@
+import { z } from "zod";
+import { generateWithGemini } from "../lib/gemini.js";
+import { PATCH_FRONTEND_PROMPT } from "../prompts/system.js";
+export const patchFrontendSchema = {
+    file_structure: z.string().describe("Summary of the file structure (e.g., 'lines 1-50: imports, lines 51-100: Header component, lines 101-200: LoginForm')"),
+    target_section: z.string().describe("The specific section of code to modify (only the relevant part, not the entire file)"),
+    modifications: z.array(z.string()).describe("List of modifications to apply to the target section"),
+    language: z.string().optional().describe("Programming language or framework (e.g., 'typescript', 'python', 'c++', 'swift'). Helps Gemini understand syntax."),
+};
+export async function patchFrontend(params) {
+    const { file_structure, target_section, modifications, language } = params;
+    const langHint = language ? `\nLANGUAGE/FRAMEWORK: ${language}` : "";
+    const userPrompt = `FILE STRUCTURE OVERVIEW:
+${file_structure}
+${langHint}
+
+TARGET SECTION TO MODIFY:
+\`\`\`
+${target_section}
+\`\`\`
+
+MODIFICATIONS REQUESTED:
+${modifications.map((m, i) => `${i + 1}. ${m}`).join("\n")}`;
+    const result = await generateWithGemini(PATCH_FRONTEND_PROMPT, userPrompt);
+    return {
+        content: [{ type: "text", text: result }],
+    };
+}

package/package.json

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