おはようございます！ 株式会社ベンジャミンの木村です！ Bedrock KnowledgeBaseのAPI作成記事でも紹介させていただきましたが、 今回、私はBedrock KnowledgeBaseを使って、以下のような自社のことを回答する簡易チャットアプリを作成しました。 その時の経験をもとに、今回はBedrock KnowledgeBaseのAPIをReactブラウザ表示する手順を記載させていただきます！ ※前回、Bedrock KnowledgeBaseのAPIを作るためのバックエンド部分（API Gateway / Lambda）の構築を行いましたので、APIの作成方法がわからない方は、先に下記ブログを実践後に、今回のブログを参考にいただければと思います。 目次 今回作成するもの 下記の通りForm、Button、Text（Bedrockからの返答文）があるだけのシンプルな画面になっております。一旦はこれだけあれば今回の機能を利用できますので、ここからデザインを整えるなどの処理をしていただければと思います。 今回使う技術のバージョン / ファイルの階層 [バージョン] [ファイルの階層] １. Reactの準備 Reactをインストールし、準備を行います。普段からReactを使い慣れている方はここは飛ばしていただいても大丈夫です。 １-１.React × TypeScriptをインストール ※nodeのインストールがされていない場合、上記コマンドはエラーとなります。下記記事が大変わかりやすい内容となっておりますので、ご参照ください。 https://qiita.com/blue_fish/items/7440df68734f3d5ce772 Macにnodejsをインストールする方法 １-２. アプリケーションのディレクトリに移動 １-３. Reactの初期画面を起動 下記画面がブラウザ表示されれば、Reactがインストールされていることがわかる １-４. 不要資材の削除 下記ファイルを削除してください １-５. index.tsx / App.tsxの中身を下記の通り変更する Before After Before After ブラウザ上で下記のように表されれば準備完了 ２. Chakra UIを用いてCSS / HTMLの準備 Chakra UIというCSSフレームワークを使ってデザインを整えていきます。アレンジするために、CSSの書き方や、使えるコンポーネントなどを知りたい方は、以下Chakra UI公式よりご参照ください。 https://v2.chakra-ui.com ２-１. Chakra UIをインストール ２-２. Chakra UIのセットアップ index.tsxを以下のように変更ください ※変更箇所は「黄色」でハイライトしております。 Before After ２-３. componentの作成 srcディレクトリ配下に、下記の通りディレクトリ(components)と、その配下にファイル(ChatForm.tsx)を作成してください。 ※ファイル名はChatForm.tsxとします（変更しても問題ありません） さらに、App.tsxファイルに<ChatForm />コンポーネントを使えるようにします。 Before After ２-４. … Continue reading Bedrock KnowledgeBase APIをReactでブラウザ上から利用可能にしてみた