From 91d3f420d417f6ebe5fbd0b70f9fabaab94525e3 Mon Sep 17 00:00:00 2001 From: Felarof Date: Tue, 6 Jan 2026 16:24:19 -0800 Subject: [PATCH] chore: udpate n8n docs (#288) --- CLAUDE.md | 11 ++++++ docs/images/agent-step.png | 3 -- docs/images/client-step.png | 3 -- docs/images/mcp-node.png | 3 -- docs/images/n8n-step3-workflow.png | 3 ++ docs/images/n8n-step4-agent-prompt.png | 3 ++ docs/images/n8n-step5-mcp-client.png | 3 ++ docs/images/n8n-step6-test.png | 3 ++ docs/integrations/n8n.mdx | 49 +++++++++++--------------- scripts/save_clipboard.py | 39 ++++++++++++++++++++ 10 files changed, 82 insertions(+), 38 deletions(-) create mode 100644 CLAUDE.md delete mode 100644 docs/images/agent-step.png delete mode 100644 docs/images/client-step.png delete mode 100644 docs/images/mcp-node.png create mode 100644 docs/images/n8n-step3-workflow.png create mode 100644 docs/images/n8n-step4-agent-prompt.png create mode 100644 docs/images/n8n-step5-mcp-client.png create mode 100644 docs/images/n8n-step6-test.png create mode 100644 scripts/save_clipboard.py diff --git a/CLAUDE.md b/CLAUDE.md new file mode 100644 index 000000000..45f0c23a7 --- /dev/null +++ b/CLAUDE.md @@ -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 ` +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. diff --git a/docs/images/agent-step.png b/docs/images/agent-step.png deleted file mode 100644 index fd366fcb0..000000000 --- a/docs/images/agent-step.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:179c9f541c01f1bd99c12b4f17d2041a9c6a69f27e8c0261d5b222b5cda953bb -size 55840 diff --git a/docs/images/client-step.png b/docs/images/client-step.png deleted file mode 100644 index 339cc6476..000000000 --- a/docs/images/client-step.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:52c8b7efcc1a4ff969289d7a24a1a2ee4dca1a9f79fe59dde814f68801519185 -size 56002 diff --git a/docs/images/mcp-node.png b/docs/images/mcp-node.png deleted file mode 100644 index 50bdbe589..000000000 --- a/docs/images/mcp-node.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:931e2b2bce49c84a9fa52f2fbba166a2ec36a53b951f06595744b60e1f4a32d1 -size 107484 diff --git a/docs/images/n8n-step3-workflow.png b/docs/images/n8n-step3-workflow.png new file mode 100644 index 000000000..60a4ab5ca --- /dev/null +++ b/docs/images/n8n-step3-workflow.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:ba22624c9b831c14d1ddefebdbcfedf5949a336486577df9d97c6fbfa447487b +size 321563 diff --git a/docs/images/n8n-step4-agent-prompt.png b/docs/images/n8n-step4-agent-prompt.png new file mode 100644 index 000000000..bcdf6b62e --- /dev/null +++ b/docs/images/n8n-step4-agent-prompt.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:74ea05dce07ff55320b21ad56dae102bd1c9904dfff9e64cf90ef242896338a6 +size 276720 diff --git a/docs/images/n8n-step5-mcp-client.png b/docs/images/n8n-step5-mcp-client.png new file mode 100644 index 000000000..c5394cbde --- /dev/null +++ b/docs/images/n8n-step5-mcp-client.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:5baa452692ef670d495da95cdf78a63562fcae163db6602467c3eb6aa7e1e57c +size 295486 diff --git a/docs/images/n8n-step6-test.png b/docs/images/n8n-step6-test.png new file mode 100644 index 000000000..810246ded --- /dev/null +++ b/docs/images/n8n-step6-test.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:94fba97a1b115d3e6717bf22f4208757f1cd179422b46c533af31a3e4bc63653 +size 253327 diff --git a/docs/integrations/n8n.mdx b/docs/integrations/n8n.mdx index afeb037e7..7465d8507 100644 --- a/docs/integrations/n8n.mdx +++ b/docs/integrations/n8n.mdx @@ -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** - ![Add MCP Client tool to AI Agent](/images/mcp-node.png) + ![Workflow with AI Agent and MCP Client](/images/n8n-step3-workflow.png) ### 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**. - ![Configure AI Agent prompt](/images/agent-step.png) + ![Configure AI Agent prompt](/images/n8n-step4-agent-prompt.png) -### 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` - Replace `9101` with your BrowserOS MCP port from **Settings → MCP** in BrowserOS. + Find your MCP URL in BrowserOS under **Settings → MCP**. -### Step 6: Configure MCP Tool Execution - -In the same MCP Client node: - -1. **Operation**: `Execute Tool` -2. **Tool Name**: `{{ $fromAI("tool") }}` - - ![Configure MCP Client node](/images/client-step.png) + ![Configure MCP Client node](/images/n8n-step5-mcp-client.png) -### 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! + + ![Test the workflow](/images/n8n-step6-test.png) + ## Troubleshooting diff --git a/scripts/save_clipboard.py b/scripts/save_clipboard.py new file mode 100644 index 000000000..2cdecd3c3 --- /dev/null +++ b/scripts/save_clipboard.py @@ -0,0 +1,39 @@ +#!/usr/bin/env python3 +""" +Save clipboard image to a specified path. +Usage: python scripts/save_clipboard.py +""" +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 ") + 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()