Una gran cantidad de trabajo útil todavía ocurre dentro de las interfaces web.
Para resolver un ticket, el equipo de soporte necesita usar una consola de administración. Un equipo de operaciones depende de paneles para realizar un seguimiento de las alarmas. Antes de hablar con un cliente, un representante de ventas probablemente comprobará primero el CRM.
Para que los agentes de LLM sean útiles en estos flujos de trabajo, deben trabajar directamente a través del navegador.
En esta publicación, crearemos un agente que utiliza el navegador con OpenAI Agents SDK y Playwright MCP. Primero veremos el bucle detrás del uso del navegador y luego lo pondremos en práctica a través de un estudio de caso concreto.
1. El modelo mental
En un nivel alto, un agente que utiliza un navegador se entiende mejor como un LLM colocado en un bucle de interacción con un navegador.
El ciclo es el siguiente: el agente comienza con una tarea y el estado actual del navegador. Luego, el agente interpreta ese estado, decide qué hacer a continuación y envía una acción al navegador. Esa acción produciría un nuevo estado del navegador, que se convierte en la entrada para la siguiente decisión.
Este ciclo continúa hasta que el agente cree que la tarea está completa.
Para que el bucle funcione, necesitamos dos conexiones entre el agente y el navegador:
Un canal de observación, para que el agente pueda recibir el estado actual del navegador. Un canal de acción, para que el agente pueda interactuar con el navegador.
Para el canal de observación, las opciones comunes incluyen capturas de pantalla, información de página estructurada (por ejemplo, modelo de objetos de documento o árbol de accesibilidad) o una combinación de ambos.
Para el canal de acción, el agente puede usar controles de mouse y teclado, apuntar a elementos de página específicos o emitir comandos de navegador de nivel superior.
Las elecciones de observación y acción suelen ser independientes, pero en la práctica suelen verse dos parejas:
captura de pantalla + acciones de mouse y teclado basadas en coordenadas estado de página estructurada + acciones de navegador orientadas a elementos
La primera pareja se inclina hacia el uso general de la computadora, que se extiende más allá del navegador a otras aplicaciones de escritorio. El segundo es más específico del uso del navegador, ya que aprovecha la estructura ya disponible dentro de una página web.
En esta publicación, nos centraremos en observaciones de páginas estructuradas junto con acciones del navegador orientadas a elementos.
2. Estudio de caso: resolución de una solicitud de atención al cliente
Para nuestro caso de estudio, crearemos un agente que utiliza un navegador y que resuelve la solicitud de un cliente a través de una consola de soporte basada en web.
2.1 Preparación de la consola de soporte
Para crear el entorno del navegador, codifiqué por vibración una pequeña consola de atención al cliente. Es una aplicación web estática construida con HTML, CSS y JavaScript sin formato. No hay backend de aplicación ni base de datos: todos los datos residen en el navegador.
Podemos servir la consola localmente con el servidor HTTP integrado de Python:
cd toy_app python -m http.server 8000 –bind 127.0.0.1
Esto hace que la consola esté disponible en http://127.0.0.1:8000, que luego pasamos al agente como APP_URL:
El lado izquierdo de la consola funciona como una bandeja de entrada de soporte. Una vez seleccionado un caso, el resto de la consola muestra el pedido relacionado, el contexto del cliente y las políticas de resolución. A partir de ahí, el caso se puede resolver con una nota interna. La consola también tiene un registro de auditoría que realiza un seguimiento de la actualización.
La tarea del agente es simple: investigar un caso de soporte entrante y llevarlo hasta su resolución, completamente a través de esta interfaz de consola.
2.2 Definición del agente que utiliza el navegador
A continuación, configuramos el agente que utiliza el navegador.
Para la pila tecnológica, aquí usaremos el SDK de OpenAI Agents para impulsar el tiempo de ejecución del agente y Playwright MCP para conectar el agente al navegador.
Nuestro agente final configurado se ve así:
# pip install openai-agents from agentes import Agent, ModelSettings from openai.types.shared import Reasoning agent = Agente( nombre=”Agente de navegador de consola de soporte”, modelo=”gpt-5.4″, model_settings=ModelSettings( razonamiento=Reasoning(effort=”medium”), ), instrucciones=AGENT_INSTRUCTIONS, mcp_servers=[playwright_server])
Hay tres piezas que debemos descomprimir aquí, es decir, el cliente LLM, las instrucciones del agente y las herramientas del navegador.
Primero, conectamos el SDK de agentes a Azure OpenAI:
importar sistema operativo desde openai importar AsyncAzureOpenAI desde agentes importar (set_default_openai_api, set_default_openai_client,) azure_client = AsyncAzureOpenAI( api_key=os.environ[“OPENAI_API_KEY”]api_version=os.environ[“OPENAI_API_VERSION”]azure_endpoint=os.environ[“OPENAI_API_BASE”]) set_default_openai_client(azure_client) set_default_openai_api(“respuestas”)
Registramos el cliente con el SDK de Agents y lo configuramos para usar la API de Responses.
Luego, tenemos la siguiente instrucción, que es intencionalmente mínima:
AGENT_INSTRUCTIONS = “”” Eres un agente que puede interactuar con un navegador web. “””.strip()
Sólo configuramos el rol del agente. La tarea real aparecerá más adelante en el mensaje enviado al agente.
A continuación, necesitamos configurar Playwright MCP.
¿Qué es el dramaturgo MCP?
Playwright es una biblioteca de automatización del navegador. Gestiona un navegador real en su nombre y realiza clics, teclea, navega y lee lo que hay en la página.MCP (Protocolo de contexto modelo) es una forma estándar de exponer herramientas a un LLM, para que un agente pueda llamarlas directamente. Playwright MCP es lo que se obtiene cuando se juntan los dos, es decir, las capacidades del navegador de Playwright, expuestas como herramientas que un agente puede utilizar.
Lo que lo hace interesante es cómo le muestra la página al agente. En lugar de una captura de pantalla, Playwright MCP utiliza de forma predeterminada una instantánea de accesibilidad, que es básicamente una lectura estructurada de lo que hay en la página. Los elementos interactivos como enlaces, botones y campos de entrada obtienen cada uno una ID de referencia a la que el agente puede dirigirse directamente. Ésa es exactamente la combinación de observación estructurada y acción dirigida a elementos de la que hablamos antes.
Playwright MCP se ejecuta a través de Node.js. Para instalar Node.js, en Windows:
Instalación de Winget OpenJS.NodeJS.LTS
En MacOS:
nodo de instalación de cerveza
Y en Linux:
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.5/install.sh | fiesta\. “$HOME/.nvm/nvm.sh” instalación de nvm –lts
Luego verifique la instalación:
nodo –versión npx –versión
Podemos configurar el SDK de Agentes para iniciar el servidor MCP mediante el siguiente comando npx:
de agentes.mcp import MCPServerStdio playwright_server = MCPServerStdio( nombre=”Dramaturgo MCP”, params={ “command”: “npx”, “args”: [
“-y”,
“@playwright/mcp@latest”,
“–browser”,
“chrome”,
]}, )
Aquí, npx recupera y ejecuta el último paquete Playwright MCP. El indicador -y acepta automáticamente el mensaje de confirmación de npx, mientras que –browser chrome le indica a Playwright qué navegador debe iniciar. Chrome también es el navegador predeterminado de Playwright MCP y, si ya está instalado, no se requiere instalación de navegador por separado.
MCPServerStdio configura el SDK de agentes para iniciar Playwright MCP como un proceso local. Cuando el agente llama por primera vez a una herramienta del navegador, Playwright MCP abre una ventana visible de Chrome y ejecuta la acción solicitada del navegador.
2.3 Ejecutando el Agente
Ahora podemos darle al agente una tarea concreta:
APP_URL = “http://127.0.0.1:8000″ TASK = f””” Abra {APP_URL} y resuelva el caso de soporte para el pedido ORD-1042. El cliente dice que recibió el artículo incorrecto. Utilice la información disponible en la aplicación para determinar y aplicar la resolución adecuada. Agregue una nota interna concisa y asegúrese de que la resolución se registró correctamente. Informe lo que hizo cuando se completó la tarea. “””.strip()
En el mensaje de la tarea, describimos cómo acceder a la aplicación y el resultado deseado.
Luego ejecutamos el agente con:
desde agentes importan Runner asíncrono con playwright_server: resultado = await Runner.run(agente, TAREA, max_turns=20,) print(result.final_output)
El bloque asíncrono con inicia el proceso de Playwright MCP y lo mantiene conectado mientras el agente se está ejecutando. Usamos max_turns para establecer un límite superior de cuántos turnos puede tomar el agente.
Una vez iniciado, Chrome se abriría y podremos ver al agente trabajar a través de la consola de soporte.
La respuesta final resumió correctamente el resultado:
Resuelto CASO-4107 para el pedido ORD-1042 con Reemplazo. El caso ahora muestra Resuelto, la acción registrada es Reemplazo y el registro de auditoría contiene la entrada de resolución correspondiente.
Si lo desea, también puede inspeccionar las llamadas a la herramienta del navegador y sus resultados de esta manera:
para el elemento en result.new_items: print(tipo(elemento).__nombre__, elemento)
En mi recorrido, el agente encontró el caso asociado con ORD-1042 e inspeccionó el pedido, la solicitud del cliente, el estado del inventario y la política de resolución relevante. Luego concluyó que procedía un reemplazo, añadió una nota interna y presentó la resolución. Finalmente, verificó el caso actualizado y el registro de auditoría para confirmar que la acción había sido registrada.
Este es exactamente el comportamiento agente que queremos.
3. Del uso del navegador al uso de la computadora
Lo que construimos en este estudio de caso es un agente que utiliza un navegador. Aún así, el patrón subyacente, es decir, el ciclo de observar, decidir, actuar y repetir, se extiende naturalmente al uso general de la computadora.
Lo que cambia son los canales de observación y acción.
En nuestro caso, Playwright MCP proporciona al agente información de página estructurada y le permite apuntar a elementos web individuales. En cambio, un agente de uso más general de la computadora puede trabajar a partir de capturas de pantalla y controlar el mouse y el teclado mediante coordenadas.
Puede encontrar el repositorio de nuestro caso de estudio aquí: https://github.com/ShuaiGuo16/llm-browser-agent/tree/main