المهارات chatgpt-app-builder
📦

chatgpt-app-builder

آمن

Crear aplicaciones ChatGPT con widgets

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

Esta habilidad proporciona documentación completa para crear aplicaciones ChatGPT con widgets interactivos utilizando mcp-use y OpenAI Apps SDK. Guía a los desarrolladores a través de la arquitectura, configuración, implementación y patrones avanzados para crear experiencias ChatGPT ricas e interactivas.

يدعم: Claude Codex Code(CC)
🥉 76 برونزي
1

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

2

رفع في Claude

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

3

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

اختبرها

استخدام "chatgpt-app-builder". ¿Cómo creo un widget que muestra resultados de búsqueda?

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

  • Usa el helper widget() en tu handler server.tool()
  • Retorna widget({ props: searchResults, output: text('Se encontraron X resultados') })
  • Crea un componente React en resources/ que recibe props vía useWidget()

استخدام "chatgpt-app-builder". ¿Cuál es la diferencia entre props y output?

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

  • output: Lo que el LLM ve en la conversación (texto, objeto, markdown)
  • props: Datos enviados a la UI del widget (ocultos del 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.

18
الملفات التي تم فحصها
2,127
الأسطر التي تم تحليلها
2
النتائج
1
إجمالي عمليات التدقيق
مشكلات منخفضة المخاطر (2)
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.
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

درجة الجودة

45
الهندسة المعمارية
100
قابلية الصيانة
87
المحتوى
50
المجتمع
100
الأمان
91
الامتثال للمواصفات

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

Crear aplicaciones ChatGPT con widgets interactivos

Desarrollador que aprende a crear aplicaciones ChatGPT con componentes de UI ricos e interactivos usando el framework mcp-use

Desarrollo de servidores MCP

Desarrollador que crea servidores MCP (Model Context Protocol) con widgets React personalizados para asistentes de IA

Arquitectura de plugins de ChatGPT

Ingeniero que diseña interacciones basadas en widgets para conversaciones de ChatGPT o Claude

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

Primeros pasos con widgets
Quiero crear una aplicación ChatGPT con widgets interactivos usando mcp-use. ¿Cómo configuro el proyecto y creo mi primer widget?
Decisión de arquitectura
¿Debería usar una herramienta o un widget para una función de búsqueda de restaurantes que muestra resultados en una lista y permite a los usuarios hacer clic para ver detalles?
Gestión de estado
¿Cómo persisto el estado del widget entre conversaciones y activo el LLM desde las interacciones del widget?
Patrón avanzado de widget
Crea un widget de múltiples pasos con entrada de formulario, llamadas a API y renderizado condicional basado en la selección del usuario.

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

  • Comienza solo con herramientas, actualiza a widgets solo cuando se necesita interacción visual
  • Mantén los widgets enfocados en un solo propósito - múltiples widgets simples escalan mejor que un widget complejo
  • Usa props para datos sensibles que el LLM no debe ver, output para contexto conversacional

تجنب

  • Carga perezosa de datos que deben devolverse de inmediato - las llamadas a herramientas son costosas
  • Usar herramientas para gestión de estado interno del widget - mantén la selección de vuelo, datos de formulario en el estado del widget
  • Crear widgets para características puramente conversacionales que no necesitan representación visual

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

¿Qué es mcp-use?
mcp-use es un framework para crear aplicaciones ChatGPT con widgets interactivos usando el Model Context Protocol (MCP) y OpenAI Apps SDK.
¿Por qué esta habilidad está obsoleta?
Esta habilidad ha sido reemplazada por mcp-app-builder, que proporciona la misma funcionalidad con implementación mejorada. Los usuarios deben instalar mcp-app-builder en su lugar.
¿Necesito instalar algo?
Sí, necesitas instalar el paquete mcp-use: npm install mcp-use. Esta habilidad proporciona documentación para usar la biblioteca.
¿Cuál es la diferencia entre una herramienta y un widget?
Una herramienta es una acción de backend sin UI. Un widget es una herramienta con un componente UI de React que se renderiza visualmente en la interfaz de chat.
¿Puedo usar esto con Claude Code?
Sí, esta habilidad soporta Claude, Codex y Claude Code como las herramientas de IA compatibles.
¿Esto es solo para ChatGPT?
Esta habilidad está diseñada para aplicaciones ChatGPT y OpenAI Apps SDK, pero los conceptos aplican a cualquier asistente de IA que soporte widgets interactivos.