AI Interface
AI Interface
8 reglasStreaming texto: renderizar markdown seguro
El texto generado por LLM llega en tokens, nunca esperar el texto completo para renderizar. Usar un parser de markdown incremental (marked.js, micromark) con DOMPurify para sanitizar antes de insertar en el DOM. El rendering parcial debe ser estable: no hacer re-layout en cada token, acumular en un buffer de ~50ms antes de actualizar el DOM.
chrome developers · mdnlet buffer = "";
let timer = null;
source.on("chunk", (chunk) => {
buffer += chunk;
if (!timer) {
timer = setTimeout(() => {
el.innerHTML = DOMPurify.sanitize(
marked.parse(buffer)
);
timer = null;
}, 50);
}
});
source.on("chunk", (chunk) => {
el.innerHTML = chunk;
});
// Si el modelo devuelve <img onerror="...">
// se ejecuta JS arbitrario en el cliente
Estados de carga LLM: typing indicator + stop
Las llamadas a LLM pueden tardar 10-30 segundos. El typing indicator (tres puntos animados) comunica que el modelo esta procesando sin implicar que ya hay texto. Siempre ofrecer un botón "Detener generación" activo durante el streaming, el usuario puede ver que la respuesta va en la dirección equivocada y querer interrumpirla. El botón desaparece cuando la generación termina.
chrome developers . nngroupIndicadores de confianza y limitaciones
Un LLM puede alucinar. La interfaz debe comunicar activamente las limitaciones del modelo: fecha de corte de conocimiento, posibilidad de errores en datos factuales, y que no reemplaza consejo profesional en contextos medicos, legales o financieros. Esto no es disclaimer legal, es diseño honesto que mantiene la confianza del usuario a largo plazo.
nngroup . apple higCitas y fuentes: cards expandibles
Cuando el modelo cita una fuente, mostrarla como un chip/badge inline con número de referencia. Al hacer clic, expandir una card con: título de la fuente, fragmento relevante, URL si aplica, y fecha. No listar todas las fuentes al final del texto como footnotes, el usuario no correlaciona el número con el contexto. La cita debe estar anclada al párrafo donde es relevante.
nngroup . chrome developersInput de prompt: textarea expandible + archivos
El input de chat debe crecer verticalmente con el contenido (1 línea inicial, máximo 8-10 líneas antes de scroll interno). Soportar drag & drop de archivos, paste de imagenes y atajos de teclado: Enter para enviar, Shift+Enter para nueva línea, Flecha arriba para editar mensaje anterior. El contador de tokens debe mostrarse cuando el usuario se acerque al límite del modelo.
nngroup . apple higAcciones inline de IA
Cuando la IA genera una respuesta con elementos accionables, los botones de acción deben aparecer inline junto al contenido relevante, no fuera de contexto. El usuario no debería copiar texto, cambiar de pantalla ni buscar donde aplicar la sugerencia. Cada botón ejecuta la acción en un clic, con icono contextual que refuerza la intención. El patrón reduce fricción y convierte sugerencias pasivas en acciones inmediatas.
notion · apple hig · nngroupHuman-in-the-loop: aprobar antes de ejecutar
Las acciones con consecuencias irreversibles (enviar email, eliminar datos, publicar contenido, hacer una compra) deben requerir confirmación explicita del usuario aunque sean generadas por IA. Mostrar una preview de la acción completa antes de ejecutar: "El agente enviara este email a carlos@empresa.com. Revisar y aprobar". El modelo propone, el humano decide.
nngroup · apple higErrores de IA: conservar input del usuario
Cuando una llamada al LLM falla (timeout, rate limit, error de red), conservar el mensaje del usuario en el input y mostrar el error con opción de reintentar. Nunca limpiar el input al fallar. El mensaje de error debe distinguir entre "el modelo no pudo responder" y "tu solicitud fue bloqueada por contenido", las acciones correctivas son distintas en cada caso.
nngroup, chrome developers- R-1020 Streaming texto: renderizar markdown seguro
- R-1021 Estados de carga LLM: typing indicator + stop
- R-1022 Indicadores de confianza y limitaciones
- R-1023 Citas y fuentes: cards expandibles
- R-1024 Input de prompt: textarea expandible + archivos
- R-1025 Acciones inline de IA
- R-1026 Human-in-the-loop: aprobar antes de ejecutar
- R-1027 Errores de IA: conservar input del usuario