Lock in $30 Savings on PRO—Offer Ends Soon! ⏳
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Vercel AI SDK を使って Next.js で AIアプリケーションを 作成する方法...
Search
sutetotanuki
November 01, 2024
0
170
Vercel AI SDK を使って Next.js で AIアプリケーションを 作成する方法のご紹介
sutetotanuki
November 01, 2024
Tweet
Share
More Decks by sutetotanuki
See All by sutetotanuki
WEBエンジニア向けAI活用入門
sutetotanuki
0
380
ブラウザ上で実行され、 AIアシスタント付きデータベース postgres.new を触ってみた
sutetotanuki
0
160
今時のCookie事情
sutetotanuki
0
400
高速案件立ち上げで使われるマッハテンプレートのフロントエンド技術選定
sutetotanuki
2
1.3k
Core Web Vitals を改善する Next.js の機能群
sutetotanuki
1
1.9k
サーバーレスRDBの選択肢
sutetotanuki
0
1.2k
今日から始めるAmplify DataStore
sutetotanuki
0
1.1k
Kotlin Coroutine 基本的な使い方
sutetotanuki
0
670
20191011_devio_osaka.pdf
sutetotanuki
0
2.2k
Featured
See All Featured
VelocityConf: Rendering Performance Case Studies
addyosmani
326
24k
Typedesign – Prime Four
hannesfritz
40
2.4k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
126
18k
Happy Clients
brianwarren
98
6.7k
Faster Mobile Websites
deanohume
305
30k
Fantastic passwords and where to find them - at NoRuKo
philnash
50
2.9k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.3k
Writing Fast Ruby
sferik
627
61k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
506
140k
What's in a price? How to price your products and services
michaelherold
243
12k
The Invisible Side of Design
smashingmag
298
50k
How GitHub (no longer) Works
holman
310
140k
Transcript
Vercel AI SDK を使って Next.js で AIアプリケーションを 作成する⽅法のご紹介 1
2 今⽇喋ること • AIをWEBに組み込むモチベーション • Vercel の AI SDKとは? •
組み込みの例 • もっと知りたい⽅へ • まとめ
3 今⽇喋ること • AIをWEBに組み込むモチベーション • Vercel の AI SDKとは? •
組み込みの例 • もっと知りたい⽅へ • まとめ
4 AIをWEBアプリに組み込むよくある活⽤例 • RAGで⾃社特有の情報をチャットで検索 • 公開する⽂章をAIを使って添削 • デザインシステムで拡張したAIでUI⽣成
5 AIを組み込む時のよくある実装 • AIとのAPI通信 ◦ AIとはAPIで通信する • チャットの履歴の保持 ◦ コンテキストを履歴からAIに与える
• ストリーミング機能 ◦ AIは処理が完了するまで時間がかかる • RAG ◦ LLM(AI)に外部情報を組み合わせる
6 AIの組み込みをサポートするライブラリ • LangChain • LlmaxIndex • HeyStack • AI
SDK
7 今⽇喋ること • AIをWEBに組み込むモチベーション • Vercel の AI SDKとは? •
組み込みの例 • もっと知りたい⽅へ • まとめ
8 Vercel の AI SDKとは? フロントエンドフレームワークを使って 作成したWEBアプリケーションに AIを活⽤した機能を組み込むためのSDK
9 AI SDKの対応フレームワーク • React • Next.js(RSCも experimental だけど対応) •
Svelte • Nuxt • Node.js
10 AI SDKの主要な機能 • Provider and Models • Prompts •
Tools • Streaming
11 Provider and Models 複数のAI提供元やモデルをコードの 変更なしに⼊れ替えることができる AI SDK
12 Provider and Models - 対応 Provider • OpenAI •
Azure • Anthropic • Amazon Bedrock • Google Vertex • Cohere • LLmaCPP • …etc
13 Provider and Models - 注意点 ただし、全てのAI SDKの機能を全てのモデルで 使えるわけでない点に注意が必要 例えばgpt-4は画像⼊⼒機能は使えない
14 Prompts AI SDKは複数種類のプロンプトを提供してる • テキストプロンプト • 画像プロンプト • システムプロンプト
• メッセージプロンプト
15 Prompts - システムプロンプト システムに制約を加えたい時に 設定するプロンプト あなたは⼦供向け教育AIです。 ⼩学3年⽣でも理解できる⾔葉を使い、100語以内で回答してください。 専⾨⽤語は簡単に説明し、回答の最後に関連した⾯⽩い雑学か質問を加えてくだ さい
例)
16 Prompts - メッセージプロンプト AIにメッセージを配列で指定することができる 会話の履歴をAIに渡しコンテキストを⾼めれる messages: [ { role:
'user', content: '質問していいですか?' }, { role: 'assistant', content: '⼤丈夫です。何が聞きたいですか?' }, { role: 'user', content: '⽣成AIについて概要を教えてください' }, ],
17 Tools AIはAIの外側の世界に⼲渉することができない そのため、APIを呼び出し等を⾏えなかったり 学習されていないリアルタイムの情報を取得で きない。これらを解決するのが Tools
18 Tools AIから呼び出される関数をあらかじめ⽤意して おき。AIが与えられたコンテキストから、 関数を選んで呼び出す function getWeather... function doSomething... 現在の天気を教えて
ユーザーの⼊⼒からAIが判断し呼び出し
19 Tools AIに外界との接点となるToolsを使うことで 以下のようなことが可能になる • リアルタイム情報の取得 • 外部APIの呼び出し(例: 予約API、購⼊API)
20 Streaming ⽣成AIは返答を返すのに時間がかかる。 その間ローディングを表⽰することになる 少しずつ回答を表⽰することで ユーザー体験を向上できる
21 今⽇喋ること • AIをWEBに組み込むモチベーション • Vercel の AI SDKとは? •
組み込みの例 • もっと知りたい⽅へ • まとめ
22 組み込みの例 AI SDKを使って作った2つのサンプルアプリを 例に組み込みの実例を紹介 1. チャットアプリ 2. 添削アプリ
23 1. チャットアプリ ⽣成AIを使ったシンプルなチャットをNext.jsで 作成したWEBアプリケーションに組み込みます 徐々に回答が表⽰ (ストリーミング)
24 チャットアプリ - 使⽤してるAI SDKの機能 以下のAI SDKの機能を使⽤ • Provider ◦
Amazon Bedrock Provider • Message Prompts ◦ 会話履歴のやり取り • Streaming ◦ 徐々にレスポンスを表⽰する
25 チャットアプリ - 全体構成 Next.jsのAPI Routeでエンドポイントを作成し そこからAIと通信 Amazon Bedrock Component
GET /api/chat API Route Provider
26 チャットアプリ - API通信 APIとコンポーネントはMessage Promptで 会話履歴を全てペイロードに載せて通信 APIからのレスポンスはStreamingで返却 Streaming GET
/api/chat Message Prompt
27 チャットアプリ - Providerの設定 Amazon Bedrockを使う場合それ⽤の Providerをインストールし、 Bedrockに渡すパラメーターを設定する $ pnpm
add @ai-sdk/amazon-bedrock
28 チャットアプリ - Providerの設定 Modelを指定
29 チャットアプリ - API Streamでレスポンスを返したいので AI SDKが提供してるstreamText関数を使⽤ これだけでストリームでレスポンスできる
30 チャットアプリ - UI AI SDKが提供してる useChat カスタム フックをつかつ Messages
Prompts で会話履歴のデータ がストリームで受信 される
31 2. 添削アプリ 映画レビューのサイトの 添削機能をイメージ 以下をチェック • Typo • ネタバレの有無
• 不適切な表現の有無 • 全体的な添削
32 2. 添削アプリ ネタバレの有無を表⽰ 誤字をエディタ上で 添削
33 添削アプリ - 使⽤してるAI SDKの機能 以下の機能を使⽤ • Provider ◦ Amazon
Bedrock Provider • Generate Object ◦ AIのレスポンスがオブジェクトになる
34 添削アプリ - 全体像 AIにレビュー内容をテキストで送信 レスポンスはUIで扱いやすい構造化データ Generate Object Prompt 猫好きなので...
{ “containsSpoiler”: false, }
35 添削アプリ - API AI SDKが提供する generateObject関数を 使い以下を指定 • システムプロンプト
• zodでレスポンスの スキーマ
36 添削アプリ - システムプロンプト 役割を与え、レスポンスのオブジェクトに 設定する内容を⾃然⾔語で指⽰してます あなたは、映画のレビューサイトに投稿されるレビューを添削するAIです。 ユーザーから与えられた情報を添削してください 添削する内容は以下の通りです 1.
誤字、脱字、⽂章の誤り 2. ネタバレの有無 3. 社会良俗に反する表現の有無 4. 全体を通しての添削 1の指摘は誤ってる⽂字をハイライトさせるため、JSON形式で誤ってる⽂字の開 始、終了位置、⼊れ替えると正しくなる⽂字を配列で返してください
37 添削アプリ - オブジェクト { // typoの位置情報 “typo”: { “start”:
0, “end”: 3, “text”: “ます” } // 文章中にネタバレがあるかどうか “containsSpoiler”: true, // 公序良俗に反する記述があるかどうか “containsInappropriateExpression”: false }
38 添削アプリ - レスポンスの定義 AIからのレスポンスをZodで定義する
39 添削アプリ - UI AI SDKのuseObject カスタムフックを使い AIからのデータを取得 (AIからのデータを オブジェクトに変換す
る処理はAI-SDKのなか に隠蔽されてる)
40 添削アプリ - UI - ネタバレの有無 AIからのレスポンスを元にDOMを更新 { // 文章中にネタバレがあるかどうか
“containsSpoiler”: true, }
41 添削アプリ - UI - Typo添削 AIからのレスポンスを元にDOMを更新 楽しめまあた “typo”: {
“start”: 10, “end”: 12, “text”: “ました” } 楽しめ<span className=”line-through”>まあた</span>ました 誤字の箇所に取り消し線をつけ 後ろに正しい⽂字列を付与
42 組み込みの例 AI SDKを使うと⽇頃書いてる React のコードに 簡単にAIの機能を組み込むことができる
43 今⽇喋ること • AIをWEBに組み込むモチベーション • Vercel の AI SDKとは? •
組み込みの例 • もっと知りたい⽅へ • まとめ
44 もっと知りたい⽅へ • 公式ドキュメントをみる ◦ https://sdk.vercel.ai/ • AI SDKを利⽤しているオープンソースを読む ◦
https://github.com/supabase-community/postgres-new
45 まとめ • AIをWEBアプリに組み込むと今までは難し かったことが簡単にできる • AIをフロントエンドに簡単に組み込むSDKが VercelのAI SDK •
AI SDKの主要機能 ◦ Provider, Prompts, Tools, Streaming • ⼯夫次第でいろんなユースケースで使える
46