chore: udpate n8n docs (#288)

This commit is contained in:
Felarof
2026-01-06 16:24:19 -08:00
committed by GitHub
parent 0c02da8cf6
commit 91d3f420d4
10 changed files with 82 additions and 38 deletions

11
CLAUDE.md Normal file
View File

@@ -0,0 +1,11 @@
# Project Instructions
## Docs Image Workflow
When updating documentation that involves new screenshots or images:
1. Prompt the user to copy the image to their clipboard (Cmd+C)
2. Run: `python scripts/save_clipboard.py <target_path>`
3. Example: `python scripts/save_clipboard.py docs/images/agent-step.png`
This saves the clipboard image directly to the docs folder without manual file management.

BIN
docs/images/agent-step.png (Stored with Git LFS)

Binary file not shown.

BIN
docs/images/client-step.png (Stored with Git LFS)

Binary file not shown.

BIN
docs/images/mcp-node.png (Stored with Git LFS)

Binary file not shown.

BIN
docs/images/n8n-step3-workflow.png (Stored with Git LFS) Normal file

Binary file not shown.

BIN
docs/images/n8n-step4-agent-prompt.png (Stored with Git LFS) Normal file

Binary file not shown.

BIN
docs/images/n8n-step5-mcp-client.png (Stored with Git LFS) Normal file

Binary file not shown.

BIN
docs/images/n8n-step6-test.png (Stored with Git LFS) Normal file

Binary file not shown.

View File

@@ -38,60 +38,51 @@ Go to **Settings → Community Nodes** and install `n8n-nodes-mcp`:
### Step 3: Create Workflow
Create a new workflow and add the **AI Agent** node. Then configure it:
Create a new workflow with:
1. In the AI Agent, add **Chat Model** (e.g., OpenAI Chat Model) and configure your API credentials
2. In the AI Agent's **Tools** section, search for "mcp" and add **MCP Client Tool**
1. Add a **Chat Trigger** node (this receives user 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**
<Frame>
![Add MCP Client tool to AI Agent](/images/mcp-node.png)
![Workflow with AI Agent and MCP Client](/images/n8n-step3-workflow.png)
</Frame>
### Step 4: Configure AI Agent Prompt
In the AI Agent node, set **Source for Prompt** to **Define below** and paste:
```
choose the right tool based on the user input:{{ $json.chatInput }}
```
In the AI Agent node, set **Source for Prompt (User Message)** to **Connected Chat Trigger Node**.
<Frame>
![Configure AI Agent prompt](/images/agent-step.png)
![Configure AI Agent prompt](/images/n8n-step4-agent-prompt.png)
</Frame>
### Step 5: Configure MCP Client Credentials
### Step 5: Configure MCP Client
Click on the **MCP Client** node to configure it:
Click on the **MCP Client** node and configure:
1. **Credential to connect with** → **Create New Credential**
2. Select **Command Line (stdio)**
3. **Command**: `npx`
4. **Arguments**: `mcp-remote http://127.0.0.1:9101/mcp`
1. **Endpoint**: Copy your MCP URL from BrowserOS (e.g., `http://127.0.0.1:9228/mcp`)
2. **Server Transport**: `HTTP Streamable`
<Note>
Replace `9101` with your BrowserOS MCP port from **Settings → MCP** in BrowserOS.
Find your MCP URL in BrowserOS under **Settings → MCP**.
</Note>
### Step 6: Configure MCP Tool Execution
In the same MCP Client node:
1. **Operation**: `Execute Tool`
2. **Tool Name**: `{{ $fromAI("tool") }}`
<Frame>
![Configure MCP Client node](/images/client-step.png)
![Configure MCP Client node](/images/n8n-step5-mcp-client.png)
</Frame>
### Step 7: Test Workflow
### Step 6: Test Workflow
Save the workflow and test with a chat input:
Save the workflow, click **Open chat**, and send a message:
```
Open google.com in BrowserOS
open google.com on browserOS
```
Execute and watch BrowserOS respond!
<Frame>
![Test the workflow](/images/n8n-step6-test.png)
</Frame>
## Troubleshooting

39
scripts/save_clipboard.py Normal file
View File

@@ -0,0 +1,39 @@
#!/usr/bin/env python3
"""
Save clipboard image to a specified path.
Usage: python scripts/save_clipboard.py <output_path>
"""
import sys
import os
try:
from PIL import ImageGrab
except ImportError:
print("Installing Pillow...")
import subprocess
subprocess.check_call([sys.executable, "-m", "pip", "install", "Pillow", "-q"])
from PIL import ImageGrab
def main():
if len(sys.argv) != 2:
print("Usage: python scripts/save_clipboard.py <output_path>")
print("Example: python scripts/save_clipboard.py docs/images/screenshot.png")
sys.exit(1)
output_path = sys.argv[1]
# Ensure directory exists
os.makedirs(os.path.dirname(output_path) or ".", exist_ok=True)
# Grab from clipboard
img = ImageGrab.grabclipboard()
if img is None:
print("❌ No image in clipboard. Copy an image first (Cmd+C).")
sys.exit(1)
img.save(output_path)
print(f"✅ Saved to {output_path}")
if __name__ == "__main__":
main()