und die Integration in Open WebUI
Im letzten Artikel https://javapro.io/de/lokale-llms haben wir gezeigt, wie man über Ollama lokal LLMs ausführt und Open WebUI als komfortables Interface für Anfragen an diese LLMs in Docker einrichtet. Außerdem wurde erläutert, wie sich OpenAI (also ChatGPT) in Open WebUI einbinden lässt.
In diesem Artikel geht es nun darum, wie sich die Claude-LLMs von Anthropic sowie Gemini von Google in Open WebUI integrieren lassen.
Zum Start eine kleine Vorbemerkung: Claude und Gemini werden nur in WebUI integriert, laufen aber selber nicht lokal. Und Anfragen sind (ähnlich wie bei OpenAI) kostenpflichtig.
Claude LLM von Anthropic
Für alle die Claude noch nicht kennen: Claude ist eine LLM, die in der gleichen Liga wie OpenAI spielt. Gebaut wurde Claude von ehemaligen Mitarbeitern von OpenAI.
In einem ersten Schritt erstellen wir einen API Key und integrieren Claude dann in einem zweiten Schritt in Open WebUI.
Claude | Registrierung und API Key
Zuerst registriert man sich unter https://console.anthropic.com. Nach erfolgreicher Anmeldung kann man sich später direkt über https://console.anthropic.com/login einloggen. Unter dem Menüpunkt „Get API Keys“ lässt sich dann ein persönlicher API-Schlüssel erstellen.
Damit Requests von der (remote) LLM auch ausgeführt werden, muss man eine Kreditkarte hinterlegen (unter https://console.anthropic.com/settings/billing) und ein Startguthaben einzahlen. Mit 10$ ist man aber schon dabei. Der aktuelle Stand des Guthabens kann direkt unter https://console.anthropic.com/settings/cost eingesehen werden.
Claude | Integration in Open WebUI
Das Zauberwort zur einfachen Integration von Claude in Open WebUI heißt Functions.
Functions ermöglichen das Hinzufügen neuer LLMs (wie z. B. Anthropic) über ein Stück Python-Code. Voraussetzung für die Integration ist, dass Open WebUI lokal installiert und aktiv ist. In meinem Fall läuft es unter: http://localhost:3000
PS: eine andere Möglichkeit wäre eine Integration via Pipelines. Vielleicht ein Thema für einen späteren Artikel.
Via https://openwebui.com/functions kommt man auf eine Liste von unterstützten Functions. Wir geben als Suchbegriff Anthropic ein … und wählen die Anthropic Manifold Pipe.
Via VIEW gelangt man zu den Details – also zur eigentlichen Implementierung der Function in Python – der Anthropic Manifold Pipe
Über Get lässt sich die Anthropic Manifold Pipe direkt in in Open WebUI importieren. Als URL muss die lokal verwendete Adresse von Open WebUI angeben werden – in meinem Fall: http://localhost:3000
Anschließend wird der Code der Function dargestellt. Dieser kann bei Bedarf individuell angepasst werden.
Unter get_anthropic_models() ist die Liste der unterstützen Claude Versionen aufgeführt. Falls man nicht alle Modelle nutzen möchte, kann man diese Liste anpassen. Ich persönlich interessiere mich nur für die neuesten Varianten – daher habe ich sie wie folgt angepasst:
def get_anthropic_models(self):
return [
{"id": "claude-3-5-haiku-latest", "name": "claude-3.5-haiku"},
{"id": "claude-3-5-sonnet-latest", "name": "claude-3.5-sonnet"},
]In Open WebUI stehen dann nur noch diese beiden Claude Modelle zur Verfügung. Das macht die Benutzung etwas übersichtlicher, da ich die älteren Modelle ohnehin nicht verwenden möchte.
Nun sollte in Open WebUI unter Admin Panel > Functions die Function Anthropic Manifold Pipe sichtbar sein. Durch Klicken auf Valves (Icon mit rotem Kreis) lässt sich der Claude API Key konfigurieren. Einfach den API Key aus dem vorherigen Kapitel kopieren und einfügen.
Zum Schluss wird die Function noch auf Enabled (d.h. grün) gestellt.
Bei der nächsten Anfrage in Open WebUI sollten die Modelle von Anthropic nun in der Liste erscheinen.
Gemini LLM von Google
Als zweites möchten wir die Gemini LLM von Google in Open WebUI integrieren. Das Vorgehen ist fast identisch mit der Integration von Claude. Nur der Ablauf zur Erstellung des API Keys ist etwas anders.
Gemini | Registrierung und API Key
Voraussetzung für einen API Key ist ein Google Account. Wer bereits einen besitzt, kann sich unter https://aistudio.google.com/ einloggen. Dort findet sich ein direkter Link zur Erstellung des API Keys:
Nach der Generierung lässt sich der API Key direkt testen. Einfach den obigen curl-Command kopieren, GEMINI_API_KEY durch den eigenen API Key ersetzen und im Terminal ausführen. Sehr praktisch!
curl "https://generativelanguage.googleapis.com/v1beta/models/gemini-1.5-flash:generateContent?key=GEMINI_API_KEY" \
-H 'Content-Type: application/json' \
-X POST \
-d '{
"contents": [{
"parts":[{"text": "Explain how AI works"}]
}]
}'Um ein Start Guthaben einzuzahlen, besucht man https://aistudio.google.com/plan_information und folgt dem Link “Go to billing”:
Gemini | Integration in Open WebUI
Die Integration ist fast identisch mit der von Claude. Wir integrieren auch wieder via Functions, nur dieses mal müssen wir unter https://openwebui.com/functions nach Gemini suchen und die Gemini Manifold Pipe auswählen.
Auch hier gibt es wieder die Möglichkeit, mit etwas Code Hacking die Liste der Modelle zu filtern. Wenn ich beispielsweise nur an den 2.0-Modellen interessiert bin, kann ich die Python-Funktion get_google_models() wie folgt anpassen:
Von:
if model.name.startswith("models/")Zu:
if model.name.startswith("models/") and "2.0" in model.name
Anschließend in der Config in Open WebUI den Key von Google eingeben und den Status der Function auf Enabled setzen. Das Ergebnis sieht dann etwa so aus:
Bei der nächsten Anfrage sollten nun auch die Google Gemini 2.0 LLMs in der Liste erscheinen.
Bilder Generierung
Als kleinen Bonus, machen wir einen Abstecher in die Welt der KI-basierten Bildgenerierung. Wer über einen OpenAI API Key verfügt, kann direkt in Open WebUI Bilder erstellen lassen. Unter Admin Panel > Settings > Images müssen dafür folgende Einstellungen vorgenommen werden:
- OpenAI API Key
- Model (ich würde dall-e-3 wählen)
- Grösse der generierten Bilder in Pixels
Wir möchten nun ein Bild generieren, auf dem eine AI und ein Software Entwickler gemeinsam ein schwieriges Problem lösen. Dazu gibt es 2 Möglichkeiten:
1) Man kann in der Anfrage direkt beschreiben, was auf dem Bild dargestellt werden soll. Zusätzlich muss man in den Generate an image Modus wechseln, indem man auf das Image-Icon klickt und die Anfrage wie gewohnt absendet.
2) Oder man lässt eine detaillierte Beschreibung (was auf dem Bild dargestellt werden soll) durch die LLM selbst generieren
Diese Beschreibung kann anschließend individuell angepasst werden. Das Bild wird anschließend über das unten platzierte Image-Icon erzeugt.
Bei mir sieht das generierte Bild folgendermaßen aus (das Resultat ist nicht reproduzierbar. Jede Anfrage wird ein anderes Bild erstellen):
PS: Vielleicht ist dem Leser aufgefallen, dass ich bei der Bild Generierung llama3.2 ausgewählt habe. Das Modell ist frei wählbar, aber die eigentliche Bildgenerierung erfolgt im Hintergrund immer über OpenAI (DALL·E).
Offline Betrieb
Solange man in Open WebUI nur Ollama Modelle verwendet, macht es keinen Unterschied, ob man eine Internet Verbindung hat oder nicht. Alles passiert lokal und keine Daten gehen zu externen Servern.
Das ändert sich aber, wenn man die großen LLMs von OpenAI / Anthropic / Google integriert. Für Anfragen an solche LLMs ist eine Internetverbindung zwingend erforderlich. Je nachdem, welche LLMs integriert wurden (und wie die jeweilige Function implementiert ist), kann es passieren, dass das UI ohne Internetverbindung einfriert.
Im Selbstversuch habe ich folgendes festgestellt:
- Mit OpenAI und der oben beschriebenen Claude Integration via Functions läuft Open WebUI weiterhin. Anfragen an nicht lokale LLMs sind nicht möglich, aber Ollama funktioniert weiterhin gut.
- Bei der Gemini-Integration über die oben beschriebene Function verhält es sich allerdings anders. Das UI friert ein, bis es zu einem Timeout kommt. Eine elegante Lösung besteht darin, die Functions, die offline zu Problemen führen, einfach vorübergehend auf Disabled zu setzen – dann sind Anfragen an Ollama wieder problemlos möglich.
Übrigens: Auch OpenAI kann man auf Disabled stellen. Dazu navigiert man in Open WebUI zu Admin Panel > Settings > Connections.
Parallele Anfragen
Wir haben nun im Open WebUI diverse lokale Ollama LLMs und zusätzlich noch remote LLMs (OpenAI, Claude, Gemini). Das Schöne ist, dass wir Anfragen an all diese LLMs unter einem einzigen UI machen können. Ohne Open WebUI müssten wir für jede LLM das Tool (Browser oder App) des betreffenden Herstellers benutzen.
Doch Open WebUI kann noch mehr: Es ist möglich, eine Anfrage gleichzeitig an mehrere LLMs zu senden – und die Antworten aller Modelle werden parallel zurückgegeben. In der Liste der verfügbaren Modelle gibt es dafür einen +-Button zur Auswahl weiterer Modelle.
Durch das Drücken auf + kann man weitere Modelle auswählen. In unserem Fall wären das llama3.2, claude-3.5 und gemini 2.0.
Danach formulieren wir eine Beispielanfrage – etwa zur Umkehrung einer Collection in Java 8. Die Anfrage geht an alle 3 LLMs und alle Resultate werden aufgelistet.
Wenn ein bestimmtes Ergebnis besonders interessant ist, lässt sich der Inhalt per Copy bequem in die Zwischenablage kopieren.
Mit Paste erhält man einen md (Markdown)-kompatiblen String, der in VS Code folgendermaßen gerendert wird:
Fazit
Neben den lokalen Ollama Modellen kann man mit wenig Aufwand remote LLMs in Open WebUI integrieren. Als Beispiele haben wir in diesem Artikel Claude und Gemini integriert. Der große Vorteil: Open WebUI bietet eine zentrale Oberfläche für Anfragen an unterschiedliche LLMs – und dieselbe Anfrage kann sogar parallel an mehrere Modelle gesendet werden. Offline-Verhalten und Zusatzfunktionen wie Bildgenerierung sind keine Nebensachen – sie entscheiden mit darüber, wie robust und vielseitig ein LLM-Setup im Alltag wirklich ist.
