MCP Joke Button App

Dieses Projekt ist ein winziger MCP-Server, der eine MCP-App-Benutzeroberfläche bereitstellt: einen einzelnen Button. Wenn der Button geklickt wird, sendet die App eine Nachricht an den Host und bittet den Assistenten, mit einem kurzen, familienfreundlichen Witz zu antworten.

Es verwendet absichtlich nur die eingebauten Module von Node.js. Es gibt keine Laufzeit-Paketabhängigkeiten.

Was es demonstriert

• MCP-Kernprotokoll Version 2026-07-28

• Zustandsloses Streamable HTTP auf einem Endpunkt: /mcp

• server/discover, tools/list, tools/call, resources/list und resources/read

• MCP-Apps-UI-Ressourcenmetadaten mit _meta.ui.resourceUri

• Ein sandbox-freundliches text/html;profile=mcp-app-Widget

• ui/initialize und ui/message über postMessage

Related MCP server: Jokes MCP Server

Anforderungen

Installieren Sie Node.js 20 oder neuer von nodejs.org. Der LTS-Download ist ausreichend.

Sie müssen kein npm install ausführen; dieses Projekt hat keine Drittanbieter-Bibliotheken.

Server starten

Öffnen Sie ein Terminal in diesem Ordner und führen Sie Folgendes aus:

npm start

Sie sollten Folgendes sehen:

MCP Joke Button server listening on http://127.0.0.1:8787/mcp
Preview the widget shell at http://127.0.0.1:8787/preview

Lassen Sie dieses Terminal während des Tests geöffnet.

MCP-Anfragen werden während des Serverbetriebs nach Methode protokolliert. Für eine interaktive App-Darstellung sollte das Protokoll ein erfolgreiches UI-Ressourcen-Lesen ähnlich wie dieses enthalten:

[mcp] request method=resources/read name=ui://joke-button/app.html
[mcp] response method=resources/read status=200

Setzen Sie MCP_LOG_REQUESTS=false, wenn Sie diese Entwicklungsprotokolle deaktivieren möchten.

Heroku-Bereitstellung

Die Heroku-App joke-button ist bereitgestellt unter:

https://joke-button-31cddc4bc964.herokuapp.com

Ihr MCP-Endpunkt ist:

https://joke-button-31cddc4bc964.herokuapp.com/mcp

Stellen Sie den aktuellen Branch bereit mit:

git push heroku HEAD:main

Schneller lokaler Check

Öffnen Sie diese Adresse in einem Browser:

http://127.0.0.1:8787/preview

Dies zeigt nur eine Vorschau des Buttons. Der Button kann den KI-Assistenten nur um einen Witz bitten, wenn er in einem MCP-Apps-kompatiblen Host wie ChatGPT gerendert wird.

Verwendung mit ChatGPT Desktop oder ChatGPT Web

ChatGPT benötigt während der Entwicklung eine HTTPS-URL für einen entfernten MCP-Server. Lassen Sie npm start laufen und legen Sie dann Port 8787 mit einem Tunnel-Tool wie ngrok oder Cloudflare Tunnel offen.

Beispiel mit ngrok:

ngrok http 8787

Kopieren Sie die HTTPS-Weiterleitungs-URL und fügen Sie /mcp am Ende hinzu, zum Beispiel:

https://example.ngrok.app/mcp

Verbinden Sie es dann mit ChatGPT:

1. Öffnen Sie ChatGPT.

2. Öffnen Sie Einstellungen.

3. Öffnen Sie Sicherheit und Anmeldung.

4. Aktivieren Sie den Entwicklermodus, falls er nicht bereits aktiviert ist.

5. Öffnen Sie Plugins. Wenn Sie die Desktop-App verwenden und es nicht in der Seitenleiste sehen, öffnen Sie https://chatgpt.com/plugins in einem Browser, während Sie mit demselben Konto angemeldet sind.

6. Wählen Sie die Plus-Schaltfläche, um eine Developer-MCP-Serververbindung hinzuzufügen.

7. Fügen Sie die HTTPS-URL ein, die auf /mcp endet.

8. Benennen Sie sie Joke Button.

9. Starten Sie einen neuen Chat, wählen Sie das Plugin aus dem Menü „Mehr" und fragen Sie: Show the joke button.

10. Klicken Sie auf Tell a joke.

Sie benötigen keine Einstellung namens MCP servers für diesen ChatGPT-UI-Test. Diese Einstellung ist für die lokale MCP-Host-Konfiguration von Codex gedacht, nicht für das Hinzufügen einer ChatGPT-Developer-Plugin-Verbindung.

Wenn der Entwicklermodus oder das Plus-Symbol fehlt, prüfen Sie, ob die Desktop-App auf dem neuesten Stand ist und ob Ihr Konto oder Arbeitsbereich die Plugin-Entwicklung erlaubt.

Wenn die App funktioniert, sollte ChatGPT die Nachricht des Buttons empfangen und mit einem kurzen Witz antworten.

Verwendung mit Codex in der ChatGPT-Desktop-App

Codex kann über die gemeinsamen MCP-Einstellungen eine Verbindung zu Streamable-HTTP-MCP-Servern herstellen.

Die Einstellung MCP servers erscheint nur auf Codex-fähigen lokalen Clients und möglicherweise nicht in der normalen Chat-Einstellungsansicht von ChatGPT. Falls sie verfügbar ist:

1. Lassen Sie npm start laufen.

2. Öffnen Sie die ChatGPT-Desktop-App.

3. Öffnen Sie Einstellungen und dann MCP servers.

4. Wählen Sie Add server.

5. Wählen Sie Streamable HTTP.

6. Benennen Sie den Server joke_button.

7. Verwenden Sie diese URL:

http://127.0.0.1:8787/mcp

8. Speichern Sie und starten Sie neu, wenn Sie dazu aufgefordert werden.

9. Geben Sie in einer Codex-Aufgabe /mcp ein, um zu bestätigen, dass der Server verbunden ist.

10. Fragen Sie Codex: Use the Joke Button MCP server.

Die Codex-MCP-Toolunterstützung zeigt möglicherweise den Text-Fallback anstatt der eingebetteten iframe-UI, abhängig von der Oberfläche. Für die eigentliche Ein-Button-UI verwenden Sie ChatGPT mit MCP-Apps-UI-Unterstützung.

Wenn die Einstellung nicht sichtbar ist, kopieren Sie die Beispielkonfiguration aus codex-config.example.toml in eine config.toml eines vertrauenswürdigen Projekts oder in Ihre Benutzer-~/.codex/config.toml und starten Sie dann die ChatGPT-Desktop-App oder den Codex-Client neu.

Nützliche URLs

• Health-Check: http://127.0.0.1:8787/health

• MCP-Endpunkt: http://127.0.0.1:8787/mcp

• Widget-Vorschau: http://127.0.0.1:8787/preview

Sicherheitshinweise

Der Server validiert die MCP-Protokollversion und die gespiegelten MCP-Header, die für den Transport 2026-07-28 Streamable HTTP erforderlich sind.

Für die lokale Entwicklung werden Anfragen ohne Origin-Header akzeptiert, Loopback-Browser-Ursprünge werden akzeptiert und gängige OpenAI-Host-Ursprprüge werden akzeptiert. Für einen anderen Host-Ursprung starten Sie den Server mit:

$env:MCP_ALLOWED_ORIGINS="https://your-host.example"
npm start

Verwenden Sie die Authentifizierung, bevor Sie einen echten MCP-Server bereitstellen, der auf private Daten zugreifen oder Aktionen ausführen kann. Dieses Beispiel tut weder das eine noch das andere.

Projektdateien

• server.js: MCP-Server ohne Abhängigkeiten

• public/joke-button.html: MCP-Apps-UI-Widget

• codex-config.example.toml: Beispiel-Codex-Konfiguration