Skip to main content

​
Introducción

Los widgets permiten renderizar contenido visual o interactivo directamente dentro de las conversaciones de ChatGPT cuando se invoca una tool del MCP.
Se basan en la tecnología de ChatKit Widgets de OpenAI, que habilita la representación de componentes enriquecidos como gráficos, tablas, formularios o dashboards dentro del flujo conversacional. Vista general del editor de widgets

​
Capa de abstracción de Devic

Devic proporciona una capa de abstracción que permite a los equipos técnicos definir y desplegar fácilmente los widgets que representarán visualmente su SaaS cuando un usuario interactúe con ChatGPT a través de su MCP. En otras palabras:
  • Tu SaaS puede definir sus propios componentes de interfaz (widgets).
  • Cuando un cliente usa ChatGPT y llama a una tool de tu MCP, el widget que hayas diseñado se mostrará con tu imagen de marca y experiencia visual personalizada.
  • Devic se encarga de gestionar la infraestructura, el enlace entre las tools y los widgets, y la publicación automática para ChatGPT.

​
Crear un nuevo widget

Para crear un nuevo widget, dirígete a la pestaña ChatGPT Apps dentro de tu MCP y haz clic en New. Se abrirá el editor de componentes, donde podrás definir el contenido del widget usando tres pestañas principales:
  • HTML — estructura del componente.
  • CSS — estilo visual.
  • JS — comportamiento dinámico o scripts.
Nuevo widget creado

​
Ejemplo de widget simple

HTML 
<div class="widget">Hello Widget</div>
CSS 
.widget {
  font-family: system-ui;
  padding: 8px;
  background: #222;
  color: #fff;
  border-radius: 6px;
}
JS 
// You can access the root element with document.currentScript?.parentElement
console.log('widget loaded');
Editor HTML, CSS y JS del widget

​
Parámetros del componente

A la derecha del editor, puedes configurar las propiedades del widget:
  • Name — nombre único del componente.
  • Description — breve descripción del propósito del widget.
  • Invoking Text / Invoked Text — textos mostrados mientras el widget se ejecuta.
  • Display with card border — opción para mostrar el widget dentro de una tarjeta visual.
Configuración de parámetros del componente

​
Vincular un widget a una Tool

Para que un widget pueda ser invocado automáticamente desde una Tool, debe asociarse a ella mediante el campo Widget Binding disponible en la sección More Options del configurador de la tool. Esto permite que, cuando la tool sea ejecutada, Devic renderice el widget vinculado con los datos devueltos en la conversación de ChatGPT. Vincular widget en More Options de la Tool
⚙️ Importante: el nombre indicado en Widget Binding debe coincidir exactamente con el nombre del widget creado.
Si no hay coincidencia, el componente no podrá ser invocado desde la tool.

​
Recursos adicionales

Para aprender más sobre cómo construir y utilizar widgets compatibles con ChatGPT, consulta la documentación oficial de OpenAI sobre ChatKit Widgets:
👉 https://platform.openai.com/docs/guides/chatkit-widgets

Siguiente paso

Aprende cómo integrar tus MCPs y widgets en aplicaciones externas mediante los SDKs de Devic.