Saltar al contenido
Volver a la colecciónJuan Martín ValenciaManizales · Colección 2026 · 8 piezas
Captura del modo de demostración de la oficina de agentes: puestos, robots y mapa de Colombia, con datos de ejemplo.
Oficina de agentes Distrismoke: otra pantalla del proyecto.
Oficina de agentes Distrismoke: otra pantalla del proyecto.

Referencia 01 · Agentes de IA para un negocio de contenido y ventas

Oficina de agentes Distrismoke

De uso propioTalla XL · 6 piezas conectadas

Una oficina virtual donde 11 agentes preparan contenido, editan videos y buscan posibles compradores para el negocio mayorista del que soy socio. Yo decido y yo escribo a cada persona.

Lo que la hace distinta: es de uso propio. Un equipo de agentes trabaja para un negocio mayorista y me entrega el resultado por Telegram, con una oficina en 3D para verlo todo.

Esta ficha usa el modo de demostración, con datos de ejemplo. No hay contactos, conversaciones ni métricas reales.

Lo quiero para mi proyecto

Qué resuelve

Reúne en un solo lugar trabajos que normalmente haría por separado.

El problema: contenido y ventas son una lista larga de trabajos distintos, y se hacen a mano.

Es para el dueño de un negocio que quiere dirigir contenido y ventas sin hacerlos uno por uno. La usa una persona: el dueño.

El plantel: los 11 agentes

Toca un agente para ver qué hace, cuándo se activa y qué trabajo me ahorra.

Un agente es un trabajador de software con una tarea. El disparador es lo que lo pone a trabajar.

Son tres áreas: contenido (Investigador, Estratega, Creativo, Diseñador, Editor, Revisor e Historias), resultados (Analista) y ventas (Explorador, Verificador y Vendedor).

No todos usan IA. El Revisor aplica reglas escritas en código. El Verificador y el Analista tampoco usan IA propia. Creativo y Revisor trabajan dentro de la producción del Diseñador.

Una decisión de diseño: yo conservo siempre la decisión y el contacto humano. El Vendedor prepara el mensaje y yo lo envío. No hay publicación automática en Meta: el material llega a Telegram y publico a mano.

El ahorro lo cuento en tareas que ya no hago a mano. No medí horas y no pongo ninguna cifra.

  • contenido · Usa IAInvestigadorlee fuentes públicas y arma el informe de tendencias, con hallazgos, enlaces y lo que descartóAbrir la tarjeta de Investigador
    Se activa
    cuando falta el informe de la ventana semanal
    Trabaja con
    RSS y material público, IA y la base de datos en la nube (Supabase)
    Me ahorra
    leer y elegir los temas a mano
    En Telegram
    no interviene directamente; su informe llega al Estratega
  • contenido · Usa IAEstrategaarma el plan semanal con fechas comerciales, historial, catálogo, notas y métricasAbrir la tarjeta de Estratega
    Se activa
    cuando ya hay informe y falta el plan de la semana
    Trabaja con
    IA y la base de datos. Recibe de forma indirecta las notas que dejo por Telegram
    Me ahorra
    armar el calendario y evitar repeticiones
    En Telegram
    mis notas en lenguaje cotidiano orientan sus próximos planes
  • contenido · Usa IACreativoescribe las láminas, el concepto visual, la descripción y los hashtags de cada pieza. Tiene instrucciones propias para memesAbrir la tarjeta de Creativo
    Se activa
    cuando se produce o se corrige una pieza. Trabaja dentro de la producción del Diseñador
    Trabaja con
    Claude o Codex, el plan de la semana y mis notas de Telegram
    Me ahorra
    redactar y hacer el briefing de diseño
    En Telegram
    cuando pido cambios a una pieza, vuelve a trabajar sobre ella
  • contenido · Usa IADiseñadorgenera o reutiliza imágenes y fondos, compone las láminas y deja los archivos en la nube listos para entregarAbrir la tarjeta de Diseñador
    Se activa
    cuando hay piezas por armar o cambios nuevos
    Trabaja con
    IA de imágenes, composición en el portátil, almacenamiento en la nube y Telegram
    Me ahorra
    componer, exportar, organizar archivos y rehacer ajustes
    En Telegram
    me entrega imágenes, carruseles, memes e historias, y puedo pedirle cambios
  • contenido · Usa IAEditorprocesa mis clips, edita el video, verifica el resultado, lo adapta para Telegram y atiende las correccionesAbrir la tarjeta de Editor
    Se activa
    cuando hay pedidos de video pendientes o una orden mía
    Trabaja con
    Claude, un taller de edición externo (Python, FFmpeg y Remotion), Telegram y mis clips de Telegram u OneDrive
    Me ahorra
    cortes, subtítulos, ajustes de voz, transiciones, render y preparar el archivo
    En Telegram
    /reel abre el pedido, mando los clips y explico el video, me devuelve el Reel y «Cambiar algo» pide correcciones
  • contenido · Reglas de código, sin IA propiaRevisoraplica reglas al encargo antes de producir o entregar, devuelve lo que falla y detiene las piezas que siguen fallandoAbrir la tarjeta de Revisor
    Se activa
    antes de producir o de entregar una pieza. Trabaja dentro de la producción del Diseñador
    Trabaja con
    reglas escritas en código y el estado compartido en la nube
    Me ahorra
    revisar a mano textos, cifras y restricciones
    En Telegram
    no interviene directamente
  • contenido · Usa IAHistoriasprepara los textos, los stickers y los encargos de grabación de mis historias a partir de mis notasAbrir la tarjeta de Historias
    Se activa
    cuando faltan turnos futuros
    Trabaja con
    IA, la base de datos, el Diseñador y Telegram
    Me ahorra
    pensar qué mostrar y acordarme de los turnos. Yo grabo y subo
    En Telegram
    me llega el encargo de cada turno cuando corresponde
  • resultados · Reglas de código, sin IA propiaAnalistaabre una encuesta de resultados y procesa las respuestas sobre mensajes, registros, alcance y pedidos o ciudades. Deja un diagnóstico y un consejo para el EstrategaAbrir la tarjeta de Analista
    Se activa
    desde el viernes por la tarde
    Trabaja con
    Telegram, reglas escritas en código y la base de datos
    Me ahorra
    organizar los datos y convertirlos en una decisión. Las cifras las pongo yo
    En Telegram
    me hace la encuesta de los viernes y respondo ahí mismo
  • ventas · Usa IAExploradorbusca tiendas del municipio, descarta las que no encajan y guarda los contactos con su fuenteAbrir la tarjeta de Explorador
    Se activa
    cuando hay zonas pendientes, dentro del horario y de la capacidad de la cola
    Trabaja con
    IA con búsqueda y lectura de páginas web, y la base de datos
    Me ahorra
    buscar tiendas y armar fichas comerciales. El horario y los topes evitan que genere más trabajo del que puedo atender
    En Telegram
    /tiendas pide más posibles compradores
  • ventas · Reglas de código, sin IA propiaVerificadorabre las fuentes de cada posible comprador, confirma los datos y baja la prioridad de los dudososAbrir la tarjeta de Verificador
    Se activa
    cuando llegan prospectos nuevos
    Trabaja con
    lectura de páginas web, código y la base de datos
    Me ahorra
    contrastar contactos. No garantiza que todos sean válidos: los no confirmados quedan con menor prioridad para que yo decida
    En Telegram
    no interviene directamente
  • ventas · Usa IAVendedorescribe un mensaje de primer contacto personalizado para cada comprador verificado. Yo lo reviso y lo envíoAbrir la tarjeta de Vendedor
    Se activa
    cuando hay prospectos verificados
    Trabaja con
    IA, la base de datos, Telegram y enlaces a WhatsApp e Instagram
    Me ahorra
    preparar cada saludo y organizar el seguimiento
    En Telegram
    me llegan los lotes y los recordatorios; copio el mensaje y abro el contacto para escribir yo mismo

Ahorro contado en tareas, no en horas.

Cómo se habla con la oficina por Telegram

Toca los botones y mira la conversación. Todo es de ejemplo: nada se envía.

Telegram es la app de mensajes por donde hablo con la oficina. Aquí tienes un chat de ejemplo con cinco conversaciones.

Junto a cada respuesta ves qué agente trabajó y qué lo activó. Toca la etiqueta y vas a su tarjeta en el plantel.

Este chat no tiene un modelo de IA detrás: son guiones con botones. Se puede reiniciar cuando quieras.

Lo que no se ve en el chat: el bot real valida una cabecera secreta y que el chat sea el autorizado. Eso lo cuento en «Para técnicos», dentro de Qué tiene detrás.

OficinaConversación de ejemplo, nada se envía
  1. un Reel desde el celular
  2. /reel
  3. Editor · el comando /reelListo, abrí un pedido nuevo. Mándame los clips y cuéntame cómo quieres el video.
  4. [3 clips de ejemplo] «Muestra la bodega y cierra con el mostrador. Ritmo rápido.
  5. Editor · clips recibidosRecibí los 3 clips. Estoy cortando, subtitulando y armando el video.
  6. Editor · el pedido en colaAquí está tu Reel. [video de ejemplo]Cambiar algoEstá bien
  7. Cambiar algo
  8. Editor · «Cambiar algo»Dime qué cambias. Conservo los mismos clips y lo que ya hicimos.
  9. Más corto y con el texto más grande
  10. Editor · la correcciónHecho. Te mando el Reel corregido.
  1. /estado
  2. /estado
  3. Estratega y Diseñador · el comando /estadoEsta semana hay 2 piezas listas para revisar, 1 Reel en edición y 1 historia esperando tu decisión.
  4. Ver lo que espera decisión
  5. Historias · la consultaLa historia del jueves, con texto y sticker. ¿La apruebo o cambias algo?AprobarCambiar algo
  6. Aprobar
  7. HistoriasAnotado. Queda aprobada.
  1. /tiendas
  2. /tiendas
  3. Explorador y Verificador · el comando /tiendasTe traigo 3 posibles compradores de ejemplo, con la fuente de cada dato.
  4. VerificadorTienda de ejemplo 1: datos confirmados, prioridad alta. Tienda de ejemplo 2: datos confirmados, prioridad media. Tienda de ejemplo 3: un dato dudoso, prioridad baja.
  5. Ver el mensaje de la tienda 1
  6. Vendedor · prospecto verificadoMensaje preparado: Hola, te escribo de parte de un distribuidor mayorista de tu zona. ¿Te mando el catálogo?Copiar mensajeAbrir contacto
  7. Abrir contacto
  8. VendedorEn la oficina real aquí se abre el contacto y escribes tú. En este chat de ejemplo no se abre nada.
  1. una nota en lenguaje cotidiano
  2. Esta semana quiero más videos de la bodega y menos memes.
  3. Estratega · lo recibe de forma indirectaAnotado. La uso en el próximo plan semanal.
  1. la encuesta del viernes
  2. Analista · viernes por la tardeCierre de semana. ¿Cuántos mensajes de posibles compradores recibiste?
  3. 12
  4. Analista¿Cuántos pedidos o ciudades nuevas hubo?
  5. 3
  6. AnalistaDiagnóstico de ejemplo: los mensajes subieron la semana de los videos. Consejo para el Estratega: repetir ese formato.

La oficina visual

Así se ve dirigir un equipo de 11 agentes.

La oficina es una escena en 3D con puestos, robots, etiquetas y salas, un despacho y un mapa de Colombia con zonas y progreso comercial. Si tocas un agente, se abre su ficha.

Aparte hay un panel con lo que necesita mi decisión, las alertas con prioridad y el material del día.

Aquí tienes el plano de la oficina: toca un puesto y se abre la tarjeta de ese agente. El estado de cada uno (trabajando, libre, esperando) cambia solo, como simulación. El 3D real lo ves en el video del modo demostración.

Decisiones de ingeniería que se ven

  • La escena 3D se carga aparte, para que la página abra rápido.
  • Si el navegador no tiene WebGL (la tecnología que dibuja el 3D), hay una vista plana de respaldo.
  • Respeta el movimiento reducido y deja de dibujar cuando la escena está oculta.
  • Los cambios llegan en tiempo real y se agrupan, para que cada latido del portátil no vuelva a descargar los contactos.

El estado de cada puesto es una simulación.

Qué ves en el video

Demo con datos de ejemplo
Alternativa en texto
  • La oficina en 3D con los agentes en sus puestos y el mapa de Colombia.
  • Un agente que se toca y abre su ficha.
  • El panel con lo que espera decisión y lo que sigue.
  • El regreso a la oficina.

Qué tiene detrás

Lo que pasa por dentro, en dos niveles. Elige el tuyo.

Nivel de lectura
  1. Le mandas por Telegram los clips y una frase que explica el video.
  2. El mensaje llega a la nube, que guarda el pedido junto con los planes, los archivos y los resultados.
  3. El portátil de la oficina ve el pedido y pone a trabajar al agente que toca. El Editor corta y arma el video; el Diseñador compone las imágenes.
  4. El resultado vuelve a la nube y la nube te lo entrega por Telegram. Si el portátil se apagó, lo ya preparado llega igual y lo que falta espera con un aviso de atraso.
  5. Tú revisas en el chat o en el panel, decides y, si algo no te convence, pides «Cambiar algo». WhatsApp e Instagram quedan para ti: la oficina prepara el mensaje, tú lo envías.
  • Arquitectura híbrida. El portátil produce: un demonio de Windows con pulso, lanzador, candados y guardia (sede/demonio.mjs). La nube entrega: Supabase con Postgres, Auth, Realtime, Storage y Edge Functions en Deno (telegram y entregar). Las órdenes viajan por Supabase; los botones de la oficina web no llaman directo al portátil.
  • El bot de Telegram recibe mensajes y botones por webhook, valida la cabecera secreta y que el chat esté autorizado, y vincula con una RPC. Los flujos están en pruebas/telegram/flujos.test.mjs.
  • La función entregar reclama cada pieza con la marca enviada_en para evitar entregas duplicadas simultáneas. Es control de concurrencia, no una garantía de entrega exactamente una vez ante cualquier fallo externo.
  • IA: cerebro/pensar.mjs ejecuta Claude, valida el JSON con Ajv y contempla Codex como respaldo de texto ante cuota. Por defecto no concede herramientas; la investigación comercial puede habilitar búsqueda y lectura web. Los procesos hijos no heredan los secretos de la oficina.
  • Datos: 14 tablas públicas, 17 migraciones y RLS (permisos por fila) para dueño, usuario ajeno, anónimo y servicio, con pruebas con PGlite en pruebas/db/rls.test.mjs. La función de dueño no exige segundo factor: no lo afirmo.
  • Frontend: React y TypeScript con Vite. Escena con Three.js y React Three Fiber, vista plana SVG de respaldo, carga aparte y selectiva con Realtime (oficina/src/datos/useOficina.ts).
  • Seguridad HTTP: CSP con scripts propios, bloqueo de objetos e iframes, nosniff, permisos de cámara, micrófono y geolocalización deshabilitados (oficina/public/_headers). Verifiqué el archivo, no las cabeceras servidas.
  • Lo que no cuento como activo: la API de Meta (WhatsApp e Instagram son canales humanos) y n8n (dos exportaciones apagadas, reemplazadas por sede/demonio.mjs). Los roles Director y Redactor se retiraron y su trabajo pasó al Investigador y al Creativo. El Publicador se retiró sin haber trabajado: decidí que la publicación sea manual.

Despiece · 6 piezas conectadas

  1. 01Oficina web 3D con su panel
  2. 02Sede local: un programa que corre de fondo en el portátil
  3. 03Supabase con sus funciones en la nube
  4. 04Bot de Telegram
  5. 05Agentes con IA
  6. 06Taller externo de edición de video

Telegram es la app de mensajes por donde hablo con la oficina. Supabase es la base de datos en la nube con permisos por persona. El portátil es la sede: ahí corren los agentes.

Composición y cuidados

Composición · Nº 01

Composición

  • React y TypeScript con Vite: la oficina y el panel.
  • Three.js con React Three Fiber: la escena 3D.
  • Supabase: datos, permisos y avisos en tiempo real.
  • Edge Functions en Deno: el bot y las entregas.
  • Node en el portátil: el demonio y los agentes.
  • Claude y Codex: el cerebro de los agentes.
  • Python, FFmpeg y Remotion: el taller de edición.
  • Telegram: puerta de entrada y de entrega.
  • Sentry: errores sin datos personales.

Dónde vive

  • Cloudflare Workers para los archivos de la oficina web (configurado en el flujo de despliegue; no comprobé el despliegue remoto).
  • Un portátil con Windows como sede.
  • Supabase como nube.

Cuidados

  • El portátil produce. Si está apagado, la nube entrega lo ya preparado y lo que falta espera.
  • La IA tiene manejo de cuota, reintentos y un respaldo con Codex.
  • Versiones declaradas como rangos en package.json, no versiones instaladas verificadas: Node >=24, React ^19.2.8, Three ^0.186.1, TypeScript ~6.0.2, Vite ^8.3.0.

Hecho en Manizales · 2026

Guía de tallas

Talla XL: lleva 6 piezas conectadas por dentro. La regla: S de 1 a 2 piezas, M 3, L 4 y XL 5 o más. La letra es una etiqueta; el dato es el conteo.

  1. Oficina web 3D con su panel.
  2. Sede local: un programa que corre de fondo en el portátil.
  3. Supabase con sus funciones en la nube.
  4. Bot de Telegram.
  5. Agentes con IA.
  6. Taller externo de edición de video.

Cifras de tamaño (verificado en el repositorio el 2026-10-08)

  • 11 agentes en la demostración. Hay 9 carpetas de agentes: los roles integrados y el Analista no tienen carpeta propia.
  • 14 tablas públicas creadas en 17 migraciones SQL.
  • 208 archivos de código versionados (incluyen pruebas, SQL y estilos).
  • 85 commits.
  • 2 exportaciones de n8n, apagadas.

S de 1 a 2 piezas conectadas, M 3, L 4 y XL 5 o más. La letra es una etiqueta; el dato es el conteo.

Certificado

Las pruebas que respaldan esta pieza.

Verificado en el repositorio · 2026-10-08

  • 11agentes en la demoFuente: oficina/src/datos/demo.ts y oficina/e2e/oficina.spec.ts (toHaveCount(11))
  • 888pruebas escritas en 60 archivosFuente: conteo de test(/it( en archivos .test/.spec versionados
  • 17migraciones de base de datosFuente: supabase/migrations/*.sql
  • 85commitsFuente: git rev-list --count HEAD

Evidencia (verificado en el repositorio el 2026-10-08)

  • 60 archivos de prueba y 888 pruebas escritas (conteo en el código). Es un conteo de texto: no son casos ejecutados ni cobertura.
  • Permisos por rol comprobados con pruebas que simulan dueño, usuario ajeno, anónimo y servicio (pruebas/db/rls.test.mjs).
  • 2 workflows de integración continua, el sistema que corre las pruebas cada vez que se sube un cambio: ci.yml y deploy-oficina.yml. Corre pruebas de Node en Windows y lint, tipos, pruebas y build del panel en Linux. La publicación manual está restringida a main.
  • CSP y otras cabeceras de seguridad definidas en el archivo de despliegue. La CSP es la regla que le dice al navegador qué puede ejecutar la página.
  • Sentry web sin datos personales, cookies ni cabeceras.

Lo que no afirmo

  • Que las pruebas pasen: no las ejecuté.
  • Que la oficina esté desplegada en remoto: no lo comprobé.
  • Segundo factor de autenticación: no está implementado.
  • Horas ahorradas: no las medí.
  • Publicación automática en Meta: no existe, publico a mano.
  • Que el CI ejecute las pruebas de navegador (e2e): en los pasos que revisé no están.

pruebas escritas (conteo en el código)

Lo quiero para mi proyecto

Una oficina así, para tu negocio

Si tu negocio vive de contenido y de escribirle a posibles compradores, una oficina así puede preparar ese trabajo mientras tú decides.

Cada oficina se arma según el negocio. La mía la puedes ver trabajando más arriba.

Lo quiero para mi proyectoVolver a la vitrina
Siguiente pieza de la colección · Ref. 02Raw Fitness ClubLa web, el sistema de cobros y la app de entrenamiento de un gimnasio, en un solo producto.Talla L · Sistemas y apps