Skill voor het bouwen van chatbots met React
Een React-chatinterface die token voor token streamt, een refresh overleeft en je API-sleutel nooit in de browserbundel plaatst.
Promptbestand directe downloadchatbot-builder-react.txt
Krijg deze skill en 2.500+ andere
$9/mnd of $59 per jaar
Neem Library · $9/mndNeem LibraryEr wordt niets afgeschreven. 2 dagen voor het einde van de proefperiode krijg je een −30%-code voor je eerste betaling.
Heb je alleen deze skill nodig?
Eén bestand, eenmalig betaald. Geen updates, geen connector.
Kost ongeveer evenveel als 2 maanden Library.
Inbegrepen in je plan
Vraag je AI erom bij naam, of kies het in je dashboard. Je hoeft het bestand niet te kopen.
Gebruik het in je AIEén keer betalen, voor altijd van jouDirecte download30 dagen geld-terug-garantie
Bekend vanProduct HuntFazierKittyLaunch
Veilig afrekenen via Stripe
Handelsmerken van hun respectieve eigenaren. KissMySkills is niet aan hen verbonden of door hen goedgekeurd.
Zo werkt het
Ask it something hard.
Of elke skill, direct in jouw AI.
Vragen voor je koopt? Een mens antwoordt, meestal dezelfde dag: hello@kissmyskills.com
// het bestand zelf
De eerste regels van het bestand dat je AI leest, precies zoals het geleverd wordt. Niets herschreven voor deze pagina.
Je bent een bouwer van React-chatinterfaces en de ontwikkelaar voert de editor uit terwijl je elk onderdeel uitlegt voordat je het schrijft. Je bent geactiveerd om een chat te lanceren die token voor token streamt en een verversing overleeft.
// wat erin zit
Een React-ontwikkelaar die deze week een chatinterface moet opleveren en ervoor moet zorgen dat die bestand is tegen echte gebruikers, in plaats van alleen goed te werken in een screenshot.
// twee manieren om het te krijgen
$9/mnd altijd opzegbaar, of $59 per jaar
$19 eenmalige betaling
Heb je al Library of Both? Deze zit erbij, je hoeft het bestand niet te kopen.
// vraag het je assistent
Ga naar kissmyskills.com/pages/connector en stel de prompt "Skill voor het bouwen van chatbots met React" (handle: chatbot-builder-react) voor me in
Plak hem in Claude, ChatGPT, Claude Code, Cursor of Codex. Je AI helpt je KissMySkills te koppelen (ongeveer 3 minuten, 7 dagen gratis proberen) en laadt de prompt. Wat je AI gaat lezen →
De meeste React-chatbottutorials stoppen bij een demo. Het antwoord komt na acht seconden in één keer binnen, de volledige conversatie wordt bij elke beurt opnieuw naar het model gestuurd en de sleutel staat in een NEXT_PUBLIC_-variabele die Next rechtstreeks in de browserbundel opneemt. Op een screenshot ziet het er prima uit, maar in de eerste week van echt gebruik gaat het mis.
Dit is een bouwgids, geen systeemprompt. Je zet het bestand in je project, opent het met Claude Code of Cursor en werkt samen de architectuur uit: streamen met de Fetch ReadableStream-reader, een AbortController die is gekoppeld aan stoppen, een optimistisch gebruikersbericht waaraan tokens worden toegevoegd, een lijst die niet bij elke token elk bericht opnieuw rendert, autoscroll die niet blijft vechten met een lezer die omhoog heeft gescrold, markdown en codeblokken, de sleutel achter een route-handler, geschiedenis in localStorage en daarna in een echte backend, en een tokenbudget voor de dag waarop de conversatie lang wordt.
Je koopt het één keer en mag het houden. Geen abonnement, geen runtime-afhankelijkheid en niets dat je ervan weerhoudt het in het volgende project opnieuw te gebruiken of aan te passen terwijl je codebase zich verder ontwikkelt.
Na het afrekenen staat de downloadlink in je inbox. Bewaar het .txt-bestand waar je wilt op je apparaat.
Elke AI-chat die je al gebruikt: Claude, ChatGPT, Gemini, Grok, Copilot of een andere.
Open het .txt-bestand, kopieer het promptgedeelte en plak het in Claude of ChatGPT - of zet het in een project, zodat het er altijd is.
Je AI is nu geconfigureerd als specialist. Vraag hem alles binnen zijn vakgebied.
Geen technische kennis vereist.
Met Library hoef je niets te downloaden. Koppel je AI één keer en vraag daarna elke skill bij naam.
Beide. In de eerste paar vragen wordt gevraagd welke je gebruikt, omdat het antwoord bepaalt waar de sleutel staat. Met de Next-app-router krijg je een route-handler die een streaming-Response retourneert. Bij Vite is er helemaal geen server, dus wordt uitgelegd hoe je in plaats daarvan een klein Express- of serverloos endpoint opzet en waarom een Vite-omgevingsvariabele geen veilige verbergplek is.
Het werkt samen met jou in je editor. Als je het in Claude Code of Cursor laadt, leest het je project, vraagt het naar je versies, stelt het de architectuur voor en schrijft het samen met jou de bestanden, maar jij controleert elke diff, voert de code uit en bent verantwoordelijk voor het resultaat. Het is een ervaren programmeerpartner, geen generator die je één keer indrukt. Verwacht zelf te typen, testen en pushen.
Nee. De architectuur is gebaseerd op platformprimitieven, fetch, ReadableStream en AbortController, dus hij werkt met elke provider die je aanroept. Wanneer een SDK van een leverancier echt helpt, wordt dat aangegeven. Ook wordt gevraagd welke versie je hebt geïnstalleerd voordat er een methode wordt genoemd, omdat deze bibliotheken tussen grote releases vaker van vorm veranderen dan de documentatie doet vermoeden.
In eerste instantie met Claude Code en Cursor, omdat beide je project kunnen lezen en samen met jou bestanden kunnen schrijven. Je kunt het ook in Claude, ChatGPT, Gemini of Copilot plakken als je in plaats daarvan je project beschrijft. Elke assistent die een lang instructiebestand accepteert, kan het volgen.
Deze en 2.500+ andere, in Claude, ChatGPT, Claude Code, Codex of Cursor. Altijd opzegbaar.