Automatiza tu navegador con n8n y el modo computer use de Claude

Descubre cómo combinar n8n con la capacidad de Claude para ver y actuar en pantallas, creando flujos que rellenan formularios, extraen datos de sitios sin API y hasta gestionan tu calendario.

01 01. La pieza que faltaba: Claude computer use

Hasta hace poco, automatizar tareas en páginas web sin API era un infierno: selectores CSS frágiles, captchas, cambios de layout. Luego llegó el modo computer use de Claude. Básicamente, Anthropic le enseñó al modelo a ver píxeles, mover el ratón y teclear. No es magia, es visión + acciones coordenadas. Bien jugado.

La API expone un endpoint `/v1/messages` con el parámetro `anthropic_computer_use: true`. Le pasas una captura de pantalla (o él la toma) y te devuelve acciones como `click(x,y)`, `type(text)` o `key`. Puedes encadenar varios pasos hasta lograr tu objetivo.

02 02. n8n como orquestador: el patrón call-and-response

Lo potente es integrar esto en n8n. No necesitas un script monolítico; cada paso del agente puede ser un nodo diferente. El flujo típico es: un trigger (webhook, email, schedule) → extraer parámetros → llamar a Claude con una instrucción y una imagen → recibir la acción → ejecutarla en un navegador headless → repetir hasta completar.

Para ejecutar las acciones físicas, yo uso Puppeteer dentro de un nodo de código (JavaScript). n8n lo ejecta en el mismo contenedor. La clave es que Claude no controla el navegador directamente; solo dice «haz click en (450, 320)». Tu código de n8n traduce eso a `page.mouse.click(450, 320)`.

Así evitas los problemas de seguridad de darle control total al modelo. Tú eres quien ejecuta, él solo sugiere.

// Ejemplo de nodo 'Code' en n8n para procesar respuesta de Claude
const action = $input.first().json.action;
if (action.type === 'click') {
  await page.mouse.click(action.x, action.y);
} else if (action.type === 'type') {
  await page.keyboard.type(action.text);
}
return { success: true };

03 03. Caso real: rellenar un formulario de soporte sin API

Uno de mis workflows favoritos: un webhook de Discord recibe un ticket, extrae nombre, email y descripción, y se los pasa a un agente de Claude que abre la web de soporte (que no tiene API), hace login con credenciales guardadas en variables de n8n, navega a ‘Nuevo ticket’, rellena cada campo mirando la pantalla y pulsa enviar. Luego vuelca el número de ticket en una hoja de Google Sheets.

Todo el proceso dura unos 15-20 segundos, dependiendo de la latencia de la API de Claude. El coste es irrisorio comparado con horas de un humano. Y como el agente ve la pantalla, se adapta a cambios de layout (hasta cierto punto).

Eso sí, necesitas tener un navegador headless corriendo 24/7. Yo lo metí en un contenedor Docker aparte y lo conecto desde n8n mediante WebSocket.

04 04. MCP: el pegamento que lo hace escalar

Desde mayo de 2025, Anthropic lanzó el Model Context Protocol (MCP), que estandariza cómo los modelos acceden a herramientas y datos. Si usas un servidor MCP (por ejemplo, con el SDK oficial), Claude puede consultar tu base de datos, leer archivos o llamar a APIs externas sin que tengas que escribir código de integración en cada workflow.

En n8n puedes instalar un nodo personalizado que hable MCP. Yo monté un servidor MCP mínimo en Node.js que expone funciones como `get_weather`, `search_knowledge_base` o `read_email`. Luego, en el flujo, le pido a Claude que «encuentre el último email de facturación y lo guarde en el CRM». Él solo decide qué herramienta usar y con qué parámetros. El resultado es un workflow de alto nivel que parece magia.

Claro, hay que mantener los permisos ajustados. No quieres que un agente borre tablas de producción. Por eso en mi servidor MCP cada herramienta tiene un `rate limit` y una whitelist de acciones permitidas.

// Fragmento de servidor MCP básico
const server = new McpServer({ name: 'n8n-tools' });
server.tool('search_docs', { query: z.string() }, async ({ query }) => {
  const results = await vectorStore.similaritySearch(query, 5);
  return { content: results.map(r => ({ type: 'text', text: r.pageContent })) };
});

05 05. Lo que aprendí: pros, contras y alternativas

Ventajas: automatizas lo que antes era imposible (webs sin API, apps de escritorio vía VNC, etc.). El modelo se adapta a cambios visuales mejor que los selectores CSS. Y n8n te da toda la gestión de errores, reintentos y logging.

Contras: latencia (cada paso necesita una llamada a Claude, entre 2 y 5 segundos), coste (si haces muchas acciones, el consumo de tokens se dispara), y fragilidad si la interfaz cambia mucho. Para procesos batch de pocos pasos funciona de lujo; para 50 pasos, mejor repensar la arquitectura.

Alternativa: usar el `computer_use` solo para tareas de decisión, y delegar las acciones repetitivas a scripts de Puppeteer puros. Así reduces llamadas a la API. O, si no necesitas visión, usa el modo texto con selectores tradicionales y deja que Claude solo genere el código.

¿Ya has probado computer use con n8n? Cuéntame qué flujo te gustaría automatizar o si tienes dudas sobre cómo montar el servidor MCP. ¡Los comentarios están abiertos!