Haciendo UIs como una aventura de texto

En mi empresa estamos cambiando de paradigma interactivo. A pesar de que la lógica de negocio de nuestras herramientas internas sigue siendo la misma, la forma en que interactuamos no deja de evolucionar. Hemos pasado de clientes de terminal, a interfaces web, usando herramientas como Streamlit o cualquier frontend sencillo, y ahora estamos metiendo la mano en interactuar con el usuario tal como si fuera una aventura gráfica.

Por ejemplo:

========================================
   SISTEMA DE UTILIDADES
========================================

¿Qué quieres hacer hoy?:

[1] Transformar documentos
    - PDF → Word
    - Optimizar PDF para que ocupe menos espacio
    - Firmar documentos
    - Resumir documentos o textos
    - Incluir branding de la empresa

[2] Backups y seguridad
    - Descargar backup de nodo
    - Recibir por email el backup de nodo
    - Ver estado de nodo o servidores

[3] Sistema
    - Desplegar nueva versión
    - Analizar rendimiento
    - Ver registros del sistema

========================================
Introduce el número de la opción o escribe tu petición en lenguaje natural:
> _

Detrás de esta interfaz hay un agente, sin duda, aunque hay más arquitectura de lo que aparenta a simple vista.

Lo más habitual es usar un esquema clásico, predecible, aburrido, pero sólido:

graph TD
    A["🧠 Lógica de negocio"] --> B["⚡ API"] --> C["🖥️ Interfaz Consola/Web/UI"]

Pero ahora, con esta nueva forma de interactuar, el esquema es algo diferente:

graph TD
    A["🧠 Lógica de negocio"] --> B["⚡ API"] --> C["🤖 Agente"] --> D["📋 Skills"] --> E["🖥️ Interfaz de texto"]

Una Skill es un markdown que describe al agente cómo ejecutar una tarea concreta, con sus parámetros, opciones, etc.

Por ejemplo, si alguien quiere transformar un markdown a HTML, la Skill podría ser algo así:

---
name: markdown-to-html-pandoc
description: Convierte Markdown a HTML utilizando pandoc. Úsalo cuando el usuario quiera transformar documentos Markdown en HTML de forma fiel y estructurada.
---

# Markdown to HTML (Pandoc Skill)

## Objetivo

Esta skill convierte contenido Markdown a HTML usando pandoc como motor de transformación.

## Instrucciones

1. Guardar el Markdown en un archivo `input.md`.
2. Ejecutar:

```bash
pandoc input.md -f markdown -t html -o output.html
```

3. Leer `output.html`.
4. Devolver solo el HTML generado.

## Ejemplo

### Input

```markdown
# Hola mundo

Este es un **ejemplo**.
```

### Comando

```shell
pandoc input.md -f markdown -t html -o output.html
```

### Output esperado

```html
<h1>Hola mundo</h1>
<p>Este es un <strong>ejemplo</strong>.</p>
```

Cada agente tiene su path. Si usas Claude este archivo debe estar presente en `$HOME/.claude/skills/`, con un nombre de carpeta que identifique la skill, por ejemplo `markdown-to-html-pandoc/skill.md`. Y si usas alguna más generalista, como Goose, será `~/.agents/skills/`.

## Reglas

- Usar siempre pandoc
- No modificar el HTML generado
- No añadir explicaciones

Incluso puedes añadir un apartado de cómo debe instalar las herramientas necesarias dependiendo del sistema operativo.

Pero claro, el ejemplo anterior es muy sencillo. En la práctica hace falta interactuar con nuestras APIs internas. Para ello creamos una Skill con las IPs, la documentación de la API, ejemplos de uso (por ejemplo con curl), información de la arquitectura y cualquier detalle que el agente necesite para ejecutar la tarea. Además de indicarle las palabras clave que el usuario puede usar para activar esa Skill, por ejemplo "obtener backup de nodo", "descargar backup de nodo", "backup de nodo por email", etc.

Supongamos que el usuario quiere un CSV con el timestamp y log de los últimos 5 minutos.

> Quiero un CSV con log de los últimos 5 minutos del nodo 23

• Se activa la Skill de logs, que tiene toda la información para ejecutar la tarea. Se conecta con la API, obtiene los datos en formato JSON.
• Se activa la Skill de transformación entre formatos en texto plano, que convierte el JSON a CSV.
• Se activa la Skill que sube archivos a nuestra nube.

Estado: PROCESANDO...

Analizando estado del nodo 23...
Extrayendo logs de los últimos 5 minutos...
Reestructurando formato...
Subiendo archivo a la nube...

> Aquí tienes el enlace de descarga del CSV con los logs de los últimos 5 minutos: https://ejemplo.com/nodo23_20240610_1230.csv

Más acciones que puedes hacer:
[1] Enviar por email
[2] Descargar directamente
[3] Ver logs en pantalla

[4] Volver al menú principal

>

Sencillo, ¿verdad?

Mi último consejo es que hagas la UI como un prompt inicial. Dentro de ~/.agent/prompts/ puedes crear un prompt personalizado, por ejemplo ui.md, con instrucciones o plantillas de cómo debe ser la interacción con el usuario.

Primeras impresiones

Aún estamos en fase de pruebas observando cómo interactúan los usuarios, nos queda mucho por ajustar y aprender.

Actualmente tenemos un repositorio privado con las Skills. Para instalarlas, tenemos un prompt en la documentación que deben copiar y pegar dentro de su prompt. Automáticamente se crean los archivos necesarios en la carpeta de Skills y realiza algunas modificaciones: prompt de la UI, scheduler para ir comprobando si debe actualizar o añadir alguna nueva Skill, etc.

Os adelanto ya que no es un UI killer. Tiene sus limitaciones:

Pros

• Ejecutar las funcionalidades con lenguaje natural
• Proceso de instalación sencillo (copiar y pegar un prompt)
• Multiplataforma
• Baja curva de aprendizaje (o nula)
• Accesible por defecto
• Ahorra muchos recursos en diseño UX/UI y de maquetación de interfaces (nativas o web)

Contras

• No es multidispositivo, ya que necesita en algunos casos herramientas específicas que no están disponibles en móviles, tablets, etc.
• Es más lento que una interfaz gráfica tradicional
• Necesitas un buen hardware si quieres una experiencia fluida
• Es difícil afinar configuraciones avanzadas por parte del usuario
• El usuario no entiende qué pasa por debajo

En definitiva, es una forma diferente de que el usuario interactúe con las herramientas, más natural, pero con sus limitaciones. Aún así, es un experimento interesante que nos está dando buenos resultados y que seguiremos explorando.