ハッカソン by 生成AIハッカソンvol.05

ハッカソン by 生成AIハッカソンvol.05「簡単な事例紹介」の登壇資料です。

◆スライド内の素材は以下を使用させていただいております。ありがとうございます！

・シルエットデザイン http://kage-design.com/
・human pictogram 2.0 http://pictogram2.com
・ICOOON MONO http://icooon-mono.com/
・Adobe Stock https://stock.adobe.com/jp

Transcript

1. ハッカソン by 生成AIハッカソンvol.05 簡単な事例紹介 ワンフットシーバス 田中正吾 1
2. 私の話はスライドを後ほど共有します。 話す内容に注力いただいて大丈夫です！ 2
3. 20 分くらいで話します！ デモとか事例とか 3
4. モデルコンテキストプロトコル（MCP）の概要は Anthropic 公式ドキュメントが分かりやすい https://docs.anthropic.com/ja/docs/agents-and-tools/mcp 4
5. 私は TypeScript で組んでいて GitHub リポジトリの ソースが分かりやすかったです https://github.com/modelcontextprotocol/typescript-sdk 5
6. 私のブログでも検索エリアで mcp で調べると 色々出てくるので参考にしてみてください https://www.1ft-seabass.jp/memo/ 6
7. 私のブログで検索した様子です 最近もまた MCP 仕様がアップデートされていますが微妙にかわるかも参考になるかと！ 7
8. MCP をやってみての制作まわり雑感 いろいろ試行錯誤はしてきてますが標準入出力方式で安定したプロトタイピングしてます Streamable HTTP を使うと外部サーバーで MCP サーバーが作れるけど動か せるまでそれなりに苦労する ローカルで完結できる標準入出力 MCP サーバーの仕組みがセキュリティを あまり気にせず作りやすくておすすめ 公式のサンプルをそのまま一旦動かして発展させていくのがいいです うまく仕様を生成 AI に伝えてから要望を作っていってもらうのもなかなか 楽しいです 8
9. では事例いってみましょう 実際にデモしながらお伝えしていきます！ 9
10. シンプルに外部 API から画像を取ってくる DOG API から画像取得して紹介してもらえる 10
11. こんな仕組み DOG API から画像取得して紹介してもらえる 11
12. この作り方はブログにも載せています 2025 年 6 月時点 Claude Desktop から Dog API から画像を持ってくるだけの MCP サーバーの画像ソースやり取りのメモ https://www.1ft-seabass.jp/memo/2025/2025-06-23-mcp-server-with-dog-api-using-image-response/ 12
13. ここまでつくって気づいたこと まずは動いて楽しい チャットの仕組みで言葉を投げかけるとイイ感じに仕組み選んでくれる！ なんか生成 AI が住んでて賢くツールが選べる LINE Bot っぽい。対話の分岐 は考えなくていいのすごい。 Claude Desktop で無料で試していると、あっという間に制限に引っかかり ます！ いろいろつないでみたくなる！ 13
14. センサーデータを取ってきてまとめてくれるデモ 内部はシンプルな JSON データを取ってきているものです 14
15. こんな仕組み センサーデータを取ってきてまとめてくれるデモ 15
16. IoT 経由でディスプレイを ON/OFF するデモ IoT デバイスは MCP サーバーから MQTT の 1 と 0 が来るのでオンオフする 16
17. こんな仕組み IoT 経由でディスプレイを ON/OFF するデモ 17
18. ここまでつくって気づいたこと だんだんいろいろ連携できてきた！ MCP の仕組みは生成 AI に正しく従来のシステムを選んでもらう仕組み。 JSON スキーマと description や title で意味づけしてあげるとイイ感じに 選んでくれる。 正直、いままではこれをやってくれるようにするまでに、自前ルー ルですごい頑張る必要があったけど規格化うれしい！ IoT 操作や API からのデータ取得といった従来のシステムは MCP への橋渡 しをやるとつながります。MCP 自体はとても薄い仕組み。橋渡し役。 いままで管理画面のしっかりした UI からこういうことをしてましたが、サ ッとデータが取ってこれて動かせるのは良い意味で 生成 AI が案内する UI の新しい可能性を感じる 18
19. 家の IoT カメラから画像を取ってくるデモ 犬画像が外部の画像取得でしたが、これを IoT カメラに応用すると楽しい 19
20. こんな仕組み 家の IoT カメラから画像を取ってくるデモ 20
21. 自分のブログの記事数一覧 JSON からまとめるデモ Claude の Artifact を使った可視化まとめも素敵 21
22. こんな仕組み 自分のブログの記事数一覧 JSON からまとめるデモ 22
23. ここまでつくって気づいたこと いろいろデータや仕組みをつなげたくなる～ Artifact 機能が加わるとデータの可視化とかメッチャ強力。ただし、閉じた 仕組みなので自分のつなげるには別途がんばる。 MCP ツール登録後のツール選定機能は自作もできるんですが、まず Claude Desktop や Cline でのツール選択で体験してみるのがおすすめです 複数のツールも意味づけがうまくいっているとツール選定は間違えないのは とってもえらい！ 23
24. まとめ MCP サーバーを自分で作って従来の色々な仕組みにつないでみている サッとデータが取ってこれて動かせるのは良い意味で 生成 AI が案内する UI の新しい可能性を感じる 生成 AI が住んでて賢くツールが選べる LINE Bot っぽい。対話の分岐は考え なくていいのすごい。 みなさんもぜひ今まで作ってある仕組みをつないだり、MCP に合った新し い仕組みを作ってみてください～。 24