UStackUStack
chat icon

chat

chat ist ein vielseitiger KI-Chat-Client für einen externen MCP-Server: natürliche Sprache, Streaming-Antworten, Markdown und Bild-Input/-Output.

chat

Was ist chat?

chat ist ein vielseitiger KI-Chat-Client, der mit dem MCP-Server eines Dienstes arbeitet. Er bietet eine natürliche Sprachschnittstelle, die sich mit einem externen MCP-Server verbinden und mit seinen Tools interagieren kann – unabhängig vom Bereich (z. B. Lieferung, Buchung oder Aufgabenmanagement).

Das Projekt ist als Next.js App Router-Anwendung aufgebaut und konzentriert sich auf die praktischen UI- und Integrationsdetails für Chat-Erlebnisse: Tool-Verbindung über MCP, Streaming-Antworten, Nachrichtenverlauf und Unterstützung für multimodale Inhalte wie Bild-Inputs und Markdown-basierte Assistenten-Ausgaben.

Wichtige Funktionen

  • MCP-Tool-Integration über Streamable HTTP: Verbindet sich mit einem externen MCP-Server, konfiguriert über MCP_URL (beliebiger Backend) oder MCP_APPS_URL (TypeScript + eingebettete UI); die App lehnt beide Einstellungen zur Laufzeit ab.
  • Streaming-AI-Antworten mit Echtzeit-Tipp-Indikatoren: Assistenten-Ausgaben werden gestreamt, während sie generiert werden, statt auf einmal zurückgegeben zu werden.
  • Markdown-Rendering für Assistenten-Nachrichten: Assistenten-Nachrichten werden als Markdown dargestellt, inklusive Tabellen, Listen, Code-Blöcke und Links.
  • Bild-Anhänge mit Zuschneiden-vor-Versand: Nutzer können Bilder anhängen, werden vor dem Versand zum Zuschneiden aufgefordert, und das Bild wird erst beim Versand komprimiert und hochgeladen (um vorzeitige Uploads zu vermeiden).
  • LLM-Bild-Output-Unterstützung: Der Assistent kann Bilder in Antworten mit Standard-Markdown-Syntax wie ![alt](url) einbinden; Bilder werden als quadratische Karten mit Lazy-Loading-Skeletten angezeigt und im Vollbild geöffnet, wenn geklickt.
  • Konversationsverlauf mit Cursor-basierter Pagination: Persistenter Chat-Verlauf wird seitenweise mit Infinite-Scroll-Verhalten abgerufen.
  • Authentifizierung und Lokalisierungsunterstützung: E-Mail/Passwort mit Verifizierung, Reset und Google OAuth; Sprachenerkennung über IP-Geolokalisierung (IPinfo Lite) mit Accept-Language-Fallback sowie überschreibbarer Nutzereinstellung.

So nutzt du chat

  1. Starte die Anwendung (siehe Voraussetzungen) und erstelle eine .env.local-Datei im Projekt-Root.
  2. Konfiguriere MCP-Verbindungseinstellungen mit entweder MCP_URL oder MCP_APPS_URL (wähle eine). Optional Branding- und Persona-Kontextvariablen wie NEXT_PUBLIC_APP_NAME und APP_PERSONA_CONTEXT setzen.
  3. Melde dich mit den unterstützten Authentifizierungsmethoden an.
  4. Starte ein Gespräch in der Chat-UI. Der Assistent kann Antworten streamen und MCP-Tools aufrufen, wie sie von deinem MCP-Server freigegeben sind.
  5. Bei aktivierten Nachrichtenlimits (WEEKLY_MESSAGE_LIMIT) zeigt die UI eine Warnung bei niedrigem verbleibendem Kontingent und blockiert weitere Sends bei Erschöpfung.

Anwendungsfälle

  • Liefer- oder Disponenten-Assistent: Verbinde einen lieferbezogenen MCP-Server, um Nutzern bei der Koordination von Anfragen und Nachverfolgung durch konversationelle Workflows zu helfen.
  • Handwerker-Buchung: Verbinde einen Handwerker-Buchungs-MCP-Server, damit der Assistent Nutzer durch Aufgaben führt und benötigte Details per Tool-Aufruf sammelt.
  • Aufgabenmanagement-Schnittstelle: Nutze einen Task-Management-MCP-Server, um natürliche Sprache in Aktionen deines Backends umzusetzen.
  • Multimodale Unterstützung mit Bildern: Lade ein Bild hoch (zuschneiden vor Versand) und lass den Assistenten es analysieren oder in einen Workflow einbinden; unterstützt auch Assistenten-Antworten mit Bild-Karten.
  • Mehrsprachige Team-Unterstützung: Nutze die integrierte Spracherkennung und das benutzerdefinierte i18n-System, um UI-Strings und KI-System-Prompts für Sprachen wie EN, ID, KR, JP, ES, ZH, DE, NL, FR und IT zu lokalisieren.

FAQ

Welche MCP-Konfiguration unterstützt die App?

Die App unterstützt die Verbindung zu einem MCP-Server. Sie verwendet entweder MCP_URL oder MCP_APPS_URL. Beide gleichzeitig zu setzen wird zur Laufzeit abgelehnt.

Wie werden AI-Antworten in der UI geliefert?

Antworten werden in Echtzeit gestreamt, mit Tipp-Indikatoren während der Generierung.

Können Nutzer Bilder senden, und kann der Assistent Bilder anzeigen?

Ja. Nutzer können Bilder über einen Zuschneiden-vor-Versand-Flow anhängen; Bilder werden erst beim Senden komprimiert und hochgeladen. Der Assistent kann Bilder auch mit Markdown-Bild-Syntax in seine Antwort einbetten.

Wird der Chat-Verlauf gespeichert?

Ja. Die App speichert persistente Konversationshistorie und verwendet Cursor-basierte Pagination mit Infinite Scroll.

Gibt es Limits für die Anzahl sendbarer Nachrichten?

Optional kann ein wöchentliches Limit pro Nutzer mit WEEKLY_MESSAGE_LIMIT konfiguriert werden. Bei Aktivierung warnt die UI bei niedrigem verbleibendem Kontingent und gibt bei Erschöpfung einen 429-Block zurück.

Alternativen

  • Generische KI-Chat-Web-Apps ohne MCP-Tool-Integration: Diese konzentrieren sich auf promptbasierte Chats, bieten aber keine strukturierte Tool-Protokoll-Verbindung zum Backend Ihres Services.
  • Eigene MCP-Client-Implementierungen (anderes UI/Stack): Sie können einen anderen Client für MCP-Tool-Calls bauen, aber Workflow und Features (Bildverarbeitung, Nachrichtenverlauf, Lokalisierung) können abweichen.
  • RAG/Chat-Lösungen mit Fokus auf Retrieval statt Tool-Calling: Diese drehen sich um Wissenssuche und Dokumenten-Grundlage statt Orchestrierung von Aktionen über MCP-Tools.
  • Allgemeine multimodale Chat-Interfaces: Diese unterstützen Bild-Inputs/Outputs, beinhalten aber möglicherweise nicht denselben MCP-gesteuerten Workflow für die Verbindung zu externen Service-Tools.
chat | UStack