💬

LINEをAIエージェントの入口にする現実解

2026/04/26に公開

こんにちは！peintangos です。ChatGPT、Claude、Discord、Slack など、普段わたしたちが触れる AI のインターフェースはたくさんあります。一方で、日本で個人間のコミュニケーションに使われるアプリとしては、LINE の存在感はかなり大きいです。LY Corporation の FY2024 統合報告書によると、LINE の国内月間アクティブユーザーは約 9,800 万人とされています。では、LINE 上で AI エージェントの応答はどこまで表現できるのでしょうか？この記事では、Messaging API、LIFF、LINE Bot MCP Server を触ってみた結果を整理したいと思います。

 LINE の2つのインターフェースを理解する検証に入る前に、LINE の開発プラットフォームの全体像を整理します。LINE で何かを作ろうとすると、大きく2つのレイヤーがあります。

 Messaging APIいわゆる「LINE Bot」を作るための REST API です。ユーザーがメッセージを送ると Webhook でサーバーに通知が届き、API を叩いて返信する仕組みです。テキスト、画像、Flex Message（リッチなカード UI）などを送信できます。チャット画面の中でやり取りが完結するので、ユーザーにとっては「LINE で話しかけるだけ」というシンプルな体験になります。ただし、送れるメッセージの形式は LINE が定義したものに限られており、ChatGPT のようなストリーミング表示や、Markdown の直接レンダリング、AI が動的に生成した UI をその場で表示するような体験は、Messaging API のチャット画面だけでは実現しづらいです。

 LIFF（LINE Front-end Framework）LIFF は、LINE アプリ内で開く Web アプリの仕組みです。LINE の中で WebView が立ち上がり、そこに自分で作った Web アプリを表示できます。HTML/CSS/JavaScript を使えるため、Messaging API より UI の自由度は高く、通常の Web アプリに近い表現ができます。LIFF SDK を使うと、同意済みスコープの範囲内で LINE ユーザーのプロフィールを取得したり、条件付きでトークルームにメッセージを送ったりできます。

 比較表


Messaging API
LIFF


概要
REST API
LINE 内 WebView

UI の自由度
テンプレートベース
HTML/CSS/JS で高い自由度

ストリーミング
不可
可能（SSE / WebSocket）

Markdown
非対応
react-markdown 等で対応可能


 先に結論検証結果をまとめるとこうなりました。上記2つのインターフェースに加えて、2025年4月に発表された「LINE Bot MCP Server」も比較対象に入れています。


機能
Messaging API
LIFF
MCP Server


テキスト送信 / 応答
○
○
○（送信）

リッチカード UI（Flex Message）
○
–
○（送信）

フォローアップ提案（Quick Reply）
○
–
–

ローディングアニメーション
○
–
–

ストリーミング表示
✗
○
–

Markdown レンダリング
✗
○
–

MCP UI 的なインタラクション
✗
✗
✗

結論、LINE で AI エージェントを作る場合、基本は Messaging API で十分だと感じました。Messaging APIはシンプルなテキスト応答だけでなく、必要に応じてカード UI を表示する、次のアクションを Quick Reply で出すといったことが可能です。

一方で、Messaging APIではLINE が定義したメッセージ UI以外は表示できなかったり、ChatGPT のようなストリーミング表示、Markdown の直接レンダリング、複雑なフォームやダッシュボードのような UI には向いていません。その場合は LIFF に遷移させることになりますが、LIFF は技術的にはほぼ Web アプリです。つまり、LIFF の価値は「新しい UI 技術」ではなく、LINE のユーザー文脈・導線・配布チャネルを使えることにあります。そのため、現実的には基本的にMessaging API で会話し、必要なときだけ LIFF へ遷移する構成が一番バランスが良いと感じました。以下、具体的な検証内容を見ていきます。
!以降、検証では Next.js (App Router) + @line/bot-sdk + @anthropic-ai/sdk を使い、Vercel にデプロイしています。

 Messaging APIの検証
 テキスト応答 + ローディングアニメーション一番シンプルな構成です。ユーザーのメッセージを Webhook で受けて、Claude に投げて、テキストで返します。ただし、AI の推論には数秒〜十数秒かかることがあります。そのため、ローディングアニメーション API を使って「処理中」であることを表示します。


シンプルな chat bot
// lib/line/loading-animation.ts
export async function showLoadingAnimation(userId: string): Promise<void> {
  try {
    await lineClient.showLoadingAnimation({
      chatId: userId,
      loadingSeconds: 60,
    });
  } catch {
    // グループチャットでは動作しないため、エラーを無視
  }
}
注意点が一つあります。Webhook は LINE プラットフォームから「2秒以内に 200 を返す」ことが求められます。AI の推論が終わるのを待ってから返すと間に合いません。そのため、推論は非同期で処理し、完了後にpushする設計が必要になります。
!Vercel などの Serverless 環境では、レスポンス後の非同期処理を単純な fire-and-forget にすると、実行継続が保証されにくい場合があります。実運用では waitUntil() / after()、またはジョブキューを使う構成にすると安全です。

 Flex Message で Markdown を表現するMessaging API のテキストメッセージは Markdown をサポートしていません。### 見出し や **太字** を送ると、そのまま文字として表示されます。ただし、Flex Message を使えば話が変わります。Flex Message は、CSS Flexbox ベースのリッチなカード UI を組み立てられるメッセージ形式です。


テーブル、タイトル、太字などの表現が可能
今回は markdown-flex-message というサードパーティライブラリを使って、Claude の Markdown 出力を Flex Message に自動変換しました。実際に表示すると、通常のテキストメッセージとは吹き出しの角丸が異なります。Flex Message は独自レイアウトなので、通常のチャット吹き出しとは少し見た目が変わります。
// lib/line/flex/markdown-to-flex.ts
export async function markdownToFlex(
  markdown: string,
  altText?: string,
): Promise<FlexMessage | null> {
  try {
    const { flexMessage } = await convertToFlexMessage(markdown);
    if (altText) {
      flexMessage.altText = altText;
    }
    return flexMessage;
  } catch {
    return null;
  }
}

 Quick ReplyClaude の応答から「次に聞きそうな質問」を抽出して、チャット下部にボタンとして表示します。


灰色のボタンをタップすると、メッセージが送信される
AI チャットでは、ユーザーが次に何を聞けばよいか迷うことがあります。Quick Reply を使うと、次の質問候補を LINE の UI として自然に出せます。たとえば、AI が技術解説を返したあとに、
もっと詳しく聞く
サンプルコードを出す
メリット・デメリットを比較する
のような候補を出せます。

 Messaging API がサポートする主なメッセージ形式今回の検証では、テキスト / Flex Message / Quick Reply を試しましたが、Messaging API はほかにもさまざまなメッセージ形式をサポートしています。


メッセージ形式
概要


テキスト
プレーンテキスト + LINE 絵文字

スタンプ
パッケージ ID + スタンプ ID で送信

画像
オリジナル画像 URL + プレビュー URL

動画
動画 URL + プレビュー画像。タップで再生

音声
音声ファイル URL + 再生時間

位置情報
タイトル・住所・緯度経度を含む地図

イメージマップ
1枚の画像に複数のタップ領域を設定

テンプレート
ボタン / 確認 / カルーセル / 画像カルーセルの4種

Flex Message
CSS Flexbox ベースの自由なレイアウト

AI エージェントの応答としては、テキスト + Flex Message がメインになります。ただし、画像生成 AI と組み合わせて画像メッセージを返したり、位置情報を含む回答をしたりといった拡張も可能です。次に、LIFFを見ていきます。

 LIFFの検証
 SSE ストリーミングMessaging API ではストリーミング表示はできません。しかし LIFF は Web アプリなので、SSE（Server-Sent Events）を使えば ChatGPT のようなトークン逐次表示が実現できます。


ストリーミングされるのでユーザーが待つ時間が短い
サーバー側は Vercel AI SDK の streamText を使い、クライアント側は useChat フックで受け取ります。LIFF の画面を開くと、LINE アプリの中で ChatGPT のような体験ができます。文字がスルスルと流れてくるあの感じです。Messaging API の「ローディング → 全文表示」とは、体験が根本的に違います。
// app/api/liff/chat/route.ts
const result = streamText({
  model: anthropic("claude-haiku-4-5-20251001"),
  system: SYSTEM_PROMPT,
  messages: modelMessages,
});

return result.toUIMessageStreamResponse();

 Markdown レンダリングLIFF は Web アプリなので、react-markdown がそのまま使えます。

remark-gfm で GFM テーブル、rehype-highlight でシンタックスハイライトにも対応できます。コードや表を頻繁に扱う技術系の回答では、Messaging API の Flex Message 変換よりも、LIFF 上で Markdown を直接レンダリングした方が自然です。

 LIFF を使う判断基準ここまで読むと「それ普通の Web アプリでよくない？」と思うかもしれません。実際、技術的にはほぼ同じです。今回の検証でも、LIFF 固有の機能はプロフィール表示くらいしか使っていません。LIFF の価値は UI 技術ではなく、liff.getProfile() による認証不要のユーザー連携と、トーク画面やリッチメニューからワンタップで遷移できる導線にあります。とはいえ、多くのユースケースでは Messaging API だけで十分です。LIFF への遷移を検討すべきなのは、ストリーミング表示、Markdown のきれいな表示、フォームやダッシュボードなど独自 UI が必要な場合です。ただし、トーク画面からWebViewに遷移するのでユーザーの連続的な体験が失われることに注意してください。

 LINE Bot MCP Serverの検証LINE Bot MCP Server は、2025年4月に LINE 公式が公開した MCP サーバーです。Claude Desktop などの MCP クライアントから Messaging API を操作できます。セットアップは claude_desktop_config.json に以下を追加します。
{
  "mcpServers": {
    "line-bot": {
      "command": "npx",
      "args": ["@line/line-bot-mcp-server"],
      "env": {
        "NPM_CONFIG_IGNORE_SCRIPTS": "true",
        "CHANNEL_ACCESS_TOKEN": "YOUR_TOKEN",
        "DESTINATION_USER_ID": "YOUR_USER_ID"
      }
    }
  }
}
Claude Desktop で「LINE で『こんにちは』と送って」と言うだけで、LINE にメッセージが届きます。


Claude Desktop 側


LINE 側で受信したメッセージ
プレビュー版ですが、現在は 12 個のツールが使えます。


ツール名
概要


push_text_message
特定ユーザーにテキスト送信

push_flex_message
特定ユーザーに Flex Message 送信

broadcast_text_message
全フォロワーにテキスト一斉配信

broadcast_flex_message
全フォロワーに Flex Message 一斉配信

get_profile
ユーザーのプロフィール取得

get_follower_ids
フォロワーの ID 一覧取得

get_message_quota
月間メッセージ上限と使用量を表示

get_rich_menu_list
リッチメニュー一覧取得

create_rich_menu
リッチメニュー作成（画像生成含む）

delete_rich_menu
リッチメニュー削除

set_rich_menu_default
デフォルトリッチメニュー設定

cancel_rich_menu_default
デフォルトリッチメニュー解除


 LINE Bot MCP Server を使う判断基準「AI エージェントから LINE にメッセージを送る」だけなら、自前で Push API を実装しなくてもこれで十分です。ただし、これは Webhook を受けて自動応答する Bot ではなく、MCP クライアント側から LINE 公式アカウントを操作するための送信・管理ツールです。つまり、Claude Desktop などのローカル AI アシスタントから LINE に通知を飛ばしたい場合に向いています。クラウド上で常時稼働する AI エージェントを作るなら、Messaging API の Webhook、Reply API、Push API を直接使う方がシンプルです。 なお、最近では MCP Apps（MCP extension としてツールがインタラクティブな UI コンポーネントを返せる仕組み）のように、AI が動的に UI を生成してその場で表示する体験も出てきています。LINE にはこうした仕組みはなく、現時点では「AI の出力を受け取って表示する」インターフェースというポジションです。

 まとめMessaging API だけでも Flex Message + Quick Reply + ローディングアニメーションでそれなりの AI チャット体験は作れます。質問と回答が中心の多くのユースケースでは、これで十分です
ストリーミングや Markdown が必要な場面では LIFF を使えます。ただし、LIFF は技術的には普通の Web アプリに近く、LINE 固有の価値は「ユーザー文脈」と「チャット画面からの導線」にあります
AI → LINE の送信は LINE Bot MCP Server が便利です。ただし、ローカルの AI アシスタント向けの送信・管理ツールなので、クラウドで AI エージェントを動かす場合は Messaging API の Push API を直接使う方がシンプルなこともあります
現実的には「普段は Messaging API で会話し、必要なときだけ LIFF に遷移する」という組み合わせが一番バランスの良い落とし所だと感じました
個人用の常駐 AI 秘書を LINE から呼び出す用途であれば、OpenClaw のような既存基盤を使う選択肢も出てきますが、業務向け Bot、独自 UI、細かい権限管理、ログ管理、既存システム連携が必要な場合は、Messaging API をベースに必要に応じてLIFFを組み合わせる設計も取りえるな、というのが今回の検証結果でした。
https://github.com/peintangos/line-app-sample

 参考Messaging API ドキュメント - LINE Developers
Messaging API リファレンス - LINE Developers
Flex Message の要素 - LINE Developers
ローディングアニメーション - LINE Developers
LIFF ドキュメント - LINE Developers
LIFFブラウザと外部ブラウザの違い - LINE Developers
LIFF v2 API リファレンス - LINE Developers
line/line-bot-mcp-server - GitHub
markdown-flex-message - GitHub
LY Corporation Integrated Report FY2024
おわり

	Messaging API	LIFF
概要	REST API	LINE 内 WebView
UI の自由度	テンプレートベース	HTML/CSS/JS で高い自由度
ストリーミング	不可	可能（SSE / WebSocket）
Markdown	非対応	react-markdown 等で対応可能

機能	Messaging API	LIFF	MCP Server
テキスト送信 / 応答	○	○	○（送信）
リッチカード UI（Flex Message）	○	–	○（送信）
フォローアップ提案（Quick Reply）	○	–	–
ローディングアニメーション	○	–	–
ストリーミング表示	✗	○	–
Markdown レンダリング	✗	○	–
MCP UI 的なインタラクション	✗	✗	✗

メッセージ形式	概要
テキスト	プレーンテキスト + LINE 絵文字
スタンプ	パッケージ ID + スタンプ ID で送信
画像	オリジナル画像 URL + プレビュー URL
動画	動画 URL + プレビュー画像。タップで再生
音声	音声ファイル URL + 再生時間
位置情報	タイトル・住所・緯度経度を含む地図
イメージマップ	1枚の画像に複数のタップ領域を設定
テンプレート	ボタン / 確認 / カルーセル / 画像カルーセルの4種
Flex Message	CSS Flexbox ベースの自由なレイアウト

ツール名	概要
`push_text_message`	特定ユーザーにテキスト送信
`push_flex_message`	特定ユーザーに Flex Message 送信
`broadcast_text_message`	全フォロワーにテキスト一斉配信
`broadcast_flex_message`	全フォロワーに Flex Message 一斉配信
`get_profile`	ユーザーのプロフィール取得
`get_follower_ids`	フォロワーの ID 一覧取得
`get_message_quota`	月間メッセージ上限と使用量を表示
`get_rich_menu_list`	リッチメニュー一覧取得
`create_rich_menu`	リッチメニュー作成（画像生成含む）
`delete_rich_menu`	リッチメニュー削除
`set_rich_menu_default`	デフォルトリッチメニュー設定
`cancel_rich_menu_default`	デフォルトリッチメニュー解除

LINE の2つのインターフェースを理解する

Messaging API

LIFF（LINE Front-end Framework）

比較表

先に結論

Messaging APIの検証

テキスト応答 + ローディングアニメーション

Flex Message で Markdown を表現する

Quick Reply

Messaging API がサポートする主なメッセージ形式

LIFFの検証

SSE ストリーミング

Markdown レンダリング

LIFF を使う判断基準

LINE Bot MCP Serverの検証

LINE Bot MCP Server を使う判断基準

まとめ

参考

Discussion