Torihaji's Growth Diary

Little by little, no hurry.

爆速簡易的AIチャットbotの作り方(Rails、Python、Next.js)

はじめに

みなさん、こんにちは。torihaziです。

今日はタイトルの通り、AIチャットbotを作ってみようかと思います。

実務で似たような構成で扱うそうなので、どんなものかを実際に作ってみて

イメージ掴む目的でやってみました。

作成はClaudeが主で、微修正を私が行なったという感じです。

なお、筆者の言語経験としてはNext.jsとRailsは実務でやってるけどPythonは無という感じです

では行ってみましょう。

注意事項

ChatGPTのAPIを使用する都合上、$5くらいお金かかります。

デモ

構成

簡易的な構成図としては

Next.js ⇔ RailsPython(Flask) ⇔ ChatGPT

という形になっています。

RailsPythonはそれぞれ Dockerで個別に立ち上げて、Next.jsはローカルで 開発サーバ立ち上げる感じですね。

├── ai_server
│   ├── Dockerfile
│   ├── app.py
│   ├── docker-compose.yml
│   └── requirements.txt
├── backend
│   ├── Dockerfile
│   ├── Gemfile
│   ├── Gemfile.lock
├── frontend

構築(と言ってもcloneしてください)

GitHub - torihazi/chat_bot_ai_server

GitHub - torihazi/chat_bot_front

GitHub - torihazi/chat_bot_rails

これをして、ai_serverとrailsの方はdocker compose buildとかする前に一度networkを作成してください

docker network create chat_network

これをした後にdocker compose buildとかしてupしてみてください。

繋がってなければ、docker network lsとかdocker network inspect chat_networkしてみてください。

特に後者のコマンドで

[
    {
        "Name": "chat_network",
~~~
        "Containers": {
            "4445786e97ca71935d66b657efeecf43e696e388057ac89913e8eb6d8ad64e6b": {
                "Name": "backend-db-1",
~~
            },
            "d0fda1040494226eb34e72f822bce3f28542adc87e87bb9188288ac6f3ce52cd": {
                "Name": "backend-api-1",
~~
            }
        },
        "Options": {},
        "Labels": {}
    }
]

こんな感じでai_serverの記載がなかったら繋がってないので、もう一度network作り直してやってみてください。

これでRails、Flaskどちらもdocker compose up -dして、Next.jsもpnpm devってしたら繋がると思います。

ChatGPTのクレジット課金

OpenAIのAPIキー取得方法|2024年7月最新版|料金体系や注意事項 #DALLE - Qiita

課金方法はこちらを参考にしてください。

途中、オートリチャージとか求められるかと思いますが、そこはお任せします。

私は最安希望だったので、オートリチャージなしの$5で課金しました。

なお、この記事の途中で取得できるAPI_KEYをai_serverディレクトリ内の.envに

OPEN_API_KEY=apiのkey

として設定しておいてください。

このkey流出すると大変なので、.gitignoreで外しておいてくださいね。

cloneしたらされると思いますが、自力でやった人はお気をつけ。

接続

さてこれだけやればあとは準備OKなので、適当に文字を入力してみればokです

お疲れ様でした。

私はイメージ掴むだけが目的だったので、これにて終幕です。

おまけ

ちなみにこの構成だとシンプルだが、通信量増えるとタイムアウトになったりして本番運用とかなった場合

不安が残る構成だそう。

claudeに聞いたところ、Railsなら下記の構成が良さげらしいので今度はそっちでも作ってみようかと思います。

Frontend → Rails → Redis ⇄ Sidekiq → Python
                   ↑
                Frontend(ポーリング/WebSocket)

終わりに

ストリーミングで文字を早く受け取って、RedisとかSidekiqとか使ってやりたいです。

早くすごくなりたいです。

以上です笑