Chatbot UI

Die Open-Source-Chat-App mit KI für alle.

Demo

Die neueste Demo finden Sie hier.

Aktualisierungen

Hallo zusammen! Ich habe Ihr Feedback gehört und arbeite intensiv an einem großen Update.

Dinge wie einfachere Bereitstellung, bessere Backend-Kompatibilität und verbesserte mobile Layouts sind in Arbeit.

Bald gibt es Neuigkeiten.

-- Mckay

Offizielle gehostete Version

Nutzen Sie Chatbot UI, ohne es selbst hosten zu müssen!

Die offizielle gehostete Version von Chatbot UI finden Sie hier.

Sponsor

Wenn Sie Chatbot UI nützlich finden, erwägen Sie bitte, mich zu sponsern, um meine Open-Source-Arbeit zu unterstützen :)

Probleme

Wir beschränken "Issues" auf tatsächliche Probleme im Zusammenhang mit der Codebasis.

Wir erhalten übermäßig viele Issues, die sich auf Dinge wie Funktionsanfragen, Cloud-Provider-Probleme usw. beziehen.

Wenn Sie Probleme mit Dingen wie der Einrichtung haben, lesen Sie bitte den Abschnitt "Hilfe" im Reiter "Discussions" oben.

Issues, die nichts mit der Codebasis zu tun haben, werden wahrscheinlich sofort geschlossen.

Diskussionen

Wir ermutigen Sie ausdrücklich, am Reiter "Discussions" oben teilzunehmen!

Diskussionen sind ein großartiger Ort, um Fragen zu stellen, Ideen auszutauschen und Hilfe zu erhalten.

Die Wahrscheinlichkeit ist hoch, dass wenn Sie eine Frage haben, jemand anderes dieselbe Frage hat.

Legacy-Code

Chatbot UI wurde kürzlich auf Version 2.0 aktualisiert.

Der Code für Version 1.0 befindet sich im Branch legacy.

Aktualisierung

Führen Sie in Ihrem Terminal im Stammverzeichnis Ihres lokalen Chatbot-UI-Repositorys folgenden Befehl aus:

npm run update

Wenn Sie eine gehostete Instanz betreiben, müssen Sie außerdem folgenden Befehl ausführen:

npm run db-push

um die neuesten Migrationen auf Ihre Live-Datenbank anzuwenden.

Lokaler Schnellstart

Befolgen Sie diese Schritte, um Ihre eigene Chatbot-UI-Instanz lokal zum Laufen zu bringen.

Das vollständige Video-Tutorial können Sie hier ansehen.

1. Repository klonen

git clone https://github.com/mckaywrigley/chatbot-ui.git

2. Abhängigkeiten installieren

Öffnen Sie ein Terminal im Stammverzeichnis Ihres lokalen Chatbot-UI-Repositorys und führen Sie folgenden Befehl aus:

npm install

3. Supabase installieren & lokal ausführen

Warum Supabase?

Zuvor haben wir lokalen Browser-Speicher zur Datenspeicherung verwendet. Dies war jedoch aus mehreren Gründen keine gute Lösung:

Sicherheitsprobleme
Begrenzter Speicherplatz
Einschränkungen bei multimodalen Anwendungsfällen

Wir verwenden jetzt Supabase, weil es einfach zu nutzen ist, Open-Source ist, auf Postgres basiert und eine kostenlose Stufe für gehostete Instanzen bietet.

In Zukunft werden wir andere Anbieter unterstützen, um Ihnen mehr Optionen zu bieten.

1. Docker installieren

Sie müssen Docker installieren, um Supabase lokal auszuführen. Sie können es hier kostenlos herunterladen.

2. Supabase CLI installieren

MacOS/Linux

brew install supabase/tap/supabase

Windows

scoop bucket add supabase https://github.com/supabase/scoop-bucket.git
scoop install supabase

3. Supabase starten

Führen Sie in Ihrem Terminal im Stammverzeichnis Ihres lokalen Chatbot-UI-Repositorys folgenden Befehl aus:

supabase start

4. Geheimnisse ausfüllen

1. Umgebungsvariablen

Führen Sie in Ihrem Terminal im Stammverzeichnis Ihres lokalen Chatbot-UI-Repositorys folgenden Befehl aus:

cp .env.local.example .env.local

Holen Sie sich die erforderlichen Werte, indem Sie folgenden Befehl ausführen:

supabase status

Hinweis: Verwenden Sie API URL aus supabase status für NEXT_PUBLIC_SUPABASE_URL

Gehen Sie nun zu Ihrer .env.local-Datei und füllen Sie die Werte aus.

Wenn die Umgebungsvariable gesetzt ist, wird die Eingabe in den Benutzereinstellungen deaktiviert.

2. SQL-Einrichtung

In der ersten Migrationsdatei supabase/migrations/20240108234540_setup.sql müssen Sie 2 Werte durch die oben erhaltenen Werte ersetzen:

project_url (Zeile 53): http://supabase_kong_chatbotui:8000 (Standard) kann unverändert bleiben, wenn Sie Ihre project_id in der config.toml-Datei nicht ändern
service_role_key (Zeile 54): Diesen Wert haben Sie durch Ausführen von supabase status erhalten

Dies verhindert Probleme mit nicht ordnungsgemäß gelöschten Speicherdateien.

5. Ollama installieren (optional für lokale Modelle)

Befolgen Sie die Anweisungen hier.

6. App lokal ausführen

Führen Sie in Ihrem Terminal im Stammverzeichnis Ihres lokalen Chatbot-UI-Repositorys folgenden Befehl aus:

npm run chat

Ihre lokale Instanz von Chatbot UI sollte nun unter http://localhost:3000 laufen. Stellen Sie sicher, dass Sie eine kompatible Node-Version verwenden (z.B. v18).

Sie können Ihr Backend-GUI unter http://localhost:54323/project/default/editor einsehen.

Gehosteter Schnellstart

Befolgen Sie diese Schritte, um Ihre eigene Chatbot-UI-Instanz in der Cloud zum Laufen zu bringen.

Das Video-Tutorial folgt in Kürze.

1. Lokalen Schnellstart befolgen

Wiederholen Sie die Schritte 1-4 im Abschnitt "Lokaler Schnellstart" oben.

Sie sollten separate Repositorys für Ihre lokalen und gehosteten Instanzen verwenden.

Erstellen Sie ein neues Repository für Ihre gehostete Instanz von Chatbot UI auf GitHub und pushen Sie Ihren Code dorthin.

2. Backend mit Supabase einrichten

1. Neues Projekt erstellen

Gehen Sie zu Supabase und erstellen Sie ein neues Projekt.

2. Projektwerte abrufen

Sobald Sie sich im Projekt-Dashboard befinden, klicken Sie auf das "Project Settings"-Symbol ganz links unten.

Hier erhalten Sie die Werte für die folgenden Umgebungsvariablen:

Project Ref: Befindet sich unter "General settings" als "Reference ID"
Project ID: Befindet sich in der URL Ihres Projekt-Dashboards (z.B.: https://supabase.com/dashboard/project/<IHR_PROJEKT_ID>/settings/general)

Klicken Sie weiterhin in "Settings" auf den Reiter "API" links.

Hier erhalten Sie die Werte für die folgenden Umgebungsvariablen:

Project URL: Befindet sich unter "API Settings" als "Project URL"
Anon key: Befindet sich unter "Project API keys" als "anon public"
Service role key: Befindet sich unter "Project API keys" als "service_role" (Erinnerung: Behandeln Sie diesen wie ein Passwort!)

3. Authentifizierung konfigurieren

Klicken Sie als Nächstes auf das "Authentication"-Symbol ganz links.

Klicken Sie in den Text-Reitern auf "Providers" und stellen Sie sicher, dass "Email" aktiviert ist.

Für Ihre persönliche Instanz empfehlen wir, "Confirm email" auszuschalten.

4. Mit gehosteter DB verbinden

Öffnen Sie Ihr Repository für Ihre gehostete Instanz von Chatbot UI.

In der ersten Migrationsdatei supabase/migrations/20240108234540_setup.sql müssen Sie 2 Werte durch die oben erhaltenen Werte ersetzen:

project_url (Zeile 53): Verwenden Sie den Project URL-Wert von oben
service_role_key (Zeile 54): Verwenden Sie den Service role key-Wert von oben

Öffnen Sie nun ein Terminal im Stammverzeichnis Ihres lokalen Chatbot-UI-Repositorys. Wir werden hier einige Befehle ausführen.

Melden Sie sich bei Supabase an, indem Sie folgenden Befehl ausführen:

supabase login

Verknüpfen Sie als Nächstes Ihr Projekt, indem Sie folgenden Befehl mit der oben erhaltenen "Project ID" ausführen:

supabase link --project-ref <project-id>

Ihr Projekt sollte nun verknüpft sein.

Führen Sie abschließend folgenden Befehl aus, um Ihre Datenbank auf Supabase zu pushen:

supabase db push

Ihre gehostete Datenbank sollte nun eingerichtet sein!

3. Frontend mit Vercel einrichten

Gehen Sie zu Vercel und erstellen Sie ein neues Projekt.

Importieren Sie auf der Setup-Seite Ihr GitHub-Repository für Ihre gehostete Instanz von Chatbot UI. Wechseln Sie in den Projekteinstellungen im Abschnitt "Build & Development Settings" das Framework-Preset zu "Next.js".

Fügen Sie in den Umgebungsvariablen folgende Werte aus den oben erhaltenen Werten hinzu:

NEXT_PUBLIC_SUPABASE_URL
NEXT_PUBLIC_SUPABASE_ANON_KEY
SUPABASE_SERVICE_ROLE_KEY
NEXT_PUBLIC_OLLAMA_URL (nur erforderlich bei Verwendung lokaler Ollama-Modelle; Standard: http://localhost:11434)

Sie können auch API-Schlüssel als Umgebungsvariablen hinzufügen.

OPENAI_API_KEY
AZURE_OPENAI_API_KEY
AZURE_OPENAI_ENDPOINT
AZURE_GPT_45_VISION_NAME

Die vollständige Liste der Umgebungsvariablen finden Sie in der Datei '.env.local.example'. Wenn die Umgebungsvariablen für API-Schlüssel gesetzt sind, wird die Eingabe in den Benutzereinstellungen deaktiviert.

Klicken Sie auf "Deploy" und warten Sie, bis Ihr Frontend bereitgestellt ist.

Nach der Bereitstellung sollten Sie Ihre gehostete Instanz von Chatbot UI über die von Vercel bereitgestellte URL nutzen können.

Mitwirken

Wir arbeiten an einer Anleitung für Beiträge.

Kontakt

Schreiben Sie Mckay auf Twitter/X