step-decorator.mdx

title
Step Decorator

The step decorator will create and send a step to the UI based on the decorated function. By default, the arguments of the function will be used as the input of the step and the return value will be used as the output.

Under the hood, the step decorator is using the cl.Step class.

Parameters

The name of the step. Default to the name of the decorated function. The type of the step, useful for monitoring and debugging. By default the feedback buttons are disabled for steps. Set this to `False` to enable them. By default the step will be nested under the previous step/message. Set this to `True` to make it a root step. Language of the output. See https://react-code-blocks-rajinwonderland.vercel.app/?path=/story/codeblock--supported-languages for a list of supported languages. By default only the output of the step is shown. Set this to `True` to also show the input. You can also set this to a language like `json` or `python` to syntax highlight the input.

Access the Current step

You can access the current step object using cl.context.current_step and override values.

import chainlit as cl

@cl.step
async def my_step():
    current_step = cl.context.current_step

    # Override the input of the step
    current_step.input = "My custom input"

    # Override the output of the step
    current_step.output = "My custom output"

Stream the Output

from openai import AsyncOpenAI

import chainlit as cl

client = AsyncOpenAI(api_key="YOUR_API_KEY")

@cl.step(type="llm")
async def gpt4():
    settings = {
        "model": "gpt-4",
        "temperature": 0,
    }

    stream = await client.chat.completions.create(
        messages=message_history, stream=True, **settings
    )

    current_step = cl.context.current_step

    async for part in stream:
        delta = part.choices[0].delta

        if delta.content:
            # Stream the output of the step
            await current_step.stream_token(delta.content)

Nest Steps

If another step decorated function is called inside the decorated function, the child step will be nested under the parent step.

import chainlit as cl

@cl.step
async def parent_step():
    await child_step()
    return "Parent step output"

@cl.step
async def child_step():
    return "Child step output"

@cl.on_chat_start
async def main():
    await parent_step()