re:Invent 2024: AWS Amplify AIキットでフルスタックAI開発
はじめに
海外の様々な講演を日本語記事に書き起こすことで、隠れた良質な情報をもっと身近なものに。そんなコンセプトで進める本企画で今回取り上げるプレゼンテーションはこちら！
📖 AWS re:Invent 2024 - Full-stack AI with the AWS Amplify AI kit (FWM202)
この動画では、AWS AmplifyチームのメンバーがAmplify AI kitの機能と活用方法について詳しく解説しています。AWS Amplify Gen 2を基盤として、Amazon Bedrockへのコードファーストな開発体験の提供、LLMへの安全なデータアクセス、会話型インターフェースの構築という3つの重要な機能を実装しています。実際のデモでは、VRBOやAirbnbに似たバケーションレンタルアプリケーションを例に、Review Summarizerの実装やClaude 3.5 Sonnetを使用した会話型検索の追加、Amazon Bedrockのナレッジベースとの連携など、具体的な実装方法を示しています。また、Amazon Q Developerを活用したコード生成やデバッグの方法についても実演されており、Full-stack AIアプリケーション開発の実践的なアプローチが示されています。
※ 動画から自動生成した記事になります。誤字脱字や誤った内容が記載される可能性がありますので、正確な情報は動画本編をご覧ください。
※ 画像をクリックすると、動画中の該当シーンに遷移します。
re:Invent 2024関連の書き起こし記事については、こちらのSpreadsheet に情報をまとめています。合わせてご確認ください！
本編
AWS Amplifyを活用したFull-stack AIの紹介
ようこそ。今日は AWS Amplify を使用した Full-stack AI についてお話しします。私は Danny Banks です。AWS Amplify チームの Principal Design Technologist として働いています。 私は Banjo Obayomi です。Senior Developer Advocate として働いており、開発と AI が大好きです。そして私は Ali Spittel です。現在は North America の Head of Developer Advocacy を務めていますが、この4年間 Amplify チームにいました。そのため、Annie と私が多くの時間をかけて構築してきたプロダクトについてお話しできることをとても嬉しく思います。
まず、以下のような内容についてお話ししていきます。Amplify AI kit とは何か、なぜ素晴らしいのか。また、Amazon の AI ビルダーツールについても説明し、その後でたくさんのデモをお見せします。AI バックエンドの構築、チャットユーザーインターフェース、会話型検索について説明し、最後に Banjo がライブコーディングを行います。これには私も本当に感心しています。 最初にいくつか質問させてください。まず、Amplify を使用したことがある方は手を挙げていただけますか？たくさんの手が挙がりましたが、使用したことがない方もいらっしゃいますね。これはとても興味深いですね。 そして、Gen AI についての知識を1から5の段階で評価すると、どのくらいでしょうか？素晴らしいですね。AI に非常に詳しい方が多いようですが、AI の概念についても説明していきたいと思います。
AWS AIスタックとAmplify Gen 2の概要
AWS AI スタックについてお話ししましょう。私たちはこれを3つの層で考えています。最下層には、すべての大規模言語モデルを支えるインフラストラクチャがあります。AWS Trinium や AWS Inferentia といった独自のチップがあり、GPU も備えています。GPU を搭載した EC2 インスタンスをセットアップして、モデルのトレーニングやカスタムファインチューニングを行うことができます。また、Amazon SageMaker もあります。これは、独自のモデルをトレーニングし、推論エンドポイントを作成し、カスタムデータセットを扱いたい機械学習実践者向けのサービスです。
スタックを1層上に移動すると、ここは多くのビルダーや開発者が Amazon Bedrock を使用して AI を活用している層です。Claude、Meta、Mistral など、さまざまなモデルにアクセスできる多くの機能があり、Amazon のモデルも利用可能です。スタックの最上層に移ると、これらは生成 AI を活用したアプリケーションです。ソフトウェア開発者向けの Amazon Q Developer は IDE コンソールで動作し、質問することができます。Amazon Q Business はビジネスユーザー向けで、データを入力して文書とチャットができます。
Amazon Bedrock で利用可能なモデルをご紹介しますが、このスライドは毎回お見せするたびに古くなってしまいます。今週末までにも古くなるでしょうね。Meta や Stability AI などから常に新しいモデルがリリースされています。新しいモデルを試すにはさまざまな方法があります。会話 API で1行のコードを変更するだけで、異なるモデルを試すことができます。Amazon Bedrock で試せるモデルの幅広さには、本当にワクワクしています。 これは Stable Diffusion モデルを使用した面白い例で、とても美しい抽象画を生成できます。プロンプトが詳細であればあるほど、より良い結果が得られます。プロンプトエンジニアリングは、いわばアートでありサイエンスでもあるのです。
Amazon Q Developer は IDE で直接動作します。Visual Studio Code にインストールでき、無料で使用できます。質問をしたり、コードベースを確認したり、インラインチャットの補完やコード補完を利用したりできます。後ほどデモをお見せしますので、開発者の皆さんがこれをどのように活用できるのかご理解いただけると思います。 AWS での開発に使用できるもう一つのツールが AWS Amplify です。これは特にフロントエンドおよびフルスタック開発者向けに作られています。Webアプリやモバイルアプリの開発に必要なものがすべて揃っています。データベースに支えられた API を数分で作成したり、会社のブランドに合わせてカスタマイズされた認証フローを数行のコードで安全に作成したりできます。Next.js や Astro などのフレームワークで構築されたサーバーサイドレンダリングアプリをデプロイしたり、Amazon S3 によるファイルストレージを追加したりすることもできます。
今年初めに、私たちは AWS Amplify Gen 2 をリリースしました。第一世代は CLI（コマンドラインインターフェース）ベースのツールで、バックエンドリソースをプロビジョニングし、ライブラリを使用してフロントエンドに接続することができました。
AWS Amplify Gen 2 はそのアプローチを進化させ、開発者が完全な TypeScript でバックエンドを記述できるようになりました。データ、認証、ストレージのすべてが TypeScript で定義され、AWS CDK を使用して構築されています。Amplify では、デフォルトで数行の TypeScript だけで特定のサービスを簡単に使用できますが、同じレベルの抽象化が提供されていない 200 以上の AWS サービスもあります。現在は CDK を使用することで、それらにも非常に簡単に接続できるようになっています。
Amplifyを使用したアプリケーション開発の実践
Amplify アプリの作成方法をお見せしましょう。まず、npm create amplify@latest を実行してアプリを初期化します。 すると依存関係がインストールされますが、これには数分かかります。 その後、開発中ずっと実行される Amplify サンドボックスを起動します。チームの各開発者がそれぞれ独自の Amplify サンドボックスを持つことができます。これにより、他の開発者やデプロイメント環境に影響を与えることなく、開発中にリソースを素早くデプロイできます。新しいデータモデルを追加すると、ホットリロードが行われ、クラウド上でそれらのリソースがデプロイされますが、これは自分のサンドボックスでのみ行われ、チームの他の開発者には影響しません。
Amplify Data についてさらに詳しく見ていきましょう。 Amplify Data では、先ほど説明したように、完全な TypeScript を使用してデータモデルを作成できます。これにより、完全な型安全性を持ってデータのフェッチとモデリングが可能になります。認証ルールもコードで定義されます。例えば、オーナーベースの認証はたった1行のコードで実現できます。デフォルトでリアルタイムに対応しているため、リアルタイム API の構築に必要なコードは静的 API と変わりません。また、実質的にどのようなデータソースでも追加できるため、DynamoDB だけでなく、アプリケーションが必要とするものに接続できます。
Amplifyでモデルを追加する方法をご紹介します。Userモデルがあるのがお分かりいただけると思いますが、画面を下までスクロールして新しいモデルを追加してみましょう。Amazon Q Developerを使ってこれを生成します。Reviewモデルを作成しますが、Q が提案するモデルにはこのようなフィールドが含まれています。私の目的に完全に合っているわけではないので、いくつか変更を加えます。textとscoreを変更し、dateも追加します。下部には認証ルールがあり、オーナーベースの認証とパブリックAPIキーを許可しています。これをさらに細かく指定することもできます。例えば、パブリックAPIキーは読み取り専用とし、作成、更新、削除にはオーナーである必要があるといった具合です。
フロントエンドでこのデータモデルを操作する方法は次のようになります。新しいレビューを作成するには、先ほどのデモで定義したフィールドである listing、reviewer、date、text、scoreを指定します。データベース内の異なるレビューを一覧表示したい場合は、単に client.models.review.list を実行するだけです。認証も同様にシンプルです。カスタム認証フローとログイン体験を数行のコードで実装でき、アプリケーションのニーズに合わせて完全にカスタマイズできます。また、先ほど見たような細かなアクセス制御も可能です。
認証の追加方法はこのようになります。TypeScriptコードで、emailをtrueに設定します。さらに設定をカスタマイズすることもできます。verification email subjectを「verify your email」とし、絵文字も追加してみましょう。クライアント側では、Authenticatorという React コンポーネントを使用して、認証が必要な部分をこのコンポーネントでラップします。これだけで完全なログイン機能が提供されます。新しく作成してみましょう。確認用メールの検証が必要で、コードを入力する必要があり、カスタムの件名も表示されました。必要に応じて自由にカスタマイズできます。
ここで、私たちが話してきたAIとAmplifyの2つを組み合わせた話題について、Dannyに引き継ぎたいと思います。
Amplify AI kitの特徴とレビューサマライザーのデモ
ありがとう、Ali。Amplifyで私たちが過去1年間取り組んできたことについてお話しできることを大変嬉しく思います。もちろんこの1年間で開発したのはこれだけではありませんが、私が1年以上かけて取り組んできたプロジェクトです。実は、これは昨年のre:inventから始まりました。そこでは、Amplify、AWS AppSync、Amazon Bedrockを使用して、フルスタックの生成AIアプリケーションを構築する方法についてセッションを行いました。かなり良い内容でした - 生成AI機能を備えたフルスタックアプリケーションをある程度簡単に作成できましたが、私たちはもっと改善できると考え、生成AIアプリケーションを構築するためのファーストクラスのサポートを提供することにしました。
この1年間、私たちは多くのDeveloper、特にFront-endやFull-stack Developerと対話を重ね、Generative AIアプリケーションの開発、特にそのフロントエンドやフルスタック部分の開発における課題について話し合ってきました。その中で、Amplify AI kitで取り組むべき3つのテーマが浮かび上げられました。1つ目のテーマは、Amazon Bedrockに対するコードファーストな開発体験の提供です。これはAliが先ほど紹介したAmplify Gen 2の機能を基盤としています。AIの機能すべてをTypeScriptファイルで定義できます。この例では、Amplify dataリソースファイルでGenerative AI機能を定義しています。これにより、開発者ごとのサンドボックス環境が得られ、ローカルで変更を加えながら開発を進め、その更新をクラウド開発サンドボックスで確認できます。実際のクラウドリソース、AppSync API、Lambda関数、Bedrockとやり取りしながら開発できるのです。デプロイの準備が整ったら、ブランチをプッシュすれば、Amplifyがバックエンドとフロントエンドを同時にデプロイします。これにより、バックエンドとフロントエンドが常に同期された素晴らしいフルスタックTypeScript体験が得られます。
次に重点を置いたのは、LLM（Large Language Model）に対してデータへの安全なアクセスを簡単に提供できるようにすることです。没入感のあるGenerative AIアプリケーションを構築する上で、データアクセスが重要な要素であることに気付きました。LLMを使ってChatbotを作るのは比較的簡単ですが、アプリケーションを本当に差別化し興味深いものにするのは、実際にデータへのアクセスを提供することです。私たちはAmplify Gen 2のバックエンドデータコンストラクトでこれを実現します。Amplifyで定義したデータでも、外部データソースでも、どのようなAWSサービスでも、LLMに簡単にアクセスを提供できるようにしています。
最後に改善したかったのは、会話型インターフェースの構築です。テキストの単純なやり取りやコードブロックだけの一般的なChatbotインターフェースから脱却したいと考えました。Generative UIを構築し、カスタムコンポーネントで応答できるようにしたいと考え、誰でも会話型エクスペリエンスを簡単に構築できるようにしたいと考えました。単なるChatbotであれ、会話型エクスペリエンスであれ、会話型検索であれ、UIを含むエンドツーエンドのスタック全体をGenerative AIアプリケーションに簡単に接続できるようにしたいと考えました。
では、実際に何かを作ってみましょう。最初に作るのはレビューサマライザーで、いくつかの重要なポイントがあります。AppSyncを通じてAmazon Bedrockへの安全なアクセスを実現します。つまり、AppSyncがすべてのリクエストを認証します。クライアント（ウェブサイト）からBedrockへの安全なアクセスが可能で、バックエンド定義に基づいた型安全なクライアントを実現します。バックエンド定義を更新した場合、フロントエンドは型安全性が保たれ、クライアント呼び出しに変更があれば型エラーが表示されます。このように、ローカルで変更を加えながら、フロントエンドとバックエンドを常に同期させることができます。最後に、状態とネットワークリクエストを処理するReact Hooksの提供です。ネットワークリクエストや状態の管理に悩まされることなく、単純にReactコードを書くことができます。
このデモのために、VRBOやAirbnbに似た簡単なバケーションホームレンタルリスティングアプリケーションを作成しました。ReactとNext.js、AWS Amplifyを使用して構築しました。ユーザーが物件を閲覧し、レビューを読んで予約ができるリスティングをいくつか追加しました。ここに追加しようとしているのは、Amazon Bedrockを呼び出してそのリスティングのレビューのAIサマリーを生成する「サマリー生成」ボタンです。これがAmplify AI kitで構築しようとしているものです。
それでは、私たちのフルスタックのコードベースに移動して、Amplify データリソースファイルを見ていきましょう。ここでは、すべてのデータモデルとデータを取得するためのカスタムクエリを定義します。ここで、Review Summarizerという新しい生成系AIのAPIを追加します。これは生成系なので、データを生成し、そして Amazon Bedrock で使用したいモデルを定義するだけです。ここでは Claude 3.5 Sonnet を使用し、システムプロンプトでやりたいことを定義します。レビューの簡潔な要約を提供し、要約の長さなどの追加情報も指定します。
これらすべてをバックエンドでTypeScriptを使って定義し、この関数に必要な引数や入力を定義します。レビューを格納する文字列の配列を渡し、要約を含むオブジェクトを返すようにします。これが返したい内容で、認証されたユーザーのみがこのAPIにアクセスできるように認証も定義します。次に、Reactコンポーネントに移ります。以前作成したモック実装を削除し、Amplify AI kitの中のuseAIGenerationというReact hookを使用します。これはバックエンドの定義に基づいて型安全で、Review Summarizerの生成ルートがあることを認識し、Reactのステートとハンドラーを返します。ユーザーがボタンをクリックしたときにそのハンドラーを呼び出すだけで、残りはAmplify AI kitが処理してくれます。
アプリケーションに戻ると、Generate Summaryボタンができています。ユーザーがこれをクリックすると、AppSyncを通じてAmazon Bedrockにデータを送信し、AI生成の要約を受け取ります。これらすべてを、IDEを離れることなく、単一のコードベースで数十行のコードで実現しました。これはかなりシンプルなので、もっと面白いことをするためにAliにバトンタッチしたいと思います。
会話型検索体験の実装とUIのカスタマイズ
会話型の検索体験を追加してみましょう。要件として、ストリーミングレスポンスを伴うマルチターンの体験を実現したいと考えています。画像のアップロードを可能にするマルチモーダル検索も実装します。アプリケーションの既存データ（先ほどご覧いただいたバケーションレンタルの物件情報）に対してクエリを実行できるようにし、純粋なチャットインターフェースではなく、カスタムUIでインタラクティブに結果を表示したいと思います。最終的にはこのような感じになります：「このような雰囲気の物件を見せて」と言って画像をアップロードすると、物件を探すことを喜んで引き受けてくれるような応答が返ってきます。大規模言語モデルはそういった面で本当に役立ちます。データベースにアクセスして「お探しの雰囲気に似たこちらの物件はいかがでしょうか」と提案してくれます。これはチャットベースのUIではなく、ユーザーインターフェースコンポーネントを使用しています。
コードがどのようになるか見てみましょう。まずデータファイルに移動します。AIモデルを選択します。ここではClaude 3.5 Haikuを使用します。システムプロンプトでは、これが住宅レンタル予約アプリのヘルプアシスタントであることを定義し、認証モデルも追加して、ここではオーナーベースの認証を許可します。そしてReactでuseAIConversation hookを使用し、メッセージを受け取り、それをAIConversationコンポーネントに組み込みます。メッセージを渡し、ローディングスピナーを追加します。
このConversationコンポーネントでは、メッセージを渡し、ローディングスピナーとhandle send messageを追加します。このように、わずか20行程度のコードで、Amazon Bedrock を活用した安全なチャットが実現し、会話を行うことができます。データリソースファイルに戻って、 ツールを追加していきましょう。ツールを使うことで、LLMはアプリケーション内のデータにアクセスできるようになります。Listingモデルを選択して、そのListingモデルからアイテムをリストアップしたいと思います。このツールを search listingと呼び、レンタル物件を検索するために使用します。ビーチの近くにある レンタル物件を探してほしいと頼むと、データベースにある物件の中から、あなたの希望に合いそうなものを提案してくれます。
ここで、ツールについてもう少し詳しく説明しましょう。 ツールは生成AIアプリケーションにおいて非常に重要な概念であり、Amplify AI kitでも多くの時間を費やして開発した機能なので、少し立ち止まって深く掘り下げてみたいと思います。先ほど述べたように、LLMツールは、特定のデータや情報へのアクセス権をLLMに付与する方法です。これらのモデルは膨大な静的データで学習されていますが、学習データは1〜2年前のものであるため、現在の世界の状態を知りません。また、あなたのアプリケーションやその他の情報も持っていません。
LLMにデータへのアクセスを提供する方法が、ツール（ファンクションコーリングとも呼ばれます）です。例えば、get weatherツールのような、LLMが利用できるツールを定義し、cityという文字列のような入力パラメータを設定します。ユーザーが「ラスベガスの天気は？」というメッセージを送り、get weatherというツール定義を与えると、LLMはLas Vegasを入力としてget weatherツールを呼び出そうとするかもしれません。そこでアプリケーション所有者は、その結果を受け取り、天気を取得する関数やAPIなどのツールを実行し、その結果をLLMに返します。そしてLLMに再度プロンプトを送り、メッセージ履歴にその結果を追加して思考プロセスを継続します。
LLMが複数のツールを順番に選択する可能性があるため、この処理は複数回発生することがあります。通常、このようなオーケストレーションはすべて自分で管理する必要があります。Amplify AI kitでは、このような煩雑な作業の多くを代行します。先ほど見たように、Listingsモデルのようなモデルにアクセスできるデータツールを定義するだけです。Amplify AI kitは、そのツールの入力をLLMに説明し、ツールを呼び出したいというLLMのレスポンスに対して、ユーザーに代わってリクエストを行い、データをLLMに返し、再度プロンプトを送信し、その間もクライアントに結果をストリーミングします。
Amplify AIが処理する重要な点の1つは、ユーザーに代わってツールの呼び出しを認可することです。これにより、LLMはユーザーが持つ以上のデータにアクセスできなくなります。例えば、Todoアプリケーションを作成していて、各ユーザーが自分のTodoを持っており、他人のTodoは見られない場合、チャットボットに「未完了のTodoは何がある？」と尋ねると、質問したユーザーのTodoにのみアクセスできます。これは私たちが多くの時間を費やした機能であり、データアクセスを伴う生成AIアプリケーションを構築する際に、適切な認可とアクセスレベルを提供することは非常に重要です。
これはすべて AWS AppSync を通して処理されます。クライアントからのリクエストは AppSync に送られ、リクエストの認証を行った後、Amazon Bedrock に転送されます。LLM がツールを呼び出す際も、同じ AWS AppSync API を通じて処理され、結果を受け取った後、再度処理を行ってユーザーに応答します。すべてが AI ゲートウェイレイヤーとしての AWS AppSync を通して処理されるのです。そして、 モデルベースのデータツールの追加方法を見てきましたが、カスタムクエリベースのデータツールも追加できます。例として天気情報を取得する機能について話しましたので、Get Weather というカスタムクエリデータツールを追加してみましょう。私はすでに API キーを使用して外部 API にアクセスする Get Weather カスタムクエリを作成しています。
Get Weather というツールがあり、これがその説明です。Amplify データスキーマで定義済みなので、 カスタムクエリ定義で既に入力パラメータを定義しているため、改めて説明する必要はありません。
戻って「そこの天気はどうですか？」と尋ねてみましょう。AI アシスタントとすでに会話をしていたので、私がビーチ近くのリスティングを探していたことを覚えています。San Diego 近くの Mission Beach, California のリスティングを返してきました。この新しい Get Weather データツールを使って「そこの天気はどう？」と聞くと、Mission Beach を入力として Get Weather ツールを呼び出す必要があると判断します。そして Amplify AI kit が実際の呼び出しを処理し、結果を返してユーザーに応答します。気温が82度で、風速も提供し、Mission Beach は素晴らしい天気だと伝えてきます。
会話履歴を保持してデータを取得できる、非常に堅牢な会話体験を実現し、この AI アシスタントとの豊かなやり取りを作り出しています。ですが、ここでUI をアプリケーションにより適したものにしてみましょう。まだ基本的な表示なので、まずアバターを更新したいと思います。メッセージを送信するユーザーを単に「user」と表示するのではなく、現在ログインしているユーザーを使用したいのです。会話検索ページに移動すると、AI 会話コンポーネントがあります。これは単なる React コンポーネントで、普通の React フックを使用しているため、多くのことができます。React アプリケーションに User Provider があるので、ユーザーコンテキストを取得して、ユーザー名をアバターに渡すことができます。また、独自のユーザーアバターコンポーネントをレンダリングすることもできます。
最後に、LLM は通常 Markdown 形式のテキストで応答するので、Markdown レンダラーでそのマークダウンをレンダリングして、適切な見出しやリストを表示したいと思います。メッセージレンダラーにそれを追加して、実際に Markdown をレンダリングするようにしました。会話に戻って、ビーチ近くのリスティングを探すように依頼すると、チャットに私のアバターとユーザー名が表示されます。応答では、リストが実際にレンダリングされた、きれいな Markdown テキストが表示されます。かなり良い感じになってきましたが、まだいくつか改善できる点があります。
先ほど、画像をアップロードして画像ベースの検索を行い、さらにコンポーネントで応答する機能について説明しました。では実際にやってみましょう。AI会話用のReactコンポーネントに戻って、添付ファイルを許可するように設定するだけで、ユーザーが画像をアップロードして画像ベースの検索ができるようになります。次に、私が特に期待している Response Components を追加します。これは、AIシステムや Large Language Model が応答として使用できるUIコンポーネントを定義する方法です。これらは通常のReactコンポーネントで、内部の状態を持つことができ、必要に応じてデータをフェッチすることもできます。単純なReactコンポーネントを渡し、説明を加え、受け入れるプロップスを指定するだけです。ここでは、リスティングカードと予約カードのコンポーネントを用意しており、どちらもリスティングのIDを受け取ります。
これで、LLMはテキストで「Mission Beachでこのリスティングが見つかりました」と言うのではなく、これらのコンポーネントで応答できるようになります。最初のデモに戻って、このような雰囲気のリスティングを表示してみましょう - ビーチの画像を選択します。Claude 3.5 Haikuはこれがビーチの画像だと理解し、ビーチのリスティングを探します。データベースでリスティングを見つけ、実際にリスティングコンポーネントを使用してUI要素として応答しています。これを実現するのに必要だったのは、約15分の時間と50行未満のコードだけでした。IDEから離れることなく、純粋なTypeScriptとReactを書くだけです。もう一つ説明したいことがありますが、これについてはBanjoにバトンタッチして、Bedrockのナレッジベースについて話してもらいましょう。
Amazon Bedrockのナレッジベースとライブコーディングデモ
ナレッジベースは本当に素晴らしい機能です。先ほど、Large Language Modelに関連するコンテキストを渡すことで、より良い応答を生成できることを見ていただきました。ナレッジベースは、完全マネージド型のRetrieval Augmented Generation（RAG）ワークフローを通じてこの機能を実現します。Large Language Modelで最初にやりたいことは既存のデータとチャットすることですが、ナレッジベースを使えば単にPDFやその他のコンテンツをアップロードするだけでそれが可能になります。
ナレッジベースにデータをアップロードすると、テキストが管理しやすい大きさのチャンクに分割されます。Large Language ModelにPDFの内容について質問する際、関連するコンテキストを見つける必要があります。システムはこれらのチャンクをEmbeddingモデルに通し、Vector Storeに保存します。つまり、テキストを数値に変換することで、アルゴリズムが効率的にコンテンツを検索できるようになります。
ユーザーが質問すると、そのテキストもEmbeddingモデルを通じて数値に変換されます。これにより、クエリと保存されたコンテンツの間で検索が可能になります。例えば、Californiaに関するデータを探している場合、システムはPDFドキュメント内でCaliforniaに言及しているすべての箇所を見つけることができます。この取得されたコンテキストがLarge Language Modelのプロンプトに組み込まれ、ナレッジベースにある情報に基づいてより適切な応答を生成できるようになります。
Amazon Bedrockのナレッジベースを会話コンポーネントに接続する方法をご紹介します。 Amazon Bedrockのナレッジベースを接続するには、AWS AsyncのJavaScriptリゾルバーを使用します。これにより、 HTTPベースのAPIをAmplifyデータに簡単に接続することができます。 AppSync JavaScriptリゾルバーが呼び出すリクエスト関数とレスポンス関数を定義するだけです。ここでは、ナレッジベースのAPIにアクセスするためのリソースパスを指定しています。 XXXXXの部分にはナレッジベースIDを入れ、そのAPIに送信したいパラメータを渡します。 検索クエリを送信し、結果を文字列化して返すようにしています。
JavaScriptリゾルバーを定義した後、データスキーマにカスタムクエリを定義します。入力として必要な引数（この場合は文字列）を指定し、AppSync JavaScriptリゾルバーを参照するハンドラーを定義して、ナレッジベースのデータソースにアクセスするデータソースを指定します。戻り値は文字列で、認証されたユーザーのみが使用できるように認証ルールを追加します。 これでほぼ会話がナレッジベースに接続できる状態になりました。あとは、カスタムクエリを使用してAIツールを追加し、ナレッジベースのカスタムクエリ名を参照して、説明と名前を渡すだけです。 これが、既存の会話にBedrock ナレッジベースを接続する方法です。
ここからは、Banjoによるライブコーディングに移ります。AWSのサンプルリポジトリには、 Amplify AIのサンプルリポジトリがあります。このコードは現在公開されており、私たちが説明してきたAmplify AI kitの機能を使い始めたい方は、GitHubからアクセスできます。 これはチャットボットを作成する基本的な例を示しています。ここにあるチャットボットは、どのようなサポートができるかについて標準的な応答を返します。 ご覧のように、これは標準的なチャットボットUIを示しています。このコードはすべてGitHubで公開されており、ダウンロードして確認することができます。
ダウンロードして開くと、このように表示されます。私は主にフロントエンド開発者ではなく、PythonやAIを中心に扱っているので、何が起こっているのかを理解するためにAIを活用しています。実際、Amazon Qを使用して新しいチャットを開始し、ワークスペース機能を使ってこのリポジトリの機能について質問しています。このリポジトリは、Amazon Q Developerがどのように機能するかを示しており、リポジトリ内のすべてのコードを分析して関連情報を見つけ出します。
READMEファイルを見つけ、これがAmplify Gen 2を使用してClaude 3 Haikuモデルと会話するためのチャットインターフェースで、Amazon Cognitoを使用してプライベート設定を保存することを示しています。実際のリポジトリ内のすべてを確認し、何が起こるのか、どのように開始するのか、リポジトリのクローン方法、Sandboxの実行方法、必要なリソースのセットアップ方法など、すべてを正確に教えてくれます。金融の専門家ではない私にとって、このような理解がコードに組み込まれているのは素晴らしいことです。
この機能についてご紹介したいのですが、コードを見ながらもう一つ素晴らしい機能をお見せしたいと思います。Amazon Q Developerのインラインチャット機能でClaude 3 Haikuを使用していたのですが、「モデルをSonnetに更新して、プロンプトをより良くしましょう」と指示することができます。すると、コードを確認してClaude 3 Sonnetに更新してくれました。より良いシステムプロンプトを提供してくれて、その場で「accept」を押してコードを更新できます。
これは、コードを直接更新できるインライン機能のクールなデモでした。次にやりたいのは、現在とても基本的な見た目なので背景色を変更することです。私はフロントエンド開発者ではないので、「@workspace 背景色はどこで変更できますか？」と尋ねてみましょう。するとグローバルCSSを通すか、theme index.tsファイルを通す2つの方法があると教えてくれました。Q Developerを使って「背景色をライトブルーに更新して」と指示できます。tokensのprimary値を使用したコードを生成してくれて、それを承認して保存できます。
これは、フロントエンド開発の初心者である私にとってとても役立つ機能です。他のウェブサイトを検索する必要がなく、質問をしてコードを更新するという作業がすべてIDE内で完結します。フロントエンドプロジェクトにある多くのファイルの中から、どのファイルを更新すべきかを示してくれます。どのファイルを更新する必要があるか、何を変更できるのかを理解するのに役立ちます。モノづくりが大好きな私にとって、これは革新的な変化をもたらしてくれました。Amazon Q Developerを使って開発を始めて構築できることを、とても嬉しく思います。より詳しく知りたい方は、docs.amplify.aws/AIにアクセスしてください - DannyとI私が作成したこのURLは本当に気に入っています。このQRコードを使えば直接アクセスできます。
※ こちらの記事は Amazon Bedrock を利用することで全て自動で作成しています。
※ 生成AI記事によるインターネット汚染の懸念を踏まえ、本記事ではセッション動画を情報量をほぼ変化させずに文字と画像に変換することで、できるだけオリジナルコンテンツそのものの価値を維持しつつ、多言語でのAccessibilityやGooglabilityを高められればと考えています。
Discussion