Vercel AI SDK を使って Next.js で AIアプリケーションを 作成する方法のご紹介

Transcript

1. Vercel AI SDK を使って Next.js で AIアプリケーションを 作成する⽅法のご紹介 1
2. 2 今⽇喋ること • AIをWEBに組み込むモチベーション • Vercel の AI SDKとは？ • 組み込みの例 • もっと知りたい⽅へ • まとめ
3. 3 今⽇喋ること • AIをWEBに組み込むモチベーション • Vercel の AI SDKとは？ • 組み込みの例 • もっと知りたい⽅へ • まとめ
4. 4 AIをWEBアプリに組み込むよくある活⽤例 • RAGで⾃社特有の情報をチャットで検索 • 公開する⽂章をAIを使って添削 • デザインシステムで拡張したAIでUI⽣成
5. 5 AIを組み込む時のよくある実装 • AIとのAPI通信 ◦ AIとはAPIで通信する • チャットの履歴の保持 ◦ コンテキストを履歴からAIに与える • ストリーミング機能 ◦ AIは処理が完了するまで時間がかかる • RAG ◦ LLM(AI)に外部情報を組み合わせる
6. 6 AIの組み込みをサポートするライブラリ • LangChain • LlmaxIndex • HeyStack • AI SDK
7. 7 今⽇喋ること • AIをWEBに組み込むモチベーション • Vercel の AI SDKとは？ • 組み込みの例 • もっと知りたい⽅へ • まとめ
8. 8 Vercel の AI SDKとは？ フロントエンドフレームワークを使って 作成したWEBアプリケーションに AIを活⽤した機能を組み込むためのSDK
9. 9 AI SDKの対応フレームワーク • React • Next.js(RSCも experimental だけど対応) • Svelte • Nuxt • Node.js
10. 10 AI SDKの主要な機能 • Provider and Models • Prompts • Tools • Streaming
11. 11 Provider and Models 複数のAI提供元やモデルをコードの 変更なしに⼊れ替えることができる AI SDK
12. 12 Provider and Models - 対応 Provider • OpenAI • Azure • Anthropic • Amazon Bedrock • Google Vertex • Cohere • LLmaCPP • …etc
13. 13 Provider and Models - 注意点 ただし、全てのAI SDKの機能を全てのモデルで 使えるわけでない点に注意が必要 例えばgpt-4は画像⼊⼒機能は使えない
14. 14 Prompts AI SDKは複数種類のプロンプトを提供してる • テキストプロンプト • 画像プロンプト • システムプロンプト • メッセージプロンプト
15. 15 Prompts - システムプロンプト システムに制約を加えたい時に 設定するプロンプト あなたは⼦供向け教育AIです。 ⼩学3年⽣でも理解できる⾔葉を使い、100語以内で回答してください。 専⾨⽤語は簡単に説明し、回答の最後に関連した⾯⽩い雑学か質問を加えてくだ さい 例)
16. 16 Prompts - メッセージプロンプト AIにメッセージを配列で指定することができる 会話の履歴をAIに渡しコンテキストを⾼めれる messages: [ { role: 'user', content: '質問していいですか？' }, { role: 'assistant', content: '⼤丈夫です。何が聞きたいですか？' }, { role: 'user', content: '⽣成AIについて概要を教えてください' }, ],
17. 17 Tools AIはAIの外側の世界に⼲渉することができない そのため、APIを呼び出し等を⾏えなかったり 学習されていないリアルタイムの情報を取得で きない。これらを解決するのが Tools
18. 18 Tools AIから呼び出される関数をあらかじめ⽤意して おき。AIが与えられたコンテキストから、 関数を選んで呼び出す function getWeather... function doSomething... 現在の天気を教えて ユーザーの⼊⼒からAIが判断し呼び出し
19. 19 Tools AIに外界との接点となるToolsを使うことで 以下のようなことが可能になる • リアルタイム情報の取得 • 外部APIの呼び出し(例: 予約API、購⼊API)
20. 20 Streaming ⽣成AIは返答を返すのに時間がかかる。 その間ローディングを表⽰することになる 少しずつ回答を表⽰することで ユーザー体験を向上できる
21. 21 今⽇喋ること • AIをWEBに組み込むモチベーション • Vercel の AI SDKとは？ • 組み込みの例 • もっと知りたい⽅へ • まとめ
22. 22 組み込みの例 AI SDKを使って作った2つのサンプルアプリを 例に組み込みの実例を紹介 1. チャットアプリ 2. 添削アプリ
23. 23 1. チャットアプリ ⽣成AIを使ったシンプルなチャットをNext.jsで 作成したWEBアプリケーションに組み込みます 徐々に回答が表⽰ (ストリーミング)
24. 24 チャットアプリ - 使⽤してるAI SDKの機能 以下のAI SDKの機能を使⽤ • Provider ◦ Amazon Bedrock Provider • Message Prompts ◦ 会話履歴のやり取り • Streaming ◦ 徐々にレスポンスを表⽰する
25. 25 チャットアプリ - 全体構成 Next.jsのAPI Routeでエンドポイントを作成し そこからAIと通信 Amazon Bedrock Component GET /api/chat API Route Provider
26. 26 チャットアプリ - API通信 APIとコンポーネントはMessage Promptで 会話履歴を全てペイロードに載せて通信 APIからのレスポンスはStreamingで返却 Streaming GET /api/chat Message Prompt
27. 27 チャットアプリ - Providerの設定 Amazon Bedrockを使う場合それ⽤の Providerをインストールし、 Bedrockに渡すパラメーターを設定する $ pnpm add @ai-sdk/amazon-bedrock
28. 28 チャットアプリ - Providerの設定 Modelを指定
29. 29 チャットアプリ - API Streamでレスポンスを返したいので AI SDKが提供してるstreamText関数を使⽤ これだけでストリームでレスポンスできる
30. 30 チャットアプリ - UI AI SDKが提供してる useChat カスタム フックをつかつ Messages Prompts で会話履歴のデータ がストリームで受信 される
31. 31 2. 添削アプリ 映画レビューのサイトの 添削機能をイメージ 以下をチェック • Typo • ネタバレの有無 • 不適切な表現の有無 • 全体的な添削
32. 32 2. 添削アプリ ネタバレの有無を表⽰ 誤字をエディタ上で 添削
33. 33 添削アプリ - 使⽤してるAI SDKの機能 以下の機能を使⽤ • Provider ◦ Amazon Bedrock Provider • Generate Object ◦ AIのレスポンスがオブジェクトになる
34. 34 添削アプリ - 全体像 AIにレビュー内容をテキストで送信 レスポンスはUIで扱いやすい構造化データ Generate Object Prompt 猫好きなので... { “containsSpoiler”: false, }
35. 35 添削アプリ - API AI SDKが提供する generateObject関数を 使い以下を指定 • システムプロンプト • zodでレスポンスの スキーマ
36. 36 添削アプリ - システムプロンプト 役割を与え、レスポンスのオブジェクトに 設定する内容を⾃然⾔語で指⽰してます あなたは、映画のレビューサイトに投稿されるレビューを添削するAIです。 ユーザーから与えられた情報を添削してください 添削する内容は以下の通りです 1. 誤字、脱字、⽂章の誤り 2. ネタバレの有無 3. 社会良俗に反する表現の有無 4. 全体を通しての添削 1の指摘は誤ってる⽂字をハイライトさせるため、JSON形式で誤ってる⽂字の開 始、終了位置、⼊れ替えると正しくなる⽂字を配列で返してください
37. 37 添削アプリ - オブジェクト { // typoの位置情報 “typo”: { “start”: 0, “end”: 3, “text”: “ます” } // 文章中にネタバレがあるかどうか “containsSpoiler”: true, // 公序良俗に反する記述があるかどうか “containsInappropriateExpression”: false }
38. 38 添削アプリ - レスポンスの定義 AIからのレスポンスをZodで定義する
39. 39 添削アプリ - UI AI SDKのuseObject カスタムフックを使い AIからのデータを取得 (AIからのデータを オブジェクトに変換す る処理はAI-SDKのなか に隠蔽されてる)
40. 40 添削アプリ - UI - ネタバレの有無 AIからのレスポンスを元にDOMを更新 { // 文章中にネタバレがあるかどうか “containsSpoiler”: true, }
41. 41 添削アプリ - UI - Typo添削 AIからのレスポンスを元にDOMを更新 楽しめまあた “typo”: { “start”: 10, “end”: 12, “text”: “ました” } 楽しめ<span className=”line-through”>まあた</span>ました 誤字の箇所に取り消し線をつけ 後ろに正しい⽂字列を付与
42. 42 組み込みの例 AI SDKを使うと⽇頃書いてる React のコードに 簡単にAIの機能を組み込むことができる
43. 43 今⽇喋ること • AIをWEBに組み込むモチベーション • Vercel の AI SDKとは？ • 組み込みの例 • もっと知りたい⽅へ • まとめ
44. 44 もっと知りたい⽅へ • 公式ドキュメントをみる ◦ https://sdk.vercel.ai/ • AI SDKを利⽤しているオープンソースを読む ◦ https://github.com/supabase-community/postgres-new
45. 45 まとめ • AIをWEBアプリに組み込むと今までは難し かったことが簡単にできる • AIをフロントエンドに簡単に組み込むSDKが VercelのAI SDK • AI SDKの主要機能 ◦ Provider, Prompts, Tools, Streaming • ⼯夫次第でいろんなユースケースで使える