- Canvas aktivieren:
- Gib in ChatGPT den Befehl
/canvasein, um die Code-Editor-Oberfläche zu aktivieren. - Der Editor wird geöffnet, und du kannst deinen Code eingeben.
- Gib in ChatGPT den Befehl
- Projekt definieren:
- Erstelle eine einfache HTML- oder React-App mit einem Chat-Eingabefeld.
- Nutze den Prompt:
Create a ChatGPT client in Windows 95 style with OpenAI API integration.
- Code generieren und rendern:
- ChatGPT erzeugt HTML- und CSS-Code für das Design im Windows 95-Stil.
- Klicke auf “Preview”, um das gerenderte Ergebnis direkt in ChatGPT zu sehen.
- API-Anbindung erstellen:
- Ersetze Platzhalterantworten durch echte API-Abfragen an OpenAI.
- Nutze den Prompt:
Make sure it uses the OpenAI API and the GPT-4 model for responses. - Warte, bis der Code aktualisiert ist und die API-Abfragen eingefügt wurden.
- API-Key einbinden:
- Erstelle einen OpenAI API-Key im OpenAI-Playground.
- Implementiere eine Eingabemaske, sodass Nutzer ihren API-Key selbst eingeben können.
- Testen und optimieren:
- Starte die App in ChatGPTs Vorschau-Modus.
- Gib Testeingaben ein und prüfe, ob die Antworten korrekt über die API bezogen werden.
- Falls Fehler auftreten, optimiere den Code weiter mit gezielten Prompts.
- App exportieren und hosten:
- Speichere den Quellcode und hoste ihn auf einer Plattform wie Netlify oder in deinem CMS.
- Achte darauf, dass API-Keys nicht im Quelltext gespeichert werden, sondern nur lokal im Browser abgelegt sind.
- Die Canvas-Funktion in ChatGPT für das Erstellen von Webanwendungen nutzen.
- Eigene kleine Tools und Apps mit HTML, CSS und React generieren und rendern.
- Eine OpenAI API-Anbindung in die App integrieren und API-Keys sicher verwalten.
- Erste eigene Applikationen in ChatGPT bauen und weiterentwickeln.
- ChatGPT
- OpenAI Playground
Create a ChatGPT client in Windows 95 style with OpenAI API integration.
- Entwicklung von Retro-Style Portfolio-Websites für Künstler.
- Erstellen personalisierter Chatbots im Vintage-Design für Kundenservice.
- Integration von Nostalgie-Elementen in Social-Media-Tools.
- Optimierung interaktiver Online-Kurse mit anpassbarer UI in klassischem Stil.
- Entwicklung von Browser-basierten Spielen mit Retro-Grafik für einfache Unterhaltung.
