はじめに
SREホールディングス株式会社にて、ソフトウェアエンジニアをやっております、叶です。
n8nを使って、ノーコードでAIエージェントを構築できそうなので、自分のローカルで、n8n + ollama + playwright mcpを構築して、ブラウザをAIで操作してみました。
対象読者
- n8nでAIエージェントのワークフローを構築して、業務を効率化したい人
ツール
- docker:
n8n、ollama、playwright mcpサーバーを構築するツール - n8n: AIエージェントを連携させた、ワークフロー自動化ツール
- ollama: ローカル環境で大規模言語モデル（LLM）を簡単に実行・管理できるツール
- playwright mcp: ブラウザ操作ツール
- Slack: コミュニケーションツール
実現するイメージ
- チャットでAIエージェントに、
google.comへアクセスするようにメッセージを送信 - AIエージェントは
playwright mcpサーバーを使ってサイトアクセスし、メッセージを整理して、Slackに送信する
イメージ図
n8nでワークフロー構築手順
準備作業
- Dockerをインストールする
- 次のリポジトリをクローンして、READMEの通りに、設定及びサーバーを立ち上げる
- SlackのAPPを作って、チャンネルの検索やメッセージを送信できる権限付与して、トークンを取得する
ワークフローを設定
-
アクセスURL: http://localhost:5678/home/workflows
-
ワークフローを作成し、チャットトリガーを設定
- 左上の「+」ボタンを押下し、
Add first stepを押したら、サイドバーが出て、検索欄にchatを入力して、Chat Triggerを選択してください。
- 左上の「+」ボタンを押下し、
-
AI Agentの設定を行う
-
追加したチャットの右側の「+」ボタンを押したら、サイドバーが出て、検索欄に
ai agentを入力して、AI Agentを選択してください。
-
AI Agentの設定画面で、
Chat Modelを設定する- Credential情報として、
ollamaのURLはhttp://ollama:11434を設定し、モデルはqwen3:latestを選択してください。
- Credential情報として、
-
Chat Modelの設定が完了したら、AI AgentのToolにある「+」ボタンを押したら、サイドバーが出て、検索欄に
mcpを入力して、MCP Client Toolを選択してください。-
MCP Client Toolの設定画面のEndpointに、playwright mcpのURLとしてhttp://playwright-sse-mcp-server:3002/sseを入力し、Server TransportをServer Sent Eventsを選択してください。
-
-
-
Slackの設定を行う
- 追加したAI Agentの右側に「+」ボタンを押したら、サイドバーが出て、検索欄に
slackを入力して、Slackを選択し、さらに、sendを入力し、Send a messageを選択してください。- Slackの送信設定の画面が表示したら、Credential情報として、準備作業のSlackトークンを設定し、送信したいチャンネルを選択する
-
Message Textは{{ $json.output }}として設定
- 追加したAI Agentの右側に「+」ボタンを押したら、サイドバーが出て、検索欄に
使ってみる
playwrightでgoogle.comを開いてください。をプロンプトして、ログからみると次のワークフローになっていました。
- メッセージをAIで受け取る
- MCPを使ってサイトを開く
- AIでサイトの内容を受け取る
- 結果をSlackに送信する
- 処理中
- 処理完了
- slackの送信結果
まとめ
今回はチャットをトリガーとしたワークフローを行いました。CPUのPCで時間がかかったですが、GPUを利用するか、ClaudeなどAPIを提供していただくサービスを利用すると、早くなるかもしれません。
また、トリガーとして、ローカルのファイル更新なども設定できそうなので、業務中に具体的に何かをトリガーとして、AIエージェントを使って、何をやるみたいなワークフローがあったら、簡単にノーコードで作れそうで、良かったと思います。
Discussion