y-gui: Webbasierte KI-Chat-Oberfläche mit Unterstützung mehrerer KI-Modelle und MCP-Integration 157

Was ist y-gui?

y-gui ist eine webbasierte grafische Benutzeroberfläche für die Interaktion mit KI über Chat. Sie unterstützt verschiedene KI-Modelle und die MCP-Integration. Über das MCP-Protokoll werden die Funktionen der KI erweitert, sodass Verbindungen zu Gmail, Google Kalender, Bildgenerierungsdiensten und mehr möglich sind.

Funktionsmerkmale von y-gui

• Interaktive Chat-Oberfläche: Bietet eine Chat-Oberfläche zur Interaktion mit KI-Modellen.

• Unterstützung mehrerer Bots-Konfigurationen: Unterstützt verschiedene Bot-Konfigurationen, einschließlich unterschiedlicher Kombinationen aus base_url, api_key und Modell.

• Umfassendes MCP-Integrationssystem:

• Gmail-Zugriff und -Verwaltung: Ermöglicht den direkten Zugriff auf und die Verwaltung von Gmail-E-Mails über die Chat-Oberfläche.

• Google Kalender-Integration: Erstellen und Verwalten von Kalenderereignissen in natürlicher Sprache.

• Bildgenerierungsfunktion: Bilder können direkt im Chat-Verlauf erstellt werden.

• Erweiterbares Framework: Unterstützt das Hinzufügen weiterer MCP-Server und Tools.

• Sichere Authentifizierung: Verwendet Auth0 und Google Login für eine sichere Anmeldung.

• Themen-Unterstützung: Unterstützt sowohl ein dunkles als auch ein helles Design.

• Datenspeicherung: Alle Chat-Daten werden in Cloudflare R2 gespeichert, was Zugriff und Synchronisierung erleichtert.

• Echtzeit-Updates: Verwendet SWR für Echtzeit-Datenaktualisierungen.

• Responsives Design: Die Oberfläche ist für alle Geräte geeignet.

Architektur von y-gui

• Frontend: Verwendet React, TypeScript, Tailwind CSS und SWR zur Datenabfrage.

• Backend: Basierend auf Cloudflare Workers und nutzt R2 zur Datenspeicherung.

Technologie-Stack

• Frontend: React, TypeScript, Tailwind CSS, SWR, Auth0.

• Backend: Cloudflare Workers, R2.

• Integration: MCP-Server, OAuth2, Gmail API, Google Calendar API, Bildgenerierungs-API.

• Build-Tools: Vite, Wrangler, TypeScript.

Installation und Nutzung von y-gui

Voraussetzungen

• Node.js und npm sind installiert.

• Ein Cloudflare-Konto ist vorhanden.

• Ein Auth0-Konto ist vorhanden.

• Ein API-Schlüssel eines KI-Anbieters liegt vor.

Installationsschritte

1. Repository klonen:

git clone https://github.com/luohy15/y-gui.git
cd y-gui

2. Abhängigkeiten installieren:

npm install

3. Umgebungsvariablen konfigurieren:

• Konfiguriere die Cloudflare Worker-Einstellungen in backend/wrangler.toml.

• Ändere die Auth0-Einstellungen in frontend/src/index.tsx und backend/src/utils/auth.ts.

4. Assets bauen:

npm run build

5. Cloudflare Worker bereitstellen:

npm run deploy

Github:https://github.com/luohy15/y-gu