Reachat
Reaviz · Marketing · Chatbot
Reachat ist eine Open-Source-Bibliothek für React mit fertigen Chat-Komponenten für LLM-Apps, sodass eine KI-Chat-Oberfläche in Stunden steht und nicht in Wochen.
Über Reachat
About
Was ist Reachat
Reachat ist eine React Chat-UI Bibliothek, gedacht für alle, die ohnehin mit React und Tailwind arbeiten. Sie deckt ab, was jede LLM-Chat-Oberfläche braucht: Nachrichtenliste, Eingabefeld, Sitzungsleiste, Markdown-Rendering, Datei-Upload und eine Stilebene, die bei Ihnen bleibt. Die Installation läuft über npm, die Komponenten landen in einer App, die Sie sowieso schreiben.
Die Bibliothek fasst Ihr Backend nicht an. Sie ruft weder OpenAI noch Anthropic noch einen anderen Anbieter von sich aus auf und speichert auch keine Gespräche. Ihr Code schickt die Nachrichten, führt die Anfrage aus und gibt die Antwort zurück. Deshalb laufen diese Open-Source-Chat-Komponenten genauso mit einem lokalen Modell, einem Proxy oder einem Dienst, den Sie bereits bezahlen.
Die Grenze liegt im Umfang. Reachat ist eine Oberflächenschicht, kein fertiges Produkt. Es gibt kein gehostetes Widget, kein Dashboard und keine mitgelieferten Auswertungen. Wer eine Chat-Box ohne eine Zeile Code auf eine Marketing-Seite setzen will, ist hier falsch. Wer eine Chat-UI mit Tailwind im eigenen Projekt baut, spart sich fast die ganze Fleißarbeit.
Erste Schritte
- Führen Sie
npm i reachatim Projekt aus und prüfen Sie, ob Tailwind eingerichtet ist, denn die Komponenten hängen beim Styling davon ab. - Importieren Sie die Chat-Komponente und binden Sie sie in Ihre Seite oder Route ein.
- Übergeben Sie das Nachrichten-Array und einen Send-Handler, der Ihren eigenen Endpunkt aufruft.
- Passen Sie das Aussehen mit Tailwind-Klassen oder Slots an und sehen Sie sich die Storybook-Demos für Props an, die Sie noch nicht nutzen.
Produktinformationen
Ein kurzer Überblick über Preise, unterstützte Plattformen und die Leistung von Reachat.
Am besten für
Die Nutzer, Aufgaben und Szenarien, für die dieses Tool am besten passt.
Nutzer
- Frontend-Entwickler, die eine KI-Chat-Oberfläche bauen
- Kleine Produktteams ohne eigenen Designer
- Alle, die eine LLM-Funktion in einer bestehenden App testen
Aufgaben
- Einen Chat-Bildschirm für den eigenen Endpunkt zusammenstellen
- Agenten-Antworten mit Tool-Aufrufen anzeigen
- Den Chat an eine Marke anpassen
Szenarien
- Einen internen Copiloten für Support oder Vertrieb ausrollen
- Dokumenten-Fragen in ein SaaS-Dashboard einbauen
- Eine selbstgebaute Chat-Ansicht ersetzen, die bei langen Threads zusammenbrach
Wichtigste Funktionen
Zwei Layout-Modi
Reachat bringt ein Konsolen-Layout mit Sitzungsliste und ein Companion-Layout mit, das eher wie ein Seitenpanel wirkt. Jedes Team nimmt das, was zur Arbeitsweise seiner Nutzer passt. Beide teilen dieselben Nachrichtenkomponenten, ein Layoutwechsel bedeutet also keinen Neubau des Threads.
Markdown-Rendering für echte Modellausgaben
Antworten eines Modells kommen selten als schlichte Sätze. Reachat rendert Markdown, GFM-Tabellen, hervorgehobenen Code, JSON-Blöcke, Listen, Formeln und eingebettete YouTube-Videos von Anfang an, mit Unterstützung für remark- und rehype-Plugins, falls Sie mehr brauchen. Genau diesen Teil unterschätzen die meisten beim Start.
Nachrichtenrollen für Agenten
Jede Nachricht trägt die Rolle user, assistant, system oder tool. Tool-Aufrufe und ihre Ergebnisse bleiben im selben Thread wie das Gespräch, was bei einem Chat-Interface für Agenten zählt, die vor der Antwort suchen, abfragen oder Funktionen ausführen. Die Daten bleiben bei Ihnen, die Bibliothek kümmert sich um die Anzeige.
Anhänge und Bildvorschau
Nutzer laden Dateien hoch und sehen Bildvorschauen direkt im Eingabefeld. Anhänge reisen in Ihrer Nachrichten-Payload mit, Sie entscheiden also über Speicherort und darüber, wie sie ans Modell gehen. Ein separates Upload-Widget entfällt.
Erwähnungen und Befehle
Das Eingabefeld versteht Erwähnungen und Slash-Befehle über Tiptap. Nutzer verweisen auf ein Dokument, einen Kontakt oder einen gespeicherten Prompt, ohne das Textfeld zu verlassen. Was ein Befehl auslöst, bestimmen Sie, und genau das hält die Funktion an Ihr Produkt gebunden statt an ein festes Menü.
Tailwind-Theme und Slots
Jede Komponente nimmt Tailwind-Klassen an, Slots geben die inneren Teile frei, so lässt sich ein einzelner Button umgestalten, ohne den Code zu forken. Es gibt keine CSS-in-JS-Runtime und keine Theme-Datei zu pflegen. Spricht Ihr Designsystem bereits Tailwind, erbt die Chat-Ansicht dieselbe Sprache.
Lange Threads im Griff
Nachrichten-Paginierung, intelligente Sitzungsgruppierung und Tastaturkürzel sind enthalten. Ein Gespräch mit Hunderten Nachrichten bleibt bedienbar, und die Gruppierung hält zusammengehörige Sitzungen in der Seitenleiste beisammen. Die Tastaturnavigation deckt Eingabefeld und Nachrichtenliste ab.
Vor- und Nachteile
Vorteile
- Apache-2.0-Lizenz, damit lässt sich die Bibliothek ohne Lizenzprüfung in ein kommerzielles Produkt einbauen.
- Keine Bindung ans Backend, jeder Anbieter oder ein selbst gehostetes Modell bleibt möglich.
- Nimmt die mühsamen Teile des Chats ab: Markdown-Sonderfälle, Codeblöcke und Scrollverhalten bei neuen Nachrichten.
- Tailwind und Slots machen Umgestaltung billig, auch wenn nur eine Komponente betroffen ist.
Nachteile
- React und Tailwind werden vorausgesetzt. Ein Projekt mit Vue, Svelte oder reinem HTML hat davon nichts.
- Eine gehostete Version gibt es nicht, Deployment, Anmeldung und Nachrichtenspeicherung bleiben Ihre Aufgabe.
- Die Dokumentation stützt sich auf Storybook-Demos, bei Sonderfällen hilft oft nur ein Blick in den Quellcode.
- Version 4.0 hat APIs gegenüber früheren Releases geändert, ältere Tutorials passen deshalb möglicherweise nicht mehr zum aktuellen Code.
Häufige Fragen
Es liefert Chat-Komponenten für React-Apps, die mit einem LLM sprechen. Sie bringen Backend und Modellaufruf mit, Reachat bringt die Oberfläche.
Ähnliche Inhalte
Entdecke passende Tools, Skills und Artikel zu Reachat.
Alternativen zu Reachat
ngram 2.0
ngram · Video · Marketingngram 2.0 ist ein KI-Videogenerator für Teams. Aus einem Prompt, einer Bildschirmaufnahme oder einer Produkt-URL entsteht ein Erklärvideo, eine Demo oder ein KI-Avatar-Video, und jede Szene bleibt bearbeitbar.
shippedit.me
Krawlup · Marketing · Businessshippedit.me leitet inzwischen auf Krawlup um, eine Web-Plattform, die SEO, AEO und Ladezeit wöchentlich prüft und die Korrekturen per MCP an Coding-Agenten übergibt.
MePersona
MePersona, Inc. · Schreiben · Produktivität · MarketingMePersona ist ein einheitlicher KI-Posteingang für Creator. Das Tool lernt Ihre Stimme, entwirft Antworten auf Fan-Nachrichten von 12 Plattformen und sendet nur, was Sie freigeben.