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