https://neobrutalism.com/nl/blocks/ai/ai-chat-assistant-interface
AI-chatinterface
Kunstmatige intelligentie · Pro broncode
Een complete chatinterface in één bestand: een kopbalk met titel en snelle bedieningen, een scrollend gesprek van gebruikers- en assistentbubbels dat zijn eigen scrollpositie onthoudt, een typindicator met drie stippen zolang een antwoord wordt verwacht, en een tekstvak dat verzendt met Enter en een nieuwe regel toevoegt met Shift en Enter. Het antwoord is gestubd met een timeout, dus het blok draait zonder backend en toont elke status die een echte integratie nodig heeft.
Kunstmatige intelligentie
AI-chatinterfaceLive-voorbeeld openen
- Hero's, prijzen & auth
- Elk breekpunt vooraf bekijken
- Kopieer de brontekst
- MCP klaar voor installatie
- Radix · Base UI · React Aria
- 158 kant-en-klare blokken
- Paginadelen die worden geleverd
- Dashboards en marketing
- Pro ontgrendelt de code
- Drop-in-indelingen
Geliefd bij developers, designers
& makers
Ik stuitte op je UI-kit en pakte hem meteen. Onder de indruk: nieuw, actief onderhouden en constant verbeterd. Geweldig werk! 🤘
Ziv Reich, Softwareontwikkelaar Ik wilde even zeggen: geweldig werk aan neobrutalism.com. Ik vind het echt top. Ik ben waardeloos in design, dus dit was perfect. Ik heb het op mijn persoonlijke site gebruikt.
Paul Bratslavsky, Maker van Coding With Paul Eindelijk mijn persoonlijke website opnieuw gebouwd met Neobrutalism.com — leuke bibliotheek, super makkelijk om te starten!
Cameron Blackwood, Contentmaker Neobrutalism.com is een van mijn favoriete UI-componentbibliotheken in retrostijl — componenten die echt shippen.
Zhengyang Hou, Indie hacker een van mijn favoriete ui-bibliotheken voor het web. mooi werk — hoop dat het groots wordt.
Taseen Tanvir, Oprichter & designer Net Neobrutalism.com Pro geprobeerd — een UI-kit die niet op al het andere lijkt. De neobrutalistische blokken 🔥 maakten rare, speelse layouts sneller prototypen.
Nitesh Padghan, Ghostwriter Prachtig landingpage-ontwerp met perfecte balans en flow. Het kleurenpalet gecombineerd met de animaties levert een uitzonderlijke gebruikerservaring op.
Alan Obeng-Peprah, Senior Designer @ NativeXAI Ik ben echt onder de indruk van het ontwerp dat ze hebben opgeleverd. Het eindproduct kwam precies overeen met wat ik voor ogen had.
Desmond, Medeoprichter @ VectorlabsVentures Als agency-eigenaar besteed ik meestal weken aan het perfectioneren van landingpage-layouts voor klanten. Met Neobrutalism.com plug ik een template in, pas de copy aan, en ik ben klaar om te shippen.
Duke Opoku Amankwah, Oprichter @ Midas De templates zijn niet alleen visueel indrukwekkend, maar ook ongelooflijk goed gestructureerd. Ze hebben ons weken ontwikkeltijd bespaard.
Abiola Braimah, Developer @ Studio IX Uitstekende kwaliteit en oog voor detail. Het responsive design werkt feilloos op alle apparaten.
Acromond X., Medeoprichter @ VectorlabsVentures Deze templates in onze workflow integreren heeft onze ontwikkelcyclus sterk verkort. Uitstekend werk.
Raquib S., Backend-ontwikkelaar Deze templates zijn onze go-to-resource geworden. De code is schoon, goed gedocumenteerd en makkelijk aan te passen.
Hallic M., Developer @ AtlasLabs Neobrutalism.com-templates raken de perfecte balans tussen esthetiek en functionaliteit. Een echte game-changer voor onze projecten.
Ibrahim S., Frontend Lead @ ScaleUp Uitstekende support en premium templates. De ROI van deze templates is fenomenaal.
Kevin K., CEO @ WebCraft Neobrutalism.com-templates hebben compleet veranderd hoe we nieuwe klantprojecten aanpakken. De codekwaliteit is uitzonderlijk en de designs zijn echt world-class.
Danny G., Oprichter van DevStack Ik heb veel templatebibliotheken gebruikt, maar Neobrutalism.com valt op door aandacht voor performance-optimalisatie en schone code-architectuur.
Ian D., CTO bij Wavelength De animaties en micro-interacties in deze templates zijn absoluut verbluffend. Beste investering voor ons designteam.
Ben S., Lead Designer bij PixelPerfect Als niet-technische oprichter hielpen Neobrutalism.com-templates ons om onze MVP in recordtijd te lanceren zonder in te leveren op designkwaliteit. Onze investeerders waren onder de indruk.
Matthew I., Startup-oprichter Ik waardeer hoe modulair en goed gedocumenteerd deze componenten zijn. We konden stukken van verschillende templates naadloos mixen.
Garrett P., Frontend Lead bij TechFusion De ROI van Neobrutalism.com-templates is ongelooflijk. We hebben de ontwikkeltijd drastisch verkort en leveren tegelijk betere sites aan onze klanten.
Xavier C., Agency-eigenaar
Veel gestelde
vragen
Hoe het AI-chatinterface-blok in elkaar zit, wat je kunt veranderen en wanneer je het in plaats van de andere lay-outs hier moet gebruiken.
Nee. handleSend voegt het bericht van de bezoeker toe, zet isReplying aan, en een setTimeout retourneert 1,5 seconde later één vaste zin. Dat is de plek om te vervangen: wissel de timeout in voor je eigen fetch- of streamingaanroep en houd de vlag isReplying, want de typindicator, de uitgeschakelde verzendknop en het scrolgedrag hangen daar allemaal van af.
Elk bericht heeft een id, een afzender user of assistant, de inhoud, en zowel een weergavetijd als een machineleesbare dateTime voor het time-element. De tijd wordt geformatteerd op het moment dat het bericht ontstaat, niet tijdens het renderen, want het formatteren van een Date tijdens het renderen laat server en browser het oneens zijn over de tijdzone, waardoor React een hydratatiefout meldt bij het laden.
Het paneel is h-[36rem] op telefoons en h-[44rem] vanaf sm, en alleen het gesprek tussen de kopbalk en het tekstvak scrolt. Zowel kop als tekstvak zijn flex-kinderen met vaste hoogte, dus een andere paneelhoogte verandert alleen hoeveel van het gesprek zichtbaar is. Gebruik een viewporteenheid zoals h-[80vh] als het een hele pagina moet vullen in plaats van in een sectie te staan.
Ja — het zijn drie items in de composerActions-array, elk met een label en een icoon, dus een item verwijderen haalt de knop weg. Ze zijn vierkanten van 44px omdat dat het minimum is voor een comfortabel tapdoel, en elk heeft een aria-label met het icoon gemarkeerd als aria-hidden, want een icoon op zich heeft geen toegankelijke naam. Het zijn bewust outline-knoppen, zodat alleen de verzendknop als primair oogt.
Een eerdere versie kleurde ze met bg-chart-1, bg-chart-5 en bg-chart-2 en drukte iconen erop af. De chart-tokens hebben in licht en donker andere waarden, dus die iconen waren in het ene thema leesbaar en in het andere bijna onzichtbaar. Elk gekleurd oppervlak gebruikt nu een tokenpaar — bg-primary met text-primary-foreground, bg-card met text-card-foreground — waardoor het contrast vast blijft, welk palet ook wordt toegepast.
Het gesprek is een role log met aria-live polite, dus een schermlezer kondigt nieuwe berichten aan zonder te onderbreken, en de typindicator draagt een visueel verborgen regel 'Assistent is aan het typen' in plaats van te vertrouwen op drie geanimeerde stippen. Scrollen zet scrollTop op het gesprek zelf in plaats van scrollIntoView aan te roepen, en pas na het eerste bericht — scrollIntoView zou anders bij het laden de hele pagina naar dit blok slepen.