Vercel AI SDK触ってみた

NEWT Tech Talk vol.7 フロントエンドのリアルな課題に向き合う 登壇資料
https://reiwatravel.connpass.com/event/313932/
#newt_techtalk

1. CONFIDENTIAL
 © 2023 Reiwa Travel, Inc.
 1

2. CONFIDENTIAL
 © 2023 Reiwa Travel, Inc.
 ⼈物紹介⽤スライド 2
 Background 2017 : クックパッドに新卒⼊社 2017 - 2021 : Web3事業のGincoに創業時にジョイン 2021 - : 令和トラベルに創業時にジョイン ‧初期はiOSアプリの⽴ち上げ、今はフロントエンド メイン、4⽉から新設した機械学習チーム ‧最近⾏ってよかった旅⾏先は、物価が安くてご飯 の美味しいポルトガル󰐨 SNS X: @ippo_012 GitHub: ippo012 フロントエンドチーム / 機械学習チーム Ippo Matsui
3. CONFIDENTIAL
 © 2023 Reiwa Travel, Inc.
 NEWTの実現したいこと
4. CONFIDENTIAL
 © 2023 Reiwa Travel, Inc.
 海外ツアー予約 (NEWTツアー) ホテル予約 (NEWTホテル) 航空券予約 (NEWT Air) アクティビティ予約 保険‧送迎予約 旅⾏メディア (NEWT Magazine) 旅⾏相談 (Travel Concierge) eSIM, Wi-Fiレンタル など 予約‧旅程管理 ML/LLM活⽤による旅⾏UXの強化 旅⾏計画Copilot / パーソナライズドレコメンド / プライシング最適化 / AIコンシェルジュによる旅⾏サポート etc... グループ旅⾏管理 (NEWT Group) 旅⾏検討 予約 旅⾏準備‧渡航 旅⾏のスーパーアプリ化とML/LLM*を活⽤した旅⾏UXの向上、グローバル対応を推進する 成⻑戦略 プロダクト戦略 - NEWTスマートトラベル構想 * ML : Machine Learning（機械学習） LLM : Large Language Models（大規模言語モデル） 4

5. CONFIDENTIAL
 © 2023 Reiwa Travel, Inc.
 機械学習チームについて ‧MLを利⽤して、カスタマーに最⾼の旅⾏体験を提供することをやっていくチームです ‧直近の注⼒テーマは⽣成AI / LLM ‧旅⾏ x MLに興味ある⽅、⼀緒にやりませんか？ 5
 PdM : miyatti Engineer : ippo 令和トラベル 採⽤ページ : https://www.reiwatravel.co.jp/recruit
6. CONFIDENTIAL
 © 2023 Reiwa Travel, Inc.
 Vercel AI SDKについて
7. CONFIDENTIAL
 © 2023 Reiwa Travel, Inc.
 Vercel AI SDK ‧AI を活⽤したユーザーインターフェイスの構築に役⽴つツール ‧Server-Sent Events (SSE) を使ったUIを簡単に実装できる  ‧ex) ChatGPTのようにテキストをパラパラ表⽰する ‧Next.js, Nuxt.js, Svelte等のフレームワークをサポート ‧OpenAI, Anthropic, Google等のLLMをサポート 7
 Vercel AI SDK : https://sdk.vercel.ai/docs vercel / ai : https://github.com/vercel/ai An Introduction to Streaming on the Web : https://vercel.com/blog/an-introduction-to-streaming-on-the-web
8. CONFIDENTIAL
 © 2023 Reiwa Travel, Inc.
 簡単な実装例（バックエンド） ‧/api/chat にエンドポイントを⽤意する ‧OpenAIを呼び出しレスポンスを受け取る ‧レスポンスをOpenAIStreamに変換する ‧StreamingTextResponseにして返す ‧ランタイムをedgeに設定する 8
 Getting Started : https://sdk.vercel.ai/docs/getting-started
9. CONFIDENTIAL
 © 2023 Reiwa Travel, Inc.
 簡単な実装例（フロントエンド） ‧useChatフックを呼び出す  ‧デフォルトで /api/chat が接続されている ‧メッセージ送信するとチャット履歴に追加され、API が呼び出される ‧レスポンスはチャット履歴にストリーミングされる ‧各種プロパティ  ‧messages = チャット履歴  ‧input = ⼊⼒した値  ‧handleInputChange = ⼊⼒フィールドへの⼊⼒操作  ‧handleSubmit = フォームの送信 9
 Getting Started : https://sdk.vercel.ai/docs/getting-started
10. CONFIDENTIAL
 © 2023 Reiwa Travel, Inc.
 Generative UI
11. CONFIDENTIAL
 © 2023 Reiwa Travel, Inc.
 Generative UI ‧AI SDK 3.0 (2024年3⽉リリース)で新たに追加された機能 ‧プレーンテキストだけでなくカスタマイズしたUIをレンダリングできる ‧React Server Components (RSC) を利⽤してLLMから直接カスタムUIをストリーミングする ‧現在はNext.js App Routerのみサポート ‧他のフレームワークもRSC対応後にサポート予定 ‧ai/rsc モジュールを利⽤する 11
 Introducing AI SDK 3.0 with Generative UI support : https://vercel.com/blog/ai-sdk-3-generative-ui
12. CONFIDENTIAL
 © 2023 Reiwa Travel, Inc.
 Generative UI 12

13. CONFIDENTIAL
 © 2023 Reiwa Travel, Inc.
 Generative UI - 2つの状態 ‧AIState  ‧LLMが必要とするすべてのコンテキストをJSON形式で表現   ‧ex) ユーザーとアシスタント間の会話履歴を保存  ‧メッセージの⽣成⽇時など、追加のメタ情報も保存可能  ‧サーバーとクライアント両⽅でアクセス/変更可能 ‧UIState  ‧UIの表⽰に使⽤される、クライアント側の状態を管理する  ‧useStateと似た動作で、LLMから返されたデータやUI要素を保持  ‧サーバーからはアクセス不可 13
 Generative UI : https://sdk.vercel.ai/docs/concepts/ai-rsc
14. CONFIDENTIAL
 © 2023 Reiwa Travel, Inc.
 Generative UI - 簡単な実装の流れ① ‧createAIでインスタンス初期化  ‧ai/rsc インスタンスを作成  ‧AIStateとUIStateの初期値を設定  ‧Server Actionsを設定 (後述) ‧<AI />でラップする  ‧レイアウトや主要なコンポーネントで <AI/> コンテキストプロバ イダを使⽤してラップする  ‧コンポーネントがAIとUIの状態にアクセス可能になる 14
 createAI : https://sdk.vercel.ai/docs/api-reference/generative-ui/create-ai
15. CONFIDENTIAL
 © 2023 Reiwa Travel, Inc.
 Generative UI - 簡単な実装の流れ② ‧メッセージを送信するServer Actionsを作成する  ‧AIStateを呼び出し、ユーザーの⼊⼒を追加  ‧render 関数を設定する  ‧各種プロパティ   ‧getMutableAIStateAI: AIの状態を更新するためのメソッド   ‧render: LLMのレスポンスからストリーミング可能な UI を作成するため ヘルパー関数 15

16. CONFIDENTIAL
 © 2023 Reiwa Travel, Inc.
 Generative UI - 簡単な実装の流れ③ ‧render 関数にテキストを設定する  ‧デフォルトではLLMのレスポンスはReact Fragment (<></>) で ラップされている  ‧textプロパティを利⽤し、テキストレスポンスのためにスト リーミングされるコンポーネントをカスタマイズできる  ‧レスポンスはAIStateに追加する 16

17. CONFIDENTIAL
 © 2023 Reiwa Travel, Inc.
 Generative UI - 簡単な実装の流れ④ ‧render 関数にカスタム UI を設定する  ‧toolsプロパティを利⽤し、Fucntion Callingでフライト情 報の取得とコンポーネントの⽣成を⾏う  ‧Fucntion CallingのパラメータにはZodのスキーマを利⽤  ‧フライトの便名は定義したパラメータから推測される  ‧OpenAI互換のFunctionsまたはToolsをサポートするモデ ルのみ利⽤可能 17

18. CONFIDENTIAL
 © 2023 Reiwa Travel, Inc.
 Generative UI - 簡単な実装の流れ⑤ ‧クライアント側でメッセージの送受信   ‧1番⽬のsetMessagesでユーザーが⼊⼒したメッセージを表⽰  ‧Server ActionsのsubmitUserMessageを呼び出す  ‧2番⽬ののsetMessagesでServer Actionsの結果を表⽰  ‧各種プロパティ   ‧useUIState: UIの状態 (メッセージ) を管理するフック   ‧useActions: Server Actionsにアクセスするためのフック 18

19. CONFIDENTIAL
 © 2023 Reiwa Travel, Inc.
 Generative UI - 簡単な実装の全体 ‧実装全体 19

20. CONFIDENTIAL
 © 2023 Reiwa Travel, Inc.
 AI Core (experimental)
21. CONFIDENTIAL
 © 2023 Reiwa Travel, Inc.
 AI Core (experimental) ‧各種LLMを統⼀して呼び出すためのインターフェース ‧現在はまだexperimental ‧⽤意されているAPI  ‧generateText  ‧streamText  ‧generateObject  ‧streamObject 21
 AI Core (experimental) : https://sdk.vercel.ai/docs/ai-core
22. CONFIDENTIAL
 © 2023 Reiwa Travel, Inc.
 AI Core (experimental) - generateText / streamText ‧各プロバイダを共通のインターフェースでシンプルに書ける ‧プロバイダ毎にモジュールをインストール必要がある (ex: @ai-sdk/openai ) 22
 streamText API : https://sdk.vercel.ai/docs/ai-core/stream-text
23. CONFIDENTIAL
 © 2023 Reiwa Travel, Inc.
 AI Core (experimental) - generateObject / streamObject ‧Zodのスキーマに⼀致するオブジェクトを⽣成できる ‧LangChainでいうStructured output parser ‧アプリケーションでLLMを扱うときに便利 23
 generateObject API : https://sdk.vercel.ai/docs/ai-core/generate-object
24. CONFIDENTIAL
 © 2023 Reiwa Travel, Inc.
 AI Core (experimental) - generateObject / streamObjectの内部実装 ‧ユーザーが⼊⼒したプロンプト、Zodのスキーマ、 PREFIX、SUFFIXを結合している ‧OpenAIの場合、JSON Modeをラップしている 24
 inject-json-schema-into-system.ts : https://github.com/vercel/ai/blob/main/packages/core/core/generate-object/inject-json-schema-into-system.ts generate-object.ts : https://github.com/vercel/ai/blob/main/packages/core/core/generate-object/generate-object.ts#L87-L105
25. CONFIDENTIAL
 © 2023 Reiwa Travel, Inc.
 おわりに Vercel AI SDK ‧AI を活⽤したユーザーインターフェイスの構築に役⽴つツール ‧Server-Sent Events (SSE) を使ったUIを簡単に実装できる ‧Generative UI  ‧プレーンテキストだけでなくカスタマイズしたUIをレンダリングできる ‧AI Core (experimental)  ‧各種LLMを統⼀して呼び出すためのインターフェース ‧experimentalのものは、patch updateでbreaking changeが⼊ったりする 25
 令和トラベル 採⽤ページ : https://www.reiwatravel.co.jp/recruit
26. CONFIDENTIAL
 © 2023 Reiwa Travel, Inc.
 再掲) 機械学習チームについて ‧MLを利⽤して、カスタマーに最⾼の旅⾏体験を提供することをやっていくチームです ‧直近の注⼒テーマは⽣成AI / LLM ‧旅⾏ x MLに興味ある⽅、⼀緒にやりませんか？ 26
 PdM : miyatti Engineer : ippo 令和トラベル 採⽤ページ : https://www.reiwatravel.co.jp/recruit
27. Thank you!
 CONFIDENTIAL
 © 2023 Reiwa Travel, Inc.
 27