Inicio rápido

Consola pendiente

La consola propia de Espejo (la pantalla donde normalmente obtendrías un proyecto y una clave haciendo clic en un botón) todavía no está construida. Hasta que lo esté, los proyectos se aprovisionan con las variables de entorno BOOTSTRAP_TENANT / BOOTSTRAP_PROJECT_SLUG / BOOTSTRAP_INGEST_KEY en la API, o por un operador con la clave de administrador.

1. Obtené una clave de proyecto

   La clave pública de un proyecto tiene la forma pk_live_…. Es pública por diseño — va directo en tu HTML, de la misma manera que un Sentry DSN. Solo indica a qué proyecto pertenece una grabación; no puede leer nada de vuelta.

2. Agregá el script

   Existen dos bundles. Elegí uno:

   <!-- network (con bodies), console, clicks, navigation — 18 KB gzip -->
   <script src="https://app.espejo.dev/sdk/espejo.js" data-key="pk_live_..."></script>

   <!-- todo lo anterior + DOM replay via rrweb — 125 KB gzip -->
   <script src="https://app.espejo.dev/sdk/espejo.dom.js" data-key="pk_live_..."></script>

   Son dos archivos separados, no uno detrás de un flag: un IIFE no puede dividirse en chunks, así que incluir rrweb “por las dudas” le costaría a todos 80 KB, incluyendo a quien solo quiere el log de red.

   Por defecto no se sube nada. El script mantiene un ring buffer en memoria con capacidad limitada y solo lo envía cuando llamás a report(). Agregá data-mode="always" para subir cada sesión en su totalidad — esa es la diferencia entre algo que podés dejar corriendo en producción y algo que quema tu bucket en una semana.

3. Disparé una grabación

   La instancia iniciada automáticamente es window.espejo:

   const url = await espejo.report("Can't save the weighing");
   // → the URL of the uploaded session, or null if nothing was recording

   Un botón flotante de “reportar un problema” se monta automáticamente a menos que pases data-button="off" (o button: 'off' al construir Espejo vos mismo). Ese botón ya trae grabación de pantalla: quien reporta escribe qué pasó, aprieta “Record my screen”, el panel se hace a un lado, reproduce el bug y frena — el video viaja con el reporte. No hay nada que programar.

   Si preferís tu propia interfaz, la API está abierta. La grabación necesita un gesto del usuario, así que va adentro de un click handler:

   button.addEventListener("click", async () => {
     await espejo.startVideo({ microphone: true });
     // ... user reproduces the bug ...
     await espejo.stopVideo();
     await espejo.report("Recorded the bug live");
   });

   El flujo completo, con npm y con la etiqueta script, está en Arma tu propio botón de reporte.

4. Mirá qué se almacenó

   Una grabación es un directorio en el bucket:

   espejo/<projectId>/<yyyy-mm>/<sessionId>/
     manifest.json     what this session is and what objects compose it
     events.json        summary + network + console + interactions + navigation
     dom.jsonl.gz        DOM replay events (dom mode)
     video.webm          (video mode)

   La ruta del objeto siempre la construye el servidor — el browser nunca propone una clave, porque si no podría sobreescribir la sesión de otro.

   Recuperala con tu token de sesión:

   curl https://app.espejo.dev/v1/sessions/<id> \
     -H "Authorization: Bearer <jwt>"

Qué leer a continuación

• Conceptos centrales — el bundle, la redacción, el almacenamiento y el modelo tenant → proyecto → clave.
• Reportes automáticos — dejá que un bug suba su propia grabación, y recibí un webhook firmado cuando pase.
• Servidor MCP — dejá que Claude Code o claude.ai lean tus grabaciones directamente.

Siguiente paso: sumá un agente de soporte

Espejo también puede darle a un agente de soporte la página en la que está tu visitante. Activá el agente en la consola, en la pestaña Agente de soporte de tu proyecto, y pegá el widget de chat en las páginas donde debe aparecer:

<script src="https://app.espejo.dev/sdk/espejo.chat.js" data-key="pk_..." defer></script>

Usa la misma clave pública. Si tus visitantes inician sesión, sumá su correo y el hash que calcula tu backend (data-user-email y data-user-hash) para mostrarles sus tickets en el widget. La guía del agente de soporte explica los proveedores, las acciones, los tickets y los límites. Si ya tenés tu propio chat y tu propio modelo, cargá la capa espejo.agent en su lugar.