How to build your custom GPT apps
AI

So baust du deine eigenen GPT-Apps

jannikreinhard

Ich habe viele Blogbeiträge über KI-Lösungen geschrieben, die zum Beispiel Azure OpenAI nutzen. Aber ich möchte dich auf eine Reise mitnehmen, wie du deine eigenen Apps und Websites bauen kannst. In diesem Beitrag zeige ich dir, wie du mit Hilfe von zwei sehr leistungsstarken Frameworks deine individuelle Lösung erstellst. Das eine ist Streamlit und das andere ist Chainlit.

Beide bieten eine Oberfläche für ein Chat-Erlebnis, aber beide haben ein unterschiedliches Design (technisch und visuell).

Was sind die Unterschiede?

Streamlit ist stärker darauf optimiert, sehr einfach Webseiten zu erstellen, ohne sich um HTML und andere Designsprachen kümmern zu müssen. Du kannst die gesamte Webseite mit Python bauen. Streamlit bietet nicht nur ein Chat-Erlebnis, sondern auch eine Möglichkeit, standardmäßige Webseiten zu erstellen. Der Code wird immer von oben nach unten interpretiert. Das ist etwas, das du beim Schreiben des Codes berücksichtigen musst. Sobald ein Ereignis ausgelöst wird, etwa ein Klick auf einen Button oder eine Texteingabe, läuft der gesamte Code erneut durch.

Chainlit bietet ausschließlich ein Chat-Erlebnis, aus meiner Sicht aber ein professionelleres. Es trennt zudem Front- und Backend voneinander. Du kannst Chainlit nutzen und darauf dein eigenes Frontend aufbauen. Das Backend bietet eine einfache Integration mit den bekanntesten LLM-Frameworks (Large Language Model).

Wie startest du mit dem Bau einer App in Streamlit?

Als Erstes musst du sicherstellen, dass Python und Streamlit auf deinem Gerät installiert sind. Streamlit lässt sich ganz einfach über pip install streamlit installieren. Sobald das erledigt ist, kannst du die minimale App starten. Dazu kannst du eine Datei mit dem Namen app.py erstellen und nur zwei Zeilen Code einfügen:

import streamlit as st
st.title("Name of your app")

Jetzt kannst du die App mit python -m streamlit run app.py ausführen

Unser Ziel ist es aber, eine intelligente App zu bauen. Dafür benötigen wir außerdem das OpenAI-Paket und etwas mehr Code. Um openai zu installieren, führe pip install openai aus

Wenn du dieses Paket installiert hast, ist es außerdem wichtig, dass du Zugriff auf eine OpenAI-Instanz hast. Meine Empfehlung ist, Azure OpenAI zu wählen. Wie oben erwähnt, kannst du dir meinen vorherigen Beitrag ansehen, in dem ich erkläre, wie du diesen Dienst bereitstellst. Sobald das erledigt ist und alle Voraussetzungen erfüllt sind, kannst du loslegen und eine KI-gestützte App umsetzen. Hier findest du etwas Beispielcode für eine standardmäßige Webseite:

So baust du deine eigenen GPT-Apps
import os
import streamlit as st
from openai import AzureOpenAI

st.title("Name of your app")

if "input" not in st.session_state:
    st.session_state.input = ''

deployment_name='REPLACE_WITH_YOUR_DEPLOYMENT_NAME'
client = AzureOpenAI(
    api_key=os.getenv("AZURE_OPENAI_API_KEY"),
    api_version="2024-02-01",
    azure_endpoint = os.getenv("AZURE_OPENAI_ENDPOINT")
    )

input = st.text_input('Question:', value=st.session_state.input, key='input')

if st.button('Run query'):
    response = client.chat.completions.create(model=deployment_name, messages=[
            {
                "content": "You are a helpful bot",
                "role": "system"
            },
            {
                "content": st.session_state.input,
                "role": "user"
            }
        ]
, max_tokens=1000)
    st.text_area(label="Answer:", value=response.choices[0].message.content)

Du kannst dir auch mein Repository ansehen, in dem ich eine App zur Erstellung von Remediations geschrieben habe: JayRHa/Remediation-Creator (github.com)

Um ein Chat-Erlebnis zu bauen, kannst du den folgenden Code verwenden:

So baust du deine eigenen GPT-Apps
import streamlit as st
prompt = st.chat_input("Say something")
if prompt:
    st.write(f"User has sent the following prompt: {prompt}")

Auch hier kannst du das OpenAI-Modul integrieren, um den Prompt an den Dienst weiterzuleiten.

Wie startest du eine App in Chainlit?

Das Vorgehen ist dem von Streamlit sehr ähnlich. Du benötigst ebenfalls Python und das Chainlit-Paket. Dieses kannst du über pip install chainlit installieren. Eine minimale App in Chainlit sieht so aus:

import chainlit as cl
@cl.on_message
async def main(message: cl.Message):
    await cl.Message(content="This is a test message answer").send()

Auch hier möchten wir mehr Intelligenz haben. Lass uns auch hier einen Chatbot bauen, der deinen Chat an Azure OpenAI weiterleitet, um Antworten auf deine Fragen zu generieren. Chainlit verfügt hier ebenfalls über einen integrierten OpenAI-Handler mit cl.instrument_openai.

So baust du deine eigenen GPT-Apps
import os
from openai import AsyncAzureOpenAI
import chainlit as cl

client = AsyncAzureOpenAI(
    api_key=os.getenv("AZURE_OPENAI_API_KEY"),
    api_version="2024-02-01",
    azure_endpoint = os.getenv("AZURE_OPENAI_ENDPOINT")
    )

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": input,
                "role": "user"
            }
        ],
        **settings
    )
    await cl.Message(content=response.choices[0].message.content).send()

Welches Framework passt zu deinem Projekt?

In der Praxis lautet meine Faustregel so: Wenn du schnell einen Prototyp brauchst oder zusätzlich zum Chat noch Diagramme, Tabellen oder Eingabefelder anzeigen möchtest, ist Streamlit die bessere Wahl. Geht es dir hingegen um ein sauberes, produktionsnahes Chat-Erlebnis mit klarer Trennung von Front- und Backend, dann greife zu Chainlit. Ein konkretes Beispiel: Für ein internes Tool, mit dem ein Team Intune-Remediations generiert und gleich als Tabelle prüft, habe ich Streamlit genommen. Für einen reinen Support-Chatbot, der später in eine bestehende Oberfläche eingebettet wird, war Chainlit deutlich angenehmer.

Häufige Stolperfallen am Anfang: Vergiss nicht, die Umgebungsvariablen AZURE_OPENAI_API_KEY und AZURE_OPENAI_ENDPOINT zu setzen, bevor du die App startest, sonst schlägt der erste Aufruf fehl. Achte außerdem darauf, dass der deployment_name exakt dem Namen deines Deployments im Azure-Portal entspricht und nicht dem Modellnamen. Und bei Streamlit solltest du im Hinterkopf behalten, dass der gesamte Code bei jeder Interaktion neu durchläuft. Lege teure Aufrufe oder den Client deshalb sinnvoll im session_state ab, damit du nicht bei jedem Klick unnötige Tokens verbrauchst.