### Verify Chainlit Installation

Source: https://docs.chainlit.io/get-started/installation

Runs the `chainlit hello` command to verify that Chainlit has been installed correctly. This command launches the Chainlit UI and prompts the user for their name, confirming that the installation was successful and the command-line interface is functional.

```bash
chainlit hello
```

--------------------------------

### Chainlit OpenAI Integration Setup (Python)

Source: https://docs.chainlit.io/integrations/message-based

Sets up the OpenAI client for use with Chainlit and instruments it to log calls. This example uses LM Studio as the inference server. Ensure you have the `openai` and `chainlit` libraries installed. The `cl.instrument_openai()` function is crucial for logging.

```python
from openai import AsyncOpenAI
import chainlit as cl
client = AsyncOpenAI(base_url="http://localhost:1234/v1", api_key="lm-studio")
# Instrument the OpenAI client
cl.instrument_openai()

settings = {
    "model": "gpt-3.5-turbo",
    "temperature": 0,
    # ... more settings
}

@cl.on_message
async def on_message(message: cl.Message):
    response = await client.chat.completions.create(
        messages=[
            {
                "content": "You are a helpful bot, you always reply in Spanish",
                "role": "system"
            },
            {
                "content": message.content,
                "role": "user"
            }
        ],
        **settings
    )
    await cl.Message(content=response.choices[0].message.content).send()
```

--------------------------------

### Install Chainlit using pip

Source: https://docs.chainlit.io/get-started/installation

Installs the Chainlit Python package using pip. This command makes the `chainlit` executable available in your system's PATH, enabling you to run Chainlit applications from the terminal. Ensure you have Python version 3.9 or higher installed.

```bash
pip install chainlit
```

--------------------------------

### Install @chainlit/react-client Package

Source: https://docs.chainlit.io/deploy/react/installation-and-setup

Installs the @chainlit/react-client package using npm. This package provides React hooks and an API client for interacting with Chainlit applications.

```bash
npm install @chainlit/react-client
```

--------------------------------

### Python: Chainlit and Semantic Kernel Setup

Source: https://docs.chainlit.io/integrations/semantic-kernel

Sets up Semantic Kernel with Chainlit integration, including adding an AI service, a native plugin (WeatherPlugin), and the SemanticKernelFilter. It defines handlers for chat start and incoming messages to manage chat history and stream responses.

```python
import chainlit as cl
import semantic_kernel as sk
from semantic_kernel.connectors.ai import FunctionChoiceBehavior
from semantic_kernel.connectors.ai.open_ai import (
    OpenAIChatCompletion,
    OpenAIChatPromptExecutionSettings,
)
from semantic_kernel.functions import kernel_function
from semantic_kernel.contents import ChatHistory

request_settings = OpenAIChatPromptExecutionSettings(
    function_choice_behavior=FunctionChoiceBehavior.Auto(filters={"excluded_plugins": ["ChatBot"]})
)

# Example Native Plugin (Tool)
class WeatherPlugin:
    @kernel_function(name="get_weather", description="Gets the weather for a city")
    def get_weather(self, city: str) -> str:
        """Retrieves the weather for a given city."""
        if "paris" in city.lower():
            return f"The weather in {city} is 20°C and sunny."
        elif "london" in city.lower():
            return f"The weather in {city} is 15°C and cloudy."
        else:
            return f"Sorry, I don't have the weather for {city}."

@cl.on_chat_start
async def on_chat_start():
    # Setup Semantic Kernel
    kernel = sk.Kernel()

    # Add your AI service (e.g., OpenAI)
    # Make sure OPENAI_API_KEY and OPENAI_ORG_ID are set in your environment
    ai_service = OpenAIChatCompletion(service_id="default", ai_model_id="gpt-4o")
    kernel.add_service(ai_service)

    # Import the WeatherPlugin
    kernel.add_plugin(WeatherPlugin(), plugin_name="Weather")
    
    # Instantiate and add the Chainlit filter to the kernel
    # This will automatically capture function calls as Steps
    sk_filter = cl.SemanticKernelFilter(kernel=kernel)

    cl.user_session.set("kernel", kernel)
    cl.user_session.set("ai_service", ai_service)
    cl.user_session.set("chat_history", ChatHistory())

@cl.on_message
async def on_message(message: cl.Message):
    kernel = cl.user_session.get("kernel") # type: sk.Kernel
    ai_service = cl.user_session.get("ai_service") # type: OpenAIChatCompletion
    chat_history = cl.user_session.get("chat_history") # type: ChatHistory

    # Add user message to history
    chat_history.add_user_message(message.content)

    # Create a Chainlit message for the response stream
    answer = cl.Message(content="")

    async for msg in ai_service.get_streaming_chat_message_content(
        chat_history=chat_history,
        user_input=message.content,
        settings=request_settings,
        kernel=kernel,
    ):
        if msg.content:
            await answer.stream_token(msg.content)

    # Add the full assistant response to history
    chat_history.add_assistant_message(answer.content)

    # Send the final message
    await answer.send()
```

--------------------------------

### Basic Chainlit Message Handling

Source: https://docs.chainlit.io/examples/security

A fundamental Chainlit example demonstrating how to receive and echo a user's message back to them. This snippet serves as a starting point before implementing PII checks.

```python
import chainlit as cl

@cl.on_message
async def main(message: cl.Message):
    # Notice that the message is passed as is
    response = await cl.Message(
        content=f"Received: {message.content}",
    ).send()
```

--------------------------------

### Starting FastAPI Server with Chainlit Integration

Source: https://docs.chainlit.io/integrations/fastapi

Command to start a FastAPI server using uvicorn. It specifies the main application file ('main') and the FastAPI instance ('app'), along with host and port configurations. This command is used to run the FastAPI application that includes the mounted Chainlit instance.

```bash
uvicorn main:app --host 0.0.0.0 --port 80
```

--------------------------------

### Install Dependencies for Text to SQL

Source: https://docs.chainlit.io/examples/openai-sql

Installs the necessary Python libraries, chainlit and openai, required for the Text-to-SQL application. These are essential for building the chat interface and interacting with the language model.

```bash
pip install chainlit openai
```

--------------------------------

### Run QA Chatbot Application

Source: https://docs.chainlit.io/examples/qa

Executes the Chainlit QA application from the command line. This command starts the web server, allowing users to interact with the chatbot through a web interface.

```bash
chainlit run qa.py
```

--------------------------------

### Install Discord Library

Source: https://docs.chainlit.io/deploy/discord

Installs the necessary Discord library for Python. This is a prerequisite for building Discord integrations with Chainlit.

```bash
pip install discord
```

--------------------------------

### Install QA Chatbot Dependencies

Source: https://docs.chainlit.io/examples/qa

Installs the necessary Python packages for the conversational document QA application. This includes LangChain core, community integrations, Chroma for vector storage, Tiktoken for tokenization, and OpenAI integrations.

```bash
pip install langchain langchain-community chromadb tiktoken openai langchain-openai
```

--------------------------------

### Install Botbuilder Library for Chainlit Teams Integration

Source: https://docs.chainlit.io/deploy/teams

This command installs the necessary Botbuilder library, which is not a default dependency for Chainlit, to enable Teams integration. Ensure you have pip installed before running.

```bash
pip install botbuilder-core
```

--------------------------------

### Install Slack Bolt Library

Source: https://docs.chainlit.io/deploy/slack

Installs the Slack Bolt library, which is required for Slack integration with Chainlit. This library handles communication between Slack and your application.

```bash
pip install slack_bolt
```

--------------------------------

### Initialize Chainlit Project (`init`)

Source: https://docs.chainlit.io/backend/command-line

The `init` command is used to initialize a new Chainlit project. It creates a configuration file named `config.toml` within the `.chainlit/` directory, which serves as the central configuration point for the project. No specific dependencies are required beyond the Chainlit CLI installation.

```bash
chainlit init
```

--------------------------------

### User Session - Correct Example

Source: https://docs.chainlit.io/concepts/user-session

This example demonstrates the correct way to use the user session to maintain a message counter for each unique chat session.

```APIDOC
## User Session - Correct Example

### Description
This example demonstrates how to correctly use the user session to keep track of message counts per user chat session, avoiding issues with concurrent users.

### Method
This is a conceptual example demonstrating the use of Chainlit decorators and session management. It does not correspond to a specific HTTP endpoint.

### Endpoint
N/A

### Parameters
N/A

### Request Example
N/A

### Response
#### Success Response
- **content** (str) - The message content reflecting the current message count for the user's session.

#### Response Example
```json
{
  "content": "You sent 5 message(s)!"
}
```
```

--------------------------------

### Chainlit Chatbot Initialization for FastAPI

Source: https://docs.chainlit.io/integrations/fastapi

Initializes a simple Chainlit chatbot that sends a 'Hello World' message when a chat starts. This script is intended to be mounted as a sub-application within a FastAPI server.

```python
import chainlit as cl

@cl.on_chat_start
async def main():
    await cl.Message(content="Hello World").send()
```

--------------------------------

### Install Dependencies for SQLAlchemy Data Layer

Source: https://docs.chainlit.io/data-layers/sqlalchemy

Installs the necessary Python packages for using the SQLAlchemy data layer with PostgreSQL and Azure Blob Storage. This includes libraries for async database access, SQLAlchemy, Azure storage, and HTTP requests.

```bash
pip install asyncpg SQLAlchemy azure-identity azure-storage-file-datalake aiohttp greenlet

```

--------------------------------

### FastAPI Application Setup with Chainlit Mount

Source: https://docs.chainlit.io/integrations/fastapi

Sets up a FastAPI application with a root endpoint and mounts a Chainlit application under the '/chainlit' path. Requires the 'chainlit' and 'fastapi' libraries. The Chainlit app is specified by its Python file and target.

```python
from fastapi import FastAPI
from chainlit.utils import mount_chainlit

app = FastAPI()


@app.get("/app")
def read_main():
    return {"message": "Hello World from main app"}

mount_chainlit(app=app, target="my_cl_app.py", path="/chainlit")
```

--------------------------------

### Action Selection API

Source: https://docs.chainlit.io/advanced-features/ask-user

Ask the user to pick an action from a list of options. This is useful for guiding the user through a decision process.

```APIDOC
## POST /api/ask/action

### Description
Prompts the user to select an action from a list of choices.

### Method
POST

### Endpoint
/api/ask/action

### Parameters
#### Request Body
- **content** (string) - Required - The message to display to the user.
- **actions** (array) - Required - A list of actions available for selection.
  - **name** (string) - Required - The unique identifier for the action.
  - **label** (string) - Required - The display name for the action.
- **timeout** (integer) - Optional - The timeout in seconds for the user input.

### Request Example
```json
{
  "content": "What would you like to do?",
  "actions": [
    {"name": "option_a", "label": "Option A"},
    {"name": "option_b", "label": "Option B"}
  ],
  "timeout": 30
}
```

### Response
#### Success Response (200)
- **content** (string) - The name of the selected action.

#### Response Example
```json
{
  "content": "option_a"
}
```
```

--------------------------------

### Create Chainlit App with Embedchain Integration (Python)

Source: https://docs.chainlit.io/integrations/embedchain

Defines a Chainlit application that integrates with Embedchain. It sets up an Embedchain pipeline on chat start, adds a data source, and handles incoming messages by querying the Embedchain app. Requires Chainlit and Embedchain libraries. Uses environment variables for API keys.

```python
import chainlit as cl
from embedchain import Pipeline as App

import os

os.environ["OPENAI_API_KEY"] = "sk-xxx"

@cl.on_chat_start
async def on_chat_start():
    app = App.from_config(config={
        'app': {
            'config': {
                'name': 'chainlit-app'
            }
        },
        'llm': {
            'config': {
                'stream': True,
            }
        }
    })
    # import your data here
    app.add("https://www.forbes.com/profile/elon-musk/")
    app.collect_metrics = False
    cl.user_session.set("app", app)


@cl.on_message
async def on_message(message: cl.Message):
    app = cl.user_session.get("app")
    msg = cl.Message(content="")
    for chunk in await cl.make_async(app.chat)(message.content):
        await msg.stream_token(chunk)
    
    await msg.send()
```

--------------------------------

### Basic Chainlit App for Slack Integration

Source: https://docs.chainlit.io/deploy/slack

A simple Python Chainlit application demonstrating how to handle incoming messages from Slack. It shows how to access the original Slack event and user information stored in the user session, and how to send a basic response back to the user. Ensure Chainlit is installed (`pip install chainlit`).

```python
import chainlit as cl

@cl.on_message
async def on_message(msg: cl.Message):
    # Access the original slack event
    print(cl.user_session.get("slack_event"))
    # Access the slack user
    print(cl.user_session.get("user"))

    # Access potential attached files
    attached_files = msg.elements

    await cl.Message(content="Hello World").send()
```

--------------------------------

### Chainlit and Llama Index Application Logic (Python)

Source: https://docs.chainlit.io/integrations/llama-index

This Python script sets up the necessary components for a Chainlit application using Llama Index. It loads or creates a vector index from local data, configures OpenAI for LLM and embeddings, and defines handlers for chat start and incoming messages. The handler for messages uses a RetrieverQueryEngine to process user queries and stream responses.

```python
import os
import openai
import chainlit as cl

from llama_index.core import (
    Settings,
    StorageContext,
    VectorStoreIndex,
    SimpleDirectoryReader,
    load_index_from_storage,
)
from llama_index.llms.openai import OpenAI
from llama_index.embeddings.openai import OpenAIEmbedding
from llama_index.core.query_engine.retriever_query_engine import RetrieverQueryEngine
from llama_index.core.callbacks import CallbackManager
from llama_index.core.service_context import ServiceContext

openai.api_key = os.environ.get("OPENAI_API_KEY")

try:
    # rebuild storage context
    storage_context = StorageContext.from_defaults(persist_dir="./storage")
    # load index
    index = load_index_from_storage(storage_context)
except:
    documents = SimpleDirectoryReader("./data").load_data(show_progress=True)
    index = VectorStoreIndex.from_documents(documents)
    index.storage_context.persist()


@cl.on_chat_start
async def start():
    Settings.llm = OpenAI(
        model="gpt-3.5-turbo", temperature=0.1, max_tokens=1024, streaming=True
    )
    Settings.embed_model = OpenAIEmbedding(model="text-embedding-3-small")
    Settings.context_window = 4096

    service_context = ServiceContext.from_defaults(callback_manager=CallbackManager([cl.LlamaIndexCallbackHandler()]))
    query_engine = index.as_query_engine(streaming=True, similarity_top_k=2, service_context=service_context)
    cl.user_session.set("query_engine", query_engine)

    await cl.Message(
        author="Assistant", content="Hello! Im an AI assistant. How may I help you?"
    ).send()


@cl.on_message
async def main(message: cl.Message):
    query_engine = cl.user_session.get("query_engine") # type: RetrieverQueryEngine

    msg = cl.Message(content="", author="Assistant")

    res = await cl.make_async(query_engine.query)(message.content)

    for token in res.response_gen:
        await msg.stream_token(token)
    await msg.send()
```

--------------------------------

### Configure Chainlit with DynamoDB and S3 Storage

Source: https://docs.chainlit.io/data-layers/dynamodb

Sets up Chainlit to use DynamoDB as its data layer and S3 as its storage provider. It requires the installation of boto3 and Chainlit's data modules. The example initializes an S3StorageClient and then assigns a DynamoDBDataLayer instance configured with the storage client to Chainlit's internal data layer.

```python
import chainlit.data as cl_data
from chainlit.data.dynamodb import DynamoDBDataLayer
from chainlit.data.storage_clients.s3 import S3StorageClient

storage_client = S3StorageClient(bucket="<Your Bucket>")

cl_data._data_layer = DynamoDBDataLayer(table_name="<Your Table>", storage_provider=storage_client)
```

--------------------------------

### Install Boto3 for AWS Integration

Source: https://docs.chainlit.io/data-layers/dynamodb

Installs the boto3 library, which is required for interacting with AWS services like DynamoDB and S3 when using the DynamoDB data layer with an S3 storage client.

```bash
pip install boto3
```

--------------------------------

### Run FastAPI Server with Chainlit

Source: https://docs.chainlit.io/integrations

This command starts a FastAPI server using uvicorn. It serves the main application (`main.py`) on host 0.0.0.0 and port 80, allowing access to both the main app endpoints and the mounted Chainlit application.

```bash
uvicorn main:app --host 0.0.0.0 --port 80

```

--------------------------------

### Display Text with Chainlit Text Element

Source: https://docs.chainlit.io/api-reference/elements/text

Demonstrates how to create and send a simple text element using Chainlit's Text class. This example shows how to initialize a Text element with content and display it inline within a message. It requires the 'chainlit' library.

```python
import chainlit as cl


@cl.on_chat_start
async def start():
    text_content = "Hello, this is a text element."
    elements = [
        cl.Text(name="simple_text", content=text_content, display="inline")
    ]

    await cl.Message(
        content="Check out this text element!",
        elements=elements,
    ).send()
```

--------------------------------

### Ask for User Input with AskUserMessage - Python

Source: https://docs.chainlit.io/api-reference/ask/ask-for-input

Demonstrates how to use the AskUserMessage class to prompt the user for their name and display it. This example shows the basic usage of sending a message and handling the user's response.

```python
import chainlit as cl


@cl.on_chat_start
async def main():
    res = await cl.AskUserMessage(content="What is your name?", timeout=10).send()
    if res:
        await cl.Message(
            content=f"Your name is: {res['output']}",
        ).send()
```

--------------------------------

### Run Chainlit Application (`run`)

Source: https://docs.chainlit.io/backend/command-line

The `run` command starts a Chainlit application. It accepts a `TARGET` which is the entry point for the application. Several options can modify its behavior, including enabling file watching for automatic reloads, running in headless mode (without browser auto-open), enabling debug logging, operating in CI mode, disabling third-party caching, and specifying custom host and port settings.

```bash
chainlit run [OPTIONS] TARGET
```

```bash
# Example: Run with watch mode and debug enabled
chainlit run main.py --watch --debug
```

```bash
# Example: Run in headless mode on a specific port
chainlit run app.py --headless --port 8080
```

--------------------------------

### Install PII Analysis and Anonymization Packages

Source: https://docs.chainlit.io/examples/security

Installs the necessary Python packages for PII analysis and anonymization using Microsoft Presidio, along with the spaCy language model for English. This is a prerequisite for implementing PII handling in Chainlit.

```shell
pip install presidio-analyzer presidio-anonymizer spacy
python -m spacy download en_core_web_lg
```

--------------------------------

### Example: Counter Element

Source: https://docs.chainlit.io/api-reference/elements

A practical example demonstrating how to create a counter custom element using Chainlit's global APIs and UI components. It includes incrementing a count, updating the element props, and deleting the element.

```APIDOC
## Example of a Counter Element

```jsx
import { Button } from "@/components/ui/button"
import { X, Plus } from 'lucide-react';

export default function Counter() {
    return (
        <div id="custom-counter" className="mt-4 flex flex-col gap-2">
                <div>Count: {props.count}</div>
                <Button id="increment" onClick={() => updateElement(Object.assign(props, {count: props.count + 1}))}><Plus /> Increment</Button>
                <Button id="remove" onClick={deleteElement}><X /> Remove</Button>
        </div>
    );
}
```
```

--------------------------------

### Handle New Chat Session Start with on_chat_start

Source: https://docs.chainlit.io/concepts/chat-lifecycle

The @cl.on_chat_start decorator defines a hook that executes when a new chat session is initiated. This is useful for setting up initial configurations or sending welcome messages.

```python
import chainlit as cl

@cl.on_chat_start
def on_chat_start():
    print("A new chat session has started!")
```

--------------------------------

### Setup QA Chatbot with LangChain and Chainlit

Source: https://docs.chainlit.io/examples/qa

This Python script sets up a conversational QA chatbot using LangChain and Chainlit. It handles file uploads, text splitting, creating vector embeddings with Chroma, and initializes a conversational retrieval chain. The chatbot can then answer user questions based on the uploaded document and display the source of the information.

```python
import os

from langchain.text_splitter import RecursiveCharacterTextSplitter
from langchain_community.vectorstores import Chroma
from langchain.chains import (
    ConversationalRetrievalChain,
)
from langchain_openai import ChatOpenAI, OpenAIEmbeddings

from langchain_community.chat_message_histories import ChatMessageHistory
from langchain.memory import ConversationBufferMemory

import chainlit as cl

os.environ["OPENAI_API_KEY"] = (
    "OPENAI_API_KEY"
)

text_splitter = RecursiveCharacterTextSplitter(chunk_size=1000, chunk_overlap=100)


@cl.on_chat_start
async def on_chat_start():
    files = None

    # Wait for the user to upload a file
    while files is None:
        files = await cl.AskFileMessage(
            content="Please upload a text file to begin!",
            accept=["text/plain"],
            max_size_mb=20,
            timeout=180,
        ).send()

    file = files[0]

    msg = cl.Message(content=f"Processing `{file.name}`...")
    await msg.send()

    with open(file.path, "r", encoding="utf-8") as f:
        text = f.read()

    # Split the text into chunks
    texts = text_splitter.split_text(text)

    # Create a metadata for each chunk
    metadatas = [{"source": f"{i}-pl"} for i in range(len(texts))]

    # Create a Chroma vector store
    embeddings = OpenAIEmbeddings()
    docsearch = await cl.make_async(Chroma.from_texts)(
        texts, embeddings, metadatas=metadatas
    )

    message_history = ChatMessageHistory()

    memory = ConversationBufferMemory(
        memory_key="chat_history",
        output_key="answer",
        chat_memory=message_history,
        return_messages=True,
    )

    # Create a chain that uses the Chroma vector store
    chain = ConversationalRetrievalChain.from_llm(
        ChatOpenAI(model_name="gpt-4o-mini", temperature=0, streaming=True),
        chain_type="stuff",
        retriever=docsearch.as_retriever(),
        memory=memory,
        return_source_documents=True,
    )

    # Let the user know that the system is ready
    msg.content = f"Processing `{file.name}` done. You can now ask questions!"
    await msg.update()

    cl.user_session.set("chain", chain)


@cl.on_message
async def main(message: cl.Message):
    chain = cl.user_session.get("chain")  # type: ConversationalRetrievalChain
    cb = cl.AsyncLangchainCallbackHandler()

    res = await chain.acall(message.content, callbacks=[cb])
    answer = res["answer"]
    source_documents = res["source_documents"]  # type: List[Document]

    text_elements = []  # type: List[cl.Text]

    if source_documents:
        for source_idx, source_doc in enumerate(source_documents):
            source_name = f"source_{source_idx}"
            # Create the text element referenced in the message
            text_elements.append(
                cl.Text(
                    content=source_doc.page_content, name=source_name, display="side"
                )
            )
        source_names = [text_el.name for text_el in text_elements]

        if source_names:
            answer += f"\nSources: {', '.join(source_names)}"
        else:
            answer += "\nNo sources found"

    await cl.Message(content=answer, elements=text_elements).send()

```

--------------------------------

### Instrument OpenAI Client and Send Message - Python

Source: https://docs.chainlit.io/integrations/openai

This Python code snippet demonstrates how to instrument the OpenAI client for integration with Chainlit and handle user messages. It initializes an asynchronous OpenAI client, instruments it using `cl.instrument_openai()`, defines chat completion settings, and sets up a message handler that sends user input to OpenAI and returns the response. Ensure the `openai` and `chainlit` packages are installed and an OpenAI API key is configured.

```python
from openai import AsyncOpenAI
import chainlit as cl
client = AsyncOpenAI()

# Instrument the OpenAI client
cl.instrument_openai()

settings = {
    "model": "gpt-3.5-turbo",
    "temperature": 0,
    # ... more settings
}

@cl.on_message
async def on_message(message: cl.Message):
    response = await client.chat.completions.create(
        messages=[
            {
                "content": "You are a helpful bot, you always reply in Spanish",
                "role": "system"
            },
            {
                "content": message.content,
                "role": "user"
            }
        ],
        **settings
    )
    await cl.Message(content=response.choices[0].message.content).send()
```

--------------------------------

### Create and Send Image in Chainlit (Python)

Source: https://docs.chainlit.io/api-reference/elements/image

This example demonstrates how to create an Image element using a local file path and attach it to a message sent to the Chainlit UI. It requires the 'chainlit' library.

```python
import chainlit as cl


@cl.on_chat_start
async def start():
    image = cl.Image(path="./cat.jpeg", name="image1", display="inline")

    # Attach the image to the message
    await cl.Message(
        content="This message has an image!",
        elements=[image],
    ).send()
```

--------------------------------

### Define Prompt Template and LLM Settings

Source: https://docs.chainlit.io/examples/openai-sql

Defines the SQL schema and a prompt template for the language model, along with detailed settings for the OpenAI API call. This configuration guides the LLM to generate accurate SQL queries based on user input and the provided database schema.

```python
template = """SQL tables (and columns):
* Customers(customer_id, signup_date)
* Streaming(customer_id, video_id, watch_date, watch_minutes)

A well-written SQL query that {input}:
```"""


settings = {
    "model": "gpt-3.5-turbo",
    "temperature": 0,
    "max_tokens": 500,
    "top_p": 1,
    "frequency_penalty": 0,
    "presence_penalty": 0,
    "stop": ["```"]
}
```

--------------------------------

### Manage Chat Context for LLM with Chainlit

Source: https://docs.chainlit.io/concepts/message

This example shows how to accumulate conversation messages using `cl.chat_context` to provide a full conversational history to an LLM. It prints the conversation in OpenAI format and then sends a simple response.

```python
import chainlit as cl

@cl.on_message
async def on_message(message: cl.Message):
    # Get all the messages in the conversation in the OpenAI format
    print(cl.chat_context.to_openai())

    # Send the response
    response = f"Hello, you just sent: {message.content}!"
    await cl.Message(response).send()
```

--------------------------------

### Create and Send Dynamic Chat Settings Form in Python

Source: https://docs.chainlit.io/api-reference/chat-settings

This Python code snippet demonstrates how to use the `ChatSettings` class to create a dynamic form with various input widgets (Select, Switch, Slider). The form is sent to the UI on chat start and can be updated by the user. It relies on the `chainlit` library and its `input_widget` module.

```python
import chainlit as cl
from chainlit.input_widget import Select, Switch, Slider


@cl.on_chat_start
async def start():
    settings = await cl.ChatSettings(
        [
            Select(
                id="Model",
                label="OpenAI - Model",
                values=["gpt-3.5-turbo", "gpt-3.5-turbo-16k", "gpt-4", "gpt-4-32k"],
                initial_index=0,
            ),
            Switch(id="Streaming", label="OpenAI - Stream Tokens", initial=True),
            Slider(
                id="Temperature",
                label="OpenAI - Temperature",
                initial=1,
                min=0,
                max=2,
                step=0.1,
            ),
            Slider(
                id="SAI_Steps",
                label="Stability AI - Steps",
                initial=30,
                min=10,
                max=150,
                step=1,
                description="Amount of inference steps performed on image generation.",
            ),
            Slider(
                id="SAI_Cfg_Scale",
                label="Stability AI - Cfg_Scale",
                initial=7,
                min=1,
                max=35,
                step=0.1,
                description="Influences how strongly your generation is guided to match your prompt.",
            ),
            Slider(
                id="SAI_Width",
                label="Stability AI - Image Width",
                initial=512,
                min=256,
                max=2048,
                step=64,
                tooltip="Measured in pixels",
            ),
            Slider(
                id="SAI_Height",
                label="Stability AI - Image Height",
                initial=512,
                min=256,
                max=2048,
                step=64,
                tooltip="Measured in pixels",
            ),
        ]
    ).send()


@cl.on_settings_update
async def setup_agent(settings):
    print("on_settings_update", settings)

```

--------------------------------

### Handle Copilot Function Calls on Website (JavaScript)

Source: https://docs.chainlit.io/deploy/copilot

Sets up an event listener in your website's JavaScript to handle function calls initiated by the Chainlit Copilot. It receives the function name, arguments, and a callback to send back the result. This example specifically handles the 'test' function.

```javascript
window.addEventListener("chainlit-call-fn", (e) => {
  const { name, args, callback } = e.detail;
  if (name === "test") {
    console.log(name, args);
    callback("You sent: " + args.msg);
  }
});
```

--------------------------------

### JSX File Structure and Styling

Source: https://docs.chainlit.io/api-reference/elements

Instructions for creating the JSX file for Chainlit custom elements. Emphasizes writing only JSX code, exporting a default component, and using Tailwind CSS for styling. Provides examples of basic component structure and styling with Tailwind.

```APIDOC
## How to Write the JSX File

### Component Definition
- Export a single default component from your `.jsx` file.
- Example:
  ```jsx
  export default function MyComponent() {
      return <div>Hello World</div>
  }
  ```
- **Important**: Component `props` are globally injected and **should not** be passed as function arguments.

### Use Tailwind for Styling
- The environment uses `shadcn` + Tailwind CSS.
- Styling relies on CSS variables.
- Example using Tailwind:
  ```jsx
  export default function TailwindExample() {
      return <div className="bg-primary rounded-md h-4 w-full" />
  }
  ```

### Only Use Allowed Imports
- Only use packages from the approved list:
  - `react`
  - `sonner`
  - `zod`
  - `recoil`
  - `react-hook-form`
  - `lucide-react`
  - `@/components/ui/*` (Shadcn components)
```

--------------------------------

### Run Chainlit App for Teams Integration (Headless)

Source: https://docs.chainlit.io/deploy/teams

This command starts your Chainlit application with the '-h' flag, which prevents the default Chainlit UI from opening. This is useful when integrating with platforms like Teams, where the UI is not needed. Ensure your app's Python file is correctly specified and environment variables are configured.

```bash
chainlit run my_app.py -h
```

--------------------------------

### Fetch API Data with useApi Hook (React)

Source: https://docs.chainlit.io/deploy/react/usage

This example demonstrates using the `useApi` hook to fetch data from a specified API endpoint ('/project/settings'). It leverages SWR for data fetching and includes loading and error state handling. The hook is part of the `@chainlit/react-client` library and returns `data`, `error`, and `isLoading`.

```tsx
import { useApi } from '@chainlit/react-client';

const Settings = () => {
  const { data, error, isLoading } = useApi('/project/settings');

  if (isLoading) return <p>Loading...</p>;
  if (error) return <p>Error: {error.message}</p>;

  return <pre>{JSON.stringify(data, null, 2)}</pre>;
};

```

--------------------------------

### Define Starters for Chainlit Assistants

Source: https://docs.chainlit.io/concepts/starters

This Python code defines a set of 'starters' for a Chainlit assistant. Starters are pre-defined messages or actions that help users begin interacting with the assistant. The `set_starters` function returns a list of `cl.Starter` objects, each with a label, message, icon, and optionally a command.

```python
import chainlit as cl

@cl.set_starters
async def set_starters():
    return [
        cl.Starter(
            label="Morning routine ideation",
            message="Can you help me create a personalized morning routine that would help increase my productivity throughout the day? Start by asking me about my current habits and what activities energize me in the morning.",
            icon="/public/idea.svg",
        ),

        cl.Starter(
            label="Explain superconductors",
            message="Explain superconductors like I'm five years old.",
            icon="/public/learn.svg",
        ),
        cl.Starter(
            label="Python script for daily email reports",
            message="Write a script to automate sending daily email reports in Python, and walk me through how I would set it up.",
            icon="/public/terminal.svg",
            command="code",
        ),
        cl.Starter(
            label="Text inviting friend to wedding",
            message="Write a text asking a friend to be my plus-one at a wedding next month. I want to keep it super short and casual, and offer an out.",
            icon="/public/write.svg",
        )
    ]
# ...
```

--------------------------------

### Get Authenticated User in Chainlit Chat

Source: https://docs.chainlit.io/authentication/overview

This Python snippet demonstrates how to retrieve the current authenticated user's identifier from the user session and send a personalized greeting message at the start of a chat. It requires the 'chainlit' library to be installed and assumes authentication has been successfully configured.

```python
import chainlit as cl

@cl.on_chat_start
async def on_chat_start():
    app_user = cl.user_session.get("user")
    await cl.Message(f"Hello {app_user.identifier}").send()
```

--------------------------------

### Integrate Starters with Chat Profiles in Chainlit

Source: https://docs.chainlit.io/concepts/starters

This Python code demonstrates how to define starters that are associated with specific chat profiles in Chainlit. The `set_chat_profiles` function checks user metadata and returns a list of `cl.ChatProfile` objects, each containing its own set of starters. This allows for different starter suggestions based on the user's role or context.

```python
@cl.set_chat_profiles
async def chat_profile(current_user: cl.User):
    if current_user.metadata["role"] != "ADMIN":
        return None

    return [
        cl.ChatProfile(
            name="My Chat Profile",
            icon="https://picsum.photos/250",
            markdown_description="The underlying LLM model is **GPT-3.5**, a *175B parameter model* trained on 410GB of text data.",
            starters=[
                cl.Starter(
                    label="Morning routine ideation",
                    message="Can you help me create a personalized morning routine that would help increase my productivity throughout the day? Start by asking me about my current habits and what activities energize me in the morning.",
                    icon="/public/idea.svg",
                ),
                cl.Starter(
                    label="Explain superconductors",
                    message="Explain superconductors like I'm five years old.",
                    icon="/public/learn.svg",
                ),
            ],
        )
    ]
```

--------------------------------

### Create and Send Chainlit Action Button (Python)

Source: https://docs.chainlit.io/api-reference/action

This snippet shows how to define an action button with a name, payload, and label, and then send it to the user interface within a Chainlit message. It also includes an example of a callback function that is triggered when the action button is clicked, which sends a confirmation message and optionally removes the button.

```python
import chainlit as cl

@cl.action_callback("action_button")
async def on_action(action):
    await cl.Message(content=f"Executed {action.name}").send()
    # Optionally remove the action button from the chatbot user interface
    await action.remove()

@cl.on_chat_start
async def start():
    # Sending an action button within a chatbot message
    actions = [
        cl.Action(name="action_button", payload={"value": "example_value"}, label="Click me!")
    ]

    await cl.Message(content="Interact with this action button:", actions=actions).send()
```

--------------------------------

### Initialize Chainlit API Client with Recoil Root

Source: https://docs.chainlit.io/deploy/react/installation-and-setup

Demonstrates how to set up the Chainlit API client and integrate it within a React application using Recoil for state management. This involves wrapping the application with RecoilRoot and ChainlitContext.Provider.

```typescript
import React from 'react';
import ReactDOM from 'react-dom/client';
import { RecoilRoot } from 'recoil';

import { ChainlitAPI, ChainlitContext } from '@chainlit/react-client';

const CHAINLIT_SERVER_URL = 'http://localhost:8000';

const apiClient = new ChainlitAPI(CHAINLIT_SERVER_URL, 'webapp');

ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
  <React.StrictMode>
    <ChainlitContext.Provider value={apiClient}>
      <RecoilRoot>
        <MyApp />
      </RecoilRoot>
    </ChainlitContext.Provider>
  </React.StrictMode>
);
```

--------------------------------

### Get Authenticated User in Chainlit App

Source: https://docs.chainlit.io/authentication

This snippet demonstrates how to retrieve the currently authenticated user within a Chainlit application's chat start event. It accesses the user object from the session and sends a personalized greeting. Ensure that authentication is properly configured for the `cl.user_session.get("user")` to return a valid user object.

```python
@cl.on_chat_start
async def on_chat_start():
    app_user = cl.user_session.get("user")
    await cl.Message(f"Hello {app_user.identifier}").send()
```

--------------------------------

### Initialize Chainlit and OpenAI Client

Source: https://docs.chainlit.io/examples/openai-sql

Initializes the Chainlit application and sets up the asynchronous OpenAI client. This code snippet is crucial for enabling Chainlit's instrumentation for OpenAI and configuring the API client with your provided key.

```python
from openai import AsyncOpenAI


import chainlit as cl

cl.instrument_openai()

client = AsyncOpenAI(api_key="YOUR_OPENAI_API_KEY")
```

--------------------------------

### Python: Chainlit App with LiteLLM OpenAI Client

Source: https://docs.chainlit.io/integrations/litellm

This Python code sets up a Chainlit application that uses the OpenAI client configured to communicate with a LiteLLM Proxy. It imports necessary libraries, initializes the OpenAI client with LiteLLM proxy details, instruments the client for Chainlit, defines chat settings, and handles incoming messages by sending them to the LLM via the proxy and displaying the response in the UI.

```python
from openai import AsyncOpenAI
import chainlit as cl

client = AsyncOpenAI(
    api_key="anything",            # litellm proxy virtual key
    base_url="http://0.0.0.0:4000" # litellm proxy base_url
)

# Instrument the OpenAI client
cl.instrument_openai()

settings = {
    "model": "gpt-3.5-turbo", # model you want to send litellm proxy
    "temperature": 0,
    # ... more settings
}

@cl.on_message
async def on_message(message: cl.Message):
    response = await client.chat.completions.create(
        messages=[
            {
                "content": "You are a helpful bot, you always reply in Spanish",
                "role": "system"
            },
            {
                "content": message.content,
                "role": "user"
            }
        ],
        **settings
    )
    await cl.Message(content=response.choices[0].message.content).send()
```

--------------------------------

### Chainlit Custom Element Interactive Counter Example

Source: https://docs.chainlit.io/api-reference/elements/custom

An example of an interactive counter custom element in Chainlit. It displays a count and includes buttons to increment the count or remove the element, using global APIs like `updateElement`, `deleteElement`, and `props`.

```jsx
import { Button } from "@/components/ui/button"
import { X, Plus } from 'lucide-react';

export default function Counter() {
    return (
        <div id="custom-counter" className="mt-4 flex flex-col gap-2">
                <div>Count: {props.count}</div>
                <Button id="increment" onClick={() => updateElement(Object.assign(props, {count: props.count + 1}))}><Plus /> Increment</Button>
                <Button id="remove" onClick={deleteElement}><X /> Remove</Button>
        </div>
    );
}
```

--------------------------------

### Send a Step in Chainlit

Source: https://docs.chainlit.io/api-reference/step-class

Demonstrates how to create and send a basic step using the `cl.Step` context manager. The step is sent when the context manager is entered and updated upon exit, allowing for setting input and output.

```python
import chainlit as cl

@cl.on_message
async def main():
    async with cl.Step(name="Test") as step:
        # Step is sent as soon as the context manager is entered
        step.input = "hello"
        step.output = "world"

    # Step is updated when the context manager is exited
```

--------------------------------

### Remove a Message with Chainlit

Source: https://docs.chainlit.io/api-reference/message

Provides an example of how to remove a message from the UI after it has been sent. This is useful for retracting or clearing messages.

```python
import chainlit as cl


@cl.on_chat_start
async def main():
    msg = cl.Message(content="Message 1")
    await msg.send()
    await cl.sleep(2)
    await msg.remove()
```

--------------------------------

### Create a Tool-Calling Step and Respond in Chainlit

Source: https://docs.chainlit.io/concepts/step

This Python code demonstrates how to define a tool-like step using the @cl.step decorator. The step simulates a 2-second task and returns a string. The main handler then calls this tool and sends a final message to the user. This showcases a basic chain of thought where a user's message triggers a tool execution followed by a final response.

```python
import chainlit as cl


@cl.step(type="tool")
async def tool():
    # Simulate a running task
    await cl.sleep(2)

    return "Response from the tool!"


@cl.on_message
async def main(message: cl.Message):
    # Call the tool
    tool_res = await tool()

    # Send the final answer.
    await cl.Message(content="This is the final answer").send()
```

--------------------------------

### Update Chainlit Package

Source: https://docs.chainlit.io/guides/migration/2

Command to update the Chainlit package to the latest version using pip. Ensure you have pip installed and are in a virtual environment if applicable.

```bash
pip install --upgrade chainlit
```

--------------------------------

### Update a Step in Chainlit

Source: https://docs.chainlit.io/api-reference/step-class

Demonstrates how to update an existing step after it has been created. The example shows modifying the `output` of a step and then explicitly calling `step.update()` to send the changes to the client.

```python
import chainlit as cl


@cl.on_chat_start
async def main():
    async with cl.Step(name="Parent step") as step:
        step.input = "Parent step input"
        step.output = "Parent step output"

    await cl.sleep(2)

    step.output = "Parent step output updated"
    await step.update()
```

--------------------------------

### Python: Create and Use a Switch Widget

Source: https://docs.chainlit.io/api-reference/input-widgets/switch

Demonstrates how to create a Switch widget within Chainlit's chat settings. It initializes the switch with a label and an initial value, and shows how to retrieve the user's selection from the settings object.

```python
import chainlit as cl
from chainlit.input_widget import Switch


@cl.on_chat_start
async def start():
    settings = await cl.ChatSettings(
        [
            Switch(id="Streaming", label="OpenAI - Stream Tokens", initial=True),
        ]
    ).send()
    value = settings["Streaming"]
```

--------------------------------

### Chainlit Custom Element with Tailwind CSS Styling

Source: https://docs.chainlit.io/api-reference/elements/custom

Demonstrates how to use Tailwind CSS for styling a Chainlit custom element. This example renders a div with a primary color background and rounded borders, utilizing utility classes.

```jsx
export default function TailwindExample() {
    return <div className="bg-primary rounded-md h-4 w-full" />
}
```