OpenAI

The benefits of this integration is that you can see the OpenAI API calls in a step in the UI, and you can explore them in the prompt playground.

You will also get the full generation details (prompt, completion, tokens per second…) in your Literal AI dashboard, if your project is using Literal AI.

You need to add cl.instrument_openai() after creating your OpenAI client.

​

Prerequisites

Before getting started, make sure you have the following:

• A working installation of Chainlit
• The OpenAI package installed
• An OpenAI API key
• Basic understanding of Python programming

​

Step 1: Create a Python file

Create a new Python file named app.py in your project directory. This file will contain the main logic for your LLM application.

​

Step 2: Write the Application Logic

In app.py, import the necessary packages and define one function to handle messages incoming from the UI.

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()

​

Step 3: Fill the environment variables

Create a file named .env in the same folder as your app.py file. Add your OpenAI API key in the OPENAI_API_KEY variable. You can optionally add your Literal AI API key in the LITERAL_API_KEY.

​

Step 4: Run the Application

To start your app, open a terminal and navigate to the directory containing app.py. Then run the following command:

chainlit run app.py -w

The -w flag tells Chainlit to enable auto-reloading, so you don’t need to restart the server every time you make changes to your application. Your chatbot UI should now be accessible at http://localhost:8000.