Skill para crear chatbots con React
Una interfaz de chat de React que transmite los tokens uno por uno, sobrevive a las actualizaciones y nunca incluye tu clave de API en el paquete del navegador.
Archivo de prompt descarga instantáneachatbot-builder-react.txt
Consigue este skill y 2.500+ más
$9/mes o $59 al año
Consigue Library · $9/mesObtener LibraryNo se cobra nada. 2 días antes de que termine la prueba te llega un código de −30% para tu primer pago.
¿Solo necesitas este skill?
Un archivo, pago único. Sin actualizaciones ni conector.
Cuesta más o menos lo mismo que 2 meses de Library.
Incluido en tu plan
Pídeselo a tu IA por su nombre o elígelo en tu panel. No necesitas comprar el archivo.
Úsalo en tu IAPaga una vez, tuyo para siempreDescarga instantáneaGarantía de reembolso de 30 días
Como se vio enProduct HuntFazierKittyLaunch
Pago seguro con Stripe
Marcas registradas de sus respectivos propietarios. KissMySkills no está afiliado a ellos ni cuenta con su respaldo.
Cómo funciona
Ask it something hard.
O todos los skills, dentro de tu IA.
¿Dudas antes de comprar? Responde una persona, normalmente el mismo día: hello@kissmyskills.com
// el archivo en sí
Las primeras líneas del archivo que leerá tu IA, tal cual se entrega. Nada reescrito para la página.
Eres un creador de interfaces de chat en React, y el desarrollador ejecuta el editor mientras explicas cada pieza antes de escribirla. Se te ha activado para crear un chat que transmita tokens uno por uno y sobreviva a una actualización de la página.
// qué incluye
Un desarrollador de React que tiene que lanzar una interfaz de chat esta semana y necesita que funcione bien con usuarios reales, no solo en una captura de pantalla.
// dos formas de conseguirlo
$9/mes cancela cuando quieras, o $59 al año
$19 pago único
¿Ya tienes Library o Both? Este está incluido, no necesitas comprar el archivo.
// pídeselo a tu asistente
Ve a kissmyskills.com/pages/connector y configúrame el prompt "Skill para crear chatbots con React" (handle: chatbot-builder-react)
Pégalo en Claude, ChatGPT, Claude Code, Cursor o Codex. Tu IA te guía para conectar KissMySkills (unos 3 minutos, prueba gratis de 7 días) y carga el prompt. Lo que leerá tu IA →
La mayoría de los tutoriales de chatbots con React se quedan en una demostración. La respuesta aparece de golpe después de ocho segundos, todo el hilo se vuelve a enviar al modelo en cada turno y la clave queda en una variable NEXT_PUBLIC_ que Next incorpora directamente al paquete del navegador. Se ve bien en una captura de pantalla y falla durante la primera semana de uso real.
Esta es una guía de implementación, no un prompt del sistema. Colocas el archivo en tu proyecto, lo abres con Claude Code o Cursor y trabaja contigo en la arquitectura: streaming con el lector Fetch ReadableStream, un AbortController conectado para detenerlo, un mensaje de usuario optimista al que se van añadiendo tokens, una lista que no vuelve a renderizar cada burbuja con cada token, desplazamiento automático que deja de luchar contra quien ha desplazado hacia arriba, Markdown y bloques de código, la clave detrás de un gestor de rutas, el historial en localStorage y después en un backend real, y un presupuesto de tokens para el día en que el hilo se alargue.
Cómpralo una vez y será tuyo para siempre. Sin suscripción, sin dependencias de ejecución y sin nada que te impida reutilizarlo en el próximo proyecto o editarlo a medida que avance tu base de código.
Tras la compra, el enlace de descarga llega a tu correo. Guarda el archivo .txt donde quieras en tu dispositivo.
Cualquier chat de IA que ya uses: Claude, ChatGPT, Gemini, Grok, Copilot u otro.
Abre el archivo .txt, copia la sección del prompt y pégala en Claude o ChatGPT, o añádela a un proyecto para tenerla siempre a mano.
Tu AI ahora está configurada como especialista. Pregúntale cualquier cosa dentro de su ámbito.
No se requieren conocimientos técnicos.
Con Library no hay nada que descargar. Conecta tu IA una vez y pide cualquier skill por su nombre.
Ambas. En las primeras preguntas te pregunta cuál usas, porque la respuesta cambia el lugar donde debe estar la clave. Con el enrutador de aplicaciones de Next obtienes un controlador de rutas que devuelve una Response en streaming. Con Vite no hay ningún servidor, así que te guía para crear un pequeño endpoint de Express o sin servidor y explica por qué una variable de entorno de Vite no es un lugar seguro para ocultarla.
Funciona contigo en tu editor. Al cargarla en Claude Code o Cursor, lee tu proyecto, pregunta qué versiones tienes, propone la arquitectura y escribe los archivos contigo, pero tú revisas cada diferencia, lo ejecutas y eres responsable del resultado. Es un compañero sénior, no un generador que pulsas una vez. Tendrás que escribir, probar y hacer push tú mismo.
No. La arquitectura se basa en primitivas de la plataforma, fetch, ReadableStream y AbortController, por lo que funciona con cualquier proveedor al que llames. Cuando un SDK de un proveedor realmente ayuda, lo indica, y pregunta qué versión tienes instalada antes de mencionar un método, porque estas bibliotecas cambian de forma entre versiones principales con más frecuencia de lo que sugieren los documentos.
Primero con Claude Code y Cursor, ya que ambos pueden leer tu proyecto y escribir archivos contigo. También funciona si lo pegas en Claude, ChatGPT, Gemini o Copilot y describes tu proyecto. Cualquier asistente que acepte un archivo de instrucciones largo podrá seguirlo.
Este y 2.500+ más, dentro de Claude, ChatGPT, Claude Code, Codex o Cursor. Cancela cuando quieras.