AIチャットボットを非プログラマーがバイブコーディングで作成できる？

COLUMN




今回バイブコーディングで作成したAIチャットボット

プログラミング教室「プロクラスキッズ」のホームページから情報を抜き出して、質問に対して適した回答を表示するようにしています。

バイブコーディングとは？

アンドレイ・カーパシーさん※の投稿が始まりとされています。

※AI ネイティブの新しいタイプの学校「Eureka Labs」に携わっている。 経歴は、テスラのAI担当ディレクター、OpenAIの創設チームメンバー、スタンフォード大学CS231n/博士課程修了。

「バイブコーディング」というのは、AIを使って、「こんな感じの機能が欲しい」とか「この部分をちょっと変えて」のように、ざっくりとしたイメージやお願いをAIに伝えるだけで、AIが勝手にコードを書いてくれる、という新しいプログラミングのやり方です。

AIチャットボットの作り方

仕組みを考える

仕組みを考えることに最も時間を要しました。
0からのスタートなので、恥ずかしながら、完成イメージは全くありませんでした。

まずchatGPTが提案してくれたのは「Chatbase」

すぐ始めたい人向け、簡単にできるサービスとして「Chatbase」を提案してくれましたが、フリープランでは100 message credits/月という上限がありました。

無料で作るならオープンソースのAI

[ユーザー]

   ↓（質問）

[WebチャットUI] ← Streamlit / Flask

   ↓

[検索処理] ← LangChain + Chroma

   ↓

[ローカルAI] ← GPT4All / LLaMa.cpp

   ↓

[回答表示]

上記の構成で完成を目指しました！

chatGPTに指定した条件は、

  • サービスの利用料不要
  • ウェブブラウザからユーザーが使用できる
提案の質は、GPT-4oとそれ以下のモデルでは大きな差を感じました。
GPT-4oでは、提案した後、それをさらに良くする提案も最後に示してくれます。

ローカルAIツールの選定

GPT4All

AIモデルをディレクトリにダウンロードして使用する手順で断念しました。
AIモデルのダウンロードに試行錯誤する中、気が付けばOllamaを使う方へシフトしていました。

Ollama

Visual Studio Codeのターミナルでgemma3を実行し、質問するところまで進みましたが、一向に回答が返ってきません。
gemma3を実行できているかすら疑わしいです。
新しいチャットでchatGPTに質問してみると、Hugging FaceのライブラリでAIモデルを実行する方へシフトしていきました。

AIに質問する方法

AIが賢いとはいえ、知識の浅い分野だと、質の高い回答を導くのはまだ難しいように感じます。
エラーが発生したら、AIにそのまま送るなど、ひたすらにトライアンドエラーを繰り返していくと、なんとか形になってきます。
「オープンソースのAIを使用」など、一定の具体性のある指定ができる方がAIを導きやすいので、指示出しの技術は必要となりそうです。

AIチャットボットの作成について説明の途中ですが、長くなりましたので、次回に続きを書いていきたいと思います。