Vercel AI SDK触ってみた

Slide 1

Slide 1 text

Slide 2

Slide 2 text

CONFIDENTIAL  © 2023 Reiwa Travel, Inc.  ⼈物紹介⽤スライド 2  Background 2017 : クックパッドに新卒⼊社 2017 - 2021 : Web3事業のGincoに創業時にジョイン 2021 - : 令和トラベルに創業時にジョイン ‧初期はiOSアプリの⽴ち上げ、今はフロントエンドメイン、4⽉から新設した機械学習チーム ‧最近⾏ってよかった旅⾏先は、物価が安くてご飯の美味しいポルトガル󰐨 SNS X: @ippo_012 GitHub: ippo012 フロントエンドチーム / 機械学習チーム Ippo Matsui

Slide 3

Slide 3 text

Slide 4

Slide 4 text

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 

Slide 5

Slide 5 text

CONFIDENTIAL  © 2023 Reiwa Travel, Inc.  機械学習チームについて ‧MLを利⽤して、カスタマーに最⾼の旅⾏体験を提供することをやっていくチームです ‧直近の注⼒テーマは⽣成AI / LLM ‧旅⾏ x MLに興味ある⽅、⼀緒にやりませんか？ 5  PdM : miyatti Engineer : ippo 令和トラベル採⽤ページ : https://www.reiwatravel.co.jp/recruit

Slide 6

Slide 6 text

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

CONFIDENTIAL  © 2023 Reiwa Travel, Inc.  簡単な実装例（バックエンド） ‧/api/chat にエンドポイントを⽤意する ‧OpenAIを呼び出しレスポンスを受け取る ‧レスポンスをOpenAIStreamに変換する ‧StreamingTextResponseにして返す ‧ランタイムをedgeに設定する 8  Getting Started : https://sdk.vercel.ai/docs/getting-started

Slide 9

Slide 9 text

CONFIDENTIAL  © 2023 Reiwa Travel, Inc.  簡単な実装例（フロントエンド） ‧useChatフックを呼び出す ‧デフォルトで /api/chat が接続されている ‧メッセージ送信するとチャット履歴に追加され、API が呼び出される ‧レスポンスはチャット履歴にストリーミングされる ‧各種プロパティ ‧messages = チャット履歴 ‧input = ⼊⼒した値 ‧handleInputChange = ⼊⼒フィールドへの⼊⼒操作 ‧handleSubmit = フォームの送信 9  Getting Started : https://sdk.vercel.ai/docs/getting-started

Slide 10

Slide 10 text

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

CONFIDENTIAL  © 2023 Reiwa Travel, Inc.  Generative UI - 簡単な実装の流れ① ‧createAIでインスタンス初期化 ‧ai/rsc インスタンスを作成 ‧AIStateとUIStateの初期値を設定 ‧Server Actionsを設定 (後述) ‧でラップする ‧レイアウトや主要なコンポーネントでコンテキストプロバイダを使⽤してラップする ‧コンポーネントがAIとUIの状態にアクセス可能になる 14  createAI : https://sdk.vercel.ai/docs/api-reference/generative-ui/create-ai

Slide 15

Slide 15 text

CONFIDENTIAL  © 2023 Reiwa Travel, Inc.  Generative UI - 簡単な実装の流れ② ‧メッセージを送信するServer Actionsを作成する ‧AIStateを呼び出し、ユーザーの⼊⼒を追加 ‧render 関数を設定する ‧各種プロパティ ‧getMutableAIStateAI: AIの状態を更新するためのメソッド ‧render: LLMのレスポンスからストリーミング可能な UI を作成するためヘルパー関数 15 

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

Slide 20

Slide 20 text

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

CONFIDENTIAL  © 2023 Reiwa Travel, Inc.  再掲) 機械学習チームについて ‧MLを利⽤して、カスタマーに最⾼の旅⾏体験を提供することをやっていくチームです ‧直近の注⼒テーマは⽣成AI / LLM ‧旅⾏ x MLに興味ある⽅、⼀緒にやりませんか？ 26  PdM : miyatti Engineer : ippo 令和トラベル採⽤ページ : https://www.reiwatravel.co.jp/recruit