ChatGPT App Builder (veraltet)
WARNUNG: Diese Skill ist veraltet. Verwende stattdessen mcp-app-builder.
Erstelle ChatGPT-Apps mit interaktiven Widgets unter Verwendung von mcp-use. Widget-Entwicklung ohne Konfiguration mit automatischer Registrierung und integrierten React-Hooks.
Die App wird von zwei Benutzern gleichzeitig genutzt: dem Menschen und dem ChatGPT-LLM. Sie arbeiten über das Widget zusammen – der Mensch interagiert damit, das LLM sieht seinen Zustand. Das Widget ist eure gemeinsame Oberfläche.
Vor dem Programmieren
- Klärung, was gebaut werden soll → discover.md: beim Start einer neuen App, Validieren einer Idee oder Abstecken von Funktionen
- Werkzeuge und Widgets entwerfen → architecture.md: wenn entschieden werden muss, was eine Benutzeroberfläche benötigt vs. reine Werkzeuge, oder beim Entwerfen von UX-Abläufen
Einrichtung
- Gerüst erstellen und ausführen → setup.md: beim Erstellen eines neuen Projekts, Starten des Entwicklungsservers oder Verbinden mit ChatGPT/Claude
Implementierung
- Server-Handler + Widget-Erstellung → server-and-widgets.md: beim Schreiben von server.tool() mit Widgets, widget()-Hilfsfunktionen und React-Widget-Dateien
- Widget-Zustand und LLM-Kontext → state-and-context.md: beim Persistieren von Zuständen, Auslösen des LLMs aus dem Widget, Verwalten von flüchtigen vs. persistenten Daten
- Anzeigemodi, Design, Layout → ui-guidelines.md: beim Anpassen an Inline-/Vollbild-/PiP, Umgang mit Design, Gerät und Sprache
- Komponenten-API → components-api.md: bei Verwendung von McpUseProvider, Image, ErrorBoundary, useWidget
- CSP und Metadaten → csp-and-metadata.md: beim Konfigurieren externer Domänen und Dual-Protokoll-Metadaten
- Fortgeschrittene Muster → widget-patterns.md: beim Erstellen komplexer Widgets mit Tool-Aufrufen, Zuständen und Theming
Kurzreferenz
// Server
import { MCPServer, widget, text, object } from "mcp-use/server";
server.tool({ name: "...", schema: z.object({...}), widget: { name: "widget-name" } },
async (input) => widget({ props: {...}, output: text("...") })
);
// Widget (resources/widget-name.tsx)
import { McpUseProvider, useWidget, type WidgetMetadata } from "mcp-use/react";
export const widgetMetadata: WidgetMetadata = { description: "...", props: z.object({...}) };
export default function MyWidget() {
const { props, isPending, callTool, sendFollowUpMessage, state, setState, theme } = useWidget();
if (isPending) return <McpUseProvider autoSize><div>Laden...</div></McpUseProvider>;
return <McpUseProvider autoSize><div>{/* UI */}</div></McpUseProvider>;
}