Lock in $30 Savings on PRO—Offer Ends Soon! ⏳

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

sutetotanuki
November 01, 2024
170

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

sutetotanuki

November 01, 2024
Tweet

Transcript

  1. 5 AIを組み込む時のよくある実装 • AIとのAPI通信 ◦ AIとはAPIで通信する • チャットの履歴の保持 ◦ コンテキストを履歴からAIに与える

    • ストリーミング機能 ◦ AIは処理が完了するまで時間がかかる • RAG ◦ LLM(AI)に外部情報を組み合わせる
  2. 12 Provider and Models - 対応 Provider • OpenAI •

    Azure • Anthropic • Amazon Bedrock • Google Vertex • Cohere • LLmaCPP • …etc
  3. 16 Prompts - メッセージプロンプト AIにメッセージを配列で指定することができる 会話の履歴をAIに渡しコンテキストを⾼めれる messages: [ { role:

    'user', content: '質問していいですか?' }, { role: 'assistant', content: '⼤丈夫です。何が聞きたいですか?' }, { role: 'user', content: '⽣成AIについて概要を教えてください' }, ],
  4. 24 チャットアプリ - 使⽤してるAI SDKの機能 以下のAI SDKの機能を使⽤ • Provider ◦

    Amazon Bedrock Provider • Message Prompts ◦ 会話履歴のやり取り • Streaming ◦ 徐々にレスポンスを表⽰する
  5. 30 チャットアプリ - UI AI SDKが提供してる useChat カスタム フックをつかつ Messages

    Prompts で会話履歴のデータ がストリームで受信 される
  6. 33 添削アプリ - 使⽤してるAI SDKの機能 以下の機能を使⽤ • Provider ◦ Amazon

    Bedrock Provider • Generate Object ◦ AIのレスポンスがオブジェクトになる
  7. 36 添削アプリ - システムプロンプト 役割を与え、レスポンスのオブジェクトに 設定する内容を⾃然⾔語で指⽰してます あなたは、映画のレビューサイトに投稿されるレビューを添削するAIです。 ユーザーから与えられた情報を添削してください 添削する内容は以下の通りです 1.

    誤字、脱字、⽂章の誤り 2. ネタバレの有無 3. 社会良俗に反する表現の有無 4. 全体を通しての添削 1の指摘は誤ってる⽂字をハイライトさせるため、JSON形式で誤ってる⽂字の開 始、終了位置、⼊れ替えると正しくなる⽂字を配列で返してください
  8. 37 添削アプリ - オブジェクト { // typoの位置情報 “typo”: { “start”:

    0, “end”: 3, “text”: “ます” } // 文章中にネタバレがあるかどうか “containsSpoiler”: true, // 公序良俗に反する記述があるかどうか “containsInappropriateExpression”: false }
  9. 41 添削アプリ - UI - Typo添削 AIからのレスポンスを元にDOMを更新 楽しめまあた “typo”: {

    “start”: 10, “end”: 12, “text”: “ました” } 楽しめ<span className=”line-through”>まあた</span>ました 誤字の箇所に取り消し線をつけ 後ろに正しい⽂字列を付与
  10. 45 まとめ • AIをWEBアプリに組み込むと今までは難し かったことが簡単にできる • AIをフロントエンドに簡単に組み込むSDKが VercelのAI SDK •

    AI SDKの主要機能 ◦ Provider, Prompts, Tools, Streaming • ⼯夫次第でいろんなユースケースで使える
  11. 46