AIと考える MCP tools の実装

AIと考える MCP tools の実装 @4geru

名前：しげる所属：株式会社マネーフォワード出身：滋賀県, 彦根市好きな技術：LINE API, MCP, Supabase 課外活動：LINE Developer
Community, Kaigi on Rails Organizer 最近の趣味：MCP開発、ビリヤード自己紹介

相方の「つんちゃん」

MCP（Model Context Protocol） AIモデルと外部のデータソースと接続する標準規格です。 AIモデルがデータにアクセスし、高い応答がきるようになります。 ref: https://modelcontextprotocol.io/docs/getting-started/intro

MCPの設定方法設定方法： JSON 書くだけでカンタン！

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

LINE MCP について

LINE MCP について開発中の内容を含みます

ユースケース1. メッセージ送信

送信されたメッセージ

ユースケース2. APIの上限について

MCP Server

MCP Server の書き方 - server.tool の引数 MCP server に tool
を定義 ⚫名前: name push_text_message ⚫説明: description LINEにプレーンなテキストを送ります ⚫引数: paramsSchemaOrAnnotations { userId:, message: } ⚫関数: cb

MCP Server の書き方 - tool 中の処理関数の中ではいろんな処理がかける e.g. 特定のユーザーへメッセージ送信 await
lineClient.pushMessage({ to: userId, messages: [message] });

MCP Server の書き方 - 引数の型定義引数の型定義 await lineClient.pushMessage({ to: userId,
messages: [message] });

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 も指定可能引数の型定義

ユースケース3. リッチメニュー

トーク画面下部に表示されるボタン（スタバの例）

1. 既存リッチメニューの取得 2. 不要部分の削除

3. 新規作成

作成されたリッチメニュー

1. 既存リッチメニューの取得 2. ツンモード作成 3. デレモード作成

1. MCPの実装 - 今回のリッチメニューの tools 引数は 3 つだけシンプル is
ベスト

1. MCPの実装 - tools の中でしていることいろんなことしてる画像生成リッチメニューの設定前処理

1. MCPの実装 - tools の中でしていることリッチメニュー作成にはいろんなAPIがあるわね API呼び出し

1. MCPの実装 - tools の中でしていること画像作成は力技

1. MCPの実装 - 画像生成 - 全体の流れ Markdown to HTML to
png と力技

1. MCPの実装 - 画像生成 - 全体の流れ Marp って何？

1. MCPの実装 - 画像生成 - Marp の解説 Markdown記法でのスライド作成ツール HTMLやPDFへのエクスポートに対応 VS
Codeの拡張機能なども提供あり CSSでできる手軽さと表現力を両立

1. MCPの実装 - 画像生成 - 1. テンプレートファイル actions の数からテンプレート取得テンプレートの文字を
label に変更

1. MCPの実装 - 画像生成 - 2., 3. Marp の HTML
化 Marp を HTML で保存 HTML 要素

puppeteer から画像化 1. MCPの実装 - 画像生成 - 4. スクショ撮影ブラウザ起動
スクリーンショット作業用 /tmp へ移動

2. パラメーター構造 - 引数は 3 つだけシンプル is ベスト

MCPからの呼びやすさ 3. アクションタイプ - AI からの使いやすさ

3. アクションタイプ - 各アクションの定義

3. アクションタイプ - 各アクションの定義 type, label は共通部分

3. アクションタイプ - tools 用の引数にまとめる action として使えるように！

キャラクター大事

リッチメニュー検討

最終調整

結構難しいことしてるのね

まとめ：MCP は雑なリクエストでも動く • tools は道具箱 ◦ tools の中で “複雑な処理 ”
をしても良い！ ◦ ユーザーの負担が減らしたい • Cursor の判断で “いい感じ” で処理してくれる ◦ API を組み合わせて、新たな価値が提供 ◦ MCP に “どの情報” を返すかが大事 • ちょっと便利を増やしていきたい ◦ MCPが流行るためには ◦ 使い倒して、共有することが大事

最後に 1/3：開発中... まだ、PR は開発途中になります • https://github.com/line/line-bot-mcp-server/pull/121 • https://github.com/line/line-bot-mcp-server/pull/145 利用までは、もう少しお時間をいただきますごめんね

最後に 2/3：開発中... • 実装済み：一覧 / 削除 / デフォルト設定 ON, OFF
だけです • 実装中：アクション数から画像作成 • 開発したい：AIから画像作成 / 作成済み画像を指定おねがい

こんな恥ずかしいスライドもう作らないんだから！ご清聴ありがとうございました

AIと考える MCP tools の実装

AIと考える MCP tools の実装

More Decks by 4geru

Featured

Transcript