chainlit

Chainlit

豊富な UI を備えた、本番環境対応の会話型 AI アプリケーションを Python で構築できます。

インストール

pip install chainlit

クイックスタート

import chainlit as cl

@cl.on_message
async def on_message(message: cl.Message):
    await cl.Message(content=f"You said: {message.content}").send()

次のコマンドで実行します：

chainlit run app.py -w

基本概念

概念	説明
メッセージ	ユーザーとアシスタント間のテキストコミュニケーション
ステップ	表示される処理段階（LLM 呼び出し、ツールの使用）
要素	リッチ UI（画像、ファイル、グラフ、データフレーム）
アクション	コールバック付きのインタラクティブなボタン
セッション	ユーザーごとの状態管理

ライフサイクルフック

import chainlit as cl

@cl.on_chat_start
async def start():
    cl.user_session.set("history", [])
    await cl.Message(content="Hello!").send()

@cl.on_message
async def on_message(message: cl.Message):
    await cl.Message(content="Got it!").send()

@cl.on_chat_end
async def end():
    print("Session ended")

ストリーミング応答

from openai import AsyncOpenAI
import chainlit as cl

client = AsyncOpenAI()
cl.instrument_openai()

@cl.on_message
async def on_message(message: cl.Message):
    msg = cl.Message(content="")
    await msg.send()

    stream = await client.chat.completions.create(
        model="gpt-4",
        messages=[{"role": "user", "content": message.content}],
        stream=True
    )

    async for chunk in stream:
        if token := chunk.choices[0].delta.content:
            await msg.stream_token(token)

    await msg.update()

ステップ（思考の連鎖）

@cl.step(type="tool")
async def search(query: str):
    return f"Results for: {query}"

@cl.step(type="llm")
async def generate(context: str):
    return await llm_call(context)

@cl.on_message
async def on_message(message: cl.Message):
    results = await search(message.content)
    answer = await generate(results)
    await cl.Message(content=answer).send()

ユーザーセッション

@cl.on_chat_start
async def start():
    cl.user_session.set("counter", 0)

@cl.on_message
async def on_message(message: cl.Message):
    count = cl.user_session.get("counter")
    count += 1
    cl.user_session.set("counter", count)

ユーザーに入力を求める

# Text input
response = await cl.AskUserMessage(content="What's your name?").send()
name = response.get("output") if response else "Anonymous"

# File upload
files = await cl.AskFileMessage(
    content="Upload a file",
    accept=["text/plain", "application/pdf"]
).send()

# Action selection
response = await cl.AskActionMessage(
    content="Choose:",
    actions=[
        cl.Action(name="yes", label="Yes"),
        cl.Action(name="no", label="No"),
    ]
).send()

UI 要素

@cl.on_message
async def on_message(message: cl.Message):
    elements = [
        cl.Text(name="code.py", content="print('hello')", language="python"),
        cl.Image(name="chart", path="./chart.png", display="inline"),
        cl.File(name="report.pdf", path="./report.pdf"),
    ]

    await cl.Message(content="Results:", elements=elements).send()

アクション（ボタン）

@cl.action_callback("approve")
async def on_approve(action: cl.Action):
    await action.remove()
    await cl.Message(content="Approved!").send()

@cl.on_message
async def on_message(message: cl.Message):
    actions = [cl.Action(name="approve", label="Approve")]
    await cl.Message(content="Review:", actions=actions).send()

リファレンスドキュメント

詳しい説明については、次を参照してください：

• lifecycle.md - on_chat_start、on_message、on_chat_end フック
• messages.md - Message クラス、ストリーミング、chat_context
• steps.md - Step デコレーター、コンテキストマネージャー、ネストされたステップ
• elements.md - Text、Image、File、PDF、Audio、Video、Plotly
• actions.md - アクションボタン、コールバック、ペイロード
• ask-user.md - AskUserMessage、AskFileMessage、AskActionMessage
• session.md - ユーザーセッション、予約済みキー、状態管理
• auth.md - パスワード、OAuth、ヘッダー認証
• integrations.md - OpenAI、LangChain、LlamaIndex、Mistral
• patterns.md - RAG、ドキュメント Q&A、マルチエージェント、フィードバック

統合

# OpenAI
cl.instrument_openai()

# LangChain
config = RunnableConfig(callbacks=[cl.LangchainCallbackHandler()])

# LlamaIndex
callback_manager = CallbackManager([cl.LlamaIndexCallbackHandler()])

設定

.chainlit/config.toml：

[project]
name = "My App"

[UI]
cot = "full"  # Show chain of thought: full, hidden, tool_call

実行コマンド

# Development with auto-reload
chainlit run app.py -w

# Production
chainlit run app.py --host 0.0.0.0 --port 8000

# Generate auth secret
chainlit create-secret

主要なインポート

import chainlit as cl

# Core
cl.Message, cl.Step, cl.Action

# Elements
cl.Text, cl.Image, cl.File, cl.Pdf, cl.Audio, cl.Video
cl.Plotly, cl.Dataframe, cl.TaskList

# Ask User
cl.AskUserMessage, cl.AskFileMessage, cl.AskActionMessage

# Decorators
@cl.on_chat_start, @cl.on_message, @cl.on_chat_end
@cl.step, @cl.action_callback
@cl.password_auth_callback, @cl.oauth_callback