静的サイトで動くAIチャット

サーバーと通信しなくても、ブラウザの中だけでチャットボットは動きます。

このページのチャット欄に何か入力すると、ボットが返事をします。応答はすべてこのHTMLファイルの中に書かれたルールで動いていて、外部との通信は一切していません。

話しかけてみる

下のチャット欄に自由に入力してください。話題の候補も用意してあります。

仕組み

このチャットボットは、入力された文章にキーワードが含まれているかを調べて、対応する返答を返しています。通信は発生しません。ページを開いた時点で、すべてのルールがブラウザに読み込まれています。

本物のAI（ChatGPTなど）は、膨大なデータから学習した結果をもとに文章を生成しています。それにはサーバーが必要です。このページのボットは「条件に合う定型文を選んで返す」仕組みなので、見た目はチャットAIに似ていても中身はまったく違います。

それでも、サーバーなし・HTMLファイル1つでここまでの対話体験が作れるという点が、静的サイトの面白さです。

まとめ

• 静的サイトでもチャット風のUIは作れる
• 応答ロジックはJavaScriptのキーワードマッチングで実現している
• 外部サーバーとの通信は一切なく、HTMLファイルの中で完結している
• 本物のAIとの違いは「学習・生成」か「条件分岐」か