Chainlit: Membangun Chat UI Production-Ready untuk Aplikasi LLM
Membangun aplikasi LLM yang powerful saja tidak cukup. Pengguna membutuhkan antarmuka chat yang intuitif dan profesional untuk berinteraksi dengan model AI. Namun, membangun UI chat dari nol membutuhkan waktu dan effort yang besar, mulai dari WebSocket, state management, hingga file handling.
Chainlit hadir sebagai framework Python yang memungkinkan Anda membangun chat UI production-ready dalam hitungan menit. Dengan Chainlit, Anda bisa fokus pada logika AI sambil mendapatkan antarmuka yang cantik, streaming response, file upload, dan banyak fitur lainnya secara otomatis.Apa Itu Chainlit?
Chainlit adalah framework open-source Python untuk membangun antarmuka chat conversational AI. Fitur utamanya meliputi:
- Chat UI Siap Produksi: Antarmuka modern dengan dukungan markdown, code highlighting, dan file preview
- Streaming Response: Menampilkan respons LLM secara real-time token per token
- Multi-Step Reasoning: Visualisasi proses berpikir AI dengan step-by-step display
- File Upload & Download: Handling file bawaan untuk dokumen, gambar, dan lainnya
- User Authentication: Sistem login terintegrasi dengan berbagai provider
- Chat History: Penyimpanan dan recall percakapan sebelumnya
- Integrasi LangChain/LlamaIndex: Dukungan native untuk framework AI populer
- Custom Actions: Tombol interaktif dan aksi kustom dalam chat
- Theming: Kustomisasi tampilan sesuai brand Anda
Instalasi
Instalasi Dasar
pip install chainlit
Instalasi dengan Dependensi Tambahan
# Dengan dukungan LangChain
pip install chainlit langchain langchain-openai
Dengan dukungan LlamaIndex
pip install chainlit llama-index
Verifikasi Instalasi
chainlit --version
Menjalankan Aplikasi Pertama
Buat file app.py:
import chainlit as cl
@cl.onmessage
async def main(message: cl.Message):
# Kirim respons sederhana
await cl.Message(
content=f"Anda mengirim: {message.content}"
).send()
Jalankan dengan:
chainlit run app.py
Buka browser di http://localhost:8000 dan Anda akan melihat antarmuka chat yang profesional.
Konsep Dasar: Decorator dan Message
@cl.onmessage - Handler Pesan Utama
Decorator @cl.onmessage adalah entry point utama. Fungsi ini dipanggil setiap kali pengguna mengirim pesan.
import chainlit as cl
@cl.onmessage
async def handlemessage(message: cl.Message):
# Akses konten pesan
userinput = message.content
# Akses file yang diunggah (jika ada)
files = message.elements
# Proses dan kirim respons
response = f"Pesan diterima: {userinput}"
await cl.Message(content=response).send()
@cl.onchatstart - Inisialisasi Chat
Decorator ini dipanggil saat sesi chat baru dimulai. Gunakan untuk menyiapkan konteks, model, atau menyapa pengguna.
import chainlit as cl
@cl.onchatstart
async def start():
# Simpan state di session
cl.usersession.set("history", [])
# Kirim pesan sambutan
await cl.Message(
content="Halo! Saya adalah asisten AI. Ada yang bisa saya bantu?"
).send()
@cl.onmessage
async def main(message: cl.Message):
# Ambil history dari session
history = cl.usersession.get("history")
history.append({"role": "user", "content": message.content})
# Proses pesan...
response = "Respons dari AI"
history.append({"role": "assistant", "content": response})
cl.usersession.set("history", history)
await cl.Message(content=response).send()
Tipe Pesan: Teks, Gambar, dan File
Pesan Teks dengan Markdown
@cl.onmessage
async def main(message: cl.Message):
# Chainlit mendukung markdown penuh
response = """