caso // Web app open source self-hosted
En producción

ClientFlow

Clientes, proyectos, comunicación y agentes de IA en un solo lugar.

2026 · En producción

  • Product architect & full-stack developer
  • En curso
  • MIT
  • Laravel 13
  • Livewire 4
  • PHP 8.3+
  • Open source
  • Self-hosted
  • MySQL 8.4
  • Agentes IA
  • MCP
Ver demoVer cómo está construido
ClientFlow //
EN PRODUCCIÓN
Dashboard del admin
CLIENTFLOW · 2026ver demo
02 // FICHA DEL PROYECTO

ClientFlow en un vistazo.

Año

2026

Tipo

Web app open source self-hosted

Estado

En producción

Rol

Product architect & full-stack developer

Duración

En curso

Licencia

MIT

Stack aplicado //

PHP 8.3+Laravel 13Livewire 4BladeTailwind CSS 4ViteMySQL 8.4DockerNginxBunny FontsOpenAI / Anthropic API
Demo online
ASÍ SE VE //

Capturas reales de ClientFlow.

Capturas reales del sistema en marcha. Sin mocks, sin renders.

Admin

Dashboard del admin

Panel principal con resumen, proyectos recientes y acceso a todas las secciones.

Cliente

Portal del cliente

El cliente ve el estado de su proyecto, lo último que ha pasado y sus próximas tareas.

Kanban

Kanban drag & drop

Columnas configurables y tareas reordenables arrastrando.

Admin

Hub de proyecto

Vista general del proyecto: estado, tareas y accesos a chat, documentos, calendario y tiempo.

Comunicación

Chat por proyecto

Toda la conversación del proyecto en un solo hilo, con mensajes del sistema y adjuntos.

Documentación

Editor de documentación

Markdown con vista previa y control de visibilidad interna o pública.

Documentación

Documento público para cliente

El cliente lee el documento ya renderizado, sin editor y sin opciones de gestión.

Planificación

Calendario mensual

Eventos, milestones y plazos del proyecto marcados en la vista mensual.

Productividad

Dashboard de tiempo

Horas registradas por proyecto, con marcado de horas facturables.

Actividad

Feed de actividad

Timeline con lo que pasa en el proyecto: tareas, documentos y cambios de estado.

IA

Asistente IA del cliente

El cliente pregunta a la IA del proyecto y recibe respuesta con contexto real.

Admin

Organizaciones y clientes

Alta de organizaciones y clientes con invitación por email.

IA

Configuración de IA

Selector de proveedor (OpenAI, Anthropic) y clave de API.

Comunicación

Chat del cliente

El cliente escribe desde su portal y la conversación llega al mismo hilo del proyecto.

03 // CONTEXTO

De dónde partía ClientFlow.

PUNTO DE PARTIDA //

Gestionar un proyecto con un cliente suele significar tener la comunicación en email y WhatsApp, las tareas en Trello, los documentos en Notion, los archivos en Drive y la IA en otra herramienta. El cliente no sabe en qué punto está su proyecto y pregunta una y otra vez; quien lo gestiona repite la misma información en varios sitios; y la documentación importante termina duplicada sin control de acceso.

LO QUE FALTABA //

Una herramienta única que permita a quien gestiona el proyecto organizar clientes, proyectos, tareas, documentos y comunicación; que dé al cliente un portal sencillo con lo que necesita ver y un chat, sin obligarle a aprender nada nuevo; y que sirva como fuente de información para los agentes de IA.

EL OBJETIVO //

Crear un MVP open source, instalable, que pueda mantener una sola persona, sin infraestructura cara, y que cubra el día a día de un profesional o agencia pequeña sin necesidad de montar un SaaS complejo.

Para quién es //

  • Freelance / agencia pequeñaGestionar proyectos en paralelo, registrar horas, mantener documentación y comunicarse con clientes sin tener los datos repartidos en cinco herramientas.
  • Cliente (pyme, startup, responsable de área)Ver en segundos el estado de su proyecto, enviar un mensaje, consultar documentación y resolver dudas con la IA sin aprender una herramienta nueva.
04 // LA SOLUCIÓN

Qué se construyó y por qué.

ClientFlow une en una sola web app clientes, proyectos, tareas, chat, documentación y agentes IA. Quien gestiona trabaja en un panel único y conecta su editor vía MCP; el cliente tiene un portal sencillo con chat y asistente para resolver dudas sin aprender nada nuevo.

01

Panel completo con kanban, chat, documentación, registro de tiempo, calendario y feed de actividad.

02

Portal para el cliente con visibilidad del estado del proyecto, documentos públicos y chat.

03

Asistente IA por proyecto con contexto real inyectado y provider configurable (OpenAI, Anthropic).

04

Servidor MCP integrado para conectar el editor de código con el contexto del proyecto.

05

Diseñado para auto-instalarse en hosting compartido sin Redis, sin WebSocket y sin workers obligatorios.

Lo que hace //

Tradeoff honesto //

Sin WebSocket en MVP: se usa polling Livewire. Suficiente para equipos pequeños; si hace falta, se migra sin romper nada.

05 // ARQUITECTURA

Cómo está construido ClientFlow.

Monolito Laravel server-rendered con Blade + Livewire, sin Redis ni workers, con un endpoint MCP sobre HTTP/SSE dentro del mismo proceso. La interacción se hace con Livewire (polling para chat y feed) y los adjuntos nunca se sirven desde public/, siempre pasan por un controlador con authorize().

Presentación (Blade + Livewire)

  • Tres layouts diferenciados: admin (sidebar 240px), portal (sidebar 220px), auth (card centrada)
  • Componentes Livewire: Kanban drag & drop, chat con polling, formularios, modales, calendario, feed
  • Componentes Blade reutilizables: badge, button, card, input, modal, select, textarea
  • Bundles con Vite para assets JS/CSS

Aplicación (Laravel 13)

  • Controladores Admin/, Portal/, Auth/ con middleware por rol (EnsureUserIsAdmin, EnsureUserIsClient)
  • FormRequests para validación, Actions para casos de uso, Services para lógica reutilizable
  • Modelos Eloquent con Enums, DTOs, Policies y ViewModels opcionales
  • MCP server HTTP/SSE en /api/mcp/sse con autenticación por API token

Persistencia (MySQL 8.4)

  • Migraciones versionadas con índices en columnas de búsqueda/enumeración
  • Adjuntos en storage/app/clientflow/ servidos por controlador con authorize()
  • personal_access_tokens para MCP, organization_invitations con token firmado expirable

Flujo de datos //

  1. Browser solicita página → Blade renderiza HTML con componentes Livewire
  2. Interacción del usuario → Livewire envía petición AJAX al servidor Laravel
  3. Middleware verifica rol (admin/client) y redirige a la zona correspondiente
  4. Controller/FormRequest valida la entrada → Service ejecuta la lógica de negocio
  5. Modelo Eloquent persiste/consulta en MySQL 8.4
  6. Livewire actualiza el DOM con la respuesta (diffs)
  7. Chat y feed: polling Livewire cada N segundos para detectar cambios
  8. MCP: IDE establece SSE → Laravel recibe tool call → consulta DB → responde vía SSE
  9. IA del proyecto: portal cliente envía pregunta → AiService inyecta contexto → OpenAI/Anthropic responde

Autenticación //

Autenticación con sesión Laravel y cookies. Dos zonas separadas por rol: admin y client. Middleware EnsureUserIsAdmin para rutas /admin/* y EnsureUserIsClient para /portal/*. API tokens personales (personal_access_tokens de Sanctum) para el MCP server. Invitaciones a organizaciones por token firmado con expiración.

Notas técnicas //

  • QUEUE_CONNECTION=sync, CACHE_STORE=database en MVP. Sin Redis ni workers obligatorios.
  • Adjuntos nunca servidos desde public/: pasan por controlador con autorización.
  • Documentos privados solo accesibles por quien gestiona el proyecto (web) y por MCP (IDE).
  • MCP server es solo lectura; cualquier write pasa por la app web.
  • IA nunca escribe directamente en la app: solo genera respuestas para el usuario.
  • Diseñado para escalar a Redis/WebSocket sin romper contratos.
06 // PROCESO

De la idea a la versión en marcha.

  1. 01

    Definición del problema

    Análisis de la fragmentación típica entre quien gestiona el proyecto y su cliente: email, WhatsApp, Trello, Notion, Drive. Identificación de los tres problemas recurrentes: cliente sin visibilidad, quien gestiona repitiendo contexto, documentación duplicada.

  2. 02

    Diseño de la solución

    Separación deliberada en dos zonas (gestión y cliente), modelo multi-organización y documentación con visibilidad controlada.

  3. 03

    Arquitectura y modelo de datos

    Monolito Laravel con Livewire, sin Redis ni workers. Modelo de datos con User, Organization, Project, BoardColumn, Task, Document, Message, CalendarEvent, AIConfig y AgentTemplate.

  4. 04

    Backend Laravel

    Controladores por zona, middleware por rol, validación, servicios y migraciones versionadas.

  5. 05

    Frontend con Livewire y Blade

    Componentes Livewire para Kanban, chat, formularios, modales, calendario y feed. Layouts diferenciados con paleta cálida y tipografía Instrument Sans.

  6. 06

    MCP server e integración IA

    Endpoint MCP sobre HTTP/SSE dentro del monolito con API tokens de Sanctum. Asistente IA por proyecto con provider configurable (OpenAI, Anthropic), contexto inyectado y documentación privada accesible desde el IDE.

  7. 07

    Documentación y release

    PRD completo, arquitectura documentada, modelo de datos, flujos, design system y caso de estudio. Release open source con Docker Compose para desarrollo local.

07 // RETOS

Decisiones con criterio.

Problemas reales durante el desarrollo, soluciones aplicadas y compromisos asumidos.

01

Comunicación fragmentada con clientes

Problema //

Email y WhatsApp dispersan la información y se pierde contexto.

Cómo se resolvió //

Chat por proyecto con historial completo, mensajes del sistema y adjuntos. Todo en un solo timeline accesible desde las dos zonas.

Tradeoff //

Sin WebSocket en MVP: se usa polling Livewire. Suficiente para equipos pequeños; si hace falta, se migra sin romper nada.

02

Documentación importante duplicada

Problema //

Decisiones técnicas, contexto para IAs, instrucciones: todo repartido entre repositorio, Notion y archivos sueltos.

Cómo se resolvió //

Documentos markdown con visibilidad controlada. Los internos solo los ve quien gestiona el proyecto (y su IA a través del editor). Los públicos los ve el cliente.

Tradeoff //

La IA del cliente solo accede a documentos públicos. Es deliberado para no filtrar información interna.

03

Infraestructura asequible

Problema //

Redis, workers y WebSockets encarecen el hosting para un profesional.

Cómo se resolvió //

Monolito en hosting compartido, colas y caché en base de datos, polling en lugar de WebSocket. El servidor MCP vive dentro de la propia app.

Tradeoff //

Menos rendimiento bajo cargas extremas, pero suficiente para el día a día. Preparado para escalar cuando haga falta.

04

Sin dependencia de SaaS

Problema //

El modelo multi-tenant de SaaS introduce costes de aislamiento, facturación y soporte.

Cómo se resolvió //

Cada profesional instala su propia copia. Los datos se separan por organización con las políticas de Laravel.

Tradeoff //

Cada uno mantiene su instancia. A cambio, no hay dependencia de un proveedor externo y el código es abierto.

08 // RESULTADOS

Métricas y consecuencias reales.

Tiempo de onboarding de cliente

< 5 min

registro con token vs. sesión guiada

Creación de proyecto desde plantilla

< 2 min

vs. configurar desde cero

Preguntas resueltas por IA

Objetivo: > 40%

target de consultas repetitivas derivadas a la IA

Respuesta al cliente

Objetivo: < 1 h

con ayuda de la IA del proyecto

Stack

Sin Redis

ni workers, ni WebSocket en MVP

Rendimiento //
  • Monolito server-rendered sin SPA: menos JS, carga inicial más rápida.
  • Polling Livewire en lugar de WebSocket: sin conexión persistente, menor consumo de recursos.
  • QUEUE_CONNECTION=sync: sin worker en background, todo en el mismo proceso.
  • CACHE_STORE=database: sin Redis, todo en MySQL.
Experiencia de uso //
  • Dos zonas separadas: admin con toda la potencia, cliente con solo lo que necesita ver.
  • Portal cliente de solo lectura: el cliente entiende el estado del proyecto en menos de 10 segundos.
  • Chat con mensajes de sistema: el cliente sabe cuándo se movió una tarea sin tener que preguntar.
  • Asistente IA contextual: el cliente resuelve dudas sin esperar respuesta del admin.
Impacto //
  • Proyecto open source con documentación completa en castellano.
  • Stack Laravel + Livewire moderno que sirve como referencia técnica para el ecosistema PHP.
  • MCP server integrado que conecta el mundo del IDE con IA al proyecto de negocio.
09 // LO QUE APRENDÍ

Lo que deja este caso.

LO QUE FUNCIONÓ //
  • Apostar por un monolito Laravel + Livewire frente a separar backend/frontend reduce complejidad operativa y permite mantenerlo solo.
  • Diseño deliberado de un "portal premium" con paleta warm y tipografía cuidada diferencia el producto de la estética Jira/CRM.
  • Modelo private/public para documentos unifica el doble destino de la información (admin + IA vs cliente).
  • MCP server dentro del propio monolito elimina la necesidad de infraestructura adicional.
  • Templates de proyecto y de agentes IA atacan los dos grandes focos de fricción repetitiva del freelance.
  • Convención dura de código y comentarios en castellano simplifica el mantenimiento.
QUE MEJORARÍA //
  • Validar empíricamente los límites del polling Livewire con cargas reales antes de decidir migración a WebSocket.
  • Internacionalización (i18n) ya desde MVP, aunque la app arranque solo en castellano.
  • Versionado y diff de documentos markdown, especialmente de los privados (contexto crítico para IA).
  • Versionado de agent_templates con posibilidad de mergear cambios base a proyectos existentes.
  • Pruebas de carga y stress antes del primer release público.
  • Telemetría mínima de uso para validar las hipótesis de las métricas objetivo.
LO QUE APRENDÍ //
  • Un proyecto con audiencia clara (freelance → cliente) puede diferenciarse atacando los problemas de comunicación y visibilidad.
  • La IA es más útil cuando el contexto está estructurado y limitado (docs públicas del proyecto) que cuando se le da acceso a todo.
  • "Self-hosted open source" sigue siendo una propuesta de valor real para profesionales técnicos que no quieren ceder el control de sus datos.
  • El polling Livewire como estrategia realtime es una decisión pragmática que reduce drásticamente la complejidad operativa.
10 // SIGUE EXPLORANDO

Servicios, proyectos y lecturas relacionadas

Otros puntos de la web donde se aplica este mismo enfoque o se profundiza en temas cercanos.

Servicio

Integrar IA en tu aplicación

Añadir IA al software que ya usas: chat con tus documentos y datos (RAG), clasificación, extracción y resúmenes.

Proyecto

Gym Tracker

Tu diario de gimnasio, rápido y sin complicaciones. PWA offline first con API de asistente IA para conectar cualquier LLM, n8n o Telegram.

Artículo

AI Automation Engineer: qué hace y por qué importa

Un AI Automation Engineer combina desarrollo, automatización e IA para resolver problemas reales en empresas. Qué hace, qué herramientas usa y por qué importa.

Servicio

Agentes y automatizaciones con IA

Flujos que ejecutan acciones reales (WhatsApp, email, CRM, RAG) combinando n8n con código a medida.