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:
@@ -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 */}
|
||||||
|
|||||||
@@ -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 = {
|
||||||
|
|||||||
Reference in New Issue
Block a user