ChatGPT Apps: Kompletter Entwickler-Guide für 2025

Während du diese Zeilen liest, hat OpenAI gerade die Türen geöffnet. Gestern – buchstäblich gestern – haben sie das App Directory für ChatGPT gestartet und die Einreichungen für ALLE Entwickler geöffnet. Nicht nur für ausgewählte Partner. Für alle. Auch für dich.

800 Millionen Nutzer. Praktisch keine Konkurrenz. Das Zeitfenster ist genau jetzt offen. Und es wird sich in ein paar Monaten schließen, wenn alle anderen reinströmen.

Das ist kein weiterer Artikel über „schau, was du irgendwann machen könntest". Das ist ein Leitfaden für diejenigen, die jetzt den Moment ergreifen wollen, solange der Markt leer ist.

Erinnerst du dich, wie der App Store 2008 eröffnet wurde und alle dachten „wer braucht denn Apps auf dem Handy?" Dann machte Angry Birds eine Milliarde Dollar, Instagram wurde für eine Milliarde an Facebook verkauft, Uber wuchs auf 80 Milliarden. Die ersten Entwickler, die damals eingestiegen sind, haben den Jackpot geknackt, einfach weil sie die Ersten waren.

Es ist Dezember 2025. Und genau dasselbe passiert gerade jetzt. Nur heißt es diesmal ChatGPT Apps.

Am 6. Oktober startete OpenAI eine neue Plattform – und weißt du, wie viele Nutzer sie beim Start hat? 800 Millionen. Nicht 10 Millionen wie das iPhone 2008. Achthundert Millionen. Der App Store war beim Start 80-mal kleiner. Verstehst du?

Und wie viele Konkurrenten gibt es gerade? Stand 18. Dezember – weniger als zwanzig Apps. Spotify, Booking.com, Canva, Zillow, AllTrails, ein paar Enterprise-Tools. Das war's. Buchstäblich alles. Der Markt ist komplett leer. Und gestern hat OpenAI die Einreichungen für alle Entwickler geöffnet – auch für dich.

Ich mache keine Witze. Du tippst in ChatGPT: „Spotify, erstell eine Lauf-Playlist" – und direkt im Chat öffnet sich ein Spotify-Widget. Mit Tracks, Buttons, alles funktioniert. Kein Tab-Wechsel, kein Copy-Paste. Magie.

Oder: „Booking, finde ein Hotel in Paris unter 100 €" – zack, eine Karte mit Optionen, Fotos, du kannst sofort buchen.

Und du kannst dieselbe Art von App erstellen.

Lass mich dir zeigen, wie.

Warum das nicht einfach ein weiteres „neues Feature" ist

Hör mal, ich verstehe es. Jeder hat eine Immunität gegen News entwickelt wie „wow, neue Technologie wird die Welt verändern". Jede Woche etwas Neues. Crypto, NFT, Metaverse, AGI kommt nächste Woche. Müde vom Hype? Ich auch.

Aber das hier ist anders. Schauen wir uns die Zahlen an.

App Store 2008:

• 10 Millionen iPhone-Nutzer beim Start
• Um eine App zu entwickeln, brauchtest du einen Mac (mindestens 1000 $) und ein Gerät zum Testen
• Der Wettbewerb begann bei null, aber nach sechs Monaten gab es Tausende Apps
• Du musste Objective-C lernen (ja, dieser Albtraum mit eckigen Klammern)

Was kam dabei heraus? Instagram wurde für eine Milliarde verkauft, Angry Birds hatte eine Milliarde Downloads, Uber ist jetzt 80+ Milliarden wert.

Die Typen, die als Erste eingestiegen sind – sie haben es einfach rechtzeitig geschafft. Sie waren da, als es keine Konkurrenz gab.

ChatGPT Apps jetzt:

• 800 Millionen aktive Nutzer jede Woche
• Entwicklung – normaler Laptop, jedes OS, kostenlose Tools
• Weniger als zwanzig Konkurrenten (am 17. Dezember haben sie Einreichungen für alle geöffnet!)
• Tech-Stack – TypeScript oder Python, das du bereits kennst

Die Rechnung ist einfach: Publikum 80-mal größer, Konkurrenten hunderte Male weniger, Eintrittsbarriere mehrfach niedriger.

Das ist kein Hype. Das ist ein Zeitfenster, das GESTERN (17. Dezember) geöffnet wurde und sich in 2-3 Monaten schließen wird, wenn alle anderen reinfluten. Die ersten genehmigten Apps werden ab Januar 2026 im Katalog erscheinen. Gerade jetzt ist fast niemand da.

Was genau sind diese ChatGPT Apps (ohne Schnickschnack)

Okay, lass uns erstmal das technische Kauderwelsch überspringen. Auf Deutsch gesagt.

Früher war es so: Du sitzt in ChatGPT, willst etwas machen – sagen wir, ein Hotel buchen. ChatGPT gibt dir Ratschläge, dann kopierst du den Hotelnamen, öffnest Booking.com in einem neuen Tab, suchst, buchst. Tonnenweise Fensterwechsel. Nervig.

Jetzt ist es so: Du tippst in ChatGPT „Booking, finde ein Hotel in Madrid fürs Wochenende unter 80 €" und direkt im Chat – eine Karte, Liste von Optionen, Fotos, Preise, du kannst klicken und buchen. Alles genau da. Keine Tabs.

Scheint eine Kleinigkeit? Nun, Apple schien auch eine Kleinigkeit – „warum Touchscreen, wenn du Tasten hast?" Dann starb Nokia.

ChatGPT Apps sind NICHT:

Lass mich das gleich klären, damit es keine Verwirrung gibt (ich war anfangs auch verwirrt).

Das sind NICHT Custom GPTs. Custom GPTs sind nur Chatbots mit Anweisungen. Du sagst ihnen „antworte wie ein Pirat" – sie antworten wie ein Pirat. Das war's. Keine Widgets, keine Interaktivität.

Das sind NICHT ChatGPT Plugins. OpenAI hat Plugins im April 2024 eingestellt. Sie waren langsam, umständlich, funktionierten schlecht. Sie haben sie begraben, zu Recht.

Das ist NICHT die Arbeit mit der ChatGPT API. Die API ist, wenn du deine eigene App machst und ChatGPT darin verwendest. Völlig andere Geschichte.

Was ist es dann?

ChatGPT Apps sind vollwertige Anwendungen innerhalb von ChatGPT. Mit Interface, Buttons, Karten, Maps, Video – was auch immer du willst. Du erstellst das Backend (in TypeScript oder Python), machst das UI (normales HTML/CSS/JS), und ChatGPT rendert es direkt im Chat.

Beispiel-Workflow (Schritt für Schritt):

1. Nutzer: „Zillow, zeig mir Häuser in New York unter 500k $"
2. ChatGPT versteht: muss die Zillow-App aufrufen
3. Sendet eine Anfrage an deinen Server (das nennt sich MCP-Server, aber mehr dazu später)
4. Dein Server: sucht nach Häusern, bildet eine Antwort + HTML für das Widget
5. ChatGPT erhält die Daten und zeigt das Widget mit Karte, Fotos, Beschreibungen an
6. Nutzer klickt auf ein Haus → sieht Details
7. Sagt: „Entferne alles über 400k $" → Liste aktualisiert sich
8. Hat gefunden, was er braucht → klickt „In Zillow öffnen" → Website öffnet sich

Die ganze Magie besteht darin, dass dies ohne Kontextwechsel passiert. Das Gespräch mit ChatGPT wird nicht unterbrochen. Du sagst einfach, was du willst, und alles erscheint genau da.

Warum brauchen wir das überhaupt?

Faire Frage. Hier ist ein echter Anwendungsfall:

Vorher: Will einen Tisch im Restaurant nach dem Museumsbesuch buchen.

1. Öffne die Museums-Website, checke Öffnungszeiten
2. Google Restaurants in der Nähe
3. Wähle eins aus, öffne OpenTable
4. Buche
5. Füge eine Erinnerung zum Kalender hinzu

Jetzt: „ChatGPT, buche ein Restaurant in der Nähe des Prado-Museums nach Schließung."

• ChatGPT findet die Schließzeit heraus
• Findet Restaurants in der Nähe
• Bietet Optionen an (mit Karten, Menüs, Bewertungen)
• Bucht einen Tisch
• Fügt zum Kalender hinzu

Ein Satz statt fünf Schritte.

Deshalb brauchen wir das.

Drei Gründe, warum Entwickler bereits dorthin stürmen

1. Sofortiger Zugang zum Publikum (es ist unfair, aber es funktioniert)

Der übliche Startup-Pfad:

• Idee → MVP → Start
• Richte eine Website ein, konfiguriere Analytics
• SEO (Monate des Wartens)
• Bezahlte Anzeigen (Geld, Geld, Geld)
• Kaltakquise, E-Mails
• Nach einem Jahr: 1000 Nutzer (wenn du Glück hast)

Mit ChatGPT Apps:

Du machst eine App. Veröffentlichst sie im Store. Nutzer schreibt „Finde mir ein Carbonara-Rezept" – und wenn du eine Rezept-App hast, schlägt ChatGPT selbst deine App vor.

Du suchst nicht nach Nutzern. ChatGPT bringt sie zu dir.

Es ist, als hättest du den besten Vertriebsleiter der Welt, der 24/7 kostenlos arbeitet und alle 800 Millionen Nutzer persönlich kennt.

Stell dir jetzt vor, du hast drei Konkurrenten. Nicht dreitausend. Drei. In manchen Nischen gibt es vielleicht überhaupt niemanden.

2. Kein UI von Grund auf bauen nötig (aber du solltest die Guidelines studieren)

Weißt du, wie viel Zeit in ordentliches UI in einer App geht? Monate. Responsiveness, Cross-Browser-Kompatibilität, Themes (hell/dunkel), Accessibility. Plus separate iOS-Version, separate Android. Arbeit bis über beide Ohren.

Mit ChatGPT Apps – ChatGPT rendert das UI für dich. Du lieferst ein HTML-Template, es bettet es ins Interface ein. Themes? Automatisch. Responsive? Automatisch. iOS/Android? Funktioniert überall, es ist Web.

Aber es gibt einen Haken: OpenAI liefert klare Design-Richtlinien. Das ist nicht „mach was du willst". Es gibt Empfehlungen für Widget-Größen, Farbschemata, Typografie, Abstände. Alles ist klar dokumentiert.

Die gute Nachricht: diesen Richtlinien zu folgen ist einfacher als ein Design-System von Grund auf zu erstellen. OpenAI hat bereits Konsistenz, Accessibility, UX-Muster durchdacht. Du wendest einfach ihre Standards an.

Du konzentrierst dich auf die Logik, auf die Daten, auf das, was deine App nützlich macht. Nicht darauf, dass ein Button auf verschiedenen Geräten gleich aussieht.

3. First-Mover-Vorteil (das Fenster ist GENAU JETZT offen)

Hör genau zu, denn das ist der wichtigste Teil des Artikels.

17. Dezember 2025 – gestern – hat OpenAI das App Directory gestartet und Einreichungen für alle Entwickler geöffnet. Nicht für Partner, nicht für Konzerne. Für alle. Du kannst jetzt auf platform.openai.com gehen und deine App zur Überprüfung einreichen.

Was ist gerade da:

• Spotify, Booking.com, Expedia (Reisen)
• Canva, Figma (Design)
• Zillow (Immobilien)
• Coursera (Bildung)
• AllTrails, Coupler, Daloopa, Coveo, Egnyte, Hex (Enterprise-Tools)

Zähl sie. Weniger als zwanzig Apps für 800 Millionen Nutzer. Der App Directory-Katalog ist praktisch leer. Featured-Bereiche sind leer. Empfehlungsalgorithmen werden gerade erst abgestimmt.

Die ersten genehmigten Apps werden ab Januar 2026 erscheinen. Das bedeutet, du hast 2-3 Wochen Zeit, um eine qualitativ hochwertige App zu machen und zur Überprüfung einzureichen. Und eine Chance, in der ersten Welle dabei zu sein.

Bis Sommer 2026 wird es geben:

• Tausende von Entwicklern
• Hunderte von Startups
• Tonnenweise Nachahmer
• Heftigen Wettbewerb um Featured-Plätze
• Empfehlungsalgorithmus bereits auf Tausenden Apps trainiert

Aber keine Sorge. Das bedeutet nicht, dass es im Sommer zu spät sein wird. ChatGPT Apps ist kein Hype-Feature, das in einem Jahr verschwindet. Es ist eine fundamentale Plattform, die bleiben wird.

Analogie: Der App Store startete 2008, und erfolgreiche neue Apps kommen bis heute heraus. TikTok hat den Markt 2018 gesprengt – 10 Jahre nach dem Store-Start. Clubhouse war 2020 Milliarden wert.

ChatGPT Apps wird jahrelang wachsen und sich entwickeln. Es ist nur so, dass diejenigen, die in der ersten Welle einsteigen – in den nächsten 2-3 Monaten – maximale Vorteile erhalten: weniger Konkurrenten, mehr Aufmerksamkeit, erste Positionen in Rankings, Pionier-Ruf, Chance auf Featured.

Du kannst auch in sechs Monaten einsteigen. Aber jetzt ist ein Zeitfenster mit minimalem Risiko und maximalem Ertrag. Der Katalog ist leer. Einreichungen sind offen. Konkurrenz ist fast nicht vorhanden.

In einem Monat wird es Hunderte von Einreichungen geben. In drei Monaten – Tausende. Aber jetzt kannst du einer der ersten zwanzig sein.

Wie es technisch funktioniert (ohne Fachjargon)

Okay, genug Marketing. Kommen wir zur Sache – wie wird das unter der Haube gebaut.

Einfaches Diagramm

Nutzer 
    ↓ schreibt Prompt
ChatGPT UI (was du siehst)
    ↓ versteht, welches Tool benötigt wird
Apps SDK Runtime (Engine)
    ↓ sendet Anfrage
Dein MCP Server (dein Code)
    ↓ verarbeitet, ruft APIs auf
Deine Datenbank / externe Services
    ↓ gibt Daten zurück
Widget (HTML/CSS/JS in iframe)
    ↓ zeigt an
Nutzer sieht Ergebnis

In der Realität sieht eine Anfrage so aus:

Nutzer: „Spotify, erstelle eine Morgen-Lauf-Playlist"

1. ChatGPT: Okay, das geht um Musik, brauche das create_playlist Tool von Spotify
2. ChatGPT → Dein Server: POST-Anfrage mit Parametern {theme: "morning_run", duration: 30}
3. Dein Server:

- Anfrage erhalten

- Spotify API aufgerufen

- Track-Liste zusammengestellt

- Antwort + HTML für Widget gebildet

1. Dein Server → ChatGPT: Hier sind deine Daten + UI-Template
2. ChatGPT: Rendert Widget in iframe (geschützte Sandbox)
3. Widget: Empfängt Daten über window.openai API
4. Nutzer: Sieht Playlist, kann hören, bearbeiten

Der ganze Prozess dauert ein paar Sekunden.

MCP Protocol – was es ist und warum

MCP = Model Context Protocol. Es ist ein offener Standard zur Verbindung von AI mit externen Tools und Daten.

Kurze Geschichte:

• November 2024 → Anthropic (Schöpfer von Claude) kündigte MCP an
• März 2025 → OpenAI sagte „ja, wir machen dasselbe"
• Dezember 2025 → MCP wurde an Linux Foundation übergeben

Jetzt ist es ein gemeinsamer Standard. Baue einen MCP-Server einmal – er funktioniert mit ChatGPT, mit Claude, mit VS Code, mit jedem AI-Client.

Analogie: Erinnerst du dich, wie früher jedes Handy sein eigenes Ladegerät hatte? Nokia eins, Samsung ein anderes, iPhone ein drittes. Echt nervig. Dann erfanden sie USB-C – ein Port für alle.

MCP ist USB-C für AI-Anwendungen.

Die drei Säulen von MCP

MCP besteht aus drei Primitiven. Klingt beängstigend, ist aber eigentlich einfach:

1. Tools

Das sind Funktionen, die AI aufrufen kann. Zum Beispiel:

• search_products — Produkte finden
• book_hotel — Hotel buchen
• create_playlist — Playlist erstellen
• get_weather — Wetter abrufen

Du registrierst ein Tool, beschreibst die Parameter (was übergeben werden muss), und ChatGPT versteht automatisch, wann es aufzurufen ist.

2. Resources

Das sind Datenquellen oder UI-Templates. Zum Beispiel:

• HTML-Datei mit einem Widget
• JSON mit Nutzerdaten
• Bilder, Videos

Du kontrollierst Resources, nicht die AI. Du entscheidest, was zurückgegeben wird und in welchem Format.

3. Prompts

Wiederverwendbare Templates für häufige Aufgaben. Wenn du ein Standardszenario hast, kannst du es einmal beschreiben, und Nutzer werden es schneller verwenden.

Ehrlich gesagt? Prompts werden selten verwendet. Tools und Resources – das ist wichtig.

Was ist mit Sicherheit?

Widgets arbeiten in einer sandboxed iframe – einer isolierten Umgebung. Sie können nicht:

• Cookies von anderen Seiten lesen
• Beliebiges JavaScript im ChatGPT-Kontext ausführen
• Auf Daten anderer Nutzer zugreifen

Alle Anfragen gehen über HTTPS. Daten in Transit sind mit TLS 1.2+ verschlüsselt. Speicherung – AES-256. OpenAI hat SOC 2 Type 2 Audit bestanden, entspricht GDPR/CCPA.

Kurz gesagt, Sicherheit ist solide. Kein Rad neu erfinden nötig.

Deine erste App bauen (jetzt sofort)

Genug Theorie. Lass uns eine echte App machen. Jetzt. In 20-30 Minuten.

Was wir bauen werden: Todo List. Ja, ich weiß, es ist ein Klischee. Aber es ist einfach und klar. Bau ein Todo – verstehe das Prinzip – dann modelliere Raumschiffe, wenn du willst.

Was du brauchst

• Node.js (wahrscheinlich bereits installiert)
• Beliebiger Code-Editor
• Terminal
• ngrok (für öffentliche URL)

Alles kostenlos, alles verfügbar.

Schritt 1: Projekt erstellen

mkdir my-first-chatgpt-app
cd my-first-chatgpt-app
npm init -y
npm install @modelcontextprotocol/sdk

package.json sollte so aussehen:

{
  "type": "module",
  "dependencies": {
    "@modelcontextprotocol/sdk": "^1.20.2"
  }
}

> Hinweis: Im Beispiel verwenden wir JSON Schema direkt für Parameter-Validierung. Wenn du mächtigere Validierung willst, kannst du zod hinzufügen und es im Tool-Handler verwenden.

Schritt 2: MCP Server schreiben

Erstelle eine server.js-Datei:

import { createServer } from "node:http";
import { readFileSync } from "node:fs";
import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
import { StreamableHTTPServerTransport } from "@modelcontextprotocol/sdk/server/streamableHttp.js";

// HTML mit Widget (erstellen wir im nächsten Schritt)
const widgetHtml = readFileSync("widget.html", "utf8");

// Unser Aufgaben-"Speicher" (in der Realität wäre das eine Datenbank)
let todos = [];
let nextId = 1;

function createTodoServer() {
  const server = new McpServer({ 
    name: "my-todo-app", 
    version: "1.0.0" 
  });

  // UI-Widget als Resource registrieren
  server.registerResource(
    "todo-widget",
    "ui://widget/todo.html",
    {},
    async () => ({
      contents: [{
        uri: "ui://widget/todo.html",
        mimeType: "text/html+skybridge",  // Wichtig! Funktioniert nicht ohne das
        text: widgetHtml,
        _meta: { 
          "openai/widgetPrefersBorder": true  // Rahmen um Widget
        },
      }],
    })
  );

  // Tool zum Hinzufügen von Aufgaben registrieren
  server.registerTool(
    "add_todo",
    {
      title: "Aufgabe hinzufügen",
      description: "Fügt eine neue Aufgabe zur Liste hinzu",
      inputSchema: {
        type: "object",
        properties: {
          title: {
            type: "string",
            description: "Aufgabentitel"
          }
        },
        required: ["title"]
      },
      _meta: {
        "openai/outputTemplate": "ui://widget/todo.html",  // Welches Widget anzeigen
        "openai/toolInvocation/invoking": "Füge Aufgabe hinzu...",  // Text während Laden
        "openai/toolInvocation/invoked": "Aufgabe hinzugefügt ✓",  // Text wenn fertig
      },
    },
    async ({ title }) => {
      // Aufgabe erstellen
      const todo = { 
        id: `todo-${nextId++}`, 
        title, 
        completed: false 
      };
      todos.push(todo);

      // Ergebnis zurückgeben
      return {
        // Text für ChatGPT (was im Chat anzeigen)
        content: [{ 
          type: "text", 
          text: `✅ Hinzugefügt: "${title}"` 
        }],
        // Daten für Widget
        structuredContent: { 
          tasks: todos 
        },
      };
    }
  );

  return server;
}

// HTTP-Server mit CORS (obligatorisch!)
const port = 8787;
const httpServer = createServer(async (req, res) => {
  const url = new URL(req.url, `http://${req.headers.host}`);

  // CORS preflight (ChatGPT macht zuerst OPTIONS-Anfrage)
  if (req.method === "OPTIONS" && url.pathname === "/mcp") {
    res.writeHead(204, {
      "Access-Control-Allow-Origin": "*",
      "Access-Control-Allow-Methods": "POST, GET, OPTIONS",
      "Access-Control-Allow-Headers": "content-type, mcp-session-id",
      "Access-Control-Expose-Headers": "Mcp-Session-Id",
    });
    res.end();
    return;
  }

  // Health check (um zu prüfen, ob Server läuft)
  if (req.method === "GET" && url.pathname === "/") {
    res.writeHead(200).end("✅ MCP Server läuft");
    return;
  }

  // MCP endpoint (ChatGPT wird hier anklopfen)
  if (url.pathname === "/mcp") {
    res.setHeader("Access-Control-Allow-Origin", "*");
    res.setHeader("Access-Control-Expose-Headers", "Mcp-Session-Id");

    const server = createTodoServer();
    const transport = new StreamableHTTPServerTransport({
      sessionIdGenerator: undefined,
      enableJsonResponse: true,
    });

    // Wenn Verbindung schließt, aufräumen
    res.on("close", () => {
      transport.close();
      server.close();
    });

    await server.connect(transport);
    await transport.handleRequest(req, res);
    return;
  }

  res.writeHead(404).end("Not Found");
});

httpServer.listen(port, () => {
  console.log(`🚀 Server läuft: http://localhost:${port}/mcp`);
});

Sieht kompliziert aus? Eigentlich gibt es drei Teile:

1. Widget-Registrierung (UI)
2. Tool-Registrierung (was es tun kann)
3. HTTP-Server (damit ChatGPT uns erreichen kann)

Schritt 3: Widget erstellen

Erstelle widget.html:

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="utf-8" />
  <title>Todo Widget</title>
  <style>
    * { box-sizing: border-box; }
    body { 
      margin: 0; 
      padding: 20px; 
      font-family: -apple-system, BlinkMacSystemFont, sans-serif;
      background: var(--bg, #f8f9fa);
    }
    .task-list { 
      display: flex; 
      flex-direction: column; 
      gap: 10px; 
    }
    .task { 
      padding: 15px; 
      border-radius: 8px; 
      background: white;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .task:hover { 
      box-shadow: 0 4px 8px rgba(0,0,0,0.15);
    }
    .task.completed { 
      opacity: 0.5; 
      text-decoration: line-through; 
    }
    .empty {
      text-align: center;
      padding: 40px;
      color: #999;
      font-style: italic;
    }
  </style>
</head>
<body>
  <div id="root"></div>
  
  <script type="module">
    // Daten von ChatGPT erhalten
    const toolOutput = window.openai?.toolOutput;
    const theme = window.openai?.theme;
    
    // Wenn dunkles Theme, Hintergrund ändern
    if (theme === 'dark') {
      document.documentElement.style.setProperty('--bg', '#1a1a1a');
    }
    
    // Aufgabenliste rendern
    function render(tasks) {
      const root = document.getElementById('root');
      
      if (!tasks || tasks.length === 0) {
        root.innerHTML = '<div class="empty">📝 Noch keine Aufgaben. Füge deine erste hinzu!</div>';
        return;
      }
      
      root.innerHTML = `
        <div class="task-list">
          ${tasks.map(task => `
            <div class="task ${task.completed ? 'completed' : ''}">
              <span>${task.title}</span>
            </div>
          `).join('')}
        </div>
      `;
    }
    
    // Erstes Rendern
    render(toolOutput?.tasks || []);
    
    // Auf Updates hören (wenn ChatGPT Daten aktualisiert)
    window.addEventListener("openai:set_globals", (event) => {
      const newTasks = event.detail?.globals?.toolOutput?.tasks;
      if (newTasks) render(newTasks);
    });
  </script>
</body>
</html>

Das ist normales HTML. Die Magie liegt in window.openai – so übergibt uns ChatGPT Daten.

Schritt 4: Lokal ausführen

Öffne zwei Terminals.

Terminal 1 (Server starten):

node server.js

Du siehst: 🚀 Server läuft: http://localhost:8787/mcp

Terminal 2 (öffentlicher Tunnel):

ngrok http 8787

ngrok gibt dir eine öffentliche URL wie https://abc123.ngrok.app. Kopiere sie.

Schritt 5: Mit ChatGPT verbinden

1. Öffne ChatGPT
2. Settings → Apps & Connectors → Advanced settings
3. Aktiviere Developer Mode (braucht Plus oder Pro)
4. Klicke Create Connector
5. Gib URL ein: https://deine-ngrok-url.ngrok.app/mcp
6. Speichern

Schritt 6: Testen!

Öffne einen neuen Chat und tippe:

Aufgabe hinzufügen: Milch kaufen

Wenn alles richtig ist – siehst du ein Widget mit der Aufgabe!

Probiere mehr:

Aufgabe hinzufügen: Ins Fitnessstudio gehen
Aufgabe hinzufügen: Mama anrufen

Siehst du die Aufgabenliste direkt im Chat? Glückwunsch, du hast gerade deine erste ChatGPT-App erstellt! 🎉

Was kommt als Nächstes?

Das ist das grundlegendste Beispiel. Als Nächstes kannst du:

• Aufgabenlöschung hinzufügen
• Checkboxen zum Markieren als erledigt erstellen
• Eine echte Datenbank verbinden (PostgreSQL, MongoDB)
• OAuth-Autorisierung hinzufügen
• Auf Vercel deployen (kostenlos)

Aber du verstehst das Prinzip. Der Rest sind Details.

Erweiterte Features (wenn Basics langweilig werden)

Okay, Todo-Liste gemacht. Jetzt willst du etwas Ernsthafteres. Hier ist, was du sonst noch tun kannst:

OAuth-Autorisierung

Wenn deine App mit persönlichen Daten der Nutzer arbeitet (wie Spotify-Playlists oder Google Drive), brauchst du Autorisierung.

ChatGPT unterstützt OAuth 2.1 mit PKCE. Klingt beängstigend, funktioniert aber einfach:

1. Nutzer ruft deine App zum ersten Mal auf
2. ChatGPT zeigt „Konto verbinden"
3. Leitet zu deinem Authorization Server weiter
4. Nutzer gewährt Zugriff
5. Dein Server gibt ein Token zurück
6. ChatGPT speichert das Token und sendet es bei jeder Anfrage

Im Code sieht das so aus:

server.registerTool(
  "get_user_playlists",
  {
    title: "Playlists abrufen",
    _meta: {
      "openai/auth": [{ type: "oauth2" }]  // Autorisierung erforderlich
    }
  },
  async (args, context) => {
    // Token prüfen
    const token = context.headers?.authorization?.replace('Bearer ', '');
    
    if (!token) {
      return {
        error: "Unauthorized",
        _meta: { 
          "mcp/www_authenticate": { error: "invalid_token" } 
        }
      };
    }
    
    // Daten abrufen
    const playlists = await fetchSpotifyPlaylists(token);
    return { content: [{ type: "text", text: JSON.stringify(playlists) }] };
  }
);

Details zur Einrichtung eines Auth-Servers sind ein separates Thema. Kurz gesagt: Du brauchst einen /authorize-Endpoint, /token-Endpoint und Server-Metadaten. Lies die Docs, dort ist es erklärt.

Fullscreen-Widgets

Manchmal ist ein Widget im Chat zu klein. Wie für eine Karte. Du brauchst Fullscreen.

// Im Widget
await window.openai.requestDisplayMode({ mode: "fullscreen" });

Es gibt drei Modi:

• inline — normales Widget im Chat (Standard)
• fullscreen — Vollbild (für Karten, Grafiken)
• pip (Picture-in-Picture) — schwebendes Fenster (für Video, Musik)

Wechseln über window.openai.requestDisplayMode().

Agentic Commerce Protocol (ACP) – Verkäufe direkt in ChatGPT

Willst du Produkte über ChatGPT verkaufen? OpenAI und Stripe haben dafür einen offenen Standard gemacht – ACP.

Wie es funktioniert:

1. Du hast Produkte (Product Feed in JSON/CSV/XML)
2. Nutzer: „ChatGPT, bestelle Nike Air Max Sneaker für mich, Größe 42"
3. ChatGPT findet das Produkt in deinem Feed
4. Zeigt Produktkarte (Foto, Preis, Beschreibung)
5. Nutzer: „Kaufen"
6. Instant Checkout – Zahlung über deinen Payment Provider (Stripe/PayPal)
7. Du erhältst einen Webhook über den Kauf
8. Versende das Produkt

Provision: OpenAI nimmt einen kleinen Prozentsatz vom Verkauf (genaue Zahlen nicht offengelegt).

Wer arbeitet bereits: Instacart (vollständiger Instant Checkout), 1M+ Shopify Merchants.

Das funktioniert wirklich. Leute kaufen direkt im Chat, ohne auf die Website zu gehen.

Deployment: In Produktion gehen

Alles funktioniert lokal, aber Nutzer brauchen einen stabilen Server. ngrok stirbt in einer Stunde – keine Option.

Option 1: Vercel (am einfachsten)

Vercel unterstützt ChatGPT Apps offiziell. Es gibt einen kostenlosen Tier, reicht zum Starten.

npm i -g vercel
vercel login
vercel

Das war's. Vercel richtet HTTPS ein, konfiguriert CDN, gibt dir eine stabile URL.

Fertige Vorlage von Vercel:

vercel.com/templates/next.js/chatgpt-app-with-next-js

Option 2: Railway / Fly.io / Render

Wenn du mehr Kontrolle brauchst (eigenes Docker, eigene Env-Variablen, etc.):

Railway:

railway login
railway link
railway up

Fly.io:

fly launch
fly deploy

Alle drei Plattformen sind kostenlos zum Starten, dann zahlst du für Ressourcen. Günstig.

Production-Checkliste

Vor dem Start prüfen:

✅ HTTPS — obligatorisch, sonst verbindet sich ChatGPT nicht

✅ CORS — erlaube https://chatgpt.com

✅ Health check — / sollte 200 zurückgeben

✅ Rate limiting — damit du nicht DDoS'd wirst

✅ Env-Variablen — keine Secrets im Code

✅ Logging — um zu verstehen, was kaputt ging

✅ Monitoring — Uptime, Latenz, Fehler

Minimales CORS für Express:

app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Methods', 'GET, POST, OPTIONS');
  res.header('Access-Control-Allow-Headers', 'content-type, mcp-session-id');
  next();
});

Das reicht zum Anfangen.

ChatGPT App Directory: Einreichungen JETZT offen

Die häufigste Frage war: „Wann können wir veröffentlichen?"

Antwort: Du kannst bereits. 17. Dezember 2025 hat OpenAI Einreichungen für alle Entwickler geöffnet.

Status am 18. Dezember 2025:

✅ App Directory gestartet — https://chatgpt.com/apps

✅ Einreichungen offen — über platform.openai.com

✅ Apps SDK in BETA — jeder Entwickler kann es nutzen

✅ Erste genehmigte Apps — werden ab Januar 2026 erscheinen

Wer ist bereits da:

• Spotify — Playlists, Empfehlungen
• Booking.com, Expedia — Reisen
• Canva, Figma — Design und Präsentationen
• Zillow — US-Immobilien
• Coursera — Bildungskurse
• AllTrails — Wanderwege und Routen
• Coupler, Daloopa, Coveo, Egnyte, Hex — Enterprise-Tools

Insgesamt weniger als 20 Apps. Das ist ALLES. Der Katalog ist fast leer.

Wie du deine App einreichst (Schritt für Schritt)

Schritt 1: App vorbereiten

Vor der Einreichung sicherstellen:

• App im Developer Mode getestet
• Server läuft auf HTTPS (obligatorisch!)
• Folgt App Submission Guidelines
• Hat Privacy Policy und Terms of Service
• UI entspricht OpenAI-Richtlinien

Schritt 2: Gehe zur OpenAI Developer Platform

Gehe zu platform.openai.com → „ChatGPT Apps"-Bereich → „Submit App".

Schritt 3: Fülle Einreichungsformular aus

Du musst angeben:

App-Informationen:

• App-Name (einzigartig, klar)
• Beschreibung (was sie tut, für wen sie nützlich ist)
• Kategorie (productivity, travel, education, entertainment, etc.)
• Icon und Banner für Katalog (PNG, bestimmte Größen)

MCP-Details:

• Deine MCP-Server-URL (muss über HTTPS erreichbar sein)
• Liste der vom Server bereitgestellten Tools
• Authentifizierungseinstellungen (falls OAuth benötigt)
• Widget-Endpoints

Testing Guidelines:

• Testszenarien für Reviewer (wie zu prüfen, dass alles funktioniert)
• Beispiel-Prompts, die deine App triggern
• Erwartetes Verhalten

Screenshots / UI-Vorschauen:

• Screenshots von Widgets in ChatGPT
• Demonstration der Hauptfunktionen
• Zeige, wie die App in Light/Dark-Themes aussieht

Länderverfügbarkeit:

• In welchen Ländern die App verfügbar sein wird
• Regionale Einschränkungen (falls vorhanden)

Privacy Policy:

• Obligatorisch für alle Apps
• Welche Daten du sammelst, wie du sie verwendest, wie du sie speicherst
• Link zum vollständigen Richtlinientext

Release Notes:

• Was ist neu in dieser Version
• Bekannte Einschränkungen oder Bugs
• Zukünftige Pläne (optional)

Schritt 4: Zur Überprüfung einreichen

Klicke „Submit". OpenAI beginnt zu prüfen:

• Technisches Review (funktioniert der Server, gibt es Bugs)
• Sicherheits-Review (gibt es Schwachstellen, werden Daten korrekt behandelt)
• Policy-Review (entspricht Usage Policies)
• UX-Review (ist es bequem zu nutzen)

Review-Zeitrahmen: von ein paar Tagen bis ein paar Wochen (hängt von der Komplexität ab).

Schritt 5: Antwort erhalten

Entweder Genehmigt — Glückwunsch, die App kommt in den Katalog!

Oder Änderungen angefordert — müssen Probleme beheben und erneut einreichen.

Nach Genehmigung erscheint deine App im App Directory, und 800 Millionen Nutzer können sie finden.

Anforderungen für Genehmigung

Um das Review zu bestehen, muss die App:

✅ Usage Policies von OpenAI entsprechen

✅ Für alle Zielgruppen geeignet sein (keine Erwachseneninhalte, Gewalt, Hassrede)

✅ Nur notwendige Daten anfordern (Least-Privilege-Prinzip)

✅ Einen funktionierenden HTTPS-Endpoint haben (HTTP funktioniert nicht)

✅ Klare Privacy Policy bereitstellen

✅ UI Guidelines folgen (Design-Konsistenz, Barrierefreiheit)

✅ Terms of Service von Drittanbieter-Services nicht verletzen (falls Integration)

Automatische Ablehnung wenn:

• Kein HTTPS
• Keine Privacy Policy
• Daten anfordern, die nicht für Funktionalität benötigt werden (z.B. Standort, wenn du ihn nicht nutzt)
• UI nicht responsive oder kaputt
• App stürzt mit Fehlern ab

Was nach Genehmigung tun

Deine App erscheint im Katalog – Nutzer können sie über Suche oder Featured-Bereich finden.

Wie Nutzer dich finden werden:

1. Katalogsuche — Suche nach Schlüsselwörtern
2. @mention — im Chat tippen @deine_app mach etwas
3. Empfehlungen — ChatGPT selbst schlägt deine App vor, wenn es eine relevante Anfrage sieht
4. Featured — beste Apps kommen in empfohlene

Deep Links:

Du kannst direkte Links zu deiner App teilen:

https://chatgpt.com/apps/deine-app

Poste in sozialen Medien, auf deiner Website, in Newslettern – Leute klicken und landen direkt in deiner App in ChatGPT.

• Support-Kontakte
• Sicherheitszertifizierung (falls mit Geld arbeitend)

Monetarisierung – kann man wirklich Geld verdienen?

Die Millionen-Dollar-Frage (buchstäblich).

Einkommensmöglichkeiten:

Instant Checkout funktioniert bereits. Instacart verkauft Lebensmittel direkt in ChatGPT, OpenAI nimmt eine Provision (Größe nicht offengelegt, aber sie sagen „angemessen").

Subscription wird in Q1-Q2 2026 starten. Wie im App Store – Nutzer zahlen für die App, OpenAI nimmt ~30% (vermutlich).

Wie viel kann man verdienen?

Niemand weiß es. Der Store ist nicht offen, es gibt keine Statistiken. Aber wir können uns am App Store orientieren:

• Top 1% der Apps: $10K-100K+/Monat
• Top 10%: $1K-10K/Monat
• Der Rest: $0-1K/Monat

ChatGPT Apps hat höheres Potenzial, weil:

1. AI selbst empfiehlt Apps (kostenlose Discovery)
2. Conversion ist höher (alles im Chat, kein Wechsel)
3. Instant Checkout reduziert Reibung

Aber vorerst – Ungewissheit. Die Ersten werden experimentieren.

Für wen ist das (ehrliches Gespräch)

Nicht jeder sollte sich auf ChatGPT Apps stürzen. Seien wir ehrlich.

✅ Das ist für dich, wenn:

• Du in TypeScript oder Python programmieren kannst
• Du REST API, HTTP, JSON verstehst
• Du eine App-Idee für ein breites Publikum hast
• Du bereit bist zu lernen und zu experimentieren
• Du keine Angst vor Veränderungen hast (SDK in Preview, alles entwickelt sich)
• Du in eine neue Branche am Anfang einsteigen willst

❌ NICHT anfangen, wenn:

• Du ein kompletter Anfänger in der Programmierung bist (lerne erst die Grundlagen!)
• Du sofortigen Gewinn ohne Arbeit erwartest
• Du gerade jetzt stabiles Einkommen brauchst (vorerst kannst du nur auf deine Website für Käufe verlinken)
• Du ein enges B2B-Produkt machst (ChatGPT ist für den Massenmarkt)
• Du nicht bereit bist für Technologiewechsel

Echte Gehälter für AI-Entwickler

Wenn du nicht deine eigene App erstellst, sondern in einem Unternehmen arbeitest:

USA (2025):

• Junior AI Developer: $95K-$130K/Jahr
• Mid AI Engineer: $161K-$220K/Jahr
• Senior AI Engineer: $301K-$440K/Jahr
• AI Research Scientist: $500K-$893K/Jahr

Remote-Arbeit nach Region:

• Westeuropa: €60K-€120K/Jahr
• Osteuropa: $35K-$80K/Jahr
• Indien: $15K-$45K/Jahr
• China: $25K-$70K/Jahr
• Südamerika: $30K-$65K/Jahr

Freelance (global): $35-$116/Stunde (durchschnittlich $65-75)

Quellen: levels.fyi, Glassdoor, AngelList (Dezember 2025)

Die Nachfrage nach AI-Entwicklern wächst jährlich um 10-20%. Und wird weiter wachsen.

Die echten Herausforderungen beim Erstellen von ChatGPT Apps

Okay, ich habe dir den ganzen Artikel lang erzählt, wie cool und einfach das ist. Aber seien wir ehrlich – es läuft nicht alles glatt.

Es gibt echte Herausforderungen, denen Entwickler gegenüberstehen:

1. Paradigmenwechsel

Das ist der schwierigste Teil. Du bist es gewohnt, normale Apps zu schreiben: Nutzer klickt Button → Code wird ausgeführt → Ergebnis wird angezeigt. Alles vorhersehbar.

Bei ChatGPT Apps ist es anders:

• AI entscheidet, wann dein Tool aufgerufen wird
• Nutzer spricht natürliche Sprache, klickt nicht UI
• Deine App ist ein Werkzeug in den Händen der AI, keine direkte Logik

Du musst lernen, wie ein AI-Ingenieur zu denken, nicht wie ein klassischer Webentwickler. Es ist wie der Übergang von prozeduraler zu funktionaler Programmierung – die Technik scheint vertraut, aber der Ansatz ist anders.

2. MCP Protocol – neuer Standard

MCP ist gerade erst erschienen, es gibt wenig Dokumentation, Best Practices bilden sich noch. Du kannst nicht googeln „wie mache ich X in MCP" – Stack Overflow ist leer.

Du musst offizielle Docs lesen (die manchmal unvollständig sind), Beispiele von OpenAI studieren, experimentieren.

3. Debugging ist schwieriger als bei normalen Web-Apps

In einer normalen App siehst du die Anfrage → schaust in Logs → verstehst, was kaputt ging.

Bei ChatGPT Apps:

• AI könnte den Prompt falsch interpretieren
• Tool könnte aufgerufen werden, wenn du es nicht erwartest
• Widget rendert in sandboxed iframe – DevTools hilft nicht immer
• Fehler können auf drei Ebenen sein: AI, MCP Transport, dein Code

Du brauchst neue Debugging-Fähigkeiten.

4. OAuth und Sicherheit – hohe Verantwortung

Wenn deine App mit persönlichen Daten arbeitet, brauchst du OAuth. Aber es ist nicht nur „installiere eine Bibliothek und es funktioniert".

Du musst:

• Authorization Server einrichten
• PKCE Flow implementieren
• Tokens bei jeder Anfrage validieren
• Sichere Secret-Speicherung gewährleisten
• Sicherheits-Review von OpenAI bestehen

Ein Fehler – und Nutzerdaten-Leak. Ernsthaft.

5. Production Deployment – nicht nur „auf Hosting hochladen"

HTTPS ist obligatorisch. CORS benötigt. SSE/Streaming HTTP muss funktionieren. Health Checks. Rate Limiting. Monitoring. Logging ohne Leak sensibler Daten.

Für einen Junior-Entwickler kann das überwältigend sein.

6. Konkurrenz mit großen Playern

Wenn der Store öffnet, werden nicht nur Indie-Entwickler einsteigen. Spotify, Booking, Canva – das sind große Unternehmen mit großen Teams.

Wie mit ihnen konkurrieren? Du brauchst eine klare Strategie, Nischenfokus, Marktverständnis.

7. Schnell wechselndes Ökosystem

Apps SDK ist in Preview. Features werden jede Woche hinzugefügt. Was vor einem Monat funktionierte, könnte nach einem Update kaputtgehen.

Du musst bereit sein, dich schnell anzupassen.

Deshalb brauchst du einen fundamentalen Kurs, nicht nur ein „30-Minuten-Tutorial".

Training: Kurs von CodeGym

Wir bei CodeGym verstehen diese Herausforderungen. Und genau deshalb erstellen wir nicht nur „ChatGPT Apps Grundlagen in einer halben Stunde", sondern einen vollständigen Production-Grade-Kurs, der dich auf echte Entwicklung vorbereitet.

Was wir anders machen

1. Schrittweiser Paradigmenwechsel

Der Kurs beginnt mit klassischer Webentwicklung und geht dann sanft zu einem AI-First-Ansatz über. Du springst nicht ins kalte Wasser – du gehst Schritt für Schritt.

2. Tiefes Eintauchen in MCP

Wir sagen nicht nur „so funktioniert MCP". Wir zerlegen:

• Interne Architektur des Protokolls
• Wie AI entscheidet, ein Tool aufzurufen
• Optimierung von Tool-Beschreibungen für bessere Discovery
• Fortgeschrittene Muster für die Arbeit mit Resources
• Debugging auf allen Stack-Ebenen

3. Real-World-Projekte, nicht Hello World

40 praktische Aufgaben – nicht „mach eine Todo-Liste". Das sind:

• E-Commerce-App mit Instant Checkout
• Reiseplaner mit Karten-Integration
• Content-Creation-Tool mit AI-Generierung
• Analytics-Dashboard mit Echtzeit-Daten
• Und 36 weitere Aufgaben

4. Security First

Separates Modul zur Sicherheit:

• OAuth 2.1 mit PKCE (Schritt für Schritt)
• Token-Validierung
• Rate-Limiting-Strategien
• PII-Schutz
• GDPR/CCPA-Compliance

5. Production Deployment unter realen Bedingungen

Nicht nur „hier ist ein Befehl für Vercel". Sondern:

• Plattformvergleich (Vercel, Railway, AWS)
• CI/CD Pipelines
• Monitoring und Alerting
• Error Tracking
• Performance-Optimierung
• Skalierungsstrategien

6. NestJS als Fundament

Der gesamte Kurs basiert auf NestJS – einem modernen TypeScript-Framework für Backend-Entwicklung.

Warum N