Dieser Skill bietet umfassende Dokumentation für die Entwicklung von ChatGPT-Apps mit interaktiven Widgets mithilfe von mcp-use und dem OpenAI Apps SDK. Er führt Entwickler durch Architektur, Einrichtung, Implementierung und fortgeschrittene Muster zur Erstellung umfangreicher, interaktiver ChatGPT-Erlebnisse.
تنزيل ZIP المهارة
رفع في Claude
اذهب إلى Settings → Capabilities → Skills → Upload skill
فعّل وابدأ الاستخدام
اختبرها
استخدام "chatgpt-app-builder". Wie erstelle ich ein Widget, das Suchergebnisse anzeigt?
النتيجة المتوقعة:
- Verwende den widget()-Helfer in deinem server.tool()-Handler
- Gib widget({ props: searchResults, output: text('X Ergebnisse gefunden') }) zurück
- Erstelle eine React-Komponente in resources/, die Props über useWidget() erhält
استخدام "chatgpt-app-builder". Was ist der Unterschied zwischen props und output?
النتيجة المتوقعة:
- output: Was das LLM im Gespräch sieht (Text, Objekt, Markdown)
- props: Daten, die an die Widget-UI gesendet werden (vor dem LLM verborgen)
التدقيق الأمني
آمنThis skill is documentation/reference material for building ChatGPT apps with mcp-use. All static analyzer findings are false positives: (1) 'Weak cryptographic algorithm' triggers on 'sha' substring in words like 'shape' - no actual crypto usage; (2) 'Ruby/shell backtick execution' detects markdown code fences, not shell commands; (3) 'System reconnaissance' and 'Hardcoded URL' are documentation patterns; (4) The critical heuristic 'Code execution + Network + Credential access' is triggered by documentation showing code examples with URLs and environment variables - standard documentation practice, not malicious behavior. This skill contains no executable code.
مشكلات منخفضة المخاطر (2)
درجة الجودة
ماذا يمكنك بناءه
ChatGPT-Apps mit interaktiven Widgets erstellen
Entwickler lernt, ChatGPT-Apps mit umfangreichen interaktiven UI-Komponenten mithilfe des mcp-use-Frameworks zu erstellen
MCP-Server-Entwicklung
Entwickler erstellt MCP (Model Context Protocol) Server mit benutzerdefinierten React-Widgets für KI-Assistenten
ChatGPT-Plugin-Architektur
Ingenieur entwirft widget-basierte Interaktionen für ChatGPT- oder Claude-Gespräche
جرّب هذه الموجهات
Ich möchte eine ChatGPT-App mit interaktiven Widgets mithilfe von mcp-use erstellen. Wie richte ich das Projekt ein und erstelle mein erstes Widget?
Sollte ich ein Tool oder ein Widget für eine Restaurantsuche verwenden, die Ergebnisse in einer Liste anzeigt und Benutzern das Klicken für Details ermöglicht?
Wie persistiere ich den Widget-Zustand über Gespräche hinweg und löse das LLM aus Widget-Interaktionen aus?
Erstelle ein mehrstufiges Widget mit Formulareingabe, API-Aufrufen und bedingtem Rendering basierend auf der Benutzerauswahl.
أفضل الممارسات
- Beginne nur mit Tools, upgrade zu Widgets nur wenn visuelle Interaktion benötigt wird
- Halte Widgets auf einen einzigen Zweck fokussiert - mehrere einfache Widgets skalieren besser als ein komplexes Widget
- Verwende props für sensible Daten, die das LLM nicht sehen sollte, output für konversationellen Kontext
تجنب
- Lazy-Loading von Daten, die sofort zurückgegeben werden sollten - Tool-Aufrufe sind teuer
- Verwendung von Tools für widget-interne Zustandsverwaltung - halte Flugsuche, Formulardaten im Widget-Zustand
- Erstellen von Widgets für rein konversationelle Funktionen, die keine visuelle Darstellung benötigen