Messaging API で AI エージェントの入口を作ってみた

LINEをAIエージェントの入り口として検討している方に向けた、LINEでどのようなUIが表現できるのかといったところを説明しています。

Transcript

1. LT N I G H T # 0 2 · 2 0 2 6 . 0 5 . 2 6 01 Lightning Talk Messaging API で AI エージェントの 入口を作ってみた。 Flex / Quick Reply / sender で どこまで表現できるか。 S P E A K E R 松尾 淳平 DAT E 2026.05.26 F O R M AT 10 min · LT LINE API NIGHT 「LINE API で 試したんだけど、 聞いてほしい。 」 Night LT #02
2. 02 Why LINE LINE を選ぶ理由はひとつ。 圧倒的シェア。 1億人以上 ユーザーが毎日使っているアプリに、 AIエージェントの入口を置ける。 インスト ールも、 アカウント登録も要らない。 SOURCE · 2026.01.29 LINEヤフー プレスリリース W H E R E I T F I TS エンタープライズの基幹業務には少ない。 一方で 日常の秘書として、 また 中小企業には、 ハ ードルの低さから選択肢の一つになる。 BUT — MESSAGING API の制約 UX 1文字ずつ流れる 表示ができない Mutation 送ったメッセージを 後から更新できない Custom UI チャット内に 自由なUIを埋め込めない 今日は、 この制約の中で 最先端のエージェント体験にどこまで寄せられるかを話す。 Messaging API × AI Agent 02 / 11
3. 03 Frontier AIエージェントの対話で 当たり前となっている体験。 N OT E 「豊かな表現力」 の文脈では MCP Apps （2026.01リリース） も言及される。 MCP サーバーが HTML UI を AI チャット内に直接表示できる仕様。 Anthropic × OpenAI Claude / ChatGPT / VS Code 待たせない UX 応答を生成しながら 逆側から届ける。 Streaming · SSE Hello, I'm streaming tokens one by one 豊かな表現力 テキストだけじゃない。 Markdown・カード・UI ごと返す。 Markdown · Generative UI · MCP Apps 実行前の承認 「この操作を実行していい？」 勝手に動かれない安心感。 needsApproval 変更 承認 マルチモーダル 画像・音声・動画も理解。 言葉だけに頼らなくていい。 Vision · Audio models Messaging API × AI Agent 03 / 11 01 02 03 04
4. 04 API Surface Messaging API が提供している機能、 提供していない機能。 口で 「できない」 と言うより、 「その API が提供されていない」 と言う方が正しい。 代替で寄せるしかない。 # 体験 なぜ提供されていないのか　(技術的に何が欠けているか) 判定 01 待たせない UX チャンク送信 API が提供されていない。 SSE / WebSocket 非対応。 トークン生成のたびに1文字追加する手段がそもそも提供されていない。 提供されていない 02 豊かな表現力 送信済メッセージを編集する API が提供されていない。 一度送ったメッセージは永久に固定され、 中身を更新したりユーザーの操作に応じて変えたりできない。 提供されていない 03 実行前の承認 専用の承認フロー API はない。 選択肢とコールバックの部品は提供されているので、 それを組み合わせて同等のフローを自作する。 部品のみ提供 04 マルチモーダル 画像・動画・音声・ファイルの送受信は標準で提供されている。 バイナリ取得 API もあり、 Vision AI にそのまま渡せる。 提供あり PITFALL Reply Token は数十秒で失効。 重い処理は Push Message （非同期） にする。 LIMIT 無料プランは月 200通 の Push Message 制限。 会話履歴APIは無いので、 文脈は自前で保持。 SDK line/line-bot-sdk-nodejs 　— Node.js での公式 SDK。 型定義込みで、 ここから入るのが早い。 Messaging API × AI Agent 04 / 11
5. 05 Pattern 01 · 待たせない UX 進捗メッセージ + Push + Flex で、 「待たされている感」 をなくす。 1文字ずつ流れる表示は提供されていない。 代わりに、 「今、 何をしているか」 を送り続けることで、 待たせない UX を作る。 STEP 01 ユーザーのメッセージ受信 STEP 02 Loading Animation + 進捗メッセージ 「検索中…」 「データを集計しています」 を Push で送る STEP 03 サーバー側で AI ・ ツールを実行 STEP 04 最終結果を Push Message 、 長文は Flex Message で構造化 ※ Loading Animation は1対1チャットのみ。 進捗メッセージは 「ストリーミングの代わり」 として機能する。 DEMO 01 · LOADING → FLEX Messaging API × AI Agent 05 / 11
6. 06 Pattern 02 · 豊かな表現力 AIが出力した JSON を元に、 Flex Message でリッチな UI を表現する。 テキストの返信だけでは表現の限界がある。 AI の Structured Output で Flex Message の JSON を生成させれば、 カード / カルーセル / グラフ、 何でもレイアウトごと返せる。 AI → Structured Output → Flex JSON → → LINE のトーク内にカード表示 USE CASE 検索結果 カルーセル形式 USE CASE 予約確認 日時・場所・金額 USE CASE 分析結果 セクション要約 ※ 本物の Generative UI との違い：送った後に状態が変わるかどうか。 多くのケースでは 「その時点の情報が届く」 で足りる。 DEMO 02 · STRUCTURED → FLEX Messaging API × AI Agent 06 / 11
7. 07 Pattern 03 · Approval Quick Reply + Postback で 承認フローを組み立てる。 最先端では needsApproval フラグ一つで承認UIが 自動生成される。 LINE では自分で組み立てる必要があるが、 フローとし てはほぼ同等のことができる。 AI 明日 14:00 にミーティングを登録します。 日時 2026-05-27 14:00 場所 渋谷オフィス 出席 3名 承認 時間変更 キャンセル ↳ POSTBACK · action=approve&session=abc123 FLEX 内容の提示 QR 選択肢 POSTBACK ユーザーの選択 DT PICKER 日時入力 DEMO 03 · APPROVAL FLOW Messaging API × AI Agent 07 / 11
8. 08 Pattern 04 · Vision & Personas 画像・動画・音声に 標準対応。 必要に応じて sender で役割を見せ分け る。 画像・動画・音声・ファイルの送受信は API がそのまま備えている。 「写真を撮って送るだけ」 — インストールも追加 UI も不要。 VISION 画像受信 ↓ getMessageContent ↓ Vision AI ↓ Flex Message で返却 · 料理写真 → カロリー推定 · 名刺 → 連絡先カード · レシート → 家計簿登録 SENDER 切替 検 検索中… 分 分析しました 確 確認お願いします メッセージごとにアイコン・名前を切替。 A2A ではない。 内部は 1 つの Bot。 「処理の役割」 を可視化する見せ方として有効。 DEMO 04 · VISION & SENDER Messaging API × AI Agent 08 / 11
9. 09 Inside LINE · LIFF LINE の中で、 もっと自由にやるなら LIFF。 LIFF （LINE Front-end Framework） は トーク内で Web アプリを開く仕組み。 UPSIDE Web アプリダロードなので、 Streaming も豊かな表現も自由に実装できる。 表現の天井がなくなる。 DOWNSIDE WebView なので、 トーク画面のネイティブ体験からは離れる。 「チャットの中にいる感」 は薄れる。 USE WHEN Messaging API の制約に当たったら、 LIFF への逃げ道を引く。 DEMO · LIFF IN LINE Messaging API × AI Agent 09 / 11
10. 10 Beyond LINE · Telegram あるいは、 別の入口を選ぶ。 Telegram Bot API は、 ほぼ全てが揃っている。 どちらが優れているではなく、 目的で選ぶ。 比較軸 LINE MESSAGING API TELEGRAM BOT API 通信方式 Webhook のみ Long Polling + Webhook メッセージ編集 不可 送信済みを後から編集可能 ( editMessageText ) 疑似 Streaming 不可 editMessageText の繰り返しで実現 ボタン更新 Quick Reply はタップで消える インラインキーボードは送信後も残り、 更新可能 Mini Apps LIFF （WebView） Telegram Mini Apps センサー / 決済 / 生体認証 開発体験 公開 Webhook サーバーが必要 Long Polling ならローカルで即開発 DEMO · HERMESAGENT LINE は リーチ、 Telegram は 表現力。 Messaging API × AI Agent 10 / 11
11. 11 Thanks 11 Wrap-up 入口の表現力を取るか、 リーチを取るか。 Streaming もメッセージ編集もない。 でも Loading + Flex + Quick Reply + sender の組み合わせで、 実用上は十分な入口が作れることを、 今日見てもらいました。 顧客が誰で、 何を優先するかで選ぶ。 みなさんも、 良い AI エージェント設計ライフを。 T RY T H E B OT ショーケース Bot を友だち追加 SCAN WITH LINE ご清聴ありがとうございました。 CHOICE A · 表現力 Vercel AI SDK + Web / 別アプリ needsApproval / useChat フレームワークに組み込み済み CHOICE B · リーチ LINE Messaging API + 自分で組み立て 1億人がすでにいる 場所に入口を置ける Messaging API × AI Agent 11 / 11
12. APPENDIX 1 Architecture 最もシンプルな LINE Bot のアーキテクチャ。 LINE Platform はメッセージを中継するだけ。 AI の頭脳・ツール実行・状態管理は すべて自分のサーバーに存在する。Webhook と Reply / Push が、 両者をつなぐ唯一の橋。 WEBHOOK POST ユーザーの発話が起きた瞬間、 LINE Platform があなたのサーバーの URL に POST。 受信して 200 を返す責任があなたにある。 REPLY / PUSH API サーバーから返信。Reply Token は数十秒で失効。 非同期処理は Push Message を使う。 NO STATE ON LINE 会話履歴 API はない。 文脈・セッション・承認状態は、 サーバー側で自前管理するしか ない。 U S E R ユーザー スマートフォン / PC で LINE アプリを開いている。 SEND テキスト / 画像 / 音声 TAP Quick Reply / Postback メッセージ 配信 L I N E P L AT F O R M · M A N AG E D LINE Messaging Platform LINE が運用するクラウド。 メッセージの中継・配信のみを担う。 EVT webhook イベント生成 DELIVER メッセージ配信 Webhook POST Reply / Push API YO U R S E RV E R · YO U OW N T H I S アプリケーション サーバー エージェントの本体。 すべての処理はここで行う。 AI LLM 推論・Structured Output TOOLS Vision / 検索 / 外部API STATE セッション / 会話履歴 Messaging API × AI Agent A1 · 補足
13. APPENDIX 2 Strategy Map 寄せ方の全体像。 できないことは割り切る。 できることを組み合わせて、 入口としての体験を作る。 やりたいこと 使う API · 機能 会話応答 → Reply Message / Push Message 構造化された情報表示 → Flex Message （AI が JSON を生成） ユーザーの承認・選択 → Quick Reply + Postback 「考え中」 の表示 → Loading Animation 役割の見せ分け → sender （アイコン・名前切替） 画像分析 → 画像受信 → getMessageContent → Vision AI 全部 トーク画面内で完結する。 LIFF （LINE内 WebView） を使えば Streaming もできるが、 チャットから離れる。 今日はトーク画面の中だけでどこまでいけるかにフォーカス。 Messaging API × AI Agent A2 · 補足