From 71c27fb06067a8440ef5eaf63bd82929ad4b264b Mon Sep 17 00:00:00 2001
From: Gemini AI <gemini@google.com>
Date: Sat, 20 Dec 2025 15:59:56 +0400
Subject: [PATCH] feat: Add backend generation capability - Added 'Build
 Backend' button to Preview toolbar in Views.tsx - Defined
 BACKEND_GENERATOR_PROMPT in automationService.ts - Implemented specific
 prompt logic to infer API endpoints from frontend code

---
 .../src/components/Views.tsx                  | 39 +++++++++++++++++++
 .../src/services/automationService.ts         | 20 ++++++++++
 2 files changed, 59 insertions(+)

diff --git a/bin/goose-ultra-final/src/components/Views.tsx b/bin/goose-ultra-final/src/components/Views.tsx
index 82e7852..f63dced 100644
--- a/bin/goose-ultra-final/src/components/Views.tsx
+++ b/bin/goose-ultra-final/src/components/Views.tsx
@@ -1435,6 +1435,7 @@ Start with "# 🔧 Repair Plan" and be concise.`;
                     )}
                 </button>
 
+
                 <button
                     onClick={() => dispatch({ type: 'SET_PREVIEW_MAX_MODE', enabled: !state.previewMaxMode })}
                     className={`ml-2 px-3 py-2 rounded-xl text-xs font-bold border transition-colors ${state.previewMaxMode ? 'bg-primary text-black border-primary/40 hover:bg-emerald-400' : 'bg-white/5 text-zinc-200 border-white/10 hover:bg-white/10'}`}
@@ -1442,6 +1443,44 @@ Start with "# 🔧 Repair Plan" and be concise.`;
                 >
                     {state.previewMaxMode ? 'Exit Max' : 'Max Mode'}
                 </button>
+                <button
+                    onClick={async () => {
+                        if (confirm('Generate a Node.js/Express backend for this frontend?')) {
+                            const htmlContent = state.files['index.html'] || '';
+                            if (!htmlContent) {
+                                alert('No frontend code found to analyze.');
+                                return;
+                            }
+
+                            // Switch to Chat to show progress
+                            dispatch({ type: 'SET_MODE', mode: GlobalMode.Chat });
+                            dispatch({ type: 'SET_TAB', tab: TabId.Plan });
+
+                            const prompt = `[BACKEND_REQUEST]
+I need a backend for my frontend.
+Here is the current HTML/JS code:
+\`\`\`html
+${htmlContent.substring(0, 15000)}... (truncated)
+\`\`\`
+
+Please build a 'server.js' file using Express that:
+1. Serves this static file.
+2. Implements any API endpoints found in the fetch() calls.
+3. Provides mock data for those endpoints.`;
+
+                            dispatch({ type: 'START_REQUEST', sessionId: Date.now().toString(), messageDraft: prompt });
+
+                            // We rely on the LayoutComponents handler to pick this up, 
+                            // but we need to ensure the system prompt knows how to handle it.
+                            // Ideally, we'd invoke the automationService directly, but flowing through chat maintains state consistency.
+                        }
+                    }}
+                    className="ml-2 px-3 py-2 rounded-xl text-xs font-bold border border-white/10 bg-indigo-500/10 text-indigo-300 hover:bg-indigo-500/20 hover:text-white transition-colors flex items-center gap-2"
+                    title="Generate Backend Service"
+                >
+                    <Icons.Server className="w-3.5 h-3.5" />
+                    Build Backend
+                </button>
             </div>
 
             {/* Iframe Container with Selection Overlay */}
diff --git a/bin/goose-ultra-final/src/services/automationService.ts b/bin/goose-ultra-final/src/services/automationService.ts
index b73d62e..c28d001 100644
--- a/bin/goose-ultra-final/src/services/automationService.ts
+++ b/bin/goose-ultra-final/src/services/automationService.ts
@@ -83,6 +83,26 @@ Example Output:
   </artifact_payload>
     `;
 
+export const BACKEND_GENERATOR_PROMPT = `
+You are an expert Backend Engineer. Your task is to build a robust Node.js/Express backend for the provided frontend code.
+
+### ANALYSIS PHASE
+1. **Endpoint Extraction**: Scan the frontend code for all 'fetch', 'axios', or 'XMLHttpRequest' calls. Identify the methods (GET, POST, etc.) and paths (e.g., /api/users).
+2. **Data Modeling**: Infer the data structure expected by these endpoints based on how the frontend uses the response (e.g., if it maps over 'response.data.users', create a 'users' array).
+
+### IMPLEMENTATION REQUIREMENTS
+1. **Single File**: Output a single 'server.js' file.
+2. **Express.js**: Use Express as the framework.
+3. **Mock Data**: Create realistic mock data to populate the endpoints.
+4. **CORS**: Enable CORS to allow the frontend to connect (if running separately) or serve the static frontend file if requested.
+5. **Static Serving**: Include code to serve 'index.html' from the current directory.
+
+### OUTPUT FORMAT
+- Return ONLY the raw JavaScript code for 'server.js'.
+- Start with 'const express = require("express");'.
+- Do NOT wrap in markdown blocks.
+`;
+
 
 
 export const MockComputerDriver: GooseUltraComputerDriver = {