https://neobrutalism.com/de/blocks/ai/ai-chat-assistant-interface
KI-Chat-Assistent
Künstliche Intelligenz · Pro-Quellcode
Eine komplette Chat-Oberfläche in einer Datei: eine betitelte Kopfleiste mit Schnellzugriffen, ein scrollender Thread aus Nutzer- und Assistenten-Bubbles mit eigener Scrollposition, ein Drei-Punkte-Tippindikator während eine Antwort aussteht, und ein Composer, der per Enter sendet und mit Shift und Enter eine neue Zeile einfügt. Die Antwort ist mit einem Timeout gestubbt, der Block läuft also ohne Backend und zeigt jeden Zustand, den eine echte Anbindung braucht.
Künstliche Intelligenz
KI-Chat-AssistentLive-Vorschau öffnen
- Heroes, Preise & Auth
- Vorschau in jeder Breakpoint
- Code kopieren
- MCP-Installation bereit
- Radix · Base UI · React Aria
- 158 fertige Blöcke
- Page-Sections die shippen
- Dashboards & Marketing
- Pro schaltet den Code frei
- Layouts zum Einsetzen
Geliebt von Devs, Designern
& Creators
Bin über dein UI-Kit gestolpert und hab es sofort mitgenommen. Beeindruckt: neu, aktiv gepflegt und ständig verbessert. Großartige Arbeit! 🤘
Ziv Reich, Softwareentwickler Wollte nur sagen: großartige Arbeit an neobrutalism.com. Gefällt mir wirklich. Ich bin miserabel im Design, deshalb war das perfekt. Hab es auf meiner persönlichen Seite eingesetzt.
Paul Bratslavsky, Macher von Coding With Paul Endlich meine persönliche Website mit Neobrutalism.com neu gebaut — spaßige Bibliothek, super einfach zum Starten!
Cameron Blackwood, Content Creator Neobrutalism.com ist eine meiner liebsten UI-Komponenten-Bibliotheken im Retro-Stil — Komponenten, die wirklich shippen.
Zhengyang Hou, Indie Hacker eine meiner liebsten ui-bibliotheken fürs web. tolle arbeit — hoffe, es geht steil nach oben.
Taseen Tanvir, Gründer & Designer Habe gerade Neobrutalism.com Pro ausprobiert — ein UI-Kit, das nicht aussieht wie alles andere. Die neobrutalistischen Blöcke 🔥 machen schräge Layouts deutlich schneller.
Nitesh Padghan, Ghostwriter Wunderschönes Landingpage-Design mit perfekter Balance und Flow. Die Farbpalette zusammen mit den Animationen schafft eine außergewöhnliche User Experience.
Alan Obeng-Peprah, Senior Designer @ NativeXAI Ich bin wirklich beeindruckt von dem Design, das sie geliefert haben. Das Endergebnis entsprach genau dem, was ich mir vorgestellt hatte.
Desmond, Mitgründer @ VectorlabsVentures Als Agenturinhaber brauche ich oft Wochen, um Landingpage-Layouts für Kunden zu perfektionieren. Mit Neobrutalism.com stecke ich ein Template ein, passe den Copy an – und bin ship-ready.
Duke Opoku Amankwah, Gründer @ Midas Die Templates sind nicht nur optisch stark, sondern auch unglaublich gut strukturiert. Sie haben uns Wochen Entwicklungszeit gespart.
Abiola Braimah, Developer @ Studio IX Hervorragende Qualität und Liebe zum Detail. Das responsive Design funktioniert auf allen Geräten einwandfrei.
Acromond X., Mitgründer @ VectorlabsVentures Diese Templates in unseren Workflow zu integrieren hat unseren Entwicklungszyklus deutlich verkürzt. Exzellente Arbeit.
Raquib S., Backend-Entwickler Diese Templates sind unsere Go-to-Ressource geworden. Der Code ist sauber, gut dokumentiert und leicht anpassbar.
Hallic M., Developer @ AtlasLabs Neobrutalism.com-Templates treffen die perfekte Balance zwischen Ästhetik und Funktionalität. Ein echter Game-Changer für unsere Projekte.
Ibrahim S., Frontend Lead @ ScaleUp Hervorragender Support und Premium-Templates. Der ROI dieser Templates ist phänomenal.
Kevin K., CEO @ WebCraft Neobrutalism.com-Templates haben komplett verändert, wie wir neue Kundenprojekte angehen. Die Codequalität ist außergewöhnlich und die Designs wirklich world-class.
Danny G., Gründer von DevStack Ich habe viele Template-Bibliotheken genutzt, aber Neobrutalism.com sticht durch Performance-Optimierung und saubere Code-Architektur heraus.
Ian D., CTO bei Wavelength Die Animationen und Micro-Interactions in diesen Templates sind absolut beeindruckend. Beste Investition für unser Design-Team.
Ben S., Lead Designer bei PixelPerfect Als nicht-technischer Gründer haben uns Neobrutalism.com-Templates geholfen, unser MVP in Rekordzeit zu launchen – ohne Designqualität zu opfern. Unsere Investoren waren begeistert.
Matthew I., Startup-Gründer Ich schätze, wie modular und gut dokumentiert diese Komponenten sind. Wir konnten Teile aus verschiedenen Templates nahtlos mischen.
Garrett P., Frontend Lead bei TechFusion Der ROI von Neobrutalism.com-Templates ist unglaublich. Wir haben die Entwicklungszeit dramatisch gesenkt und liefern gleichzeitig hochwertigere Sites an unsere Kunden.
Xavier C., Agentur-Inhaber
Häufig gefragt
Fragen
Wie der KI-Chat-Assistent-Block aufgebaut ist, was du ändern kannst und wann du ihn statt der anderen Layouts hier verwenden solltest.
Nein. handleSend hängt die Nachricht des Besuchers an, setzt isReplying, und ein setTimeout liefert 1,5 Sekunden später eine feste Beispielantwort zurück. Genau das ist die Nahtstelle zum Austauschen: ersetze den Timeout durch deinen fetch- oder Streaming-Aufruf und behalte das isReplying-Flag, denn Tippindikator, deaktivierter Senden-Button und Scrollverhalten hängen alle daran.
Jede Nachricht besteht aus einer id, einem sender (user oder assistant), dem content sowie einer Anzeigezeit und einem maschinenlesbaren dateTime für das time-Element. Die Zeit wird bei der Erstellung der Nachricht formatiert, nicht beim Rendern, denn ein Date während des Renderns zu formatieren lässt Server und Browser bei der Zeitzone auseinanderlaufen, und React meldet beim Laden einen Hydration-Mismatch.
Das Panel ist h-[36rem] auf dem Smartphone und ab sm h-[44rem], und nur der Thread zwischen Kopfzeile und Composer scrollt. Beide, Kopfzeile und Composer, sind Flex-Kinder mit fester Höhe, eine Änderung der Panel-Höhe ändert also nur, wie viel Thread sichtbar ist. Nutze eine Viewport-Einheit wie h-[80vh], wenn das Panel eine ganze Seite füllen soll statt in einem Abschnitt zu sitzen.
Ja – es sind drei Einträge im composerActions-Array, jeder mit Label und Icon, das Löschen eines Eintrags entfernt also den Button. Sie sind 44px große Quadrate, das Minimum für ein bequemes Touch-Ziel, und jeder hat ein aria-label, während sein Icon als aria-hidden markiert ist, denn ein Icon allein hat keinen zugänglichen Namen. Sie sind bewusst Outline-Buttons, sodass nur der Senden-Button als Primary wirkt.
Eine frühere Version färbte sie mit bg-chart-1, bg-chart-5 und bg-chart-2 und druckte Icons darauf. Die Chart-Tokens haben in Hell und Dunkel unterschiedliche Werte, sodass diese Icons im einen Theme lesbar und im anderen fast unsichtbar waren. Jede farbige Fläche nutzt jetzt ein Token-Paar – bg-primary mit text-primary-foreground, bg-card mit text-card-foreground –, das den Kontrast unabhängig von der Palette fest hält.
Der Thread ist eine role log mit aria-live polite, ein Screenreader kündigt neue Nachrichten also an, ohne zu unterbrechen, und der Tippindikator trägt eine visuell versteckte Zeile Assistent tippt statt sich auf drei animierte Punkte zu verlassen. Gescrollt wird über scrollTop direkt auf dem Thread statt über scrollIntoView, und das erst nach der ersten gesendeten Nachricht – scrollIntoView würde sonst die ganze Seite beim Laden zu diesem Block ziehen.