1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

ノーコード(n8n) で LINE の AI アシスタントを作ってみる

1
Last updated at Posted at 2025-12-14

概要

オープンソースのノーコード/ローコード ツールとして有名な n8n を使って LINE の AI アシスタントを作ってみます。

n8n(エヌエイトエヌ)とは、自由度の高さとコスパの良さ(セルフホスティングできるので)が評判のツールです。しかし設定の難易度がやや高いため慣れるまでに時間がかかります。この記事は実際に n8n のワークフローを作ってみようというハンズオンです。

今回の登場人物

メインで登場するのが以下です。

  • LINE(ライン): ユーザからのメッセージは LINE で受け付けます。
  • OpenRouter(オープンルーター): AI Agent には OpenRouter を使います。ここは ChatGPT でも Gemini でもなんでも OK です。
  • n8n(エヌエイトエヌ): 様々なアプリケーションを組み合わせてワークフローを作るノーコード/ローコード ツールです。

以下、開発者向けのツールです。

  • docker(ドッカー): ローカルで n8n を動かすのに使います。
  • ngrok(エングロック): ローカルの n8n を一時的に外部公開し、動作確認をするのに使います。

もし非開発者であれば、ローカルで n8n を試すのはハードルが高いと思うので n8n クラウド に登録して試すのが良いと思います。クラウド版は2週間無料で試せます。

LINE の設定

LINE の公式アカウントを作成してユーザからのメッセージを受け付けられる状態にします。

LINE の Developers サイトに登録

  1. LINE Developers サイトのアカウント登録をする
  2. 新規プロバイダー(個人名・企業名)を作成する
    • プロバイダーとは個人や企業を指すサービス提供者のことです。詳細な手順は「プロバイダーを作成する」を参照してください。
  3. プロバイダーの中にLINE公式アカウント(チャネル)を新規作成する
    • チャネルを作成する際「Messaging API」を選択します。詳細な手順は「Messaging APIを始めよう」を参照してください。

スクリーンショット 2025-12-14 19.46.31.png

Webhook を ON にする

チャネルの「Messaging API設定」で「Webhookの利用」を ON にすることを忘れないでください。「Webhook URL」はあとで設定します。

スクリーンショット 2025-12-14 19.36.11.png

作成した LINE 公式アカウントを友達登録してみる

チャネルの「Messaging API設定」を見るとQRコードがのっています。
これを自身のスマホで読み取って作成した LINE 公式アカウントを友達登録してみましょう。

OpenRouter 登録

この記事では AI Agent に OpenRouter を使います。これはなんでもOKなのでご自身ですでに利用しているものがあればそれを使ってください。

OpenRouter は複数の LLM を1つの API Key で利用できるルーター的なサービスです。ユーザは OpenRouter だけ登録しておけば、あとで簡単に LLM を切り替えることができます。

OpenRouter の場合は事前にアカウント登録し、クレジットを買っておく必要があります。

スクリーンショット 2025-12-14 19.35.08.png

開発者向け: ngrok のインストール

ngrok(エングロック)とは、ローカルの開発サーバを一時的にインターネットに公開してテスト可能にするツールです。

アカウント作成

ngrokの公式サイト にアクセスしてアカウントを作成します。
アカウントの作成が完了するとインストール手順が表示されます。
ここで認証のためのトークンがゲットできます。

スクリーンショット 2025-12-13 20.29.27.png

インストール

サイトの指示に従ってインストール・設定します。
以下のようなコマンドを入力します。

# インストール
brew install ngrok
# 認証 (ngrokのサイトで入手したコマンドをコピペ)
ngrok config add-authtoken <token>
# ⚠️ ポート 5678 を公開
ngrok http 5678

最後のコマンドで localhost の 5678 ポートが公開されるので注意してください。
成功すると外部からアクセス可能なURLが払い出されるのでメモします。
ちなみに http://127.0.0.1:4040 で外部からのリクエストを確認できる WEB インターフェースも立ち上がります。

開発者向け: n8n をローカルで立ち上げる

適当なプロジェクトディレクトリを作成して、n8n を立ち上げましょう。
まず以下のような docker-compose.yaml を作成します。

docker-compose.yaml
services:
  n8n:
    image: n8nio/n8n:latest
    container_name: n8n
    ports:
      - "5678:5678"
    environment:
      N8N_HOST: ${N8N_HOST:-localhost}
      N8N_PORT: ${N8N_PORT:-5678}
      N8N_PROTOCOL: ${N8N_PROTOCOL:-http}
      WEBHOOK_URL: ${WEBHOOK_URL}
      GENERIC_TIMEZONE: Asia/Tokyo
      TZ: Asia/Tokyo
    volumes:
      - ./n8n-data:/home/node/.n8n
      - ./workflows:/workflows:ro
    restart: unless-stopped

設定は以下のような .env を用意します。

.env
N8N_HOST=localhost
N8N_PORT=5678
N8N_PROTOCOL=http
WEBHOOK_URL=https://<ngrokで取得したURL>

以下のコマンドで立ち上げます。

docker compose up -d

成功すると http://localhost:5678/ でアクセス可能になります。

Owner アカウントの作成

最初にアクセスすると Owner アカウントを作ります。

n8n ワークフローの作成

では実際に n8n でワークフローを作成してみましょう。
最終的な仕上がりは以下のようなものになります。

スクリーンショット 2025-12-14 20.22.13.png

以下は私がローカルで試した手順ですが、クラウド版でも基本は変わらないと思います。

1. Webhook トリガーの作成

まず初期状態では以下のような画面が表示されます。
真ん中の「+」ボタンを押して最初のトリガーを作ります。

スクリーンショット 2025-12-13 21.59.59.png

検索欄に「webhook」と入れて、表示された「Webhook」をクリックします。

スクリーンショット 2025-12-13 22.01.09.png

LINE の Webhook を受け付けるには以下のように設定します。
ここで、先ほど .env に入れた WEBHOOK_URL がすでに設定されています。「Path」はお好みでもっとわかりやすいエンドポイントに変えてもいいです。「HTTP Method」は POST にします。
最後に「Webhook URL」をクリックしてコピーし、LINE のほうに設定します。

スクリーンショット 2025-12-13 22.02.20.png

Messaging API の「Webhook URL」に以下のように設定します。

スクリーンショット 2025-12-13 22.07.20.png

n8n に戻って、「Listen for test event」をクリックします。
するとテストで Webhook を受け付ける状態になります。

スクリーンショット 2025-12-13 22.09.57.png

ここで自身の LINE アカウントから作成したボットアカウントにメッセージを送ってみましょう。
n8n で受信が成功すると、以下のように Webhook で届いたリクエスト内容が表示されます。

スクリーンショット 2025-12-14 16.28.35.png

画面左上の「Back to canvas」をクリックしてキャンバスに戻ります。
今作成した「Webhook」に✅チェックマークがついていることが確認できます。これで Webhook トリガーの登録は完了です。

スクリーンショット 2025-12-14 16.31.20.png

2. AI Agent の登録

では次のフローを登録します。Webhook のメッセージを受信して AI Agent に読み取らせ、応答を返したいです。

「Webhook」の右に伸びている線の先端の「+」をクリックして次のフローを登録します。
検索欄に「AI Agent」と入力して出てきたものをクリックします。

スクリーンショット 2025-12-14 16.33.18.png

「Source for Prompt (User Message)」は「Define below」を選択します。
続いて「Prompt (User Message))の枠の「Expression」を選択し、プロンプトを開く矢印を押します。ちょっとわかりづらいのですが、以下の画像の赤枠のところです。

スクリーンショット 2025-12-14 16.35.51.png

そうすると先ほどテストで受信した Webhook の body が左側に表示されます。この中の text が LINE で送られたメッセージの本文です。本文を AI Agent に読み取ってもらい返答したいです。左側の text のところをドラッグして真ん中の「Expression」にドロップします。すると右側の「Result」にメッセージ内容が表示されます。これで一旦この画面で出来ることは完了です。× ボタンをクリックしてプロンプトを閉じます。

スクリーンショット 2025-12-14 16.40.44.png

続いて設定画面の「Options」の「Add Options」ボタンをクリックして「System Message」を選択します。そして AI Agent に対して指示を出します。ここは用途に応じて変えてほしいところですが、今回は以下のように入力しました。

あなたはLINE公式アカウントのアシスタントです。
ユーザからのメッセージに対して返答してください。
言語はユーザからのメッセージから適切なものを選択してください。
なお、改行は「\n」を使ってください。最終的にAPIのリクエストボディに入れて送るので、JSONが壊れないようにしてください。

最後の改行に対する指示は、この後のステップでエラーが出ないようにするためのものなので、含めることをおすすめします。
ちなみにこの「System Message」の中にも左側の INPUT からドラッグ&ドロップして値を使うこともできます。例えば 言語は {{ $json.body.language }} を選択してください。 などと、プロンプトに使うことができます。

これで設定が完了したので、右上の「Execute step」をクリックします。成功すると右側の output に AI Agent が返したメッセージが表示されます。

スクリーンショット 2025-12-14 20.39.56.png

すると「Webhook」から矢印が伸びて「AI Agent」に繋がっていることが確認できます。しかしまだ「Chat Model」が選択されておらず設定が完了していません。

スクリーンショット 2025-12-14 16.51.31.png

「Chat Model」の「+」ボタンをクリックして、検索欄に「OpenRouter」と入力します。出てきた選択をクリックします。
Chat Model は何でも良いので、好きなものを選択してください。

スクリーンショット 2025-12-14 16.55.44.png

すると OpenRouter の API Key を入れる欄が出るので、Open Router の API Key をペーストします。これで設定は完了なので「Save」をクリックして保存します。「Connection tested successfuly」と表示されたら成功です。

スクリーンショット 2025-12-14 17.04.51.png

あとは Model をお好みで選びます。デフォルトのままでも良いですが、私は openai/gpt-5-mini を選択しました。
これで設定は完了なので、右上の「Execute step」を押して実際にリクエストが通るか試してみます。成功すると以下のように右側に output が表示されます。

スクリーンショット 2025-12-14 20.15.33.png

また「Back to canvas」でキャンバスに戻ります。
すると「AI Agent」から点線が伸びて「Model」が作成されていることが確認できます。

スクリーンショット 2025-12-14 17.08.48.png

3. HTTP Request ノードでユーザに応答

これだけでは AI Agent が生成したメッセージをユーザに届けることができません。「HTTP Request」ノードを作成してユーザに送るというステップが必要です。

また新しいノードを追加します。「AI Agent」から右に伸びている線の先端の「+」をクリックして、検索欄に「HTTP Request」と入力し、出てきたものを選択します。

スクリーンショット 2025-12-14 17.32.32.png

設定画面の右上に「Import cURL」があるのでクリックします。すると cURL コマンドの入力欄が表示されます。

スクリーンショット 2025-12-14 17.35.32.png

さて、ここで LINE Messaging API を叩いて応答メッセージを返したいです。
具体的なリクエスト方法は LINE Developers サイトの「メッセージを送信する」ページを見るとサンプルコードがあるのでコピーします。

スクリーンショット 2025-12-14 17.28.33.png

以下のようなコマンドが入手できます。これを入力欄に貼り付けて、中身は一旦変えずにそのまま「Import」ボタンを押します。

curl -v -X POST https://api.line.me/v2/bot/message/reply \
-H 'Content-Type: application/json' \
-H 'Authorization: Bearer {channel access token}' \
-d '{
    "replyToken":"nHuyWiB7yP5Zw52FIkcQobQuGDXCTA",
    "messages":[
        {
            "type":"text",
            "text":"Hello, user"
        },
        {
            "type":"text",
            "text":"May I help you?"
        }
    ]
}'

すると設定がインポートされます。
次に Authentication の設定をしましょう。これをきちんと設定しておかないとセキュリティリスクがあります。一応先ほどインポートしたサンプルコードに Bearer ヘッダーがついていますが、ここでは n8n で明示的に Authentication の設定をすることにします。

「Authentication」は「Generic Credential Type」を選択し、「Generic Auth Type」は「Bearer Auth」を選択します。すると Credential を選択する欄が表示されるので「Create new credential」をクリックします。

スクリーンショット 2025-12-14 17.48.12.png

ここで「Bearer Token」を入力する必要があります。LINE のアクセストークンは LINE Developers コンソールの「Messaging API設定」というところで確認できます。「チャネルアクセストークン」というものです。まだ未発行であれば発行します。

スクリーンショット 2025-12-14 17.43.55.png

これをコピーして貼り付けて「Save」をクリックして保存します。

スクリーンショット 2025-12-14 17.46.31.png

続いて設定画面に戻ります。Authentication は明示的に設定したので、「Header Params」に入っているヘッダーは消してしまって良いです。「Send Headers」ごと OFF にしましょう。

スクリーンショット 2025-12-14 19.57.13.png

続いて設定画面の下のほうの「JSON」欄を以下のように記述します。

{
  "replyToken": "{{ $('Webhook').item.json.body.events[0].replyToken }}",
  "messages": [
    {
      "type": "text",
      "text": "{{ $json.output }}"
    }
  ]
}
  • replyToken はどのユーザのどのチャットに送るかを指示するためのトークンです。最初の「Webhook」ノードで取得した LINE のリクエストの中に含まれているものを使います。
  • text にはユーザに送るメッセージを入れたいので、 AI Agent が返したレスポンスを入れます。

これで設定は完了です。
右上の「Execute step」を押して動作を試してみましょう。成功すると以下のように OUTPUT が表示されます。そして、実際に LINE にメッセージが届きます!

スクリーンショット 2025-12-14 20.18.16.png

注意点として、LINE の replyToken は「一度しか使えない」「(原則として)1分以内に使用する」という制約があります。上手く動かない場合は前のステップのフローをやり直して LINE の replyToken を再取得してみてください。

4. ワークフローを動かす

忘れずにワークフロー全体を保存します。
また「Back to canvas」でキャンバスに戻り、右上の「Save」ボタンをクリックします。最終的にワークフローは以下の状態になりました。

スクリーンショット 2025-12-14 20.22.13.png

実はこの状態ではまだ動きません。最後に右上の「Inactive」を押してワークフローをアクティブ状態にする必要があります。
そしてもう1点忘れてはならないのが、LINE に設定している Webhook URL をテストのものではなく本番のものに向けることです。 /webhook-test/ という URL になっていたら /webhook/ に直してください。

スクリーンショット 2025-12-14 21.06.19.png

これで実際に動くようになりました。

スクリーンショット 2025-12-14 21.09.30.png

まとめ

n8n を使うとノーコードで LINE の AI アシスタントを作ることができました。
ワークフローを視覚的に作ることができる優秀なツールだと思いました。ただ設定はやや難易度が高く少し苦戦しました。また、開発者でないとそれぞれの設定値がどういう作用をするのかイメージしづらい気がして、より難しく感じるのではと思いました。
しかし一度慣れてしまうと自分でいちからコードを書くより圧倒的に速く動くものが作れます。今後も利用が広がっていくツールになりそうです。

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?