チャット UI を簡単に作れる「Chainlit」の紹介 ~ LangChain との統合 ~

Chainlit とは?

Chainlit は Python で ChatGPT のような UI を作れるライブラリです.
LangChain と統合されているため, 簡単に UI を作れます.

今回は例として, 入力された文章を関西弁に変換するチェーンをあらかじめ用意しておきます.

$ pip install langchain langchain_openai

my_chain.py

from langchain.chains import LLMChain
from langchain.chains.base import Chain
from langchain.prompts import PromptTemplate
from langchain_openai import ChatOpenAI

template = """関西弁に変換してください.
- 変換前: {input}
- 変換後: """


def create_chain() -> Chain:
    llm = ChatOpenAI(temperature=0, model="gpt-3.5-turbo", streaming=True)
    prompt = PromptTemplate(template=template, input_variables=["input"])
    return LLMChain(prompt=prompt, llm=llm, verbose=True)

Chainlit で UI を作る

まず chainlit を install します.

$ pip install chainlit

公式ドキュメント を参考に, 以下のようなコードを書きます.

my_chat.py

import my_chain
import chainlit as cl
from langchain.chains.base import Chain
from typing import cast


@cl.on_chat_start
def on_chat_start():
    # チェーンをインスタンス化
    chain = my_chain.create_chain()

    # チェーンをセッションに保存
    cl.user_session.set("chain", chain)


@cl.on_message
async def on_message(query: cl.Message):
    # チェーンをセッションから取得
    chain = cast(Chain, cl.user_session.get("chain"))

    # チェーンを呼び出し
    res = await chain.acall(query.content, callbacks=[cl.AsyncLangchainCallbackHandler()])

    # チェーンの応答を送信
    await cl.Message(content=res["text"]).send()

Chainlit は .env ファイルを自動で読み込むため, OPENAI_API_KEY を書いておきます.

.env

OPENAI_API_KEY=*****

これでもうチャット UI が完成しました. chainlit run で起動します.

$ chainlit run my_chat.py
2025-04-29 13:01:20 - Created default config file at /Users/skkzsh/path/to/.chainlit/config.toml
2025-04-29 13:01:20 - Created default translation directory at /Users/skkzsh/path/to/.chainlit/translations
2025-04-29 13:01:20 - Created default translation file at /Users/skkzsh/path/to/.chainlit/translations/en-US.json
2025-04-29 13:01:20 - Loaded .env file
2025-04-29 13:01:20 - Created default chainlit markdown file at /Users/skkzsh/path/to/chainlit.md
2025-04-29 13:01:20 - Your app is available at http://localhost:8000

http://localhost:8000 でチャット UI にアクセスできます. ¹

チャットしてみると以下のような感じです.

推論プロセスの視覚化 (と中間ステップのデバッグ)

「You」と「Chatbot」の間にある「Took ◯ steps」を展開すると, 推論プロセスも UI から確認することができます.
これにより, 推論がどのように進行し, 各ステップがどのように機能しているかを視覚的に追跡することができます.

この例では単純なチェーンですが, より複雑なチェーンを作ると, 「思考の連鎖」の過程をより視覚的に把握することができます.

さらに「Inspect in prompt playground」(最下のターミナルのようなアイコン) を押下すると, Prompt playground 画面が開きます.

これにより, 中間ステップのプロンプトでデバッグしたり,
model や temperature などのパラメータを変更したりすることが可能です.

バージョン情報

• Chainlit 1.0.506
• LangChain 0.3.24
• Python 3.13.3

1. --port オプションでポートをデフォルトの8000番から変えられます ↩