Amazon Web Services ブログ
アプリケーションデータを使用して、カスタマイズされた AI ベースのチャットインターフェースを作成
フロントエンドの開発者は、アプリで永続的な会話型 AI チャット体験を開発するとき、しばしば複雑な API、複雑なリアルタイム UI の更新、設定が難しいアクセス許可を扱う必要があります。それに加えて、複雑なクラウド インフラストラクチャをセットアップしなければなりません。そういった理由から、私たちは AWS Amplify AI Kit とその会話型チャット体験をご紹介できて、大変嬉しいです。
わずか数行のコードで、TypeScript を使って会話型チャットを自分のフロントエンドアプリケーションに追加することができます。複雑なクラウド設定や追加の権限は必要ありません。作成したチャットには、さまざまな Amazon Bedrock モデルの 1 つを接続できます。それぞれのチャットに対して、お客様のユーザーアカウントに関連付けられた永続的な会話履歴が保持されます。また、アプリケーションのニーズに合わせてチャット体験をカスタマイズすることができます。
この機能は、バックエンドにルーティングする新しい conversation
API によって動作します。Amazon Bedrock で動作する大規模言語モデル (LLM) を指定したり、お客様のニーズに合わせてカスタマイズしたシステムプロンプトを作成したりするオプションが用意されています。オプションとして、Amplify はツールの使用に対応しており、外部データや機能と対話して、必要に応じて正確に応答できるようになっています。
フロントエンドの Amplify では、AIConversation
コンポーネントと useAIConversation
React フックを提供する新しい UI ライブラリがリリースされました。これらの API は、最小限の構成で React アプリケーションにドロップインすると、お客様が対話を開始できるチャット ウィンドウを表示できます。そのうえで、アプリケーションのルックアンドフィールに合わせてカスタマイズを行うこともできます。たとえば、アバター、表示テキスト、添付ファイルの許可、特定のレスポンス用コンポーネントの作成などができます。
このチュートリアルでは、アプリケーションに会話ルートを追加し、カスタマイズする方法を説明します。
前提条件
以下の手順を始める前に、アプリケーション内で AWS Amplify Gen 2 をセットアップする必要があります。これはアプリケーションのルートで create コマンドを実行するだけで簡単に行えます。
これにより、プロジェクトのルートに新しい amplify
フォルダが作成され、そこでバックエンドリソースを定義することができます。続行する前に、使用したい Amazon Bedrock モデル を有効にしてください。このチュートリアルでは、Claude 3 Haiku を使用します。さらに、必要に応じて、ローカル開発用に AWS を設定することで、クラウドサンドボックス環境でローカルでテストができるようになります。
まだ Amplify AI Kit についてご覧になられていない方は発表時のブログ記事をご覧ください。この記事で紹介された機能のすべての使用例と、その他の例を見たい方は、Amplify AI サンプルリポジトリをご覧ください。
Conversation ルートの追加
Amplify AI Kit は、Amplify Data の規約に基づいています。この規約に従うことで、シンプルな TypeScript 対応の構文を使って、任意のデータソースに接続するためのデータモデルを作成できます。今回は、data/resource.ts
ファイルのスキーマ定義にある新しい a.conversation
API を使用して、チャット会話のルートを構築します。
まず初めに、データリソースファイルに追加し、chat
という新しい会話を作成しましょう。
Conversation API を利用するユーザーは認証が必要です。これはデフォルトで変更できません。慣例として、AWS Amplify Gen 2 を設定する際には、auth カテゴリを介して Amazon Cognito User Pool が作成されます。自分でテストする場合は、フロントエンドを Authenticator コンポーネントでセットアップすることをお勧めします。このコンポーネントは Amplify auth カテゴリを利用し、数行のコードでサインイン/サインアウトの UI を提供します。
チャットをセットアップする上で最も重要な部分の 1 つは、aiModel
と systemPrompt
を定義することです。aiModel
には Claude 3 Haiku
を選択しました。これは最新の Anthropic Claude 3 モデルの 1 つで、ユーザーからの質問に対応するための LLM として機能します。Claude 3 Opus、Claude 3 Haiku、Cohere、LLama、Mistral など、選択可能な複数のモデルがローンチ時に提供されています。
システムプロンプトは、LLM に期待する動作を定義します。この記事では、プロンプトをシンプルにしていますが、使用ケースによっては、より簡潔なプロンプトを試してみる価値があるかもしれません。Few-Shot プロンプティングなどの他のプロンプト戦略を検討することで、より良い結果が得られる可能性があります。
オプションで、モデルの token、temperature、top P を設定するための inferenceConfiguration を追加できます。別のオプションとしてツールを追加することができます。ツールの利用は、関数呼び出しとも呼ばれ、対応するモデルが外部の関数やデータと対話できるようにします。たとえば、Amazon Bedrock Knowledge Base で検索拡張生成 (RAG) を使用したい場合は、カスタムリゾルバーでリソースファイルに追加することができます。このような例については、今後の記事でご紹介します。
ルートにある amplify フォルダ内の backend.ts
ファイルは、この Conversation API を追加するための他の追加設定は必要ありません。新規プロジェクトから開始する場合、data
が defineBackend
関数呼び出しにインポートされます。さらなる IAM ポリシーの更新は必要ありません。裏側では、AWS AppSync リゾルバを構築し、Amazon Bedrock と直接やり取りする AWS Lambda 関数を作成するための AWS Cloud Development Kit (CDK) コードが生成されます。Amplify は必要な IAM ポリシーも作成し、ユーザーアカウントごとに会話履歴を永続化するための Amazon DynamoDB のデータソースを設定します。
ローカルでのクラウドサンドボックステスト
同じようにコードを実行したい場合は、アプリケーションのルートで npx ampx sandbox
コマンドを実行してローカルでテストできます。このコマンドは amplify
フォルダを読み込み、テスト環境としてクラウドリソースをプロビジョニングします。
フロントエンドの更新
バックエンドの定義が完了したので、次にフロントエンドのコードを追加します。Vite または Next.js で React アプリケーションを使用していると仮定します。
この ライブラリには、Amplify の新しい AI コンポーネントを使用するために必要なすべてが含まれています。
新しい Chat.tsx
コンポーネントを作成し、次のコードを追加してください。
この新しいコンポーネントをアプリのエントリポイントファイルに追加します。テストする際は、ユーザーがすでにサインインしていることを確認してください。また、アプリケーションを Authenticator コンポーネントでラップすることをお勧めします。これにより、ユーザーがチャットにアクセスする前にサインインしてアカウントを作成する必要があります。
メインエントリをロードすると、使用可能なシンプルなチャットインターフェースが表示されます。
複数のチャット会話を追加する方法が気になるところでしょう。useAIConversation
フックを詳しく見て、オプションの id を追加しましょう。
デフォルトでは、ユーザーは 1 つのチャットのみ持っています。id
を追加することで、その ID に基づいて、ユーザーごとに複数の個別のチャットを作成できます。各チャットは、システムにログインしているユーザーに紐付けられます。いつでも generateClient
API を使用して、会話を取得、削除、あるいは更新できます。設定方法の完全な例については、Amplify AI Examples リポジトリをご覧ください。
チャット体験のカスタマイズ
AIConversation
コンポーネントには、ユーザーへのチャット体験をカスタマイズするためのいくつかのプロパティがあります。ユーザー体験を向上させるためのいくつかのカスタマイズを見てみましょう。
アバターの更新
会話型チャットでは、ユーザーのアバターを表示することをしばしば求められますが、avatars
を設定することで設定できます。
avatars
は user
と ai
オブジェクトを取ります。チャットでそれぞれに表示されるアバターとユーザー名を定義できます。この例では、@aws-amplify/ui-react
ライブラリからの Avatar
コンポーネントを使用して画像を表示しています。AI に関しては、名前を絵文字に変え、新しいアバターを指定しています。
レスポンスコンポーネント
response component を使うと、開発者は LLM から返された応答メッセージに基づいてカスタム応答を作成できます。アプリ開発者はコンポーネントを作成し、responseComponents
プロップに追加することで、これらのメッセージの出力を定義できます。たとえば、ユーザが休暇地についての情報を求めた場合、チャットはカスタムの場所カードに名前と説明を表示できます。
以下のコードでは、ユーザー向けのカードを作成するために LocationCard
コンポーネントが使用されています。
この例では、地名と説明を整えられたカードに表示しています。
responseComponents
プロパティは、ツールを介して会話ルートに接続された外部 API でも動作します。
添付ファイルの許可
必要に応じて、チャットウィンドウ内に直接ファイルを添付できます。この機能を有効にするには、ファイルを受け付ける LLM を使用する必要があります。この機能を有効にするには、allowAttachments
を追加してください。
この allowAttachments
を追加すると、チャットウィンドウの下部にファイルを添付するボタンが表示されるようになります。
アップロードした全ての画像は Amazon DynamoDB に保存されますので、ご注意ください。上限は 400KB なので、400KB 以下の画像のみ追加できます。画像を添付したら、その画像に関する質問をし、LLM による回答を得ることができます。
メッセージレンダラ
message renderer プロパティはテキスト出力のフォーマットを指定します。たとえば、出力を Markdown で表示したい場合を想像してください。ほとんどの LLM がマークダウンをサポートしているので、会話のメッセージでマークダウンを利用できると便利です。これは、react-markdown
ライブラリをインストールし、ReactMarkdown
コンポーネントを使用して、全ての出力を適切にフォーマットできます。
react-markdown
を rehypeHighlight
のような他のプラグインと組み合わせると、追加のコードハイライト機能が使えます。
これは、messageRenderer
でコードのテキストを表示するために、rehypeHighlight
プラグインを使用しているチャットの例です。
クリーンアップ
サンドボックスを実行中の場合は、次のコマンドをターミナルで実行すると、サンドボックスとそれに作成された全てのバックエンドインフラストラクチャを削除できます。
次のステップ
この記事では、Amplify AI Kit を使用してアプリケーションにセキュアな会話型チャットを追加する方法を見てきました。ユーザー向けにカスタムチャット体験を作成するために、新しい Amplify AI UI ライブラリを追加するのがいかに簡単かを確認しました。さらに、レスポンスコンポーネント、アバター、メッセージレンダラを使用してユーザー体験をさらに向上させることができることも確認しました。
詳しく学びたい方は、AI のスタートガイドをご覧ください。Amplify AI Kit の使い方を詳しく説明しています。また Discord チャンネルに参加して、直接質問することもできます。
本記事は「Create a Customized AI-Based Chat Interface With Your Application Data」を翻訳したものです。