Como dar um navegador a um agente de IA: tutorial prático com OpenAI SDK e Playwright MCP

O loop por trás de um agente com navegador

Grande parte do trabalho útil ainda acontece dentro de interfaces web. Para resolver um ticket, a equipe de suporte usa um console administrativo. A equipe de operações depende de dashboards para monitorar alarmes. Antes de falar com um cliente, um representante de vendas provavelmente consulta o CRM primeiro.

Para que agentes baseados em LLMs se tornem úteis nesses fluxos de trabalho, eles precisam operar diretamente pelo navegador — e é exatamente isso que Shuai Guo demonstra neste tutorial prático usando o OpenAI Agents SDK e o Playwright MCP.

Em alto nível, um agente com navegador é um LLM colocado em um loop de interação com o browser. O ciclo funciona assim: o agente recebe uma tarefa e o estado atual do navegador, interpreta esse estado, decide o que fazer e envia uma ação de volta. Essa ação produz um novo estado, que se torna a entrada para a próxima decisão. O loop continua até que o agente considere a tarefa concluída.

Para isso funcionar, são necessários dois canais entre o agente e o navegador:

• Canal de observação: para o agente receber o estado atual do navegador (screenshots, informações estruturadas da página como DOM ou árvore de acessibilidade, ou uma combinação de ambos).
• Canal de ação: para o agente interagir com o navegador (controles de mouse/teclado, segmentação de elementos específicos ou comandos de alto nível).

Na prática, duas combinações são comuns: (1) screenshot + ações por coordenadas (computer use genérico, que vai além do navegador) e (2) estado estruturado da página + ações direcionadas a elementos (específico para browser use, aproveitando a estrutura já disponível na página web). O tutorial foca na segunda abordagem.

Estudo de caso: resolvendo um ticket de suporte

Guo criou um console de suporte simulado — uma aplicação web estática em HTML, CSS e JavaScript puro, sem backend ou banco de dados. O console funciona como uma caixa de entrada de suporte: ao selecionar um caso, o restante da interface mostra o pedido relacionado, contexto do cliente e políticas de resolução.

O agente usa OpenAI Agents SDK como runtime e Playwright MCP para conectar o agente ao navegador. O Playwright é uma biblioteca de automação que controla um navegador real — clicando, digitando, navegando e lendo o que está na página. Já o MCP (Model Context Protocol) é um padrão para expor ferramentas a um LLM, permitindo que o agente as chame diretamente.

O que torna o Playwright MCP interessante é como ele mostra a página ao agente: em vez de um screenshot, ele usa um snapshot de acessibilidade — uma leitura estruturada do conteúdo da página. Elementos interativos como links, botões e campos de formulário recebem um ID de referência que o agente pode segmentar diretamente. É exatamente a combinação “observação estruturada + ação direcionada a elementos” mencionada anteriormente.

A configuração do agente é surpreendentemente concisa:

# pip install openai-agents
from agents import Agent, ModelSettings
from openai.types.shared import Reasoning

agent = Agent(
    name="Support Console Browser Agent",
    model="gpt-5.4",
    model_settings=ModelSettings(
        reasoning=Reasoning(effort="medium"),
    ),
    instructions=AGENT_INSTRUCTIONS,
    mcp_servers=[playwright_server],
)

O servidor Playwright MCP é configurado via MCPServerStdio, que instrui o Agents SDK a iniciar o Playwright MCP como um processo local. Quando o agente chama uma ferramenta de navegador pela primeira vez, o Playwright abre uma janela visível do Chrome e executa a ação solicitada:

from agents.mcp import MCPServerStdio

playwright_server = MCPServerStdio(
    name="Playwright MCP",
    params={
        "command": "npx",
        "args": [
            "-y",
            "@playwright/mcp@latest",
            "--browser", "chrome",
        ],
    },
)

A tarefa do agente é direta: abrir o console, investigar o caso do pedido ORD-1042 (cliente recebeu o item errado), determinar a resolução apropriada com base nas informações disponíveis e registrar tudo. Na execução real, o agente encontrou o caso, inspecionou o pedido, a solicitação do cliente, o status do inventário e a política de resolução relevante — concluindo que uma substituição era apropriada.

A execução usa o Runner do Agents SDK com um limite de 20 turnos:

from agents import Runner

async with playwright_server:
    result = await Runner.run(agent, TASK, max_turns=20)

print(result.final_output)
# Resolved CASE-4107 for order ORD-1042 with Replacement.

Do navegador ao computador

O padrão subjacente — observar, decidir, agir e repetir — se estende naturalmente ao computer use genérico. O que muda são os canais de observação e ação. Enquanto o Playwright MCP fornece informações estruturadas da página e permite segmentar elementos web individuais, um agente de computer use mais geral pode trabalhar a partir de screenshots e controlar mouse e teclado por coordenadas.

Essa distinção é importante para quem está avaliando qual abordagem adotar: browser use com estado estruturado é mais preciso e eficiente para tarefas dentro de aplicações web; computer use com screenshots é mais flexível mas menos preciso, adequado para automação que vai além do navegador.

O código completo do estudo de caso está disponível no GitHub: github.com/ShuaiGuo16/llm-browser-agent.