Amazon Web Services ブログ
React Native と AWS Amplify、Amazon Bedrock Knowledge Base を利用したトラベルプランナーの構築
本記事は、2024 年 11 月 22 日に公開された “Build a Travel Planner with React Native, AWS Amplify, and Amazon Bedrock Knowledge Base” を翻訳したものです。翻訳は Solutions Architect の 吉村 が担当しました。
Amplify AI kit の発表により、カスタム UI コンポーネント、会話の履歴、会話の流れに外部データを追加する方法を学びました。この記事では、React Native を使用してトラベルプランアプリケーションを構築する方法を学びます。このアプリケーションは、 Knowledge Base に基づいて、Retrieval Augmented Generation (RAG) および Large Language Models (LLM) を使用して応答を生成します。
大規模言語モデル (LLM) に最新の独自情報を付与するには、RAG という手法を使用できます。これは、企業のデータソースからデータを取得し、プロンプトを強化することで、より関連性が高く正確な応答を提供できるようになります。Amazon Bedrock Knowledge Bases を使えば、会社のプライベートデータソースから FM とエージェントにコンテキスト情報を提供し、RAG がより関連性があり、正確で、カスタマイズされた応答を提供できます。
この記事のバックエンドの構築、Knowledge Base の作成、RAG の部分は、どのウェブフレームワークでも使用できます。 ただし、このチュートリアルでは React Native でアプリケーションを構築することを想定しており、それに応じてフロントエンドのコードを説明します。
Amplify アプリの構築
Amplify アプリケーションを作成するには、アプリケーションのルートフォルダで create-amplify コマンドを実行する必要があります。
これにより、AWS Amplify に対してプロジェクトに必要な依存関係がインストールされます。IDE でプロジェクトを開くと、新しい amplify
フォルダが表示されます。
このフォルダには、メール認証付きのシンプルな ToDo アプリケーションが含まれています。関連するカテゴリのリソースは、それぞれ専用のフォルダの下に定義されています。たとえば、認証については auth/resource.ts
ファイルを更新します。
ユーザーにパーソナライズされた体験のためのサインアップ認証フローを追加しましょう。まず auth/resource.ts
ファイルを開き、次のように更新します。
これにより、ユーザー確認メールがカスタマイズされ、登録時にユーザー名の作成が求められます。次に、Amplify サンドボックスを介して、初期デプロイを行います。個人用のクラウドサンドボックス環境は、フルスタックアプリを迅速に構築、テストしていてレーションを回すことができる、分離された開発スペースを提供します。チームの各開発者は、クラウドリソースに接続された使い捨てのサンドボックス環境を使用できます。それでは最初のデプロイを行いましょう。その前に、backend.ts
を次のように更新してください。
データリソースをコメントアウトしておくことで、データリソースをデプロイしないでおくこともできます。次のコマンドを実行して、認証用のサンドボックス環境を起動します。
次のステップはフロントエンドの実装です。これには、Amplify UI コンポーネントを使用します。Amplify UI とは、アクセシビリティが高く、テーマ設定が可能で、高パフォーマンスなコンポーネントの集合体で、クラウドに直接接続することができます。わずか数行のコードで、複雑なタスクを些細なタスクに変えることができます。
まず、UI ライブラリを使うために必要なライブラリをインストールします。
React Native の最新バージョンと UI ライブラリが競合するため、forceフラグを追加しています。
iOS 向けに Pod をインストールして、ネイティブライブラリにライブラリをバインドします。
次に、App.tsx
内の App
コンポーネントを次のように更新してください:
以下は主な変更点です。
fetchUserAttributes
を介して、定義した追加属性を取得しています。useAuthenticator
フックを使用して、signOut ボタンを呼び出しています。Authenticator
コンポーネントとAuthenticator.Provider
コンポーネントで、認証用の UI を作成し、認証フローを制御します。
認証フローはテストする準備ができました。次のステップは AI 機能を実装することです。
Amplify の新しい AI 機能により、生成 AI を使いやすくなりました。たとえばコンポーネントを生成する場合は、生成機能を使ってみると、どのようになるかを確認できます。data/resource.ts
ファイルを開き、次のように更新してください:
このおかげで、質問に対する回答を生成できます。App.tsx
ファイルを開き、どこからでも以下のように generateDestination を呼び出せば、目的地を生成できるようになりました。
Knowledge Base の作成
(LLM に与える) 情報は、プロンプトの強さに大きく左右されます。また、情報は AI モデルとその特性に関するものです。しかし、Amazon Bedrock Knowledge Base を使えば、プロンプトにさらに情報を与えることができます。
以下のような基本的な Knowledge Base を作成します。
都市 | 国 | 人口 | 説明 | 金融ハブ | 首都? | ランキング |
---|---|---|---|---|---|---|
東京 | 日本 | 973 万人 | 東京は日本の首都です。超近代的な高層ビルと歴史的な寺院と庭園が共存しています。独自のポップカルチャー、先進的な技術、そして絶品の料理で知られています。世界最大の魚市場と最も混雑した横断歩道があります。 | はい | はい | 1 |
イスタンブール | トルコ | 1,546 万人 | イスタンブールはボスポラス海峡に跨っており、ヨーロッパとアジアの境目に位置しています。歴史に富み、ビザンティンとオスマンの建築物が見られます。バザール、ハンマーム、様々な料理で有名です。アヤソフィアとブルーモスクは象徴的な建造物です。 | はい | いいえ | 5 |
ベルリン | ドイツ | 370 万人 | ベルリンはドイツの首都で、活気ある芸術シーンと現代的な建築物、複雑な歴史で知られています。世界トップクラスの博物館、多様な地区、ベルリンの壁の残骸があります。テクノクラブ、ストリートアート、多文化な料理で有名です。 | いいえ | はい | 2 |
ニューヨーク | アメリカ | 880 万人 | ニューヨーク市は金融、芸術、文化の世界的ハブです。自由の女神像やエンパイアステートビルなど有名な観光スポットがあります。多様な地区、ブロードウェイの劇場、世界トップクラスの博物館、食の多様性で知られています。植民地時代から現代までの豊かな歴史があります。 | はい | いいえ | 4 |
プラハ | チェコ共和国 | 130 万人 | プラハはチェコ共和国の首都で、「百塔の都市」として知られています。プラハ城やカレル橋など中世の建築物で有名です。ビール文化、クラシック音楽の遺産、よく保存された旧市街広場で名高いです。 | いいえ | はい | 3 |
Amazon S3 コンソールに移動し、Create bucket ボタンをクリックします。
バケットに一意の名前を選び、他はデフォルトの選択のままにします。次に、ファイルを S3 バケットにアップロードします。
それでは Knowledge Base を作成しましょう。まず AWS コンソールを開き、Amazon Bedrock ページへ移動します。ページにアクセスしたら、左側のメニューから Knowledge bases を選択してください。
Create knowledge base ボタンをクリックしてください。すべてのデフォルト値のままにして (S3 が選択されていることを確認) 次へをクリックします。次のページで、S3 バケットからデータソースを選択してください。
データを変換するための埋め込みモデルを選択してください。
お客様に代わって Amazon が Vector Store を作成するか、以前作成したストアを選択して、Bedrock がデータの埋め込みを格納、更新、管理できるようにします。これで Knowledge Base を作成する準備が整いました。
Amazon Bedrock Knowledge Base のデフォルトのセットアップは OpenSearch Serverless で、これは使っていない間もデフォルトのコストがかかります。注意していないと AWS から請求が来るかもしれません。もしこれをテストするだけなら、終了後に必ず OpenSearch Serverless インスタンスをオフにしてください。
既にコンソール上で Knowledge Base をテストし、データが期待通りに動作するかどうかを確認できます。
Knowledge Base をアプリケーションで使用する時が来ました。
作成した Knowledge Base の利用
まず、いくつか片付けをしましょう。 Knowledge Base に対応した会話を作成し、そのデータベースと通信するための AppSync リゾルバーに接続する必要があります。data/resource.ts
ファイルを次のように更新してください。
これにより、先ほど作成した Knowledge Base がツールとして conversation に追加されます。description は、LLM が Knowledge Base とやり取りするための説明テキストになります。js リゾルバーを追加するには、bedrockresolver.js というファイルを作成し、次のコードを貼り付けてください。
これにより、AppSync を通じて会話のコンテキストに指定した ID の Knowledge Base が取得されます。最後に、backend.ts
ファイルの Lambda からデータソースへのポリシーを更新する必要があります。
最後に、UI を次のように更新してストリーミングを処理します。
上記のコードで最も重要な部分は以下の通りです。
const { useAIConversation } = createAIHooks(client);
- 会話情報を取得し、メッセージを受信・送信するための React フックを作成します
-
- メッセージを受信し、メッセージを送信します
全体として、このアプリは取得した情報をリアルタイムに取得して、画面に表示します。
サンドボックスを再デプロイすると、アプリケーションが提供された情報を使用して Knowledge Base を呼び出すことがわかります。それではアプリケーションを実行して、その様子を確認しましょう。
クリーンアップ
このブログ記事では、Amazon Bedrock Knowledge Base を通して LLM を呼び出す方法を学びました。最後に、次のコマンドを実行して Amplify サンドボックス内のリソースを削除することを忘れずに行ってください。
また、ベクトルデータベースは高価な場合があるので、アプリケーションのテストが終わったら、必ず Amazon OpenSearch Serverless ダッシュボードからインスタンスを削除してください。
おわりに
このブログ記事では、 Knowledge Base の作成方法とアプリケーションでの利用方法を学びました。さらに詳しく知りたい場合は、AI 入門ガイドをご覧ください。Amplify AI kit の使い方について詳しく説明しています。