Capturar información de los usuarios en un agente conversacional puede hacerse con preguntas tradicionales, pero hay una forma más visual y ordenada: las tarjetas adaptativas en Copilot Studio. Aprenderás a generarlas, integrarlas y conectar sus respuestas con variables para construir flujos más ricos dentro de tu agente.
¿Qué son las tarjetas adaptativas y por qué usarlas?
Una adaptive card es una interfaz que combina texto, imágenes y campos de selección dentro de un mismo bloque visual. Lo interesante es que se adapta al entorno donde se muestra: el mismo diseño se ve coherente en Copilot Studio, Outlook, Teams o SharePoint.
¿Qué hay detrás de una tarjeta adaptativa? Un archivo JSON. Ese JSON se interpreta y se ajusta a la interfaz de la aplicación que lo está leyendo, por eso funciona en distintos productos de Microsoft sin reescribirlo.
Usarlas tiene sentido cuando quieres comunicarte con el usuario de una forma más estructurada que una simple pregunta de texto, sobre todo si necesitas mostrar opciones, imágenes o capturar varios datos en un solo paso.
¿Cómo se diseña una tarjeta adaptativa sin programar?
Microsoft ofrece un diseñador visual en adaptivecards.microsoft.com/designer, donde puedes arrastrar imágenes, texto y campos, y obtener el JSON listo para exportar [2:00]. Configuras cada elemento desde el panel derecho: URL de imagen, contexto, estilos, etcétera.
Generar el JSON con Copilot
Una vía más rápida es pedirle a Copilot que genere la tarjeta directamente. En el ejemplo del hotel, se le solicita una Microsoft adaptive card con tres preguntas:
- Plan de alimentación con opciones: solo alojamiento, desayuno incluido, desayuno más cena incluidos, todo incluido.
- Servicios adicionales con selección múltiple: estacionamiento, transporte al aeropuerto, acceso al spa, actividades turísticas.
- Idioma preferido para la atención: español, inglés, francés y alemán.
Copilot usa internamente un modelo llamado Codex, especializado en generación de código, y devuelve el JSON completo listo para copiar [3:30]. No necesitas ser programador ni tocar el diseñador visual.
Pegar el código dentro de Copilot Studio
En Copilot Studio agregas un nodo de tipo tarjeta adaptativa, abres el editor, borras la plantilla por defecto y pegas el JSON tal cual lo entregó Copilot [5:00]. Desde ahí puedes ver la vista previa y comprobar que aparezcan los campos esperados.
¿Cómo conectar las respuestas con variables del agente?
Cada opción de la tarjeta tiene un título (lo que ve el usuario) y un valor (lo que recibe el sistema). Para que el flujo sea consistente al recorrer la estructura, conviene igualar título y valor en cada opción: solo alojamiento, desayuno incluido, todo incluido, español, inglés, francés, alemán [6:30].
¿Por qué igualar título y valor en una tarjeta adaptativa? Porque al mostrar resultados al usuario reutilizas el valor capturado. Si el valor coincide con el título, evitas mapeos extra y muestras textos legibles directamente.
Al guardar, Copilot Studio estructura el JSON automáticamente y expone las salidas como variables: meal plan, additional services, idioma preferido y tipo de habitación. Estas variables son la materia prima del siguiente paso del flujo.
¿Cómo confirmar la información capturada con el usuario?
Después de la tarjeta se agrega una nueva pregunta de tipo test (opción múltiple) con dos opciones: sí y no. El texto de la pregunta combina los datos recogidos para que el usuario los revise antes de continuar.
En lugar de escribir valores fijos, insertas variables dentro del mensaje:
- Tipo de habitación para confirmar la habitación seleccionada.
- Fecha del check-in capturada en pasos anteriores.
- Meal plan para el plan de alimentación.
- Idioma para la atención.
- Additional services para los servicios extra.
El resultado es un mensaje de confirmación dinámico, construido con los valores reales que el usuario eligió en la tarjeta adaptativa.
Manejar la respuesta con condicionales
Como la pregunta es opción múltiple, Copilot Studio crea automáticamente una bifurcación: una rama para sí y otra para no. En la rama de no se usa la opción administración de temas para regresar a un paso anterior, antes de la tarjeta adaptativa, de modo que el usuario pueda corregir cualquier dato sin reiniciar la conversación [10:30].
¿Cómo regreso a un paso anterior en Copilot Studio? Desde el nodo, eliges administración de temas, seleccionas ir al paso anterior y apuntas a la pregunta exacta a la que quieres volver. Así controlas el punto de retorno cuando hay un error.
¿Cuándo usar tarjetas adaptativas en tu proyecto?
No toda interacción merece una tarjeta. La regla práctica: usa preguntas simples cuando capturas un dato puntual y reserva las tarjetas adaptativas para momentos donde el usuario debe elegir entre varias categorías, marcar opciones múltiples o ver un resumen visual estructurado.
En el proyecto del hotel, los tópicos ya definidos contienen preguntas que pueden migrar a una tarjeta: planes, servicios, idioma. Y los resultados también pueden mostrarse en una tarjeta adaptativa usando las mismas variables, cerrando el ciclo de captura y confirmación.
¿Qué parte de tu agente convertirías en tarjeta adaptativa? Cuéntalo en los comentarios.
