Web フロントエンドエンジニアに開かれる AI Agent プロダクト開発 - Vercel AI SDK を観察して AI Agent と仲良くなろう！ #FEC余熱NIGHT

https://gaudiy.connpass.com/event/366599/

Transcript

1. Web フロントエンドエンジニアに開かれる AI Agent プロダクト開発 Vercel AI SDK を観察して AI Agent と仲良くなろう！ 2025-09-30 余熱NIGHT from FEC北海道＆東京2025 @izumin5210
2. @izumin5210 © LayerX Inc. whoami LayerX バクラク事業部 (2022-09 -) Platform Engineering 部 Enabling チーム Staff Software Engineer ISUCON14 4位 好きな Next.js サブコマンドは next typegen
3. AI Agent 使ってますか © LayerX Inc. 3
4. AI Agent 作ってますか © LayerX Inc. 4
5. AI Agent 開発、他人事だと思ってませんか 「AI・機械学習などが専門のエンジニアしかできないんでしょう？」 © LayerX Inc. 5
6. AI Agent 開発では従来のソフトウェアエンジニアリングも重要 © LayerX Inc. LLM は基本 REST API 経由で提供されるものを使う デカいのでそもそも自分で学習・ホスティングするのは大変 （ローカルで動かすモデルもあるが、それはそれとして） Agent の動作の改善は Context Engineering など "LLM っぽい" 技術が重要だが、 プロダクトに組み込む上ではそれ以外のエンジニアリングも重要 フロントで言えば UI/UX 設計 - どうインタラクションしてもらうか, どう見せるかなど なので変に恐れず・敬遠せず、触って理解しておくことは重要 6
7. Vercel が AI SDK を出しているので触ってみよう！ https://ai-sdk.dev/docs/getting-started/nextjs-app-router © LayerX Inc. 7
8. メッセージを送る: POST http://localhost:3000/api/chat リクエストボディ（idなど, 一部省略） © LayerX Inc. 8
9. Webフロントエンド → バックエンドはメッセージ全部送ってるだけ バックエンド → LLM はツールの定義が増えるとかの違いはあるが、まあだいたい同じ （Provider によっては向こうで context 持ってくれるケースもあるっちゃある） © LayerX Inc. 9
10. ツール実行 レスポンスに流れてくる stream: 実行待ち © LayerX Inc. 10
11. ツール実行 レスポンスに流れてくる stream: 実行結果 © LayerX Inc. 11
12. ただの JSON © LayerX Inc. 12
13. 我々 JSON 色付け係の手にかかれば © LayerX Inc. 13
14. JSON は倒せる ツール実行結果を switch で捕まえれば、独自 UI を出すのも簡単 （Toolとプロダクトを疎結合にしたいケースをなど除き、MCP UI 等は実は不要） © LayerX Inc. 14
15. （再掲）AI Agent 開発では従来のソフトウェアエンジニアリングも重要 © LayerX Inc. LLM は基本 REST API 経由で提供されるものを使う デカいのでそもそも自分で学習・ホスティングするのは大変 （ローカルで動かすモデルもあるが、それはそれとして） Agent の動作の改善は Context Engineering など "LLM っぽい" 技術が重要だが、 プロダクトに組み込む上ではそれ以外のエンジニアリングも重要 フロントで言えば UI/UX 設計 - どうインタラクションしてもらうか, どう見せるかなど なので変に恐れず・敬遠せず、触って理解しておくことは重要 15