Architecture

Architecture

🇬🇧 English first · 🇪🇸 Español más abajo.

Stack

Layer	Technology
Frontend	React · Vite · TailwindCSS → Firebase Hosting (Spark)
Database	Firestore
Orchestration	n8n (self-hosted)
AI	Claude SDK (per-agent system prompt)
Public exposure	cloudflared tunnel → n8n

Agent engine flow (n8n)

POST /webhook/message
  → read agent config        (Firestore: agents/{agentId})
  → read last 10 messages     (Firestore: messages, by timestamp)
  → read long-term facts      (Firestore: memory/{agentId}/facts/)
  → build prompt: SYSTEM = {systemPrompt} + "\n\nMemory:" + {facts}
                  MESSAGES = history + new message
  → call Claude
  → persist reply             (Firestore: messages/)
  → realtime listener renders it in the chat

Firestore schema

agents/{agentId}          # name, systemPrompt, tools, brand color, memory window N
conversations/{convId}    # per client session
messages/{msgId}          # role, content, timestamp, status
memory/{agentId}/facts/   # long-term persisted facts

Status field on a message drives the typing indicator (status === 'processing').

---

🇪🇸 Español

Stack

Capa	Tecnología
Frontend	React · Vite · TailwindCSS → Firebase Hosting (Spark)
Base de datos	Firestore
Orquestación	n8n (self-hosted)
IA	Claude SDK (system prompt por agente)
Exposición pública	cloudflared tunnel → n8n

Flujo del agent engine (n8n)

El webhook recibe el mensaje, lee la config del agente, los últimos 10 mensajes y los facts de memoria a largo plazo, construye el prompt (system prompt + memoria + historial), llama a Claude, persiste la respuesta en Firestore y el listener en tiempo real la muestra en el chat (ver bloque arriba).

Schema Firestore

• agents/{agentId} — nombre, systemPrompt, herramientas, color de marca, ventana de memoria N
• conversations/{convId} — sesión por cliente
• messages/{msgId} — rol, contenido, timestamp, status
• memory/{agentId}/facts/ — hechos persistidos a largo plazo

El campo status del mensaje activa el indicador de escritura (status === 'processing').