AIと考える MCP tools の実装

下記で登壇した内容です
LINEリッチメニューはここまでできる！生成AIで実現する最新設計術 https://linedevelopercommunity.connpass.com/event/365329/
Developers Summit 2025 KANSAI【前夜祭】 https://devsumi.connpass.com/event/365515/

1. AIと考える MCP tools の実装 @4geru
2. 名前：しげる 所属：株式会社マネーフォワード 出身：滋賀県, 彦根市 好きな技術：LINE API, MCP, Supabase 課外活動：LINE Developer Community, Kaigi on Rails Organizer 最近の趣味：MCP開発、ビリヤード 自己紹介
3. 相方の「つんちゃん」
4. MCP（Model Context Protocol） AIモデルと外部のデータソースと接続する標準規格です。 AIモデルがデータにアクセスし、高い応答がきるようになります。 ref: https://modelcontextprotocol.io/docs/getting-started/intro
5. MCPの設定方法 設定方法： JSON 書くだけでカンタン！
6. Claude Code はコマンドで設定できる！ claude mcp add line -s project \ -e CHANNEL_ACCESS_TOKEN=YOUR_CHANNEL_ACCESS_TOKEN \ -e DESTINATION_USER_ID=YOUR_DESTINATION_USER_ID \ -- npx @line/line-bot-mcp-server
7. LINE MCP について
8. LINE MCP について 開発中の内容を含みます
9. ユースケース1. メッセージ送信
11. 送信されたメッセージ
13. 送信されたメッセージ
14. ユースケース2. APIの上限について
16. MCP Server
17. MCP Server の書き方 - server.tool の引数 MCP server に tool を定義 ⚫名前: name push_text_message ⚫説明: description LINEにプレーンなテキストを送ります ⚫引数: paramsSchemaOrAnnotations { userId:, message: } ⚫関数: cb
18. MCP Server の書き方 - tool 中の処理 関数の中ではいろんな処理がかける e.g. 特定のユーザーへメッセージ送信 await lineClient.pushMessage({ to: userId, messages: [message] });
19. MCP Server の書き方 - 引数の型定義 引数の型定義 await lineClient.pushMessage({ to: userId, messages: [message] });
20. MCP Server の書き方 - 引数の型定義 const userIdSchema = z .string() // 1.型定義が可能 .default(DEFAULT_USER) // 2.初期設定 .describe( "送信先ユーザー ID。未指定時は環境変数を使用。 " ); // 3.AI への説明が可能 const textMessageSchema = z.object({ text: z.string().min(1) }); // 4.min, max も指定可能 引数の型定義
21. ユースケース3. リッチメニュー
22. トーク画面下部に表示されるボタン（スタバの例）
23. 1. 既存リッチメニューの取得 2. 不要部分の削除
24. 3. 新規作成
25. 作成されたリッチメニュー
26. 1. 既存リッチメニューの取得 2. ツンモード作成 3. デレモード作成
30. 1. MCPの実装 - 今回のリッチメニューの tools 引数は 3 つだけ シンプル is ベスト
31. 1. MCPの実装 - tools の中でしていること いろんなことしてる 画像生成 リッチメニューの設定 前処理
32. 1. MCPの実装 - tools の中でしていること リッチメニュー作成には いろんなAPIがあるわね API呼び出し
33. 1. MCPの実装 - tools の中でしていること 画像作成は力技
34. 1. MCPの実装 - 画像生成 - 全体の流れ Markdown to HTML to png と力技
35. 1. MCPの実装 - 画像生成 - 全体の流れ Marp って何？
36. 1. MCPの実装 - 画像生成 - Marp の解説 Markdown記法でのスライド作成ツール HTMLやPDFへのエクスポートに対応 VS Codeの拡張機能なども提供あり CSSでできる手軽さと表現力を両立
37. 1. MCPの実装 - 画像生成 - 1. テンプレートファイル actions の数からテンプレート取得 テンプレートの文字を label に変更
38. 1. MCPの実装 - 画像生成 - 2., 3. Marp の HTML 化 Marp を HTML で保存 HTML 要素
39. puppeteer から画像化 1. MCPの実装 - 画像生成 - 4. スクショ撮影 ブラウザ起動 スクリーンショット 作業用 /tmp へ移動
40. 2. パラメーター構造 - 引数は 3 つだけシンプル is ベスト
41. 2. パラメーター構造 - 引数は 3 つだけシンプル is ベスト
42. MCPからの呼びやすさ 3. アクションタイプ - AI からの使いやすさ
43. 3. アクションタイプ - 各アクションの定義
44. 3. アクションタイプ - 各アクションの定義 type, label は共通部分
45. 3. アクションタイプ - tools 用の引数にまとめる action として 使えるように！
46. キャラクター大事
47. リッチメニュー検討
48. 最終調整
49. 結構難しいことしてるのね
50. まとめ：MCP は雑なリクエストでも動く • tools は道具箱 ◦ tools の中で “複雑な処理 ” をしても良い！ ◦ ユーザーの負担が減らしたい • Cursor の判断で “いい感じ” で処理してくれる ◦ API を組み合わせて、新たな価値が提供 ◦ MCP に “どの情報” を返すかが大事 • ちょっと便利を増やしていきたい ◦ MCPが流行るためには ◦ 使い倒して、共有することが大事
51. 最後に 1/3：開発中... まだ、PR は開発途中になります • https://github.com/line/line-bot-mcp-server/pull/121 • https://github.com/line/line-bot-mcp-server/pull/145 利用までは、もう少しお時間をいただきます ごめんね
52. 最後に 2/3：開発中... • 実装済み：一覧 / 削除 / デフォルト設定 ON, OFF だけです • 実装中：アクション数から画像作成 • 開発したい：AIから画像作成 / 作成済み画像を指定 おねがい
53. こんな恥ずかしいスライドもう作らないんだから！ ご清聴ありがとうございました