Chainlit: व्यावहारिक उदाहरणों के साथ एक मार्गदर्शिका

Chainlit क्या है?

Chainlit आपको AI चैटबॉट्स, टूल्स, और LLM वर्कफ़्लो के लिए फ्रंटएंड बनाने में मदद करता है। यह फ्रंट-एंड की जटिलता को हटा देता है और आपको Python लॉजिक पर फोकस करने देता है, साथ ही बटन, स्लाइडर, फ़ाइल अपलोड सपोर्ट जोड़ने या model context protocol (MCP) के जरिए टूल्स से कनेक्ट करने का भी विकल्प देता है।

Chainlit इन कार्यों के लिए आदर्श है:

• LLM-आधारित ऐप्स का प्रोटोटाइप बनाना
• आंतरिक टूल्स बनाना
• शैक्षिक डेमो तैयार करना
• अपने मॉडलों को बाहरी टूल्स या APIs से जोड़ना

Chainlit के घटक

हर Chainlit ऐप कुछ आवश्यक फीचर्स पर आधारित होता है:

1. चैट लाइफसाइकल हुक्स: ये आपको चैट के विभिन्न चरणों में क्या होना है, उसे नियंत्रित करने देते हैं। उदाहरण के लिए:
• @cl.on_chat_start तब चलता है जब चैट शुरू होती है।
• @cl.on_message तब चलता है जब उपयोगकर्ता संदेश भेजता है।
• @cl.on_chat_end तब चलता है जब चैट समाप्त होती है।
2. UI एक्शंस: Chainlit आपको cl.Action के साथ बटन जोड़ने और @cl.action_callback से उन्हें संभालने देता है। ये बिना टेक्स्ट इनपुट के भी सुस्पष्ट, इंटरैक्टिव UI बनाने में मददगार हैं।
3. मैसेज स्ट्रीमिंग: ऐसे LLMs के साथ जो टोकन स्ट्रीमिंग सपोर्ट करते हैं, आप stream=True का उपयोग कर रियल-टाइम में प्रतिक्रियाएँ स्ट्रीम कर सकते हैं, जिससे आपका ऐप अधिक गतिशील और उत्तरदायी लगता है।
4. config.toml से कॉन्फ़िगरेशन: यह फ़ाइल आपको चैट परसिस्टेंस, फ़ाइल अपलोड, थीम कस्टमाइज़ेशन, और उपयोगिता सुधार जैसे फीचर्स को—आपके Python कोड के बिना छुए—सक्षम करने देती है।

मैं हर कॉन्सेप्ट को हैंड्स-ऑन कोड उदाहरण के साथ समझाऊँगा, ताकि आप देख सकें यह कैसे काम करता है और इसे अपने Chainlit ऐप्स में कैसे जोड़ा जाए। चलिए पहले चरण से शुरू करते हैं।

पूर्वापेक्षाएँ

सुनिश्चित करें कि आपके पास Python 3.8+ इंस्टॉल है, फिर pip का उपयोग करके Chainlit इंस्टॉल करें। हम Ollama डेमो के लिए Langchain भी उपयोग करेंगे, इसलिए इसे इंस्टॉल करना न भूलें। टर्मिनल में निम्न कमांड चलाएँ:

pip install chainlit langchain langchain-communityसंचालित द्वारा

उदाहरणों के जरिए Chainlit की बुनियादी बातें समझना

इस खंड में, हम Chainlit के मूल बिल्डिंग ब्लॉक्स कवर करेंगे, जो किसी भी प्रोजेक्ट का आधार बनते हैं।

चैट लाइफसाइकल हुक्स

जब भी कोई उपयोगकर्ता आपके Chainlit ऐप से जुड़ता है, एक चैट सेशन बनता है। आप Chainlit के दिए डेकोरेटर्स की मदद से उस सेशन के अलग-अलग चरणों में हुक कर सकते हैं। इनमें शामिल हैं:

@cl.on_chat_start के साथ निर्माण

यह हुक एक नया चैट सेशन शुरू होने पर चलता है। आप इसका उपयोग उपयोगकर्ता का अभिवादन करने, वेलकम संदेश दिखाने या सेशन स्टेट इनिशियलाइज़ करने के लिए कर सकते हैं।

import chainlit as cl
@cl.on_chat_start
def on_chat_start():
    print("A new chat session has started!")संचालित द्वारा

@cl.on_message के साथ निर्माण

यह मैसेज हुक तब चलता है जब उपयोगकर्ता नया संदेश भेजता है। हम इसका उपयोग यूज़र इनपुट प्रोसेस करने, LLM कॉल करने या प्रतिक्रिया लौटाने के लिए करते हैं।

import chainlit as cl
@cl.on_message
async def on_message(msg: cl.Message):
    print("The user sent:", msg.content)
    await cl.Message(content=f"You said: {msg.content}").send()संचालित द्वारा

@cl.on_stop के साथ निर्माण

जब कोई कार्य चल रहा हो, तब उपयोगकर्ता स्टॉप बटन (⏹) क्लिक करता है, तो on_stop हुक चलता है। यह लंबे समय तक चलने वाले ऑपरेशनों को रद्द करने या बाधित सेशंस की सफाई करने के काम आता है।

import chainlit as cl
import asyncio
@cl.on_chat_start
async def start():
    await cl.Message("Type anything and I'll pretend to work on it.").send()
@cl.on_message
async def on_message(msg: cl.Message):
    await cl.Message("Working on it... you can press Stop").send()
    try:
        # Simulate a long task
        await asyncio.sleep(10)
        await cl.Message("Task complete!").send()
    except asyncio.CancelledError:
        print("Task was interrupted!")
        # This is optional, just logs in the server
        raise
@cl.on_stop
async def on_stop():
    print("The user clicked Stop!")संचालित द्वारा

जब उपयोगकर्ता संदेश भेजता है, तो Chainlit asyncio.sleep(10) से एक कार्य का सिमुलेशन करता है। यदि उपयोगकर्ता स्टॉप बटन (⏹) क्लिक करता है, तो कार्य रद्द हो जाता है और रुकावट लॉग करने के लिए @cl.on_stop ट्रिगर होता है।

@cl.on_chat_end के साथ निर्माण

यह हुक सेशन समाप्त होने पर ट्रिगर होता है—या तो उपयोगकर्ता रिफ्रेश करता है, टैब बंद करता है, या नया सेशन शुरू करता है। आम तौर पर इसका उपयोग डिसकनेक्शन लॉग करने या स्टेट सेव करने के लिए किया जाता है।

import chainlit as cl
@cl.on_chat_start
async def on_chat_start():
    await cl.Message("Welcome! Feel free to leave anytime").send()
@cl.on_chat_end
async def on_chat_end():
    print("The user disconnected!")संचालित द्वारा

एक बार localhost खुलने के बाद, आप इसके साथ काम कर सकते हैं। जब आप localhost टैब या विंडो बंद करेंगे, तो टर्मिनल में निम्न दिखेगा:

UI एक्शंस (बटन)

Chainlit आपको सीधे अपने चैटबॉट इंटरफेस में इंटरएक्टिव बटन जोड़ने देता है। हर बटन एक एक्शन के रूप में परिभाषित होता है और एक Python कॉलबैक फ़ंक्शन से जुड़ा होता है। आप एक Message के हिस्से के रूप में actions आर्ग्यूमेंट का उपयोग करके बटन भेजते हैं:

import chainlit as cl
@cl.on_chat_start
async def start():
    actions = [
        cl.Action(
            name="hello",
            label="👋 Say Hello",
            icon="smile",
            payload={"value": "hi"}
        )
    ]
    await cl.Message("Click a button!", actions=actions).send()संचालित द्वारा

बटन क्लिक को ऐसे हैंडल कर सकते हैं:

@cl.action_callback("hello")
async def on_hello(action: cl.Action):
    await cl.Message("Hello there! 👋").send()संचालित द्वारा

डेकोरेटर @cl.action_callback("hello") Chainlit को बताता है कि "hello" नाम वाले बटन पर क्लिक सुनना है। क्लिक होने पर, यह चैट इंटरफेस में उपयोगकर्ता को एक मैत्रीपूर्ण संदेश भेजता है।

सुझाव: आप payload को कस्टमाइज़ कर सकते हैं और सर्वर को भेजने के लिए कोई भी डेटा शामिल कर सकते हैं।

मैसेज स्ट्रीमिंग 

Chainlit LLM प्रतिक्रियाओं की वास्तविक समय में स्ट्रीमिंग सपोर्ट करता है। यानी आप उत्पन्न होते ही कंटेंट को क्रमशः उपयोगकर्ता तक भेज सकते हैं।

@cl.on_message
async def on_message(message: cl.Message):
    await cl.Message(content="Thinking...").send()
    async for chunk in llm.astream(message.content):
        await cl.Message(content=chunk, author="LLM", stream=True).send()संचालित द्वारा

आइए इसे समझते हैं:

• पहले यह तुरंत "Thinking..." संदेश दिखाता है ताकि उपयोगकर्ता जान सके कि ऐप काम कर रहा है।
• फिर यह उपयोगकर्ता का संदेश एक स्ट्रीमिंग-संगत LLM को भेजता है।
• जैसे-जैसे मॉडल आउटपुट बनाता है, यह हर टुकड़ा (chunk) वास्तविक समय में UI तक स्ट्रीम करता है।
• पैरामीटर stream=True सुनिश्चित करता है कि पूरा उत्तर आने का इंतज़ार करने के बजाय हर हिस्सा क्रमिक रूप से दिखे।

ध्यान दें: यह उन मॉडलों के साथ सबसे अच्छा काम करता है जो स्ट्रीमिंग सपोर्ट करते हैं।

Chainlit कॉन्फ़िगरेशन (config.toml)

चैट परसिस्टेंस, फ़ाइल अपलोड, थीमिंग, और अन्य शक्तिशाली फीचर्स सक्षम करने के लिए, आप config.toml फ़ाइल से अपने Chainlit ऐप को कस्टमाइज़ कर सकते हैं। यह फ़ाइल आपके प्रोजेक्ट डायरेक्टरी की रूट में (.chainlit फ़ोल्डर के अंदर) रहती है और आपको कोड में बदलाव किए बिना रनटाइम व्यवहार समायोजित करने देती है।

परसिस्टेंस

यह पैरामीटर Chainlit को चैट इतिहास और सेशन स्टेट को संरक्षित करने देता है। यह @cl.on_chat_resume हुक को सक्रिय करता है, जो उन ऐप्स के लिए आदर्श है जहाँ उपयोगकर्ता डिस्कनेक्ट होकर बाद में लौट सकते हैं।

[persistence]
enabled = trueसंचालित द्वारा

फ़ाइल अपलोडिंग

यह सेटिंग उपयोगकर्ताओं को चैट इंटरफेस में फ़ाइलें अपलोड करने देती है। आप सुरक्षा और प्रदर्शन सुनिश्चित करने के लिए स्वीकृत फ़ाइल प्रकारों और आकारों को सीमित कर सकते हैं।

[features.spontaneous_file_upload]
enabled = true
accept = ["*/*"] 
max_files = 5
max_size_mb = 500संचालित द्वारा

यहाँ कुछ फ़ाइल प्रकारों के उदाहरण हैं जो Chainlit द्वारा स्वीकार किए जाते हैं।

# 1. For specific file types:
    # accept = ["image/jpeg", "image/png", "application/pdf"]
# 2. For all files of a certain type:
    #    accept = ["image/*", "audio/*", "video/*"]
# 3. For specific file extensions:
    #    accept = { "application/octet-stream" = [".xyz", ".pdb"] }संचालित द्वारा

यह आपको सुरक्षा, प्रदर्शन या डोमेन-विशिष्ट उपयोग मामलों के लिए अपलोड्स को अनुकूलित करने देता है।

UI कस्टमाइज़ेशन

यह कस्टमाइज़ेशन UI पैरामीटर के अंतर्गत सहायक का नाम बदलता है और रेंडरिंग मोड में Chain of Thought (CoT) सक्षम करता है, जो चरण-दर-चरण तर्क या डीबगिंग के लिए उपयोगी है।

[UI]
name = "Assistant"
cot = "full"संचालित द्वारा

उपयोगिता सुधार

ये UX को बेहतर बनाते हैं—नए संदेशों को ऑटो-स्क्रॉल में दिखाते हैं और संदेश संपादन की अनुमति देते हैं।

[features]
user_message_autoscroll = true
edit_message = trueसंचालित द्वारा

उपरोक्त उपयोगिता सुधार UI के भीतर ऑटोस्क्रॉल और संदेश संपादन फीचर्स सक्षम करते हैं।

प्रोजेक्ट: Surprise Me बॉट (बिना LLM)

अब जबकि हमें Chainlit के बुनियादी घटक समझ आ गए हैं, आइए एक साधारण UI-आधारित ऐप बनाते हैं जो बटनों से पूर्व-निर्धारित मजेदार तथ्य या डेवलपर मोटिवेशन संदेश दिखाता है।

import chainlit as cl
import random
FUN_FACTS = [
    "💡 Did you know? Chainlit supports file uploads and custom themes!",
    "💡 You can add buttons, sliders, and images directly in your chatbot UI!",
    "💡 Chainlit supports real-time tool execution with LangChain and LLMs!",
    "💡 You can customize the look of your chatbot with just a CSS file!",
    "💡 Chainlit lets you connect to tools using Model Context Protocol (MCP)!"
]
SUPRISES = [
    "🎉 Surprise! You're doing great!",
    "🚀 Keep it up, you're making awesome progress!",
    "🌟 Fun fact: Someone out there just smiled because of you. Why not make it two?",
    "👏 Bravo! You just unlocked +10 imaginary developer XP!",
    "💪 Remember: Even bugs fear your debugging skills!"
]
@cl.on_chat_start
async def start():
    actions = [
        cl.Action(
            name="surprise_button",
            label="🎁 Surprise Me",
            icon="gift",
            payload={"value": "surprise"}
        ),
        cl.Action(
            name="fact_button",
            label="💡 Did You Know?",
            icon="lightbulb",
            payload={"value": "fact"}
        )
    ]
    await cl.Message(content="Choose an action:", actions=actions).send()
@cl.action_callback("surprise_button")
async def on_surprise(action: cl.Action):
    suprise = random.choice(SUPRISES)
    await cl.Message(content=suprise).send()
@cl.action_callback("fact_button")
async def on_fact(action: cl.Action):
    fact = random.choice(FUN_FACTS)
    await cl.Message(content=fact).send()संचालित द्वारा

ऊपर के कोड में दो सूचियाँ परिभाषित हैं: “FUN_FACTS” रोचक Chainlit टिप्स के लिए और “SUPRISES” प्रेरक संदेशों के लिए।

• नए चैट शुरू होने पर यह दो बटन दिखाता है: "Surprise Me" और "Did You Know?"—cl.Action. ' का उपयोग करके
• "Surprise Me" पर क्लिक करने से @cl.action_callback("surprise_button") ट्रिगर होता है, जो एक रैंडम सरप्राइज़ संदेश भेजता है।
• "Did You Know?" पर क्लिक करने से @cl.action_callback("fact_button")` ट्रिगर होता है, जो एक रैंडम फ़न फ़ैक्ट भेजता है।

यह बटनों से बना एक सरल, इंटरैक्टिव चैटबॉट तैयार करता है, जिसमें LLMs की आवश्यकता नहीं और यह समझने के लिए उपयुक्त है कि Chainlit एक्शंस और कॉलबैक्स कैसे काम करते हैं।

इस एप्लिकेशन को चलाने के लिए, टर्मिनल में बस निम्न कमांड चलाएँ:

chainlit run main.pyसंचालित द्वारा

आप UI में इंटरैक्टिव बटन देखेंगे जो तथ्य या मजेदार संदेश ट्रिगर करते हैं!

प्रोजेक्ट: Ollama द्वारा संचालित Surprise Me बॉट

अब इस प्रक्रिया को ऑटोमेट करते हैं और स्थानीय LLM (Ollama) के जरिए सरप्राइज़ और तथ्य संदेश जनरेट कराते हैं।

import chainlit as cl
from langchain_community.llms import Ollama
import random
llm = Ollama(model="mistral", temperature=0.7)  # Use any lightweight local model
# Reusable action buttons
def get_action_buttons():
    return [
        cl.Action(
            name="surprise_button",
            label="🎁 Surprise Me",
            icon="gift",
            payload={"value": "surprise"}
        ),
        cl.Action(
            name="fact_button",
            label="💡 Did You Know?",
            icon="lightbulb",
            payload={"value": "fact"}
        )
    ]

@cl.on_chat_start
async def start():
    await cl.Message(content="Choose an action below to see something fun:").send()
    await cl.Message(content="", actions=get_action_buttons()).send()
@cl.action_callback("surprise_button")
async def on_surprise(action: cl.Action):
    prompt = "Give a short, uplifting surprise message to a developer. Make it fun."
    try:
        surprise = llm.invoke(prompt).strip()
    except Exception:
        surprise = "🎉 Surprise! You're doing great!"
    await cl.Message(content=surprise).send()
    await cl.Message(content="", actions=get_action_buttons()).send()  
@cl.action_callback("fact_button")
async def on_fact(action: cl.Action):
    prompt = "Give a fun and helpful fact about LLMs or Chainlit."
    try:
        fact = llm.invoke(prompt).strip()
    except Exception:
        fact = "💡 Did you know? You can add sliders and buttons to Chainlit with just a few lines of code!"
    await cl.Message(content=fact).send()
    await cl.Message(content="", actions=get_action_buttons()).send()  संचालित द्वारा

यह Chainlit ऐप एक स्थानीय LLM (Ollama के जरिए Mistral मॉडल) को इंटीग्रेट करता है, जो उपयोगकर्ता इंटरैक्शन के आधार पर डायनेमिक प्रतिक्रियाएँ जनरेट करता है।

• यह दो cl.Action बटन—"Surprise Me" और "Did You Know?"—एक पुन: प्रयोज्य get_action_buttons() फ़ंक्शन से परिभाषित करता है।
• चैट इनिशियलाइज़ेशन (@cl.on_chat_start) पर इन इंटरैक्टिव बटनों के साथ संदेश भेजता है।
• जब उपयोगकर्ता "Surprise Me" बटन क्लिक करता है, तो @cl.action_callback हैंडलर LLM को एक छोटा, उत्साहवर्धक डेवलपर संदेश माँगने वाला प्रॉम्प्ट भेजता है। प्रतिक्रिया को .strip() से साफ कर चैट में भेज दिया जाता है।
• इसी तरह, "Did You Know?" पर क्लिक करने से Chainlit या LLMs पर एक जानकारीपूर्ण तथ्य माँगने वाला प्रॉम्प्ट भेजा जाता है।
• यदि LLM विफल हो, तो फॉलबैक स्थिर प्रतिक्रियाएँ लौटाई जाती हैं।
• हर इंटरैक्शन के बाद, वार्तालाप लूप बनाए रखने के लिए बटन फिर से भेजे जाते हैं।

यह दिखाता है कि कैसे Chainlit UI को LLM-आधारित कंटेंट जनरेशन के साथ संयोजित किया जा सकता है, जो स्थानीय AI-संचालित चैट ऐप्स के लिए एक मॉड्यूलर और विस्तारयोग्य आधार प्रदान करता है।

टर्मिनल में निम्न कमांड चलाएँ:

ollama run mistral
chainlit run main.pyसंचालित द्वारा

अब आपके पास एक लाइव, स्थानीय AI सहायक है जो स्वचालित संदेश जनरेट कर रहा है।

निष्कर्ष

Chainlit में चैट-आधारित टूल्स का प्रोटोटाइप बनाने, असिस्टेंट तैयार करने, और रियल-टाइम LLM आउटपुट्स को इंटीग्रेट करने की मजबूत क्षमता है—वह भी बिना JavaScript छुए। उन्नत उपयोग मामलों के लिए, Chainlit Cookbook देखें।

नई AI टूल्स के साथ अपना सीखना बढ़ाने के लिए, निम्न ब्लॉग देखें:

• OpenAI का Codex: 3 व्यावहारिक उदाहरणों के साथ एक मार्गदर्शिका
• Haystack AI ट्यूटोरियल: एजेंटिक वर्कफ़्लो बनाना
• n8n: व्यावहारिक उदाहरणों के साथ एक मार्गदर्शिका