Fluduro | Ein ChatGPT-App-Projekt

Fluduro ist eine einfache Quiz-Anwendung, die Persönlichkeitstypen Blumen zuordnet. Dieses Projekt wurde erstellt, um das OpenAI Apps SDK und das Model Context Protocol (MCP) zu erkunden, indem interaktive Widgets direkt in ChatGPT erstellt werden.

🛠️ Projektübersicht

Das Ziel dieses Projekts war es zu lernen, wie man:

1. Einen MCP-Server bauen, der Tools und UI-Ressourcen bereitstellt.

2. Das OpenAI Apps SDK verwenden, um benutzerdefinierte HTML/CSS-Widgets in ChatGPT darzustellen.

3. Einen lokalen Server über ngrok mit ChatGPT verbinden.

4. Ein LLM (Groq) verwenden, um Quizfragen dynamisch zu generieren.

Werkzeuge & Ressourcen:

• Werkzeuge: say_hello, start, submit_answers, show_results, get_quiz_state.

• UI-Widgets: Willkommens-, Quiz- und Ergebnisbildschirme.

Related MCP server: Hello Widget Example

📸 Bilder

![Welcome Screen (Light Mode)](./screenshots/welcome-light.png)
<!-- slide -->
![Welcome Screen (Dark Mode)](screenshots/welcome-dark.png)
<!-- slide -->
![Quiz Screen](screenshots/quiz.png)
<!-- slide -->
![Results Screen](screenshots/result.png)

⚡ Lokale Einrichtung

1. Installation

Klonen Sie das Repository und installieren Sie die Abhängigkeiten:

git clone <repository-url>
cd plantora
npm install

2. Konfiguration

Erstellen Sie eine .env-Datei für Ihre API-Schlüssel:

cp .env.example .env

Fügen Sie Ihren Groq-API-Schlüssel in das Feld API_KEY ein. Sie erhalten einen kostenlos unter console.groq.com.

3. Starten und Tunneln

Starten Sie den Server im HTTP-Modus und verwenden Sie ngrok, um einen öffentlichen HTTPS-Tunnel zu erstellen (erforderlich für ChatGPT):

# Terminal 1: Start the server
npm run start:http

# Terminal 2: Start ngrok on the same port
ngrok http 3553

Notieren Sie sich die öffentliche URL von ngrok (z. B. https://xyz.ngrok-free.dev).

🔗 So verbinden Sie sich mit ChatGPT

Um diese App in ChatGPT zu testen, führen Sie die folgenden Schritte aus:

1. Aktivieren Sie den Entwicklermodus in ChatGPT (Einstellungen → Apps & Connectors → Erweiterte Einstellungen).

2. Klicken Sie unter Einstellungen → Connectors auf Erstellen.

3. Wählen Sie Streamable HTTP und fügen Sie Ihre ngrok-URL mit dem Pfad /mcp ein: https://your-id.ngrok-free.dev/mcp

4. Nennen Sie ihn „Fluduro“ und klicken Sie auf Erstellen.

5. Fügen Sie den Connector zu einem neuen Chat hinzu und geben Sie „Starten Sie das Quiz.“ ein.

🤖 Tech-Stack

• Backend: Node.js mit @modelcontextprotocol/sdk.

• LLM: Groq (Llama 3.3 70B) zum Generieren von Fragen und Analysieren von Eigenschaften.

• Frontend: Vanilla HTML/CSS mit Tailwind CSS (CDN) und Google Fonts.

• Tunneling: ngrok.

📖 Wichtige Erkenntnisse aus dem SDK

• window.openai-Brücke: Gelernt, wie man zwischen dem Widget-iframe und dem Host kommuniziert.

• Theme-Synchronisierung: Verwendet openai:set_globals, um die UI an den Dunkel-/Hellmodus von ChatGPT anzupassen.

• Toolgesteuerte UI: Gelernt, wie man UI-Änderungen über die Tool-Ausgaben des Modells mit structuredContent auslöst.

Fazit

Dieses Projekt diente als praktische Einführung in die Entwicklung nativ anmutender Apps für das ChatGPT-Ökosystem. Es konzentriert sich auf die Grundlagen der Tool-Registrierung, der Ressourcenverwaltung und der Zustandsverwaltung im OpenAI-Apps-Framework.

📸 Bilder – Screenshots als Referenz

WILLKOMMENSBILDSCHIRM – HELLMODUS

WILLKOMMENSBILDSCHIRM – DUNKELMODUS

QUIZ-BILDSCHIRM

ERGEBNIS-BILDSCHIRM