Chatbot-Builder-Skill für React
Eine React-Chat-Oberfläche, die Token für Token streamt, einen Seitenaufruf übersteht und Ihren API-Schlüssel niemals in das Browser-Bundle einbindet.
Prompt-Datei Sofort-Download
Skill plus 2.500+ weitere holen
$9/Monat oder $59 pro Jahr
Library holen · $9/MonatLibrary holenEs wird nichts abgebucht. 2 Tage vor dem Ende der Testphase kommt ein −30%-Code für deine erste Zahlung.
Brauchst du nur diese Datei (Skill)?
Eine Datei, einmal bezahlt. Keine Updates, kein Connector.
Kostet etwa so viel wie 2 Monate Library.
In deinem Plan enthalten
Frag deine KI einfach nach dem Namen oder wähle es in deinem Dashboard. Du musst die Datei nicht kaufen.
In deiner KI nutzenEinmal zahlen, für immer behaltenSofort-Download30 Tage Geld-zurück-Garantie
Bekannt ausProduct HuntFazierKittyLaunch
Sicherer Checkout über Stripe
Marken ihrer jeweiligen Inhaber. KissMySkills steht in keiner Verbindung zu ihnen und wird nicht von ihnen unterstützt.
So funktioniert's
Ask it something hard.
Oder jeden Skill direkt in deiner KI.
Fragen vor dem Kauf? Ein Mensch antwortet, meist am selben Tag: hello@kissmyskills.com
// die Datei selbst
Die ersten Zeilen der Datei, die deine KI lesen wird, genau so, wie sie geliefert wird. Nichts für die Seite umgeschrieben.
Du bist ein Builder für React-Chat-Oberflächen, und der Entwickler führt den Editor aus, während du jedes Element erklärst, bevor du es schreibst. Du wurdest aktiviert, um einen Chat zu entwickeln, der Token für Token streamt und eine Aktualisierung der Seite übersteht.
// was drin ist
Ein React-Entwickler, der diese Woche eine Chat-Oberfläche fertigstellen muss, die sich vor echten Nutzern bewährt und nicht nur auf einem Screenshot.
// zwei Wege, es zu bekommen
$9/Monat jederzeit kündbar, oder $59 pro Jahr
$19 einmalige Zahlung
Schon bei Library oder Both? Dieser Artikel ist enthalten, du musst die Datei nicht kaufen.
// frag deinen Assistenten
Öffne kissmyskills.com/pages/connector und richte den Prompt "Chatbot-Builder-Skill für React" (handle: chatbot-builder-react) für mich ein
Füge ihn in Claude, ChatGPT, Claude Code, Cursor oder Codex ein. Deine KI führt dich durch die Verbindung mit KissMySkills (etwa 3 Minuten, 7 Tage kostenlos testen) und lädt den Prompt. Was deine KI lesen wird →
Die meisten react-Chatbot-Tutorials enden bei einer Demo. Die Antwort erscheint nach acht Sekunden auf einmal, der gesamte Verlauf wird bei jeder Runde erneut an das Modell gesendet, und der Schlüssel steckt in einer NEXT_PUBLIC_-Variablen, die Next direkt in das Browser-Bundle einbettet. Auf einem Screenshot sieht das gut aus, aber in der ersten Woche echter Nutzung fällt es auseinander.
Dies ist eine Bauanleitung, kein system prompt. Du legst die Datei in dein Projekt, öffnest sie mit Claude Code oder Cursor, und sie arbeitet die Architektur gemeinsam mit dir durch: Streaming mit dem Fetch-ReadableStream-Reader, ein zum Stoppen verdrahteter AbortController, eine optimistische Benutzernachricht, an die Tokens angehängt werden, eine Liste, die nicht bei jedem Token jede Sprechblase neu rendert, automatisches Scrollen, das nicht weiter gegen Leser ankämpft, die nach oben gescrollt haben, Markdown und Codeblöcke, der Schlüssel hinter einem Route Handler, der Verlauf zunächst in localStorage und anschließend in einem echten Backend sowie ein Token-Budget für den Tag, an dem der Verlauf lang wird.
Du kaufst es einmal und kannst es behalten. Kein Abonnement, keine Laufzeitabhängigkeit und nichts hindert dich daran, es im nächsten Projekt wiederzuverwenden oder zu bearbeiten, während sich deine Codebasis weiterentwickelt.
Nach dem Kauf kommt der Download-Link per E-Mail. Speichere die .txt-Datei an einem beliebigen Ort auf deinem Gerät.
Jeder KI-Chat, den du bereits nutzt: Claude, ChatGPT, Gemini, Grok, Copilot oder ein anderer.
Öffne die .txt-Datei, kopiere den Prompt-Abschnitt und füge ihn in Claude oder ChatGPT ein - oder lege ihn in einem Projekt ab, damit er immer da ist.
Deine KI ist jetzt als Spezialist konfiguriert. Frag sie alles innerhalb ihres Fachgebiets.
Keine technischen Kenntnisse erforderlich.
Mit Library gibt es nichts herunterzuladen. Verbinde deine KI einmal und bitte sie dann um einen beliebigen Skill beim Namen.
Beides. In den ersten Fragen wird geklärt, welches Setup du verwendest, weil die Antwort bestimmt, wo der Schlüssel gespeichert wird. Mit dem Next App Router erhältst du einen Route Handler, der eine Streaming-Response zurückgibt. Bei Vite gibt es überhaupt keinen Server, daher führt dich der Leitfaden stattdessen durch die Einrichtung eines kleinen Express- oder serverlosen Endpunkts und erklärt, warum eine Vite-Umgebungsvariable kein sicherer Aufbewahrungsort ist.
Er funktioniert gemeinsam mit dir in deinem Editor. Wenn du ihn in Claude Code oder Cursor lädst, liest er dein Projekt, fragt nach deinen Versionen, schlägt die Architektur vor und schreibt gemeinsam mit dir die Dateien. Du überprüfst jedoch jeden Diff, führst den Code aus und trägst die Verantwortung für das Ergebnis. Er ist ein Senior-Pair-Programmierer, kein Generator, den du nur einmal startest. Du musst weiterhin selbst tippen, testen und pushen.
Nein. Die Architektur basiert auf Plattform-Grundlagen wie fetch, ReadableStream und AbortController und funktioniert daher mit jedem Anbieter, den du aufrufst. Wenn ein Anbieter-SDK wirklich hilfreich ist, wird das erklärt. Außerdem wird zuerst gefragt, welche Version du installiert hast, bevor eine Methode genannt wird, da sich die Struktur dieser Bibliotheken zwischen den Hauptversionen häufiger ändert, als die Dokumentation vermuten lässt.
Zuerst mit Claude Code und Cursor, da beide dein Projekt lesen und gemeinsam mit dir Dateien schreiben können. Du kannst den Leitfaden auch in Claude, ChatGPT, Gemini oder Copilot einfügen, wenn du stattdessen dein Projekt beschreibst. Jeder Assistent, der eine lange Anweisungsdatei akzeptiert, kann ihm folgen.
Dieser und 2.500+ weitere, direkt in Claude, ChatGPT, Claude Code, Codex oder Cursor. Jederzeit kündbar.