Chatbot-Website: Anpassbare KI-Chat-Plattform

Anpassbarer KI-Chatbot / Web-App / Next.js 14 Projekt

Kurz-Zusammenfassung: Eine interaktive, erweiterbare Chatbot-Schnittstelle für moderne Websites, gebaut mit Next.js 14 App Router, TypeScript, Tailwind CSS und Shadcn UI. Integriert mehrere LLM-Anbieter und verfügt über eine modulare, produktionsreife Architektur.

Entwicklungsdauer: Laufend (2025)

Hinweis(e):

• Haftungsausschluss für Hosting/Code-Verfügbarkeit: Die Demo wird unter chatbot.franzdomingo.tech mit einer proprietären API gehostet. Der Quellcode ist nicht öffentlich; kontaktieren Sie den Autor für Details.
• Kontakt für weitere Infos oder Demos: Kontaktieren Sie Franz Phillip G. Domingo über franzdomingo.tech.
• Navigationshinweis: Die Chatbot-Web-App ist über den obigen Live-Demo-Link erreichbar.

---

Funktionen

• Integration benutzerdefinierter LLMs (OpenAI, Gemini, Ollama, xAI und eigene APIs)
• Echtzeit-Chat mit responsiver UI
• Modulare, komponentengesteuerte Architektur
• Produktionsreifes Styling (Tailwind CSS, Shadcn UI, Radix UI)
• Artefakt-System: Code, Bilder, Tabellenkalkulationen, Notizen mit Live-Updates
• Authentifizierung (Auth.js)
• Datenpersistenz (Neon Serverless Postgres, Vercel Blob)
• Performance-Optimierungen: Streaming, Lazy Loading, Bildkompression
• Erweiterbare Anbieter-Konfiguration
• End-to-End-Tests (Playwright)

---

Meine Beiträge (Rolle & Verantwortlichkeiten)

Integration & Deployment:

• Bereitstellung und Konfiguration des Open-Source-KI-Chatbots von Vercel in einer dedizierten Umgebung für Live-Demonstrationen.

Backend-Anbindung:

• Anbindung an eine proprietäre Backend-API zur Simulation der Unterstützung mehrerer Modelle.

Architektur-Exploration:

• Untersuchung der AI SDK-Architektur und der LLM-Erweiterbarkeitsmuster.

UI/UX & Skalierbarkeit:

• Untersuchung der UI/UX-Skalierbarkeit und Planung von Komponenten-Overrides für zukünftige Erweiterungen.

Geplante Erweiterungen:

• Ausbau der Unterstützung für Gemini, Ollama und benutzerdefinierte Endpunkte
• UI/UX-Redesign für benutzerdefinierte Workflows
• Middleware-Schicht für benutzerspezifisches Prompt-Engineering

---

Herausforderungen

• Erweiterbarkeit der Anbieter: Entwurf einer flexiblen Architektur zum Wechseln zwischen LLM-Anbietern und benutzerdefinierten Endpunkten.

• Performance: Optimierung von Server-Streaming, Lazy Loading und Artefakt-Handling für Echtzeit-Chats.

• Authentifizierung & Persistenz: Integration von Auth.js und Serverless-Speicher für sicheres, skalierbares Datenmanagement.

• UI/UX: Sicherstellung der Barrierefreiheit und des responsiven Designs auf allen Geräten.

---

Projektarchitektur

• Architekturstil: Modularer Next.js 14 App Router mit React Server Components.

• Komponentenorganisation:

  • app/: Next.js-Routen (Chat, Auth, Layout)
  • components/: Wiederverwendbare UI- und logikgesteuerte Komponenten
  • lib/ai/: LLM-Konfigurationen, Prompt-Logik, Anbieter-Registrierung
  • artifacts/: Logik für das Artefakt-Handling (Text, Bilder, Code etc.)
  • hooks/: Benutzerdefinierte React-Hooks für Chat, Zustand, UI
  • tests/: E2E-Tests und Test-Helfer

• Zustandsverwaltung: React Context, Server Actions

• Integrationen: Vercel AI SDK, Auth.js, Neon Serverless Postgres, Vercel Blob

---

Demo-Vorschau

• Screenshots/Video: Sie können die Live-Demo unter chatbot.franzdomingo.tech ansehen. Alle Funktionen und die Benutzeroberfläche können direkt erkundet werden.

• Plattform-Ansichten: Web (responsiv, Mobile-First)

• Gezeigte Funktionalität:

  • Echtzeit-Chat
  • Wechsel zwischen LLM-Anbietern
  • Artefakt-System (Code, Bilder, Notizen)
  • Authentifizierung und Datenpersistenz
  • Modulare, produktionsreife UI

• Demo-Anleitung: Besuchen Sie chatbot.franzdomingo.tech, um mit der Chatbot-Web-App zu interagieren.

---

Entwicklungsressourcen

• Leitfäden/Dokumentation:
  • Dokumentationen zu Next.js, Vercel AI SDK, Tailwind CSS, Shadcn UI, Radix UI

---

Entwickler: Franz Phillip G. Domingo
Zuletzt aktualisiert: 11.07.2025

---

Aufgebaut auf dem Open-Source-Chatbot von Vercel (MIT-lizenziert). Angepasst für den persönlichen Gebrauch und die Integration.