【大人の学び直し】未経験でも大丈夫！Chainlitでチャットボット開発を始める方法【WSL対応】

最近のAI開発において、チャットインターフェースは欠かせない要素になりました。しかし、いざ自分で作ろうとすると「どこから始めればいいのか」と悩むことが多いのではないでしょうか。もし今やるなら、StreamlitやGradioを使うかなと思いますが、Webを見ていたところChainlitというものを見つけました。

Chatに特化している分ほかよりはハードルが低そうだなということもあり、今回はPythonだけで手軽にチャットUIが構築できるChainlitを使ってみます。

Windows + WSL + Pythonで試すChainlit入門 - LLMなしでオウム返しチャットを作ってみる

Chainlitでできることとできないこと

知らない人もいると思うのでChainlitについて簡単に紹介をします。以下のGitHubのリンクをみるとどこかで見たことのあるような画面が🤔

Chainlitは、チャットUIフレームワークです。通常はChatGPT、Claudeに代表されるようなクラウドLLMや、ローカル動作するOllamaなどと組み合わせて使用します。今回は少し内容をかじってみるという内容にするため、あえてLLMを使わずに基本的な仕組みを理解することから始めてみましょう。

実は、最初はStreamlitでチャットUIを作ろうとした経験があります。意外と考える事が多くて、そのときは後回しにしてしまいました🥲それに比べて、Chainlitはチャット専用に特化していることが大きなメリットになっています。

今回はHello,World的なものとしてオウム返しをするようなアプリを作成してみようと思います。

環境準備から動作確認まで

今回の動作環境はWindows 11のWSL2（Ubuntu 24.04LTS）を使います。Pythonのパッケージマネージャには最近話題のuvを使います。

まず、必要なツールをインストールします。WSLのターミナルを開き以下を実行していきます。

# uvがまだの場合
$ curl -LsSf https://astral.sh/uv/install.sh | sh

# プロジェクト用ディレクトリを作成
$ uv init chainlit-demo
$ cd chainlit-demo

# Chainlitをインストール
$ uv add chainlit

インストール自体は数秒で完了します。uvの速さを実感できる瞬間ですね🤩

最小限のオウム返しチャットを作る

次に、実際のコードを書いてみましょう。echo_bot.pyというファイルを作成します。

echo_bot.py

import chainlit as cl

@cl.on_chat_start
async def start():
    await cl.Message(content="こんにちは！何か話しかけてみてください。").send()

@cl.on_message
async def main(message: cl.Message):
    # 入力をそのまま返す（オウム返し）
    response = f"オウム返し: {message.content}"
    await cl.Message(content=response).send()

たったこれだけです。コードを見ると分かりますが、デコレータを使った非常にシンプルな構造になっています。

動作してみる！

ターミナルから以下のコマンドを実行します。

# uvを使った実行方法
$ uv run chainlit run echo_bot.py -w

初回実行時は、ポート設定などのメッセージが表示されますが問題ありません。実行後、http://localhost:8000がブラウザで開き、すぐにチャット画面が表示されます。

ちゃんとオウム返しも返されます。見た目がしっかりしているので、内部はただのオウム返しでも見栄えがよく見えます。

コードの仕組みを理解する

はじめてなので、コードの中身もしっかり見てみます。

@cl.on_chat_startのデコレータは、ユーザーがチャット画面を開いた瞬間に実行される関数となります。ここで初期メッセージを表示しています。Webアプリケーションでよくあるページ読み込み時の初期化処理が行われています。

@cl.on_messageのデコレータは、ユーザーがメッセージを入力するたびに呼び出される関数となります。message.contentにはユーザーが入力したテキストがそのまま入っているので、これを使って任意の処理をおこなうことになります。

cl.Message(...).send()でチャット画面へメッセージを送信します。この部分は非同期処理（async/await）になっているためUIが同期処理でブロックされません。

応用の方法

今回は単純なオウム返しでしたが、この仕組みがあればいろいろな展開が可能です。

• OpenAIのAPIを使用して本格的なAIチャットボット
• ローカルでOllamaを使用してローカルチャットボット

まとめ

Chainlitを使うことで、チャットUIの構築も技術的なハードルではないですね😎環境構築からコード作成まで、わずか数分で動作するものが作れてしまいます。

特に実際に動くプロトタイプが短時間で作れることは、学びの側面だけでなく、MVPやPoCなどの場面でも十分に価値がありそうです。次回はこれを更に改良して、ローカルLLMのLM Studio、LangChain、RAGとの連携にもチャレンジしてみようと思います。

参考資料

【公式サイト】

【GitHubページ】

【ドキュメント】