Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Web フロントエンドエンジニアに開かれる AI Agent プロダクト開発 - Vercel...
Search
Masayuki Izumi
September 30, 2025
Programming
3
580
Web フロントエンドエンジニアに開かれる AI Agent プロダクト開発 - Vercel AI SDK を観察して AI Agent と仲良くなろう! #FEC余熱NIGHT
https://gaudiy.connpass.com/event/366599/
Masayuki Izumi
September 30, 2025
Tweet
Share
More Decks by Masayuki Izumi
See All by Masayuki Izumi
AI Coding Meetup #3 - 導入セッション / ai-coding-meetup-3
izumin5210
0
3.4k
TypeScript を活かしてデザインシステム MCP を作る / #tskaigi_after_night
izumin5210
5
780
複雑なフォームを継続的に開発していくための技術選定・設計・実装 #tskaigi / #tskaigi2025
izumin5210
13
8.9k
複雑なフォームの jotai 設計 / Designing jotai(state) for Complex Forms #layerx_frontend
izumin5210
9
3.5k
複雑なフォームと複雑な状態管理にどう向き合うか / #newt_techtalk vol. 15
izumin5210
4
4.7k
よくできたテンプレート言語として TypeScript + JSX を利用する試み / Using TypeScript + JSX outside of Web Frontend #TSKaigiKansai
izumin5210
9
5.9k
WebフロントエンドにおけるGraphQL(あるいはバックエンドのAPI)との向き合い方 / #241106_plk_frontend
izumin5210
5
1.9k
connect-go で面倒くささと戦う / 2024-08-27 #newmo_layerx_go
izumin5210
2
1.7k
コンパウンドプロダクト開発の質とスピードを支える Protobuf と Connect #アーキテクチャ_findy / Boosting Compound Product Development Efficiency with Protobuf and Connect
izumin5210
13
4.6k
Other Decks in Programming
See All in Programming
なぜGoのジェネリクスはこの形なのか? - Featherweight Goが明かす設計の核心
qualiarts
0
190
PHPに関数型の魂を宿す〜PHP 8.5 で実現する堅牢なコードとは〜 #phpcon_hiroshima / phpcon-hiroshima-2025
shogogg
1
310
TFLintカスタムプラグインで始める Terraformコード品質管理
bells17
2
330
バッチ処理を「状態の記録」から「事実の記録」へ
panda728
PRO
0
180
One Enishi After Another
snoozer05
PRO
0
130
Go言語はstack overflowの夢を見るか?
logica0419
0
500
TransformerからMCPまで(現代AIを理解するための羅針盤)
mickey_kubo
1
120
アメ車でサンノゼを走ってきたよ!
s_shimotori
0
230
Devoxx BE - Local Development in the AI Era
kdubois
0
130
「ちょっと古いから」って避けてた技術書、今だからこそ読もう
mottyzzz
11
6.9k
Google Opalで使える37のライブラリ
mickey_kubo
2
120
SwiftDataを使って10万件のデータを読み書きする
akidon0000
0
230
Featured
See All Featured
Building Adaptive Systems
keathley
44
2.8k
Scaling GitHub
holman
463
140k
A designer walks into a library…
pauljervisheath
209
24k
GraphQLの誤解/rethinking-graphql
sonatard
73
11k
GraphQLとの向き合い方2022年版
quramy
49
14k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
630
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.4k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
RailsConf 2023
tenderlove
30
1.3k
Optimizing for Happiness
mojombo
379
70k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.2k
[RailsConf 2023] Rails as a piece of cake
palkan
57
5.9k
Transcript
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