📦

chatgpt-app-builder

Name: chatgpt-app-builder
Author: mcp-use

آمن

Créer des applications ChatGPT avec des widgets

متاح أيضًا من: BayramAnnakov

Cette compétence fournit une documentation complète pour créer des applications ChatGPT avec des widgets interactifs utilisant mcp-use et OpenAI Apps SDK. Elle guide les développeurs à travers l'architecture, la configuration, la mise en œuvre et les modèles avancés pour créer des expériences ChatGPT riches et interactives.

يدعم: Claude Codex Code(CC)

🥉 76 برونزي

تنزيل ZIP المهارة

رفع في Claude

اذهب إلى Settings → Capabilities → Skills → Upload skill

فعّل وابدأ الاستخدام

اختبرها

استخدام "chatgpt-app-builder". Comment créer un widget qui affiche les résultats de recherche ?

النتيجة المتوقعة:

Utilisez le helper widget() dans votre gestionnaire server.tool()
Retournez widget({ props: searchResults, output: text('X résultats trouvés') })
Créez un composant React dans resources/ qui reçoit les props via useWidget()

استخدام "chatgpt-app-builder". Quelle est la différence entre props et output ?

النتيجة المتوقعة:

output: Ce que le LLM voit dans la conversation (texte, objet, markdown)
props: Données envoyées à l'interface du widget (caché du LLM)

التدقيق الأمني

آمن

v1 • 2/22/2026

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,127

الأسطر التي تم تحليلها

النتائج

إجمالي عمليات التدقيق

مشكلات منخفضة المخاطر (2)

references/setup.md:37-38 references/csp-and-metadata.md:22-23

Hardcoded URLs in Documentation

URLs appear in documentation files (references/setup.md, references/csp-and-metadata.md). These are legitimate API endpoint references in documentation, not security issues.

references/server-and-widgets.md:29

Environment Variable Access in Code Examples

Documentation shows process.env usage (e.g., process.env.MCP_URL). This is standard configuration pattern in code examples, not credential exfiltration.

تم تدقيقه بواسطة: claude

درجة الجودة

الهندسة المعمارية

100

قابلية الصيانة

المحتوى

المجتمع

100

الأمان

الامتثال للمواصفات

ماذا يمكنك بناءه

Créer des applications ChatGPT avec des widgets interactifs

Développeur apprenant à créer des applications ChatGPT avec des composants d'interface utilisateur riches et interactifs en utilisant le framework mcp-use

Développement de serveurs MCP

Développeur créant des serveurs MCP (Model Context Protocol) avec des widgets React personnalisés pour les assistants IA

Architecture des plugins ChatGPT

Ingénieur concevant des interactions basées sur des widgets pour les conversations ChatGPT ou Claude

جرّب هذه الموجهات

Commencer avec les widgets

Je veux créer une application ChatGPT avec des widgets interactifs utilisant mcp-use. Comment configurer le projet et créer mon premier widget ?

Décision d'architecture

Devrais-je utiliser un outil ou un widget pour une fonctionnalité de recherche de restaurant qui affiche les résultats dans une liste et permet aux utilisateurs de cliquer pour voir les détails ?

Gestion d'état

Comment persister l'état du widget à travers les conversations et déclencher le LLM à partir des interactions du widget ?

Modèle de widget avancé

Créer un widget multi-étapes avec saisie de formulaire, appels d'API et rendu conditionnel basé sur la sélection de l'utilisateur.

أفضل الممارسات

Commencez par des outils uniquement, passez aux widgets uniquement lorsque l'interaction visuelle est nécessaire
Gardez les widgets concentrés sur un seul objectif - plusieurs widgets simples passent mieux à l'échelle qu'un widget complexe
Utilisez props pour les données sensibles que le LLM ne devrait pas voir, output pour le contexte conversationnel

تجنب

Chargement lazy de données qui devraient être retournées upfront - les appels d'outils sont coûteux
Utiliser des outils pour la gestion d'état interne du widget - gardez la sélection de vol, les données de formulaire dans l'état du widget
Créer des widgets pour des fonctionnalités purement conversationnelles qui n'ont pas besoin de représentation visuelle

الأسئلة المتكررة

Qu'est-ce que mcp-use ?

mcp-use est un framework pour créer des applications ChatGPT avec des widgets interactifs utilisant le Model Context Protocol (MCP) et OpenAI Apps SDK.

Pourquoi cette compétence est-elle obsolète ?

Cette compétence a été remplacée par mcp-app-builder, qui fournit les mêmes fonctionnalités avec une implémentation améliorée. Les utilisateurs devraient installer mcp-app-builder à la place.

Dois-je installer quelque chose ?

Oui, vous devez installer le package mcp-use : npm install mcp-use. Cette compétence fournit de la documentation pour utiliser la bibliothèque.

Quelle est la différence entre un outil et un widget ?

Un outil est une action backend sans interface utilisateur. Un widget est un outil avec un composant d'interface React qui s'affiche visuellement dans l'interface de chat.

Puis-je utiliser ceci avec Claude Code ?

Oui, cette compétence prend en charge Claude, Codex et Claude Code comme outils IA pris en charge.

Est-ce uniquement pour ChatGPT ?

Cette compétence est conçue pour les applications ChatGPT et OpenAI Apps SDK, mais les concepts s'appliquent à tout assistant IA qui prend en charge les widgets interactifs.