Lección 15: La UI web de chat generada

Un cliente de chat completo para navegador - barra lateral, streaming, aprobaciones, almacén SQLite.

La UI web de chat generada

Una entrada gateways/*.bx con exposes: "webui" entrega un cliente de chat completo para navegador para tu agente - una barra lateral de conversaciones, streaming con razonamiento y llamadas a tools, aprobaciones con humano en el bucle, temas por visitante, y un almacén SQLite real por detrás.

// gateways/chat.bx
class {
	function configure() {
		return {
			exposes     : "webui",
			path        : "/chat",
			apiKeyEnvVar: "CHAT_UI_API_KEY"   // optional - see "Securing it" below
		};
	}
}

Esto genera un <path>/index.html estático (servido directamente, sin necesidad de ruta) más una API dedicada bajo <path>/api. La página es HTML/CSS/JS puro y sin dependencias, precompilado e incluido dentro del propio BxAgents - bxAgents build nunca ejecuta npm install, y un proyecto generado no necesita tener Node instalado en absoluto.

Esa es la página generada real y sin modificar - esta con la marca de la configuración theme/title/icon de examples/webui-agent, llevando más lejos el concepto de exposición de la Lección 13. Ejecutar bxAgents build && bxAgents serve en ese ejemplo te da esa misma página de verdad.

Qué puede hacer la página

• Barra lateral de conversaciones - cambiar, renombrar, borrar, o empezar una conversación nueva.
• Redirigir mientras se transmite - el compositor sigue activo durante un turno; Send se convierte en Steer, e inserta tu mensaje en la ejecución que ya está en marcha.
• Stop - envía /cancel antes de abortar, de modo que el servidor deja realmente de gastar tokens en vez de limitarse a abandonar la conexión del navegador.
• Razonamiento y llamadas a tools - desplegables plegados alimentados directamente desde la respuesta transmitida.
• Aprobaciones - una pausa con humano en el bucle muestra una tarjeta de Aprobar/Rechazar.

Sin cuentas: un único espacio de trabajo compartido

Por defecto la UI no tiene cuentas ni protección - cada visitante es anónimo, y todos leen y escriben las mismas conversaciones, preferencias y memoria del agente. Esta es la experiencia de desarrollo local sin ceremonias, no una postura de despliegue.

users : [
    { username: "ada", passwordEnvVar: "ACME_ADA_PASSWORD", displayName: "Ada Lovelace" }
]

Una cuenta nombra la variable de entorno que contiene su contraseña, o lleva un valor ya hasheado - una clave password literal es un error de build, no un aviso. Genera un hash con:

bxAgents hash-password --password="<tu-contraseña>"

Personalizar la marca

Todas las claves son opcionales:

theme: {
	accent : "0f766e",
	radius : "10px",
	font   : "Inter, system-ui, sans-serif",
	dark   : { accent : "rgb(45, 212, 191)" }
}

También están disponibles title, subtitle, icon, welcome, placeholder y footer, además de un themeFile para todo lo que los tokens no cubran.

Protegerla

apiKeyEnvVar es una protección sencilla y conmutable - no un sistema de login completo. Si no se define, <path>/api/* queda completamente abierto (aceptable en desarrollo local). Si lo defines, cada petición bajo <path>/api/* debe llevar una cabecera X-API-Key que coincida. El armazón estático en sí no está protegido deliberadamente, ya que la navegación normal de una página en el navegador no puede enviar una cabecera personalizada.

Pruébalo

bxAgents build
bxAgents serve --port=8080

Abre http://localhost:8080/chat en un navegador y habla con tu agente - el mismo al que le has ido añadiendo tools, skills y subagentes desde la Lección 9.

Referencia completa: La UI web de chat.

Siguiente: Lección 16 - Programar trabajo en segundo plano