ai-marketing-app-slotmachine/server.ts

import express from "express";
import path from "path";
import { createServer as createViteServer } from "vite";
import { GoogleGenAI } from "@google/genai";
import dotenv from "dotenv";

dotenv.config();

async function startServer() {
  const app = express();
  const PORT = 3000;

  app.use(express.json());

  // Initialize Gemini client safely
  let ai: GoogleGenAI | null = null;
  const apiKey = process.env.GEMINI_API_KEY;
  if (apiKey) {
    ai = new GoogleGenAI({
      apiKey: apiKey,
      httpOptions: {
        headers: {
          'User-Agent': 'aistudio-build',
        }
      }
    });
  }

  // API Route to enhance the prompt using Gemini
  app.post("/api/enhance-prompt", async (req, res) => {
    try {
      const { slot1, slot2, slot3, appName } = req.body;
      if (!slot1 || !slot2 || !slot3) {
        return res.status(400).json({ error: "Onvoldoende gegevens om prompt te genereren." });
      }

      const cleanAppName = appName || `Marketeer AI Tool - ${slot1}`;

      if (!ai) {
        // Fallback if no API key is configured
        return res.json({
          enhancedPrompt: `# SYSTEEMPROMPT: ${cleanAppName}\n\nAls de GEMINI_API_KEY niet is geconfigureerd in AI Studio Secrets, kunt u dit basis-concept gebruiken voor uw marketing AI app:\n\n## Concept Fiche\n- **Doelgroep/Kanaal**: ${slot1}\n- **AI Functie**: ${slot2}\n- **USP / Waarde**: ${slot3}\n\n## Instructie\nOntwerp een overzichtelijke web-app voor Nederlandse marketeers die ${slot1} helpt door middel van ${slot2}, met als direct resultaat dat het ${slot3}!`
        });
      }

      const promptInput = `
Je bent een expert in AI-marketing en Prompt Engineering. Schrijf een extreem krachtige, professionele, en gedetailleerde "Systeem Prompt" (in het Nederlands) die een marketeer direct kan kopiëren en in een AI-model (zoals Claude, ChatGPT, Gemini, of Cursor) kan stoppen om een werkende applicatie te bouwen.

De slotmachine heeft de volgende combinatie gekozen:
1. Doelgroep / Kanaal: ${slot1}
2. Kern AI-technologie of actie: ${slot2}
3. Marketing-waarde of USP: ${slot3}
Voorlopige naam van de app: ${cleanAppName}

De prompt moet een vaste, gestructureerde en hoogwaardige opbouw hebben.
Schrijf de prompt in het Nederlands. Gebruik de jij-vorm.
Geef een instructie die het AI-model dwingt om een complete, werkende full-stack web-app te schrijven.

De structuur MOET zijn:
# SYSTEEMPROMPT: [Voeg hier een creatieve, professionele, bruikbare AI-appnaam toe gerelateerd aan de invoer]

## Rol & Identiteit
Uitleg over welke specifieke marketing-expert of product development rol het AI-model moet aannemen (bijv. "Je bent een topklasse marketingtech-ontwikkelaar met expertise in ${slot1}...").

## Concept & Toegevoegde Waarde
Een toelichting waarom deze app geniaal is voor ${slot1}, hoe ${slot2} technisch optimaal wordt ingezet, en hoe het de unieke waarde "${slot3}" waarmaakt voor de marketeer.

## Cruciale Functionele Specificaties
Geef een overzicht van minimaal 3 specifieke interactieve functies die deze app MOET bevatten (bijv. een invoerformulier waar de gebruiker input geeft, een real-time AI-generatie preview, een handige "Kopieer naar klembord" of "Exporteren als CSV/PDF" knop, of visualisatie-dashboards).

## Technische Architectuur (Gebruiksvriendelijk)
- Frontend: HTML5, Tailwind CSS (voor een prachtig, modern, minimalistisch en responsief ontwerp in lichte en donkere modus), React of vanilla JS.
- Backend: Eenvoudige Node.js of standalone client met een schone mock of proxy voor API-keys zodat de marketeer de code direct kan draaien.

## Stapsgewijs Ontwikkel- en Promptingplan
Instructies aan de AI-assistent over hoe het de app in logische, hapklare stappen moet leveren aan de marketeer (eerst de layout-codering, dan de logica-integratie, dan de deployment-tips op Netlify of Vercel).

## Testscenario's & Marketing Invoer-voorbeelden
Geef ten minste 2 concrete marketing-voorbeelden (gerelateerd aan ${slot1}) die de marketeer direct in de app als test-invoer kan gebruiken om te zien of deze app perfect presteert.

Zorg dat de uiteindelijke output in prachtig opgemaakte Markdown is, met heldere scheidingslijnen (---), vetgedrukte koppen en bulletpoints. Begin direct met de Markdown van de prompt zelf, zonder inleidende of afsluitende zinnen van jou (geen "Natuurlijk! Hier is je prompt:").
`;

      const response = await ai.models.generateContent({
        model: "gemini-3.5-flash",
        contents: promptInput,
      });

      const enhancedPrompt = response.text || "";
      res.json({ enhancedPrompt });
    } catch (error: any) {
      console.error("Fout bij aanroepen Gemini API: ", error);
      res.status(500).json({ error: "Er is een fout opgetreden bij het verrijken van de prompt.", details: error.message });
    }
  });

  // Vite middleware for development
  if (process.env.NODE_ENV !== "production") {
    const vite = await createViteServer({
      server: { middlewareMode: true },
      appType: "spa",
    });
    app.use(vite.middlewares);
  } else {
    const distPath = path.join(process.cwd(), 'dist');
    app.use(express.static(distPath));
    app.get('*', (req, res) => {
      res.sendFile(path.join(distPath, 'index.html'));
    });
  }

  app.listen(PORT, "0.0.0.0", () => {
    console.log(`Server running on http://localhost:${PORT}`);
  });
}

startServer();