More than 1 year has passed since last update.

AmazonLexを使ってWebチャットボットを作ってみた

Posted at 2022-06-02

Webサイトにチャットボットを設置したいと思い、試しにAmazonLexを使って構築してみました。

AWSアカウントはすでに持っている想定で記述しています。

手順

GitHubにCloudFormationを使って必要なサービスをインストールする方法が載っていましたのでこちらを利用しました。

GitHubページにある以下の一覧からTokyoを選択するとCloudFormationが立ち上がります。

一番重要なのは、WebAppParentOriginです。
ここにチャットボットを設置したいWebサーバのドメインを設定する必要があります。
それ以外はとりあえずデフォルト値でも問題ありません。必要に応じて設定してください。
英語表記なので英語を理解できる必要があります。

約30分くらい待つと必要なサービスの設定が完了します。
サービス構成は以下のようになっています。

CloudFormationの「出力」タブにあるWebAppUrlをクリックすると、フルスクリーンでチャットボットが立ち上がるので試しに使ってみるといいでしょう。

デフォルトでは英語で花を購入することを想定したチャットボットになっています。「order」などと入力するとチャットボットが反応してくれます。

CloudFormationの「出力」タブにあるSnippetUrlをクリックすると、スニペットの設置方法が表示されます（英語）。
ここに表示されるhtmlコードをコピーして自身のサイト上に貼り付けてください。

試しに空のhtmlファイルにスニペットを貼り付けてアクセスしてみると以下のように表示されました。

あとはAmazonLexの設定を変えて自身の希望する反応をしてくれるように変更すればOKです。
AWSマネジメントコンソールでAmazonLexを開くと「WebUiOrderFlowers」というBotができているはずなのでこの設定を自分好みに変更してください。

チャットボットのデザイン修正やAmazonLexへの設定の詳細、日本語に完全に対応する設定などについてはここには記載していませんが、まだまだ色々できそうです。