ATALAYA

Atalaya is a generative-UI workspace for occupational safety compliance in Colombia, named for the Spanish word for watchtower — the elevated vantage point from which a sentinel sees everything that matters below. It is built for the SST coordinators of construction, mining, energy, and manufacturing companies who, today, assemble that view by hand: from spreadsheets, ARL portals, WhatsApp threads, and PDFs scattered across folders. In Atalaya, that view assembles itself in seconds, around a 3D avatar of the employee being reviewed, in conversation with a copilot that knows the entire workforce.
What it does
A coordinator types an employee’s name. Within two seconds, a full-body 3D avatar of that person materializes in the hero panel — wearing the personal protective equipment their cargo and active certifications imply they should be wearing, with required-but-non-compliant items pulsing red, breathing softly with an idle animation, posture subtly tensing with the day’s risk load. Above the avatar, the IRFO (Índice de Riesgo de Fatalidad Ocupacional) gauge counts up to a value between 0 and 100, color-banded against Colombian sector fatality baselines. Around it, KPI cards, a certification timeline, an expiration calendar, and a recommendations list assemble themselves into a live dashboard.
Below the avatar, an SVG body silhouette lights up across regions where the employee has cumulative high-risk-task exposure: lungs glowing for confined-space and hot-work, hands and torso for electrical, spine and lower limbs for working at heights. Hovering a region tells the coordinator exactly which TAR categories drove its intensity.
To the right, a chat panel. The coordinator types: “¿qué le falta a Hugo para trabajo en alturas?” The agent replies in Colombian Spanish, citing the specific gaps — expired alturas certification, medical clearance expiring in four days, missing improvement evaluation — and emits a CertificationGapList widget inline in the chat with action buttons on each row. She types “recalcula el riesgo si lo asigno a espacios confinados” — the avatar swaps PPE in real time, the gauge animates upward, the body heatmap shifts toward the lungs, and a ScenarioSimulator widget appears showing the side-by-side delta. She types “genera el informe de cumplimiento” — a PDF artifact materializes as a DocumentCard she can preview, download, and hand to a Mintrabajo auditor.
What used to be thirty minutes per employee is now under five.
CopilotKit at the architectural center
The reason Atalaya feels less like software and more like a conversation with a knowledgeable assistant is that CopilotKit is the entire interaction layer. The application is structured around three generative-UI patterns CopilotKit supports natively, each used for a different job:
Static generative UI — owned by the frontend, picked by the agent. The 3D avatar, the IRFO gauge, the employee header. Each is a hand-crafted React component registered with CopilotKit’s useFrontendTool. When the agent decides Hugo Pérez is the active employee, it calls renderAvatar3D with the parameters that drive PPE composition; CopilotKit finds the matching frontend tool, the React component re-renders, the hero panel updates. The agent never controls layout — only intent.
Declarative generative UI — structured freedom. For the dozen data widgets that must adapt to each employee’s specific shape (KPI cards, skills timelines, certification matrices, recommendation lists, scenario simulators, document cards, gap lists), the agent emits A2UI JSON from a closed catalog, and CopilotKit’s consumes the JSON and dispatches it to the matching React renderer. This gives the agent the expressive range to compose any data view, while the frontend retains complete control over visual consistency, branding, and theming. The catalog is closed by design — the agent cannot invent component types, only compose from twelve approved primitives. A2UI’s catalog-of-trusted-components model is what makes this safe in production.
Open-ended generative UI — total flexibility, sandboxed. For the rare moments the catalog cannot express what the coordinator asked for (“dibújame una matriz GTC 45 IPEVR de los riesgos de Hugo”, “explícame con un diagrama el flujo de un permiso de trabajo en alturas”), CopilotKit’s useComponent accepts raw HTML/SVG from the agent and renders it inside a double-iframe sandbox with strict CSP. The agent gets the freedom to invent custom visualizations; the host application stays secure.
Underneath all three, the AG-UI protocol carries the entire interaction stream — text deltas, tool calls, tool results, A2UI surface emissions, frontend action invocations, agent state updates — between the React frontend and the LangGraph agent over a single SSE connection. AG-UI is what turns three separate concerns (chat, dashboard, avatar) into one coherent experience that updates atomically: when the agent decides a scenario changes the picture, the gauge animates, the avatar swaps PPE, the heatmap shifts, the recommendation list recomposes, and a Spanish-language summary streams into the chat simultaneously, from a single model turn.
CopilotKit also ships the production-grade chat UI itself, the runtime adapter that bridges Next.js to the Python agent, and first-class MCP Apps integration for optional power-user surfaces — a Three.js MCP server can return interactive 3D scenes embedded directly in the chat for prompts like “muéstrame una escena de espacio confinado típico”. Without CopilotKit, building this would mean reinventing six different protocols, three rendering models, and an event bus. With it, the team focuses on the domain — what an SST coordinator actually needs — instead of the plumbing.
The risk model
The IRFO is a pure-Python heuristic combining four weighted components: exposure to high-risk tasks (40%), certification compliance gap (30%), medical clearance gap (20%), and training/improvement gap (10%). TAR categories are classified from skill names against ARL SURA’s TAR procedure, which uses OSHA 29 CFR 1910/1926 as its international reference. Sector fatality baselines anchor the output to Colombian regulatory reality. The result is a 0-100 relative index — explicitly not a mortality prediction for a named individual — accompanied always by its component breakdown, its contributing factors, and a bilingual disclaimer present in every UI surface and every exported PDF. Every weight is an explicit constant in code with a docstring linking to the regulatory rationale (Decreto 1072 de 2015, Resolución 0312 de 2019, Decreto 2090 de 2003, GTC 45).
The stack
Next.js 16, React 19, Tailwind 4, shadcn/ui, React Three Fiber, Framer Motion, Recharts on the frontend. CopilotKit v2, AG-UI, A2UI v0.9, and MCP Apps as the generative-UI runtime. FastAPI, LangGraph, Pydantic v2, DuckDB (querying the parquet directly — no ETL), Polars, WeasyPrint on the backend. Anthropic Claude Sonnet 4 as the reasoning model. The data source is a single local .parquet file with one row per (person, skill) pair, queryable in milliseconds.
What this is
Atalaya is what the SG-SST compliance experience should feel like in 2026: an interface that adapts to what the coordinator asks rather than forcing her to decode a spreadsheet, a conversation that builds the answer rather than a form that demands it be already known. The watchtower metaphor is not decoration — it is the literal product. One elevated view, one trained sentinel beside you, one workforce in plain sight.

Nothing, everything was built in live