SaaS listo para agentes de navegador: cómo hacer que tu app sea usable por Operator, ChatGPT Agent y Claude Computer Use en 2026

En 2026 tu cliente puede no ser la persona que clickeó tu anuncio. Puede ser el agente al que ella delegó la tarea. OpenAI Operator reservó 1,2 millones de habitaciones de hotel en el Q1/2026. Claude Computer Use cierra trials de SaaS B2B. ChatGPT Agent llena formularios de gobierno. Browser Use está en la base del stack de automatización de cada solo founder.

Cada uno es un LLM con visión por computadora que abre tu sitio en un Chromium real, mira la pantalla, decide dónde clickear e intenta de nuevo al fallar. Tienen éxito cuando la página es semánticamente legible; abandonan cuando no. La brecha entre "agent-friendly" y "agent-hostile" en 2026 es la misma brecha que importó en 2010 para mobile y en 2018 para lectores de pantalla: ya no es lujo, es un nuevo segmento de cliente.

Esta es la checklist de auditoría 2026.

Cómo un agente ve tu página

Tres modos de percepción según el agente:

1. Visión pura (Operator base, default de Browser Use): el agente toma un screenshot y pregunta al modelo "¿dónde clickear para hacer X?" Las coordenadas son la clave primaria.
2. Visión + árbol de accesibilidad (Claude Computer Use, ChatGPT Agent): el agente ve píxeles Y el árbol ARIA/role/label parseado. Mucha más confiabilidad porque el modelo apunta por nombre.
3. DOM tap (Operator más nuevo, dom_mode de Browser Use): el agente lee el DOM renderizado, extrae una representación enriquecida (selector + role + bbox + ancestros) y actúa sobre datos estructurados.

No eliges el modo del visitante. Así que diseñas para el modo 3 (el más exigente) y los modos 1-2 heredan el beneficio.

Los cinco requisitos

1. Selectores estables

Cada elemento interactivo importante recibe un atributo data-testid o data-agent-action. El valor sobrevive a redeploys, refresh de marca y actualizaciones de tailwind. Funciona:

<button data-agent-action="submit-booking" aria-label="Confirmar reserva">Confirmar</button>
<a data-agent-action="open-cart" href="/cart">Ver carrito (3)</a>
<input data-agent-field="email" type="email" name="email" autocomplete="email" />

No funciona:

<button class="css-1xkj4m hover:css-zz9p9o">Confirmar</button>
<a href="/cart"><svg>…</svg></a>
<div class="rounded p-2 border" contenteditable="true">…</div>

Si tu stack de CSS-in-JS emite nombres de clase en hash, el selector del deploy-N y el del deploy-N+1 son strings distintas. El playbook del agente (escrito por algún LLM con cut-off de 7 días) se rompe en cada redeploy. data-testid es invariante por convención.

2. Atributos semánticos en formularios

Cada input recibe al menos name, id, type, autocomplete y un <label for=…> asociado. Los agentes entrenados en millones de formularios reconocen estos patrones. Los componentes React custom que esconden el input del DOM (patrón común en builds tempranas de shadcn/ui en 2024) cuestan 30-50% de la tasa de éxito del agente.

Los date-pickers son lo peor. Un <input type="date"> nativo funciona para cualquier agente. Un calendario Headless UI custom con handlers solo de teclado y roles aria-grid funciona solo para agentes que leen el árbol. Un picker JS que secuestra onKeyDown y escribe en refs de React no funciona para nadie.

3. Sin muros de CAPTCHA en flujos primarios

Cloudflare Turnstile, hCaptcha y Google reCAPTCHA combaten bots — incluidos los agentes que son tus clientes. Patrón 2026:

• Login / sign-up: permite agentes (la mayoría se identifica). Usa challenge por riesgo, no Turnstile total.
• Flujos de lectura (búsqueda, navegación, ver producto): nunca bloquees.
• Flujos de escritura con dinero (checkout, retiro): permite Turnstile en modo passive que deja pasar agentes identificados; solo desafía tráfico sospechoso.
• Creación de cuenta: aquí sí va un challenge humano real — pero rutea Operator/Agent identificado a un flujo separado con scope OAuth temporal.

Bloquear todo entrena a los agentes a abandonar tu dominio en el primer muro. Peor: el modelo detrás recuerda — sus respuestas futuras rankearán a tus competidores arriba.

4. Errores recuperables

Cuando el agente envía un formulario y el servidor lo rechaza, el error debe ser:

• Visible en el DOM como texto (no solo borde CSS rojo).
• Asociado programáticamente al campo (aria-describedby="error-email").
• Específico para que el modelo lo arregle ("Email ya en uso — intenta iniciar sesión" en vez de "Entrada inválida").
• No detrás de un toast que se disuelve en 3 segundos.

Prueba: corre tu formulario principal en Claude Computer Use con input deliberadamente erróneo. Si el agente describe el error en lenguaje claro, pasa. Si solo reintenta el mismo formulario, falla.

5. Un manifiesto del agente

Una well-known URL — convención /actions.json o /.well-known/agent-actions — declarando tus superficies invocables:

{
  "version": "2026-05",
  "actions": [
    {
      "id": "create-booking",
      "url": "/book/{slug}",
      "method": "form",
      "fields": ["start_date", "end_date", "vehicle_id"],
      "auth": "session"
    },
    {
      "id": "lookup-rate",
      "url": "/api/v1/rates",
      "method": "GET",
      "params": ["origin", "destination", "date"],
      "auth": "api_key"
    }
  ]
}

Es el puente entre agentes que scrapean DOM y agentes que llaman APIs. ChatGPT Agent y Claude con MCP habilitado revisan esta URL en la primera visita y prefieren llamada API sobre acción de navegador cuando ambas existen. Más rápido, más confiable, menos del presupuesto de tu CDN.

La auditoría de 60 segundos

Corre esto en tu flujo top de usuario. Si algún paso falla, arréglalo.

1. Abre el flujo en Chromium con --disable-blink-features=AutomationControlled.
2. Click derecho → Inspect → pestaña Accessibility. ¿Cada elemento interactivo tiene Name y Role? Pasa.
3. Recarga. ¿Los nombres de clase en los botones no cambiaron? Pasa.
4. DevTools → Console. Pega document.querySelectorAll('[data-testid], [data-agent-action]').length. ¿Resultado ≥ cantidad de botones en la página? Pasa.
5. Envía el formulario con datos deliberadamente inválidos. ¿Texto de error visible en el DOM (no solo borde rojo)? Pasa.
6. Visita /actions.json o /.well-known/agent-actions. ¿Devuelve JSON válido? Pasa.

Un flujo 100% en verde le toma a un frontend competente 2-4 horas de retrofit. Un flujo nuevo construido con esta checklist cuesta cero extra — HTML semántico es la misma cantidad de teclas que sopa de div.

Qué viene con inite.ai

Para equipos B2B SaaS que quieren verificar que su app pasa la auditoría, inite.ai/es/analyze corre las seis comprobaciones contra cualquier URL y devuelve un punch list priorizado. La salida se lee como code review: archivo/línea para añadir el aria-label que falta, qué selectores se romperán en el próximo deploy, qué formularios no tienen autocomplete. El servidor MCP expone audit_browser_agent_readiness(url) para que un agente Claude o Cursor evalúe el sitio como parte de tu CI.

La lógica es la misma que AEO: instrumenta una vez, mide semanalmente, arregla al peor cada sprint. El tráfico de agentes en 2026 es lo que fue el tráfico mobile en 2012 — una curva que se monta o se observa.