Dynamisch generierte HTML-Seite aus Benutzeranfragen mit OpenAI Structured Output

Workflow Überblick

Dieser Workflow demonstriert, wie man HTML-Seiten auf Grundlage von Benutzeranfragen erstellt, indem der OpenAI API strukturierter Output genutzt wird. Der Workflow verwendet Tailwind CSS für die Styles und ermöglicht eine elegante Präsentation der generierten Inhalte.

1. Webhook

• Name: Webhook
• Typ: n8n-nodes-base.webhook
• Funktion: Dieser Node empfängt eingehende HTTP-Anfragen und initiiert den Workflow mit dem Parameter query.
• Einstellungen:
  • Path: d962c916-6369-431a-9d80-af6e6a50fdf5 (Definiert den Endpunkt für den Webhook)
  • Response Mode: responseNode (Antwortet mit der Ausgabe des nachfolgenden Nodes)

2. Open AI – Using Structured Output

• Name: Open AI – Using Structured Output
• Typ: n8n-nodes-base.httpRequest
• Funktion: Sendet die Benutzeranfrage an die OpenAI API, um eine strukturierte JSON-Antwort zu erhalten.
• Einstellungen:
  • URL: https://api.openai.com/v1/chat/completions
  • Methode: POST (Um Daten zu senden)
  • JSON Body: Der Body enthält ein JSON-Objekt, das das Eingabeformat und die Anweisungen für OpenAI definiert. Die Anfrage sendet query des Benutzers zur Generierung einer UI.
  • Header Parameters:
    • Content-Type: application/json

3. OpenAI – JSON to HTML

• Name: OpenAI – JSON to HTML
• Typ: @n8n/n8n-nodes-langchain.openAi
• Funktion: Konvertiert die von OpenAI zurückgegebene JSON-Antwort in HTML-Format.
• Einstellungen:
  • Model ID: gpt-4o-mini
  • Options: Temperature zur Steuerung der Kreativität der Antwort ist auf 0.2 gesetzt, um konsistentere Ergebnisse zu erzeugen.
  • Messages: Die Beispielformulierung für die Umwandlung von JSON in HTML wird mit spezifischen Inhalten von OpenAI beantwortet.

4. Format the HTML result

• Name: Format the HTML result
• Typ: n8n-nodes-base.html
• Funktion: Erstellt eine vollständige HTML-Seite unter Verwendung des von OpenAI zurückgegebenen HTML-Codes.
• Einstellungen:
  • HTML: Anpassen des HTML-Dokuments mit dem Grundgerüst und dem head– und body-Inhalt aus den vorherigen Nodes.

5. Respond to Webhook

• Name: Respond to Webhook
• Typ: n8n-nodes-base.respondToWebhook
• Funktion: Gibt die formatierte HTML-Seite zurück und sendet sie als Antwort auf die ursprüngliche Webhook-Anfrage.
• Einstellungen:
  • Response Body: Definiert, dass der Inhalt der Antwort die generierte HTML-Seite ist.
  • Response Headers: Setzt den Content-Type auf text/html; charset=UTF-8, um den Browser anzuweisen, die Antwort als HTML zu behandeln.

Ergebnis

Dieses Workflow zeigt, wie man dynamisch HTML-Seiten basierend auf Benutzeranfragen erstellen kann. Durch die Integration von OpenAI API wird eine Interaktivität geschaffen, die anpassbare und strukturierte Inhalte ermöglicht. Die Nutzung von Tailwind CSS sorgt für eine ansprechende visuelle Gestaltung.

Für weitere Informationen oder zum Herunterladen des Workflows folgen Sie dem Link below:

Download Link