<h1 id="%E3%81%AF%E3%81%98%E3%82%81%E3%81%AB" data-line="0" class="code-line">
<a class="header-anchor-link" href="#%E3%81%AF%E3%81%98%E3%82%81%E3%81%AB" aria-hidden="true"></a> はじめに</h1>
<p data-line="1" class="code-line"><a href="https://sre-group.co.jp/" target="_blank" rel="nofollow noopener noreferrer">SREホールディングス株式会社</a>にて、ソフトウェアエンジニアをやっております、叶です。<br>
n8nを使って、ノーコードでAIエージェントを構築できそうなので、自分のローカルで、<code>n8n + ollama + playwright mcp</code>を構築して、ブラウザをAIで操作してみました。</p>
<h1 id="%E5%AF%BE%E8%B1%A1%E8%AA%AD%E8%80%85" data-line="4" class="code-line">
<a class="header-anchor-link" href="#%E5%AF%BE%E8%B1%A1%E8%AA%AD%E8%80%85" aria-hidden="true"></a> 対象読者</h1>
<ul data-line="6" class="code-line">
<li data-line="6" class="code-line">n8nでAIエージェントのワークフローを構築して、業務を効率化したい人</li>
</ul>
<h1 id="%E3%83%84%E3%83%BC%E3%83%AB" data-line="8" class="code-line">
<a class="header-anchor-link" href="#%E3%83%84%E3%83%BC%E3%83%AB" aria-hidden="true"></a> ツール</h1>
<ul data-line="10" class="code-line">
<li data-line="10" class="code-line">docker: <code>n8n</code>、<code>ollama</code>、<code>playwright mcp</code>サーバーを構築するツール</li>
<li data-line="11" class="code-line">n8n: AIエージェントを連携させた、ワークフロー自動化ツール</li>
<li data-line="12" class="code-line">ollama: ローカル環境で大規模言語モデル（LLM）を簡単に実行・管理できるツール</li>
<li data-line="13" class="code-line">playwright mcp: ブラウザ操作ツール</li>
<li data-line="14" class="code-line">Slack: コミュニケーションツール</li>
</ul>
<h1 id="%E5%AE%9F%E7%8F%BE%E3%81%99%E3%82%8B%E3%82%A4%E3%83%A1%E3%83%BC%E3%82%B8" data-line="16" class="code-line">
<a class="header-anchor-link" href="#%E5%AE%9F%E7%8F%BE%E3%81%99%E3%82%8B%E3%82%A4%E3%83%A1%E3%83%BC%E3%82%B8" aria-hidden="true"></a> 実現するイメージ</h1>
<ol data-line="18" class="code-line">
<li data-line="18" class="code-line">チャットでAIエージェントに、<code>google.com</code>へアクセスするようにメッセージを送信</li>
<li data-line="19" class="code-line">AIエージェントは<code>playwright mcp</code>サーバーを使ってサイトアクセスし、メッセージを整理して、Slackに送信する</li>
</ol>
<h2 id="%E3%82%A4%E3%83%A1%E3%83%BC%E3%82%B8%E5%9B%B3" data-line="21" class="code-line">
<a class="header-anchor-link" href="#%E3%82%A4%E3%83%A1%E3%83%BC%E3%82%B8%E5%9B%B3" aria-hidden="true"></a> イメージ図</h2>
<p data-line="22" class="code-line"><img src="https://storage.googleapis.com/zenn-user-upload/3a7f1f3a5dec-20250731.png" alt="workflow" class="md-img" loading="lazy"></p>
<h1 id="n8n%E3%81%A7%E3%83%AF%E3%83%BC%E3%82%AF%E3%83%95%E3%83%AD%E3%83%BC%E6%A7%8B%E7%AF%89%E6%89%8B%E9%A0%86" data-line="25" class="code-line">
<a class="header-anchor-link" href="#n8n%E3%81%A7%E3%83%AF%E3%83%BC%E3%82%AF%E3%83%95%E3%83%AD%E3%83%BC%E6%A7%8B%E7%AF%89%E6%89%8B%E9%A0%86" aria-hidden="true"></a> n8nでワークフロー構築手順</h1>
<h2 id="%E6%BA%96%E5%82%99%E4%BD%9C%E6%A5%AD" data-line="27" class="code-line">
<a class="header-anchor-link" href="#%E6%BA%96%E5%82%99%E4%BD%9C%E6%A5%AD" aria-hidden="true"></a> 準備作業</h2>
<ol data-line="28" class="code-line">
<li data-line="28" class="code-line">Dockerをインストールする
<ul data-line="29" class="code-line">
<li data-line="29" class="code-line">windows: <a href="https://docs.docker.com/desktop/setup/install/windows-install/" target="_blank" rel="nofollow noopener noreferrer">https://docs.docker.com/desktop/setup/install/windows-install/</a>
</li>
<li data-line="30" class="code-line">mac: <a href="https://docs.docker.com/desktop/setup/install/mac-install/" target="_blank" rel="nofollow noopener noreferrer">https://docs.docker.com/desktop/setup/install/mac-install/</a>
</li>
</ul>
</li>
<li data-line="31" class="code-line">次のリポジトリをクローンして、READMEの通りに、設定及びサーバーを立ち上げる
<ul data-line="32" class="code-line">
<li data-line="32" class="code-line"><a href="https://github.com/ZHIBINYE/n8n-playwright-mcp" target="_blank" rel="nofollow noopener noreferrer">https://github.com/ZHIBINYE/n8n-playwright-mcp</a></li>
</ul>
</li>
<li data-line="33" class="code-line">SlackのAPPを作って、チャンネルの検索やメッセージを送信できる権限付与して、トークンを取得する</li>
</ol>
<h2 id="%E3%83%AF%E3%83%BC%E3%82%AF%E3%83%95%E3%83%AD%E3%83%BC%E3%82%92%E8%A8%AD%E5%AE%9A" data-line="35" class="code-line">
<a class="header-anchor-link" href="#%E3%83%AF%E3%83%BC%E3%82%AF%E3%83%95%E3%83%AD%E3%83%BC%E3%82%92%E8%A8%AD%E5%AE%9A" aria-hidden="true"></a> ワークフローを設定</h2>
<ol data-line="37" class="code-line">
<li data-line="37" class="code-line">
<p data-line="37" class="code-line">アクセスURL: <a href="http://localhost:5678/home/workflows" target="_blank" rel="nofollow noopener noreferrer">http://localhost:5678/home/workflows</a></p>
</li>
<li data-line="38" class="code-line">
<p data-line="38" class="code-line">ワークフローを作成し、チャットトリガーを設定</p>
<ul data-line="39" class="code-line">
<li data-line="39" class="code-line">左上の「+」ボタンを押下し、<code>Add first step</code>を押したら、サイドバーが出て、検索欄に<code>chat</code>を入力して、<code>Chat Trigger</code>を選択してください。<br>
<img src="https://storage.googleapis.com/zenn-user-upload/1c5c50771915-20250801.gif" alt="addChat" class="md-img" loading="lazy">
</li>
</ul>
</li>
<li data-line="42" class="code-line">
<p data-line="42" class="code-line">AI Agentの設定を行う</p>
<ul data-line="43" class="code-line">
<li data-line="43" class="code-line">
<p data-line="43" class="code-line">追加したチャットの右側の「+」ボタンを押したら、サイドバーが出て、検索欄に<code>ai agent</code>を入力して、<code>AI Agent</code>を選択してください。<br>
<img src="https://storage.googleapis.com/zenn-user-upload/5c0a050130cf-20250801.gif" alt="addaiagent" class="md-img" loading="lazy"></p>
</li>
<li data-line="46" class="code-line">
<p data-line="46" class="code-line">AI Agentの設定画面で、<code>Chat Model</code>を設定する</p>
<ul data-line="47" class="code-line">
<li data-line="47" class="code-line">Credential情報として、<code>ollama</code>のURLは<code>http://ollama:11434</code>を設定し、モデルは<code>qwen3:latest</code>を選択してください。<br>
<img src="https://storage.googleapis.com/zenn-user-upload/702852562446-20250801.gif" alt="addChat" class="md-img" loading="lazy">
</li>
</ul>
</li>
<li data-line="50" class="code-line">
<p data-line="50" class="code-line">Chat Modelの設定が完了したら、AI AgentのToolにある「+」ボタンを押したら、サイドバーが出て、検索欄に<code>mcp</code>を入力して、<code>MCP Client Tool</code>を選択してください。</p>
<ul data-line="51" class="code-line">
<li data-line="51" class="code-line">
<code>MCP Client Tool</code>の設定画面のEndpointに、<code>playwright mcp</code>のURLとして<code>http://playwright-sse-mcp-server:3002/sse</code>を入力し、Server TransportをServer Sent Eventsを選択してください。<br>
<img src="https://storage.googleapis.com/zenn-user-upload/463176ca5c63-20250801.gif" alt="addMCP" class="md-img" loading="lazy">
</li>
</ul>
</li>
</ul>
</li>
<li data-line="54" class="code-line">
<p data-line="54" class="code-line">Slackの設定を行う</p>
<ul data-line="55" class="code-line">
<li data-line="55" class="code-line">追加したAI Agentの右側に「+」ボタンを押したら、サイドバーが出て、検索欄に<code>slack</code>を入力して、<code>Slack</code>を選択し、さらに、<code>send</code>を入力し、<code>Send a message</code>を選択してください。
<ul data-line="56" class="code-line">
<li data-line="56" class="code-line">Slackの送信設定の画面が表示したら、Credential情報として、準備作業のSlackトークンを設定し、送信したいチャンネルを選択する</li>
<li data-line="57" class="code-line">
<code>Message Text</code>は <code>{{ $json.output }}</code>として設定<br>
<img src="https://storage.googleapis.com/zenn-user-upload/bdd889e21af6-20250801.gif" alt="setslack" class="md-img" loading="lazy">
</li>
</ul>
</li>
</ul>
</li>
</ol>
<h1 id="%E4%BD%BF%E3%81%A3%E3%81%A6%E3%81%BF%E3%82%8B" data-line="60" class="code-line">
<a class="header-anchor-link" href="#%E4%BD%BF%E3%81%A3%E3%81%A6%E3%81%BF%E3%82%8B" aria-hidden="true"></a> 使ってみる</h1>
<p data-line="62" class="code-line"><code>playwrightでgoogle.comを開いてください。</code>をプロンプトして、ログからみると次のワークフローになっていました。</p>
<ol data-line="63" class="code-line">
<li data-line="63" class="code-line">メッセージをAIで受け取る</li>
<li data-line="64" class="code-line">MCPを使ってサイトを開く</li>
<li data-line="65" class="code-line">AIでサイトの内容を受け取る</li>
<li data-line="66" class="code-line">結果をSlackに送信する</li>
</ol>
<ul data-line="68" class="code-line">
<li data-line="68" class="code-line">処理中<br>
<img src="https://storage.googleapis.com/zenn-user-upload/8b48b1c377e4-20250731.png" alt="doing" class="md-img" loading="lazy">
</li>
<li data-line="70" class="code-line">処理完了<br>
<img src="https://storage.googleapis.com/zenn-user-upload/c693f1aa02c1-20250731.png" alt="done" class="md-img" loading="lazy">
</li>
<li data-line="72" class="code-line">slackの送信結果<br>
<img src="https://storage.googleapis.com/zenn-user-upload/a04c6cafcc2a-20250731.png" alt="slack" class="md-img" loading="lazy">
</li>
</ul>
<h1 id="%E3%81%BE%E3%81%A8%E3%82%81" data-line="75" class="code-line">
<a class="header-anchor-link" href="#%E3%81%BE%E3%81%A8%E3%82%81" aria-hidden="true"></a> まとめ</h1>
<p data-line="76" class="code-line">今回はチャットをトリガーとしたワークフローを行いました。CPUのPCで時間がかかったですが、GPUを利用するか、ClaudeなどAPIを提供していただくサービスを利用すると、早くなるかもしれません。<br>
また、トリガーとして、ローカルのファイル更新なども設定できそうなので、業務中に具体的に何かをトリガーとして、AIエージェントを使って、何をやるみたいなワークフローがあったら、簡単にノーコードで作れそうで、良かったと思います。</p>
<h1 id="%E5%8F%82%E8%80%83%E8%A8%98%E4%BA%8B" data-line="79" class="code-line">
<a class="header-anchor-link" href="#%E5%8F%82%E8%80%83%E8%A8%98%E4%BA%8B" aria-hidden="true"></a> 参考記事</h1>
<ul data-line="81" class="code-line">
<li data-line="81" class="code-line"><a href="https://note.com/sas_official/n/n7eb44f9af194#8d09c4ea-d0f3-4e2e-ab3a-efe2a8276004" target="_blank" rel="nofollow noopener noreferrer">https://note.com/sas_official/n/n7eb44f9af194#8d09c4ea-d0f3-4e2e-ab3a-efe2a8276004</a></li>
<li data-line="82" class="code-line"><a href="https://docs.n8n.io/hosting/" target="_blank" rel="nofollow noopener noreferrer">https://docs.n8n.io/hosting/</a></li>
</ul>


n8n + ollama + playwright mcpを使ってローカルで、ブラウザをAIで操作してみた

Discussion