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
1
120
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
TypeScript を活かしてデザインシステム MCP を作る / #tskaigi_after_night
izumin5210
5
700
複雑なフォームを継続的に開発していくための技術選定・設計・実装 #tskaigi / #tskaigi2025
izumin5210
13
8.8k
複雑なフォームの jotai 設計 / Designing jotai(state) for Complex Forms #layerx_frontend
izumin5210
9
3.4k
複雑なフォームと複雑な状態管理にどう向き合うか / #newt_techtalk vol. 15
izumin5210
4
4.6k
よくできたテンプレート言語として TypeScript + JSX を利用する試み / Using TypeScript + JSX outside of Web Frontend #TSKaigiKansai
izumin5210
9
5.8k
WebフロントエンドにおけるGraphQL(あるいはバックエンドのAPI)との向き合い方 / #241106_plk_frontend
izumin5210
5
1.9k
connect-go で面倒くささと戦う / 2024-08-27 #newmo_layerx_go
izumin5210
2
1.6k
コンパウンドプロダクト開発の質とスピードを支える Protobuf と Connect #アーキテクチャ_findy / Boosting Compound Product Development Efficiency with Protobuf and Connect
izumin5210
13
4.5k
GraphQLサーバの構成要素を整理する #ハッカー鮨 #tsukijigraphql / graphql server technology selection
izumin5210
5
1.5k
Other Decks in Programming
See All in Programming
AI Agents: How Do They Work and How to Build Them @ Shift 2025
slobodan
0
130
CI_CD「健康診断」のススメ。現場でのボトルネック特定から、健康診断を通じた組織的な改善手法
teamlab
PRO
0
120
Django Ninja による API 開発効率化とリプレースの実践
kashewnuts
0
590
Platformに“ちょうどいい”責務ってどこ? 関心の熱さにあわせて考える、責務分担のプラクティス
estie
2
490
チームのテスト力を鍛える
goyoki
4
1.2k
Go Conference 2025: Goで体感するMultipath TCP ― Go 1.24 時代の MPTCP Listener を理解する
takehaya
7
1.2k
AccessorySetupKitで実現するシームレスなペアリング体験 / Seamless pairing with AccessorySetupKit
nekowen
0
190
Playwrightはどのようにクロスブラウザをサポートしているのか
yotahada3
7
2.1k
defer f()とdefer fの挙動を 誤解していた話
kogamochiduki
2
120
AIエージェント時代における TypeScriptスキーマ駆動開発の新たな役割
bicstone
4
1.1k
CSC509 Lecture 01
javiergs
PRO
1
430
CSS Linter の現在地 2025年のベストプラクティスを探る
ryo_manba
10
3.1k
Featured
See All Featured
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
Why Our Code Smells
bkeepers
PRO
339
57k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Rebuilding a faster, lazier Slack
samanthasiow
84
9.2k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
Context Engineering - Making Every Token Count
addyosmani
3
120
Docker and Python
trallard
46
3.6k
GraphQLの誤解/rethinking-graphql
sonatard
72
11k
A better future with KSS
kneath
239
17k
Code Review Best Practice
trishagee
72
19k
GitHub's CSS Performance
jonrohan
1032
460k
Building Flexible Design Systems
yeseniaperezcruz
329
39k
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