Web フロントエンドエンジニアに開かれる AI Agent プロダクト開発 Vercel AI SDK を観察して AI Agent と仲良くなろう！ 2025-09-30 余熱NIGHT from FEC北海道＆東京2025 @izumin5210 

@izumin5210 © LayerX Inc. whoami LayerX バクラク事業部 (2022-09 -) Platform Engineering 部 Enabling チーム Staff Software Engineer ISUCON14 4位 好きな Next.js サブコマンドは next typegen 

AI Agent 使ってますか © LayerX Inc. 3 

AI Agent 作ってますか © LayerX Inc. 4 

AI Agent 開発、他人事だと思ってませんか 「AI・機械学習などが専門のエンジニアしかできないんでしょう？」 © LayerX Inc. 5 

AI Agent 開発では従来のソフトウェアエンジニアリングも重要 © LayerX Inc. LLM は基本 REST API 経由で提供されるものを使う デカいのでそもそも自分で学習・ホスティングするのは大変 （ローカルで動かすモデルもあるが、それはそれとして） Agent の動作の改善は Context Engineering など "LLM っぽい" 技術が重要だが、 プロダクトに組み込む上ではそれ以外のエンジニアリングも重要 フロントで言えば UI/UX 設計 - どうインタラクションしてもらうか, どう見せるかなど なので変に恐れず・敬遠せず、触って理解しておくことは重要 6 

Vercel が AI SDK を出しているので触ってみよう！ https://ai-sdk.dev/docs/getting-started/nextjs-app-router © LayerX Inc. 7 

メッセージを送る: POST http://localhost:3000/api/chat リクエストボディ（idなど, 一部省略） © LayerX Inc. 8 

Webフロントエンド → バックエンドはメッセージ全部送ってるだけ バックエンド → LLM はツールの定義が増えるとかの違いはあるが、まあだいたい同じ （Provider によっては向こうで context 持ってくれるケースもあるっちゃある） © LayerX Inc. 9 

ツール実行 レスポンスに流れてくる stream: 実行待ち © LayerX Inc. 10 

ツール実行 レスポンスに流れてくる stream: 実行結果 © LayerX Inc. 11 

ただの JSON © LayerX Inc. 12 

我々 JSON 色付け係の手にかかれば © LayerX Inc. 13 

JSON は倒せる ツール実行結果を switch で捕まえれば、独自 UI を出すのも簡単 （Toolとプロダクトを疎結合にしたいケースをなど除き、MCP UI 等は実は不要） © LayerX Inc. 14 

（再掲）AI Agent 開発では従来のソフトウェアエンジニアリングも重要 © LayerX Inc. LLM は基本 REST API 経由で提供されるものを使う デカいのでそもそも自分で学習・ホスティングするのは大変 （ローカルで動かすモデルもあるが、それはそれとして） Agent の動作の改善は Context Engineering など "LLM っぽい" 技術が重要だが、 プロダクトに組み込む上ではそれ以外のエンジニアリングも重要 フロントで言えば UI/UX 設計 - どうインタラクションしてもらうか, どう見せるかなど なので変に恐れず・敬遠せず、触って理解しておくことは重要 15