gemini-design-mcp 1.0.4 → 2.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/build/index.js CHANGED
@@ -2,47 +2,73 @@
2
2
  import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
3
3
  import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js";
4
4
  import { generateFrontendSchema, generateFrontend } from "./tools/generate-frontend.js";
5
- import { improveFrontendSchema, improveFrontend } from "./tools/improve-frontend.js";
6
- import { suggestDesignSchema, suggestDesign } from "./tools/suggest-design.js";
7
- import { patchFrontendSchema, patchFrontend } from "./tools/patch-frontend.js";
8
5
  // Create MCP server
9
6
  const server = new McpServer({
10
7
  name: "gemini-design-mcp",
11
- version: "1.0.0",
8
+ version: "2.0.0",
12
9
  });
13
- // Tool 1: generate_frontend
14
- server.tool("generate_frontend", `Generate frontend code (components, pages, sections) with Gemini 3 Pro.
15
- The calling agent MUST provide project context to ensure design consistency.
16
- If new project, pass context=null and Gemini will create a new design system.
17
- Gemini has 1M tokens of context - feel free to send multiple files.
18
-
19
- IMPORTANT: Do NOT include design/style preferences in the request (colors, fonts, effects, "modern", "sleek", etc.).
20
- Only describe WHAT to create functionally (e.g., "a login page with email/password fields and social login").
21
- Gemini has full creative freedom for all visual decisions.`, generateFrontendSchema, generateFrontend);
22
- // Tool 2: improve_frontend
23
- server.tool("improve_frontend", `Improve existing frontend code based on provided feedback.
24
- Use for design modifications, UX improvements, or visual refactoring.`, improveFrontendSchema, improveFrontend);
25
- // Tool 3: suggest_design
26
- server.tool("suggest_design", `Returns design suggestions without generating code.
27
- Useful for exploring directions before coding, saves tokens.`, suggestDesignSchema, suggestDesign);
28
- // Tool 4: patch_frontend
29
- server.tool("patch_frontend", `Apply targeted modifications to existing code using JSON patches.
30
- Returns ONLY patches, not full code - much more efficient for modifications.
31
-
32
- The calling agent should:
33
- 1. Provide a file_structure summary (what's in the file, line ranges)
34
- 2. Send ONLY the target_section that needs modification (not the entire file)
35
- 3. List the modifications to apply
36
-
37
- This tool is language-agnostic and works with any programming language.
38
- Use the optional 'language' parameter to help Gemini understand syntax.
39
-
40
- Returns JSON patches with operations: insert_after, insert_before, replace, delete.`, patchFrontendSchema, patchFrontend);
10
+ // Tool: generate_frontend
11
+ server.tool("generate_frontend", `Generate premium, production-ready frontend code with Gemini's 1M context window.
12
+
13
+ ⚠️ CRITICAL: DO NOT call this tool immediately. Follow this flow STRICTLY:
14
+
15
+ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
16
+ STEP 1: CHECK PROJECT STATE (before ANY tool call)
17
+ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
18
+
19
+ A) EMPTY REPO (no package.json, no framework installed):
20
+ DO NOT call this tool
21
+ Ask user: "What tech stack do you want? (Next.js, React + Vite, Vue, etc.)"
22
+ Wait for user to initialize the project first
23
+ Only proceed after project is set up
24
+
25
+ B) PROJECT INITIALIZED but NO existing pages/components/design:
26
+ DO NOT call this tool yet
27
+ MANDATORY: Run vibe selection questionnaire first (see Step 2)
28
+
29
+ C) PROJECT WITH EXISTING CODE:
30
+ First, analyze the codebase to understand:
31
+ Tech stack (React? Vue? Next.js? Tailwind? CSS Modules?)
32
+ Project structure (where to put pages/components)
33
+ • Existing design patterns (colors, spacing, component style)
34
+ Then pass relevant files as context parameter
35
+
36
+ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
37
+ STEP 2: VIBE SELECTION (required for new designs)
38
+ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
39
+
40
+ If the project has no existing design system, you MUST:
41
+
42
+ 1. Generate 5 vibe options based on the user's request, e.g.:
43
+ • 💼 "Corporate & Clean" - Professional, trustworthy, minimal
44
+ • 🎨 "Playful & Vibrant" - Fun, colorful, energetic
45
+ • 🌙 "Dark & Techy" - Dark mode, neon accents, developer aesthetic
46
+ • 🌿 "Calm & Minimal" - Zen, whitespace, soft tones
47
+ • 🚀 "Bold & Modern" - Gradients, geometric shapes, striking
48
+
49
+ 2. Generate 5 font suggestions (real Google Fonts names)
50
+
51
+ 3. Present options to user and wait for selection
52
+
53
+ 4. Only THEN call this tool with the designSystem parameter filled
54
+
55
+ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
56
+ STEP 3: CALL THIS TOOL
57
+ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
58
+
59
+ Only after completing the above steps:
60
+ - New project: context=null, designSystem={font, vibe}, techStack specified
61
+ - Existing project: context=<relevant files>, techStack from analysis
62
+
63
+ CAPABILITIES:
64
+ - Creates visually stunning, feature-rich interfaces (not wireframes)
65
+ - Supports any tech stack: React, Vue, Svelte, HTML/CSS, Next.js, etc.
66
+ - Maintains design consistency when given project context`, generateFrontendSchema, generateFrontend);
41
67
  // Start server
42
68
  async function main() {
43
69
  const transport = new StdioServerTransport();
44
70
  await server.connect(transport);
45
- console.error("gemini-design-mcp v1.0.0 running on stdio");
71
+ console.error("gemini-design-mcp v2.0.0 running on stdio");
46
72
  }
47
73
  main().catch((error) => {
48
74
  console.error("Fatal error:", error);
@@ -1,4 +1,4 @@
1
1
  import { GoogleGenAI } from "@google/genai";
2
2
  export declare const ai: GoogleGenAI;
3
- export declare const DEFAULT_MODEL = "gemini-3-pro-preview";
3
+ export declare const DEFAULT_MODEL = "gemini-3-flash-preview";
4
4
  export declare function generateWithGemini(systemPrompt: string, userPrompt: string, model?: string): Promise<string>;
@@ -7,7 +7,7 @@ if (!apiKey) {
7
7
  }
8
8
  export const ai = new GoogleGenAI({ apiKey });
9
9
  // Default model - Gemini 3 Pro Preview (best for design)
10
- export const DEFAULT_MODEL = "gemini-3-pro-preview";
10
+ export const DEFAULT_MODEL = "gemini-3-flash-preview";
11
11
  export async function generateWithGemini(systemPrompt, userPrompt, model = DEFAULT_MODEL) {
12
12
  try {
13
13
  const response = await ai.models.generateContent({
@@ -1,4 +1 @@
1
- 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";
2
- 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";
3
- 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";
4
- 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";
1
+ export declare const GENERATE_FRONTEND_PROMPT = "You are an elite UI/UX Designer creating production-ready, visually stunning interfaces.\n\nDESIGN EXCELLENCE REQUIREMENTS:\n\n1. **MAXIMUM DETAIL AND DENSITY**\n - The interface MUST be densely populated and feature-rich\n - NEVER produce simple wireframes, empty containers, or placeholder content\n - Fill the space with intricate details, realistic content, background elements, and meaningful UI components\n - Every section should feel like a fully finished, polished product\n\n2. **PREMIUM VISUAL STYLING**\n - Apply high-end design principles throughout\n - Use sophisticated styling: nuanced shadows, subtle gradients, refined borders, micro-textures\n - Add depth and dimension with layered elements\n - The aesthetic MUST feel modern, premium, and visually captivating\n - Use professional color palettes with proper contrast and hierarchy\n\n3. **COMPREHENSIVE INTERACTIVITY**\n - Design every element to look tangible and interactive\n - Include visual states: hover effects, focus rings, active states, transitions\n - Buttons should look clickable, inputs should look fillable\n - The interface should feel alive, not static\n\n4. **LAYOUT EXCELLENCE**\n - Use proper visual hierarchy with clear focal points\n - Apply consistent spacing rhythm throughout\n - Ensure the layout breathes - balance density with whitespace\n - Full viewport height designs (min-height: 100vh on body)\n - No awkward gaps or orphaned elements\n\n5. **RESPONSIVE BY DEFAULT**\n - Designs MUST work flawlessly on mobile and desktop\n - Touch-friendly sizing for interactive elements on mobile\n - Stackable grids that adapt naturally to screen size\n\n6. **REALISTIC CONTENT**\n - Use believable placeholder content (real-looking names, dates, numbers)\n - Include appropriate icons, avatars, and imagery\n - Data visualizations should have realistic data points\n - Text should be contextually appropriate, not \"Lorem ipsum\"\n\nTECHNICAL RULES:\n- Return COMPLETE, functional code - never use \"// TODO\", \"...\", or placeholders\n- If CONTEXT is provided, match its design language and component patterns\n- If no context, you have full creative freedom but MUST achieve premium quality\n- Respect the specified tech stack exactly\n- Return ONLY the code, no explanations or markdown fences";
@@ -1,58 +1,47 @@
1
- export const GENERATE_FRONTEND_PROMPT = `You are an expert UI/UX designer and frontend developer.
2
-
3
- RULES:
4
- 1. COMPLETE and functional code - never use placeholders like "// TODO" or "..."
5
- 2. If CONTEXT is provided, match the existing style
6
- 3. If no context, you have full creative freedom
7
- 4. Respect the requested tech stack/framework
8
- 5. Return ONLY the code, no explanations`;
9
- export const IMPROVE_FRONTEND_PROMPT = `You are an expert UI/UX designer and frontend developer.
10
- You improve existing frontend code based on the feedback provided.
11
-
12
- RULES:
13
- 1. Keep the general structure unless asked otherwise
14
- 2. Only improve the aspects mentioned in the feedback
15
- 3. Maintain consistency with the rest of the code
16
- 4. Return the COMPLETE improved code, not just the changes
17
- 5. No explanations, just the code`;
18
- export const SUGGEST_DESIGN_PROMPT = `You are an expert UI/UX designer.
19
- You provide concise and actionable design suggestions.
20
-
21
- RULES:
22
- 1. Short and precise suggestions
23
- 2. Focus on visual impact and UX
24
- 3. Propose 3-5 ideas maximum
25
- 4. Format: bullet points
26
- 5. No code, just ideas`;
27
- export const PATCH_FRONTEND_PROMPT = `You are an expert developer.
28
- You return ONLY JSON patches to modify code. NEVER return full code.
29
-
30
- You receive:
31
- - A file structure overview (to understand context)
32
- - A target section (the actual code to modify)
33
- - A list of modifications to apply
34
-
35
- OUTPUT FORMAT (strict JSON, no markdown fences):
36
- {
37
- "patches": [
38
- {
39
- "operation": "insert_after | insert_before | replace | delete",
40
- "find": "exact unique text/code snippet to locate in target section",
41
- "content": "new code to insert or replace with (omit for delete)"
42
- }
43
- ]
44
- }
45
-
46
- RULES:
47
- 1. NEVER return full code, ONLY the JSON patches object
48
- 2. "find" MUST be an exact string that exists in the target section (copy-paste precision)
49
- 3. "find" MUST be unique within the target section - use enough context to ensure uniqueness
50
- 4. Keep patches minimal - only what's needed for each modification
51
- 5. Preserve original indentation and code style
52
- 6. For multi-line "find" or "content", use \\n for newlines in JSON
53
- 7. Operations:
54
- - "insert_after": insert content after the found text
55
- - "insert_before": insert content before the found text
56
- - "replace": replace the found text with content
57
- - "delete": remove the found text (no content needed)
58
- 8. Return ONLY valid JSON, no explanations, no markdown`;
1
+ export const GENERATE_FRONTEND_PROMPT = `You are an elite UI/UX Designer creating production-ready, visually stunning interfaces.
2
+
3
+ DESIGN EXCELLENCE REQUIREMENTS:
4
+
5
+ 1. **MAXIMUM DETAIL AND DENSITY**
6
+ - The interface MUST be densely populated and feature-rich
7
+ - NEVER produce simple wireframes, empty containers, or placeholder content
8
+ - Fill the space with intricate details, realistic content, background elements, and meaningful UI components
9
+ - Every section should feel like a fully finished, polished product
10
+
11
+ 2. **PREMIUM VISUAL STYLING**
12
+ - Apply high-end design principles throughout
13
+ - Use sophisticated styling: nuanced shadows, subtle gradients, refined borders, micro-textures
14
+ - Add depth and dimension with layered elements
15
+ - The aesthetic MUST feel modern, premium, and visually captivating
16
+ - Use professional color palettes with proper contrast and hierarchy
17
+
18
+ 3. **COMPREHENSIVE INTERACTIVITY**
19
+ - Design every element to look tangible and interactive
20
+ - Include visual states: hover effects, focus rings, active states, transitions
21
+ - Buttons should look clickable, inputs should look fillable
22
+ - The interface should feel alive, not static
23
+
24
+ 4. **LAYOUT EXCELLENCE**
25
+ - Use proper visual hierarchy with clear focal points
26
+ - Apply consistent spacing rhythm throughout
27
+ - Ensure the layout breathes - balance density with whitespace
28
+ - Full viewport height designs (min-height: 100vh on body)
29
+ - No awkward gaps or orphaned elements
30
+
31
+ 5. **RESPONSIVE BY DEFAULT**
32
+ - Designs MUST work flawlessly on mobile and desktop
33
+ - Touch-friendly sizing for interactive elements on mobile
34
+ - Stackable grids that adapt naturally to screen size
35
+
36
+ 6. **REALISTIC CONTENT**
37
+ - Use believable placeholder content (real-looking names, dates, numbers)
38
+ - Include appropriate icons, avatars, and imagery
39
+ - Data visualizations should have realistic data points
40
+ - Text should be contextually appropriate, not "Lorem ipsum"
41
+
42
+ TECHNICAL RULES:
43
+ - Return COMPLETE, functional code - never use "// TODO", "...", or placeholders
44
+ - If CONTEXT is provided, match its design language and component patterns
45
+ - If no context, you have full creative freedom but MUST achieve premium quality
46
+ - Respect the specified tech stack exactly
47
+ - Return ONLY the code, no explanations or markdown fences`;
@@ -3,11 +3,49 @@ export declare const generateFrontendSchema: {
3
3
  request: z.ZodString;
4
4
  context: z.ZodNullable<z.ZodString>;
5
5
  techStack: z.ZodOptional<z.ZodString>;
6
+ designSystem: z.ZodOptional<z.ZodObject<{
7
+ font: z.ZodOptional<z.ZodString>;
8
+ vibe: z.ZodOptional<z.ZodObject<{
9
+ name: z.ZodString;
10
+ description: z.ZodString;
11
+ keywords: z.ZodArray<z.ZodString, "many">;
12
+ }, "strip", z.ZodTypeAny, {
13
+ name: string;
14
+ description: string;
15
+ keywords: string[];
16
+ }, {
17
+ name: string;
18
+ description: string;
19
+ keywords: string[];
20
+ }>>;
21
+ }, "strip", z.ZodTypeAny, {
22
+ font?: string | undefined;
23
+ vibe?: {
24
+ name: string;
25
+ description: string;
26
+ keywords: string[];
27
+ } | undefined;
28
+ }, {
29
+ font?: string | undefined;
30
+ vibe?: {
31
+ name: string;
32
+ description: string;
33
+ keywords: string[];
34
+ } | undefined;
35
+ }>>;
6
36
  };
7
37
  export declare function generateFrontend(params: {
8
38
  request: string;
9
39
  context: string | null;
10
40
  techStack?: string;
41
+ designSystem?: {
42
+ font?: string;
43
+ vibe?: {
44
+ name: string;
45
+ description: string;
46
+ keywords: string[];
47
+ };
48
+ };
11
49
  }): Promise<{
12
50
  content: {
13
51
  type: "text";
@@ -8,11 +8,42 @@ export const generateFrontendSchema = {
8
8
  "Null if new project."),
9
9
  techStack: z.string().optional().describe("Tech stack (e.g., 'React + Tailwind', 'Vue + CSS', 'HTML/CSS vanilla', 'Next.js + shadcn'). " +
10
10
  "If not specified, Gemini will choose based on context."),
11
+ designSystem: z.object({
12
+ font: z.string().optional().describe("Google Font name to use as primary font"),
13
+ vibe: z.object({
14
+ name: z.string().describe("Vibe name (e.g., 'Corporate & Professional')"),
15
+ description: z.string().describe("Mood description (e.g., 'Clean lines, trustworthy feel')"),
16
+ keywords: z.array(z.string()).describe("Style keywords (e.g., ['minimal', 'corporate'])"),
17
+ }).optional().describe("Selected design vibe"),
18
+ }).optional().describe("Design system selection. The calling agent generates vibe options, " +
19
+ "user selects, then pass the selection here for consistent styling."),
11
20
  };
12
21
  export async function generateFrontend(params) {
13
- const { request, context, techStack } = params;
14
- const systemPrompt = `${GENERATE_FRONTEND_PROMPT}
22
+ const { request, context, techStack, designSystem } = params;
23
+ // Build design system instructions if provided
24
+ let designSystemInstructions = '';
25
+ if (designSystem?.font || designSystem?.vibe) {
26
+ const { font, vibe } = designSystem;
27
+ const fontInstructions = font
28
+ ? `- **Font**: Use "${font}" from Google Fonts as the primary font family. Import it in the <head> or via CSS.`
29
+ : '';
30
+ const vibeInstructions = vibe
31
+ ? `- **Design Vibe** "${vibe.name}":
32
+ Mood: ${vibe.description}
33
+ Keywords: ${vibe.keywords.join(', ')}
34
+
35
+ Interpret this vibe creatively - choose colors, gradients, and visual styling that embody this atmosphere. You have freedom in the specific colors, but the overall feel must match this vibe.`
36
+ : '';
37
+ designSystemInstructions = `
38
+ MANDATORY DESIGN SYSTEM (User Selected):
39
+ ${fontInstructions}
40
+ ${vibeInstructions}
15
41
 
42
+ Apply this design system consistently throughout the entire interface.
43
+ `;
44
+ }
45
+ const systemPrompt = `${GENERATE_FRONTEND_PROMPT}
46
+ ${designSystemInstructions}
16
47
  ${techStack ? `TECH STACK: ${techStack}` : ""}`.trim();
17
48
  const userPrompt = context
18
49
  ? `PROJECT CONTEXT (match this style):
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "gemini-design-mcp",
3
- "version": "1.0.4",
3
+ "version": "2.0.0",
4
4
  "description": "MCP server that uses Gemini 3 Pro for frontend/design code generation",
5
5
  "main": "build/index.js",
6
6
  "bin": {
@@ -1,16 +0,0 @@
1
- import { z } from "zod";
2
- export declare const improveFrontendSchema: {
3
- code: z.ZodString;
4
- feedback: z.ZodString;
5
- context: z.ZodOptional<z.ZodString>;
6
- };
7
- export declare function improveFrontend(params: {
8
- code: string;
9
- feedback: string;
10
- context?: string;
11
- }): Promise<{
12
- content: {
13
- type: "text";
14
- text: string;
15
- }[];
16
- }>;
@@ -1,21 +0,0 @@
1
- import { z } from "zod";
2
- import { generateWithGemini } from "../lib/gemini.js";
3
- import { IMPROVE_FRONTEND_PROMPT } from "../prompts/system.js";
4
- export const improveFrontendSchema = {
5
- code: z.string().describe("Current frontend code to improve"),
6
- feedback: z.string().describe("What to improve or change"),
7
- context: z.string().optional().describe("Additional context (other components for consistency)"),
8
- };
9
- export async function improveFrontend(params) {
10
- const { code, feedback, context } = params;
11
- const userPrompt = `CURRENT CODE:
12
- ${code}
13
-
14
- ${context ? `CONTEXT:\n${context}\n` : ""}
15
- FEEDBACK / REQUESTED IMPROVEMENTS:
16
- ${feedback}`;
17
- const result = await generateWithGemini(IMPROVE_FRONTEND_PROMPT, userPrompt);
18
- return {
19
- content: [{ type: "text", text: result }],
20
- };
21
- }
@@ -1,18 +0,0 @@
1
- import { z } from "zod";
2
- export declare const patchFrontendSchema: {
3
- file_structure: z.ZodString;
4
- target_section: z.ZodString;
5
- modifications: z.ZodArray<z.ZodString, "many">;
6
- language: z.ZodOptional<z.ZodString>;
7
- };
8
- export declare function patchFrontend(params: {
9
- file_structure: string;
10
- target_section: string;
11
- modifications: string[];
12
- language?: string;
13
- }): Promise<{
14
- content: {
15
- type: "text";
16
- text: string;
17
- }[];
18
- }>;
@@ -1,28 +0,0 @@
1
- import { z } from "zod";
2
- import { generateWithGemini } from "../lib/gemini.js";
3
- import { PATCH_FRONTEND_PROMPT } from "../prompts/system.js";
4
- export const patchFrontendSchema = {
5
- 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')"),
6
- target_section: z.string().describe("The specific section of code to modify (only the relevant part, not the entire file)"),
7
- modifications: z.array(z.string()).describe("List of modifications to apply to the target section"),
8
- language: z.string().optional().describe("Programming language or framework (e.g., 'typescript', 'python', 'c++', 'swift'). Helps Gemini understand syntax."),
9
- };
10
- export async function patchFrontend(params) {
11
- const { file_structure, target_section, modifications, language } = params;
12
- const langHint = language ? `\nLANGUAGE/FRAMEWORK: ${language}` : "";
13
- const userPrompt = `FILE STRUCTURE OVERVIEW:
14
- ${file_structure}
15
- ${langHint}
16
-
17
- TARGET SECTION TO MODIFY:
18
- \`\`\`
19
- ${target_section}
20
- \`\`\`
21
-
22
- MODIFICATIONS REQUESTED:
23
- ${modifications.map((m, i) => `${i + 1}. ${m}`).join("\n")}`;
24
- const result = await generateWithGemini(PATCH_FRONTEND_PROMPT, userPrompt);
25
- return {
26
- content: [{ type: "text", text: result }],
27
- };
28
- }
@@ -1,14 +0,0 @@
1
- import { z } from "zod";
2
- export declare const suggestDesignSchema: {
3
- description: z.ZodString;
4
- currentApproach: z.ZodOptional<z.ZodString>;
5
- };
6
- export declare function suggestDesign(params: {
7
- description: string;
8
- currentApproach?: string;
9
- }): Promise<{
10
- content: {
11
- type: "text";
12
- text: string;
13
- }[];
14
- }>;
@@ -1,17 +0,0 @@
1
- import { z } from "zod";
2
- import { generateWithGemini } from "../lib/gemini.js";
3
- import { SUGGEST_DESIGN_PROMPT } from "../prompts/system.js";
4
- export const suggestDesignSchema = {
5
- description: z.string().describe("Description of the component/page you want suggestions for"),
6
- currentApproach: z.string().optional().describe("Current approach or constraints to consider"),
7
- };
8
- export async function suggestDesign(params) {
9
- const { description, currentApproach } = params;
10
- const userPrompt = currentApproach
11
- ? `DESCRIPTION: ${description}\n\nCURRENT APPROACH: ${currentApproach}`
12
- : description;
13
- const result = await generateWithGemini(SUGGEST_DESIGN_PROMPT, userPrompt);
14
- return {
15
- content: [{ type: "text", text: result }],
16
- };
17
- }