Screen Browser

npx add-mcp 'https://mcp.screenbrowser.com'

smart_toyClaude Code · Codex · Cursor · cualquier cliente MCP

Pídele a tu agente de codificación que haga el video tutorial.

La habilidad Screen Browser enseña a tu agente a leer el código base y escribir el recorrido con las palabras que realmente usan tus botones y campos. El servidor MCP inicia sesión en tu aplicación desplegada, graba el recorrido, lo narra y entrega el MP4 al agente.

Instala el plugin de Claude Code menu_bookLee la referencia

Requiere un plan de Screen Browser, desde $49 al mes. Una ejecución que falla no cuesta nada.

Una sesión real, con los detalles de la cuenta demo ocultos. Toda la sesión, con el video terminado.

Configura una vez por máquina

Instala y luego inicia sesión desde tu navegador la primera vez que el agente use una herramienta de Screen Browser. No hay ninguna clave que pegar.

$ claude plugin marketplace add screenbrowser/skill
$ claude plugin install screenbrowser@screenbrowser{
  "mcpServers": {
    "screenbrowser": { "url": "https://mcp.screenbrowser.com" }
  }
}[mcp_servers.screenbrowser]
url = "https://mcp.screenbrowser.com"

$ codex mcp login screenbrowser$ claude mcp add --transport http screenbrowser https://mcp.screenbrowser.com

# or any client: Streamable HTTP, OAuth sign-in or a bearer key

El plugin incluye la habilidad y la conexión al servidor. Luego pregunta: "haz un video tutorial de cómo crear una campaña". Los detalles están en la referencia de agentes.

edit_noteUna sola solicitud

"Haz un video tutorial de cómo crear una campaña."

Esa es toda la instrucción. El agente ya conoce la ruta, el formulario, las etiquetas y dónde aparece el mensaje de éxito. La habilidad le indica cómo convertir eso en una guía que Screen Browser pueda seguir en la primera ejecución, y las herramientas MCP se encargan del resto.

1. 1 Verifica el saldo con get_credits y reenvía un enlace de recarga si se agota.
2. 2 Crea el proyecto a partir de la URL desplegada, la redirección posterior al inicio de sesión que lee en el código, los hosts que llama el frontend y las credenciales del usuario demo como variables.
3. 3 Escribe dos guías: la de inicio de sesión y la del recorrido, en lenguaje sencillo, nombrando las cosas como las etiquetan las plantillas.
4. 4 Valida, graba, espera: validate_guide hasta que pase, start_run, luego get_run hasta que el video esté listo.
5. 5 Te entrega el enlace y los créditos que costó. Cuando la aplicación cambie, pregunta de nuevo: la guía se reutiliza y solo se edita donde se movió una etiqueta.

Lo que el agente aún necesita de ti

El código fuente por sí solo no genera una grabación. Antes de la primera ejecución, ten esto listo; el agente pedirá lo que no encuentre en el código.

• public Una URL desplegada a la que el grabador pueda acceder por internet. El entorno de staging está bien; localhost, IPs sin dominio y aplicaciones detrás de una VPN no lo están.
• person Un usuario demo que inicie sesión con correo y contraseña: sin OAuth, sin códigos de doble factor, sin captcha, sin correos de nuevo dispositivo. Dale datos realistas para mostrar.
• verified_user Permiso para grabar. Confirmas una vez por aplicación que es tuya, de un cliente o interna. El agente lo hace por ti cuando se lo indicas.
• lan Los hosts con los que habla la aplicación. El grabador solo accede a tu aplicación y a los hosts que listes; una API no listada aparece como una página vacía. El agente lee la mayoría de ellos desde el código.
• payments Un plan con minutos restantes. Los planes se miden en minutos de video terminado; el agente verifica el saldo antes de empezar. Las verificaciones son gratuitas, y también lo es una ejecución que falla.

Las credenciales van en variables del proyecto, cifradas, y solo se escriben dentro del navegador de inicio de sesión no grabado. Nunca se comparten con nada más, incluido el agente que escribe la guía.

Esto no es una maqueta: la guía de Claude Code muestra una sesión real desde esa frase hasta el video terminado, con la instrucción exacta y cada pantalla en el camino.

Mientras trabaja: el agente lee la aplicación, verifica el espacio de trabajo demo y valida ambas guías antes de gastar nada.

El informe: qué muestra el video, qué notó en el espacio de trabajo demo y dónde están las guías para la próxima vez.

Qué esperar y qué no hará

La versión honesta, para que la primera ejecución no sea una sorpresa.

Reejecuciones, no detección de cambios

Nada vigila tu aplicación. Después de un lanzamiento, pídele al agente que grabe de nuevo; reutiliza la guía y edita una línea si cambió una etiqueta.

Cinco minutos por video

Un buen tutorial tiene de diez a veinticinco pasos. La habilidad divide una función larga en varias guías dentro del mismo proyecto.

La primera ejecución es la mejor maestra

Una ejecución fallida es gratuita e informa cómo se resolvió cada paso, para que el agente aprenda cómo llama realmente la página a las cosas y corrija la guía.

De dos a seis minutos por ejecución

El agente consulta cada 15 a 30 segundos. Una guía típica de dos minutos se graba, narra y combina en tres a cinco minutos.

Móvil significa web móvil

La misma guía se puede grabar como teléfono o tableta, mostrando el diseño móvil de la aplicación. Las aplicaciones nativas de iOS y Android no se graban.

Actualizaciones

El servidor alojado se actualiza para todos a la vez. El plugin queda fijado al instalarlo: claude plugin update screenbrowser@screenbrowser cuando cambian los consejos para escribir guías.

La lista de herramientas, los códigos de error y cada variante de configuración están en la referencia de agentes. Las reglas de guía que sigue la habilidad están en sintaxis de guía.

Elige un plan, instala el plugin, pide un video.

Cada plan incluye el servidor MCP y la API. El plugin se instala en menos de un minuto; la primera verificación de guía es gratuita.

Elige un plan codeLee la habilidad en GitHub