Skill de Criação de Chatbots para React
Uma interface de chat em React que transmite token por token, sobrevive a uma atualização e nunca coloca sua chave de API no bundle do navegador.
Arquivo de prompt download imediatochatbot-builder-react.txt
Leve este item (skill) e mais 2.500+
$9/mês ou $59 por ano
Assine o Library · $9/mêsAssinar LibraryNada é cobrado. 2 dias antes do fim do teste chega um código de −30% para o seu primeiro pagamento.
Precisa só deste arquivo (skill)?
Um arquivo, pagamento único. Sem atualizações, sem conector.
Custa mais ou menos o mesmo que 2 meses de Library.
Incluído no seu plano
Peça pelo nome à sua IA ou escolha no seu painel. Não precisa comprar o arquivo.
Use na sua IAPay once, keep foreverInstant download30-day money-back guarantee
Como visto emProduct HuntFazierKittyLaunch
Checkout seguro pela Stripe
Marcas registradas de seus respectivos proprietários. KissMySkills não é afiliado nem endossado por eles.
Como funciona
Ask it something hard.
Ou tenha todas as skills dentro da sua IA.
Dúvidas antes de comprar? Uma pessoa responde, geralmente no mesmo dia: hello@kissmyskills.com
// o próprio arquivo
As primeiras linhas do arquivo que sua IA vai ler, exatamente como é entregue. Nada reescrito para a página.
Você é um desenvolvedor de interfaces de chat em React, e o desenvolvedor executa o editor enquanto você explica cada parte antes de escrevê-la. Você foi ativado para lançar um chat que transmite tokens um por um e sobrevive a uma atualização da página.
// o que vem incluído
Um desenvolvedor React que precisa entregar uma interface de chat esta semana e quer que ela funcione bem diante de usuários reais, não apenas em uma captura de tela.
// duas formas de ter
$9/mês cancele quando quiser, ou $59 por ano
$19 pagamento único
Já tem Library ou Both? Este já está incluído, não precisa comprar o arquivo.
// peça ao seu assistente
Acesse kissmyskills.com/pages/connector e configure para mim o prompt "Skill de Criação de Chatbots para React" (handle: chatbot-builder-react)
Cole no Claude, ChatGPT, Claude Code, Cursor ou Codex. Sua IA guia você na conexão do KissMySkills (cerca de 3 minutos, 7 dias de teste grátis) e carrega o prompt. O que sua IA vai ler →
A maioria dos tutoriais de chatbots em React para em uma demonstração. A resposta chega inteira depois de oito segundos, toda a conversa é reenviada ao modelo a cada turno, e a chave fica em uma variável NEXT_PUBLIC_ que o Next insere diretamente no bundle do navegador. Parece funcionar em uma captura de tela, mas desmorona na primeira semana de uso real.
Este é um guia de implementação, não um prompt de sistema. Você coloca o arquivo no seu projeto, abre com Claude Code ou Cursor, e ele trabalha na arquitetura com você: streaming com o leitor Fetch ReadableStream, um AbortController conectado para interromper, uma mensagem otimista do usuário com tokens anexados a ela, uma lista que não renderiza novamente cada balão a cada token, rolagem automática que para de brigar com quem rolou para cima, markdown e blocos de código, a chave protegida por um route handler, histórico no localStorage e depois em um backend real, além de um limite de tokens para o dia em que a conversa ficar longa.
Compre uma vez e ele será seu para guardar. Sem assinatura, sem dependência em tempo de execução e sem nada impedindo que você o reutilize no próximo projeto ou edite conforme sua base de código evolui.
Após a compra, o link de download chega ao seu e-mail. Salve o arquivo .txt onde quiser no seu dispositivo.
Qualquer chat de IA que você já usa: Claude, ChatGPT, Gemini, Grok, Copilot ou outro.
Abra o arquivo .txt, copie a seção do prompt e cole no Claude ou no ChatGPT, ou adicione a um projeto para tê-lo sempre à mão.
Sua AI agora está configurada como especialista. Pergunte qualquer coisa dentro da área de especialização dela.
Nenhum conhecimento técnico necessário.
Com o Library, não há nada para baixar. Conecte sua IA uma vez e peça qualquer skill pelo nome.
Ambos. Nas primeiras perguntas, ele pergunta qual você está usando, porque a resposta muda o local onde a chave fica. Com o roteador de app do Next, você recebe um handler de rota que retorna uma Response de streaming. Com Vite, não há servidor, então ele orienta você a configurar um pequeno endpoint com Express ou serverless e explica por que uma variável de ambiente do Vite não é um local seguro para ocultá-la.
Ele trabalha com você no seu editor. Carregado no Claude Code ou no Cursor, ele lê seu projeto, pergunta sobre suas versões, propõe a arquitetura e escreve os arquivos com você, mas você revisa cada diff, executa o código e assume a responsabilidade pelo resultado. É um parceiro sênior, não um gerador que você aciona uma vez. Espere digitar, testar e fazer o push por conta própria.
Não. A arquitetura é baseada em primitivas da plataforma, fetch, ReadableStream e AbortController, portanto funciona com qualquer provedor que você chamar. Quando um SDK de fornecedor realmente ajuda, ele explica isso e pergunta qual versão você tem instalada antes de mencionar um método, porque essas bibliotecas mudam de formato entre versões principais com mais frequência do que a documentação sugere.
Primeiro, com Claude Code e Cursor, pois ambos conseguem ler seu projeto e escrever arquivos com você. Ele também funciona se você colá-lo no Claude, ChatGPT, Gemini ou Copilot e descrever seu projeto. Qualquer assistente que aceite um arquivo longo de instruções conseguirá segui-lo.
Este e mais 2.500+, dentro do Claude, ChatGPT, Claude Code, Codex ou Cursor. Cancele quando quiser.