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

by sutetotanuki

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

2 今⽇喋ること ● AIをWEBに組み込むモチベーション ● Vercel の AI SDKとは？ ● 組み込みの例 ● もっと知りたい⽅へ ● まとめ

Slide 3

Slide 3 text

3 今⽇喋ること ● AIをWEBに組み込むモチベーション ● Vercel の AI SDKとは？ ● 組み込みの例 ● もっと知りたい⽅へ ● まとめ

Slide 4

Slide 4 text

4 AIをWEBアプリに組み込むよくある活⽤例 ● RAGで⾃社特有の情報をチャットで検索 ● 公開する⽂章をAIを使って添削 ● デザインシステムで拡張したAIでUI⽣成

Slide 5

Slide 5 text

5 AIを組み込む時のよくある実装 ● AIとのAPI通信 ○ AIとはAPIで通信する ● チャットの履歴の保持 ○ コンテキストを履歴からAIに与える ● ストリーミング機能 ○ AIは処理が完了するまで時間がかかる ● RAG ○ LLM(AI)に外部情報を組み合わせる

Slide 6

Slide 6 text

6 AIの組み込みをサポートするライブラリ ● LangChain ● LlmaxIndex ● HeyStack ● AI SDK

Slide 7

Slide 7 text

7 今⽇喋ること ● AIをWEBに組み込むモチベーション ● Vercel の AI SDKとは？ ● 組み込みの例 ● もっと知りたい⽅へ ● まとめ

Slide 8

Slide 8 text

8 Vercel の AI SDKとは？フロントエンドフレームワークを使って作成したWEBアプリケーションに AIを活⽤した機能を組み込むためのSDK

Slide 9

Slide 9 text

9 AI SDKの対応フレームワーク ● React ● Next.js(RSCも experimental だけど対応) ● Svelte ● Nuxt ● Node.js

Slide 10

Slide 10 text

10 AI SDKの主要な機能 ● Provider and Models ● Prompts ● Tools ● Streaming

Slide 11

Slide 11 text

11 Provider and Models 複数のAI提供元やモデルをコードの変更なしに⼊れ替えることができる AI SDK

Slide 12

Slide 12 text

12 Provider and Models - 対応 Provider ● OpenAI ● Azure ● Anthropic ● Amazon Bedrock ● Google Vertex ● Cohere ● LLmaCPP ● …etc

Slide 13

Slide 13 text

13 Provider and Models - 注意点ただし、全てのAI SDKの機能を全てのモデルで使えるわけでない点に注意が必要例えばgpt-4は画像⼊⼒機能は使えない

Slide 14

Slide 14 text

14 Prompts AI SDKは複数種類のプロンプトを提供してる ● テキストプロンプト ● 画像プロンプト ● システムプロンプト ● メッセージプロンプト

Slide 15

Slide 15 text

15 Prompts - システムプロンプトシステムに制約を加えたい時に設定するプロンプトあなたは⼦供向け教育AIです。⼩学3年⽣でも理解できる⾔葉を使い、100語以内で回答してください。専⾨⽤語は簡単に説明し、回答の最後に関連した⾯⽩い雑学か質問を加えてください例)

Slide 16

Slide 16 text

16 Prompts - メッセージプロンプト AIにメッセージを配列で指定することができる会話の履歴をAIに渡しコンテキストを⾼めれる messages: [ { role: 'user', content: '質問していいですか？' }, { role: 'assistant', content: '⼤丈夫です。何が聞きたいですか？' }, { role: 'user', content: '⽣成AIについて概要を教えてください' }, ],

Slide 17

Slide 17 text

17 Tools AIはAIの外側の世界に⼲渉することができないそのため、APIを呼び出し等を⾏えなかったり学習されていないリアルタイムの情報を取得できない。これらを解決するのが Tools

Slide 18

Slide 18 text

18 Tools AIから呼び出される関数をあらかじめ⽤意しておき。AIが与えられたコンテキストから、関数を選んで呼び出す function getWeather... function doSomething... 現在の天気を教えてユーザーの⼊⼒からAIが判断し呼び出し

Slide 19

Slide 19 text

19 Tools AIに外界との接点となるToolsを使うことで以下のようなことが可能になる ● リアルタイム情報の取得 ● 外部APIの呼び出し(例: 予約API、購⼊API)

Slide 20

Slide 20 text

20 Streaming ⽣成AIは返答を返すのに時間がかかる。その間ローディングを表⽰することになる少しずつ回答を表⽰することでユーザー体験を向上できる

Slide 21

Slide 21 text

21 今⽇喋ること ● AIをWEBに組み込むモチベーション ● Vercel の AI SDKとは？ ● 組み込みの例 ● もっと知りたい⽅へ ● まとめ

Slide 22

Slide 22 text

22 組み込みの例 AI SDKを使って作った2つのサンプルアプリを例に組み込みの実例を紹介 1. チャットアプリ 2. 添削アプリ

Slide 23

Slide 23 text

23 1. チャットアプリ⽣成AIを使ったシンプルなチャットをNext.jsで作成したWEBアプリケーションに組み込みます徐々に回答が表⽰ (ストリーミング)

Slide 24

Slide 24 text

24 チャットアプリ - 使⽤してるAI SDKの機能以下のAI SDKの機能を使⽤ ● Provider ○ Amazon Bedrock Provider ● Message Prompts ○ 会話履歴のやり取り ● Streaming ○ 徐々にレスポンスを表⽰する

Slide 25

Slide 25 text

25 チャットアプリ - 全体構成 Next.jsのAPI Routeでエンドポイントを作成しそこからAIと通信 Amazon Bedrock Component GET /api/chat API Route Provider

Slide 26

Slide 26 text

26 チャットアプリ - API通信 APIとコンポーネントはMessage Promptで会話履歴を全てペイロードに載せて通信 APIからのレスポンスはStreamingで返却 Streaming GET /api/chat Message Prompt

Slide 27

Slide 27 text

27 チャットアプリ - Providerの設定 Amazon Bedrockを使う場合それ⽤の Providerをインストールし、 Bedrockに渡すパラメーターを設定する $ pnpm add @ai-sdk/amazon-bedrock

Slide 28

Slide 28 text

28 チャットアプリ - Providerの設定 Modelを指定

Slide 29

Slide 29 text

29 チャットアプリ - API Streamでレスポンスを返したいので AI SDKが提供してるstreamText関数を使⽤これだけでストリームでレスポンスできる

Slide 30

Slide 30 text

30 チャットアプリ - UI AI SDKが提供してる useChat カスタムフックをつかつ Messages Prompts で会話履歴のデータがストリームで受信される

Slide 31

Slide 31 text

31 2. 添削アプリ映画レビューのサイトの添削機能をイメージ以下をチェック ● Typo ● ネタバレの有無 ● 不適切な表現の有無 ● 全体的な添削

Slide 32

Slide 32 text

32 2. 添削アプリネタバレの有無を表⽰誤字をエディタ上で添削

Slide 33

Slide 33 text

33 添削アプリ - 使⽤してるAI SDKの機能以下の機能を使⽤ ● Provider ○ Amazon Bedrock Provider ● Generate Object ○ AIのレスポンスがオブジェクトになる

Slide 34

Slide 34 text

34 添削アプリ - 全体像 AIにレビュー内容をテキストで送信レスポンスはUIで扱いやすい構造化データ Generate Object Prompt 猫好きなので... { “containsSpoiler”: false, }

Slide 35

Slide 35 text

35 添削アプリ - API AI SDKが提供する generateObject関数を使い以下を指定 ● システムプロンプト ● zodでレスポンスのスキーマ

Slide 36

Slide 36 text

36 添削アプリ - システムプロンプト役割を与え、レスポンスのオブジェクトに設定する内容を⾃然⾔語で指⽰してますあなたは、映画のレビューサイトに投稿されるレビューを添削するAIです。ユーザーから与えられた情報を添削してください添削する内容は以下の通りです 1. 誤字、脱字、⽂章の誤り 2. ネタバレの有無 3. 社会良俗に反する表現の有無 4. 全体を通しての添削 1の指摘は誤ってる⽂字をハイライトさせるため、JSON形式で誤ってる⽂字の開始、終了位置、⼊れ替えると正しくなる⽂字を配列で返してください

Slide 37

Slide 37 text

37 添削アプリ - オブジェクト { // typoの位置情報 “typo”: { “start”: 0, “end”: 3, “text”: “ます” } // 文章中にネタバレがあるかどうか “containsSpoiler”: true, // 公序良俗に反する記述があるかどうか “containsInappropriateExpression”: false }

Slide 38

Slide 38 text

38 添削アプリ - レスポンスの定義 AIからのレスポンスをZodで定義する

Slide 39

Slide 39 text

39 添削アプリ - UI AI SDKのuseObject カスタムフックを使い AIからのデータを取得 (AIからのデータをオブジェクトに変換する処理はAI-SDKのなかに隠蔽されてる)

Slide 40

Slide 40 text

40 添削アプリ - UI - ネタバレの有無 AIからのレスポンスを元にDOMを更新 { // 文章中にネタバレがあるかどうか “containsSpoiler”: true, }

Slide 41

Slide 41 text

41 添削アプリ - UI - Typo添削 AIからのレスポンスを元にDOMを更新楽しめまあた “typo”: { “start”: 10, “end”: 12, “text”: “ました” } 楽しめまあたました誤字の箇所に取り消し線をつけ後ろに正しい⽂字列を付与

Slide 42

Slide 42 text

42 組み込みの例 AI SDKを使うと⽇頃書いてる React のコードに簡単にAIの機能を組み込むことができる

Slide 43

Slide 43 text

43 今⽇喋ること ● AIをWEBに組み込むモチベーション ● Vercel の AI SDKとは？ ● 組み込みの例 ● もっと知りたい⽅へ ● まとめ

Slide 44

Slide 44 text

44 もっと知りたい⽅へ ● 公式ドキュメントをみる ○ https://sdk.vercel.ai/ ● AI SDKを利⽤しているオープンソースを読む ○ https://github.com/supabase-community/postgres-new

Slide 45

Slide 45 text

45 まとめ ● AIをWEBアプリに組み込むと今までは難しかったことが簡単にできる ● AIをフロントエンドに簡単に組み込むSDKが VercelのAI SDK ● AI SDKの主要機能 ○ Provider, Prompts, Tools, Streaming ● ⼯夫次第でいろんなユースケースで使える