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
This commit is contained in:
Gemini AI
2025-12-20 15:59:56 +04:00
Unverified
parent 5954b091c0
commit 71c27fb060
2 changed files with 59 additions and 0 deletions

View File

@@ -1435,6 +1435,7 @@ Start with "# 🔧 Repair Plan" and be concise.`;
)} )}
</button> </button>
<button <button
onClick={() => dispatch({ type: 'SET_PREVIEW_MAX_MODE', enabled: !state.previewMaxMode })} 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'}`} 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'} {state.previewMaxMode ? 'Exit Max' : 'Max Mode'}
</button> </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> </div>
{/* Iframe Container with Selection Overlay */} {/* Iframe Container with Selection Overlay */}

View File

@@ -83,6 +83,26 @@ Example Output:
</artifact_payload> </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 = { export const MockComputerDriver: GooseUltraComputerDriver = {