mirror of
https://github.com/browseros-ai/BrowserOS.git
synced 2026-05-13 15:46:22 +00:00
docs: update docs for n8n
This commit is contained in:
Felarof
@@ -47,7 +47,12 @@
|
||||
"features/llm-chat-hub",
|
||||
"features/scheduled-tasks",
|
||||
"features/ad-blocking",
|
||||
"features/use-with-claude-code",
|
||||
"features/use-with-claude-code"
|
||||
]
|
||||
},
|
||||
{
|
||||
"group": "Integrations",
|
||||
"pages": [
|
||||
"integrations/n8n"
|
||||
]
|
||||
},
|
||||
|
||||
@@ -1,101 +1,70 @@
|
||||
---
|
||||
title: "n8n Integration"
|
||||
description: "Connect BrowserOS MCP to n8n for AI-powered browser automation workflows"
|
||||
icon: "workflow"
|
||||
description: "Build AI workflows that control your browser"
|
||||
---
|
||||
|
||||
Build AI workflows that automate browser tasks using n8n and BrowserOS MCP.
|
||||
Connect BrowserOS to n8n to build automated workflows. Your n8n AI agents can control the browser—open pages, click buttons, extract data, and fill forms.
|
||||
|
||||
## What You Can Build
|
||||
|
||||
- **Lead enrichment** — Pull a list of LinkedIn URLs from a spreadsheet and scrape each profile
|
||||
- **Price monitoring** — Check product prices hourly and send a Slack alert when they drop
|
||||
- **Form automation** — Auto-fill job applications using data from your CRM
|
||||
- **Data extraction** — Scrape authenticated pages that require login
|
||||
|
||||
## Prerequisites
|
||||
|
||||
- Node.js and npm installed ([nodejs.org](https://nodejs.org))
|
||||
- BrowserOS running with MCP server enabled
|
||||
- LLM API key (OpenAI, Claude, etc.)
|
||||
Before you start:
|
||||
- BrowserOS running with MCP server enabled (Settings → BrowserOS as MCP)
|
||||
- n8n running locally (`npx n8n` or install globally with `npm install -g n8n`)
|
||||
|
||||
## Setup
|
||||
|
||||
### Step 1: Install and Run n8n
|
||||
### 1. Install the MCP community node
|
||||
|
||||
Run n8n locally:
|
||||
In n8n, go to **Settings → Community Nodes** and install `n8n-nodes-mcp`:
|
||||
|
||||
```bash
|
||||
npx n8n
|
||||
```
|
||||
<img src="/images/n8n-node.png" alt="Installing n8n-nodes-mcp community node" />
|
||||
|
||||
Access n8n at `http://localhost:5678` and complete the initial setup by creating an account.
|
||||
### 2. Create a workflow
|
||||
|
||||
<Note>
|
||||
For global installation: `npm install n8n -g`, then run `n8n` anytime.
|
||||
</Note>
|
||||
Build a workflow with these nodes:
|
||||
|
||||
### Step 2: Install MCP Community Node
|
||||
|
||||
Go to **Settings → Community Nodes** and install `n8n-nodes-mcp`:
|
||||
|
||||
<Frame>
|
||||
|
||||
</Frame>
|
||||
|
||||
### Step 3: Create Workflow
|
||||
|
||||
Create a new workflow with:
|
||||
|
||||
1. Add a **Chat Trigger** node (this receives user messages)
|
||||
1. Add a **Chat Trigger** node (receives your messages)
|
||||
2. Add an **AI Agent** node and connect it to the trigger
|
||||
3. Under the AI Agent, click **Chat Model** and add your LLM (e.g., OpenAI Chat Model)
|
||||
4. Under the AI Agent, click **Tool** → search "mcp" → select **MCP Client Tool**
|
||||
3. Add a **Chat Model** under the AI Agent (e.g., OpenAI, Claude)
|
||||
4. Add an **MCP Client Tool** under the AI Agent
|
||||
|
||||
<Frame>
|
||||
|
||||
</Frame>
|
||||
<img src="/images/n8n-step3-workflow.png" alt="n8n workflow with AI Agent and MCP Client" />
|
||||
|
||||
### Step 4: Configure AI Agent Prompt
|
||||
### 3. Configure the AI Agent
|
||||
|
||||
In the AI Agent node, set **Source for Prompt (User Message)** to **Connected Chat Trigger Node**.
|
||||
In the AI Agent node, set **Source for Prompt** to **Connected Chat Trigger Node**.
|
||||
|
||||
<Frame>
|
||||
|
||||
</Frame>
|
||||
<img src="/images/n8n-step4-agent-prompt.png" alt="AI Agent prompt configuration" />
|
||||
|
||||
### Step 5: Configure MCP Client
|
||||
### 4. Connect to BrowserOS
|
||||
|
||||
Click on the **MCP Client** node and configure:
|
||||
Click on the MCP Client node and configure:
|
||||
|
||||
1. **Endpoint**: Copy your MCP URL from BrowserOS (e.g., `http://127.0.0.1:9228/mcp`)
|
||||
2. **Server Transport**: `HTTP Streamable`
|
||||
- **Endpoint**: Your BrowserOS MCP URL (find it in Settings → BrowserOS as MCP)
|
||||
- **Server Transport**: `HTTP Streamable`
|
||||
|
||||
<Note>
|
||||
Find your MCP URL in BrowserOS under **Settings → MCP**.
|
||||
</Note>
|
||||
<img src="/images/n8n-step5-mcp-client.png" alt="MCP Client configuration with BrowserOS URL" />
|
||||
|
||||
<Frame>
|
||||
|
||||
</Frame>
|
||||
### 5. Test it
|
||||
|
||||
### Step 6: Test Workflow
|
||||
|
||||
Save the workflow, click **Open chat**, and send a message:
|
||||
Save the workflow, click **Open chat**, and try:
|
||||
|
||||
```
|
||||
open google.com on browserOS
|
||||
open google.com in BrowserOS
|
||||
```
|
||||
|
||||
<Frame>
|
||||
|
||||
</Frame>
|
||||
<img src="/images/n8n-step6-test.png" alt="Testing the workflow" />
|
||||
|
||||
## Troubleshooting
|
||||
|
||||
<Warning>
|
||||
Connection issues? Verify:
|
||||
|
||||
- BrowserOS is running
|
||||
- MCP server is enabled in BrowserOS settings
|
||||
- Port number matches your BrowserOS MCP configuration
|
||||
</Warning>
|
||||
|
||||
## Resources
|
||||
|
||||
<Card title="BrowserOS MCP Guide" icon="book" href="/browseros-mcp/how-to-guide">
|
||||
Learn more about BrowserOS MCP
|
||||
</Card>
|
||||
If the connection fails:
|
||||
- Make sure BrowserOS is running
|
||||
- Check that MCP server is enabled in BrowserOS settings
|
||||
- Verify the port number matches your BrowserOS MCP URL
|
||||
|
||||
Reference in New Issue
Block a user