KnowledgeBaseを使って、以下のような自社のことを回答する簡易チャットアプリを作成しました。Lambda)の構築を行いましたので、APIの作成方法がわからない方は、先に下記ブログを実践後に、今回のブログを参考にいただければと思います。useStateでbedrockからの回答値をstate管理するまとめ今回作成するもの下記の通りForm、Button、Text(Bedrockからの返答文)があるだけのシンプルな画面になっております。これだけあれば今回の機能を利用できますので、ここからデザインを整えるなどの処理をしていただければと思います。Reactの準備Reactをインストールし、準備を行います。普段からReactを使い慣れている方はここは飛ばしていただいても大丈夫です。typescript※nodeのインストールがされていない場合、上記コマンドはエラーとなります。下記記事が大変わかりやすい内容となっておりますので、ご参照ください。App.tsxの中身を下記の通り変更するindex.tsx※変更箇所は「黄色」でハイライトしております。</React.StrictMode>);App.tsx※変更箇所は「黄色」でハイライトしております。UIというCSSフレームワークを使ってデザインを整えていきます。UI公式よりご参照ください。UIのセットアップindex.tsxを以下のように変更くださいindex.tsx※変更箇所は「黄色」でハイライトしております。componentの作成srcディレクトリ配下に、下記の通りディレクトリ(components)と、その配下にファイル(ChatForm.tsx)を作成してください。/>コンポーネントを使えるようにします。App.tsx※変更箇所は「黄色」でハイライトしております。ChatForm.tsxにHTML/CSSの記述を行うChatForm.tsx下記をそのまま記述ください。ChatForm.tsxでAPIを呼び出すこちらのAPIについては、下記記事で作成したものになります。こちらでAPIを作成の上、お取り組みください。Gatewayで利用してみたChatForm.tsx※変更箇所は「黄色」でハイライトしております。KEY>は変更して記述ください。KEY>は外部公開してはならない値になります。取り扱いにはご注意ください。Formの値をstate管理するChatForm.tsx※変更箇所は「黄色」でハイライトしております。Formの値をBedrockにPOSTするChatForm.tsx※変更箇所は「黄色」でハイライトしております。Bedrockから返ってきた値を表示させるChatForm.tsx※変更箇所は「黄色」でハイライトしております。knowledgeBaseを呼び出し、取得した値を使う方法を紹介させていただきました。ここまでできれば、Bedrockでアプリ開発ができるのではないでしょうか?ちなみに今回紹介しなかった、デプロイ方法ですが、Amplifyにて簡単にデプロイできます。下記記事が大変わかりやすいので、ご参照下さい。GatewayのURLを直接埋め込まずに、SecretsManagerなどをご利用ください。Benjamin.Inc。