Skill для создания чат-ботов на React
Интерфейс чата на React, который передаёт токены в режиме реального времени, сохраняет состояние после обновления страницы и никогда не помещает ваш ключ API в браузерный бандл.
Файл с промптом мгновенная загрузкаchatbot-builder-react.txt
Этот скилл и ещё 2 500+ в одной подписке
$9/мес или $59 в год
Оформить Library · $9/месОформить LibraryНичего не списывается. За 2 дня до конца пробного периода придёт код −30% на первый платёж.
Нужен только этот скилл?
Один файл, разовая оплата. Без обновлений и без коннектора.
Стоит примерно как 2 мес. Library.
Входит в ваш план
Попросите его у своего ИИ по названию или выберите в личном кабинете. Покупать файл не нужно.
Использовать в своём ИИPay once, keep foreverInstant download30-day money-back guarantee
О нас писалиProduct HuntFazierKittyLaunch
Безопасная оплата через Stripe
Товарные знаки принадлежат их владельцам. KissMySkills не связан с ними и не одобрен ими.
Как это работает
Ask it something hard.
Или все скиллы прямо в вашем ИИ.
Есть вопросы до покупки? Ответит живой человек, обычно в тот же день: hello@kissmyskills.com
// сам файл
Первые строки файла, который прочитает ваш ИИ, ровно в том виде, в каком вы его получите. Ничего не переписано для страницы.
Вы создаёте интерфейс чата на React, а разработчик запускает редактор, пока вы объясняете каждую часть перед её написанием. Вас активировали для создания чата, который передаёт токены один за другим и сохраняет состояние после обновления страницы.
// что внутри
React-разработчик, которому нужно выпустить интерфейс чата на этой неделе и сделать так, чтобы он выдержал работу с реальными пользователями, а не только выглядел хорошо на скриншоте.
// два способа получить
$9/мес отмена в любой момент, или $59 в год
$19 разовый платёж
Уже на Library или Both? Этот продукт уже включён, покупать файл не нужно.
Большинство учебных материалов по чат-ботам на React заканчиваются демонстрацией. Ответ появляется целиком через восемь секунд, вся переписка отправляется модели заново при каждом сообщении, а ключ хранится в переменной NEXT_PUBLIC_, которую Next напрямую встраивает в браузерный бандл. На скриншоте всё выглядит нормально, но при реальном использовании проблемы начинаются уже в первую неделю.
Это руководство по созданию, а не системный prompt. Вы добавляете файл в проект, открываете его в Claude Code или Cursor, и он вместе с вами прорабатывает архитектуру: потоковую передачу с помощью читателя Fetch ReadableStream, AbortController, подключённый к остановке, оптимистичное сообщение пользователя с добавлением к нему токенов, список, который не перерисовывает каждое сообщение при каждом токене, автопрокрутку, которая перестаёт мешать читателю, прокрутившему страницу вверх, Markdown и блоки кода, ключ за обработчиком маршрута, историю в localStorage, а затем в настоящем бэкенде, и ограничение количества токенов на случай, когда переписка станет длинной.
Вы покупаете его один раз и сохраняете навсегда. Никакой подписки, зависимостей времени выполнения и ограничений, мешающих использовать его в следующем проекте или редактировать по мере развития вашей кодовой базы.
После оплаты ссылка на скачивание придёт на вашу почту. Сохраните файл .txt в любое место на устройстве.
Любой ИИ-чат, которым вы уже пользуетесь: Claude, ChatGPT, Gemini, Grok, Copilot или другой.
Откройте файл .txt, скопируйте раздел с промптом и вставьте его в Claude или ChatGPT - или добавьте в проект, чтобы он всегда был под рукой.
Ваш AI теперь настроен как специалист. Задавайте ему любые вопросы в его области.
Технические знания не требуются.
С Library ничего не нужно скачивать. Подключите ИИ один раз, а потом просите любой скилл по названию.
И так, и так. В первых вопросах оно уточняет, что вы используете, потому что от этого зависит, где хранится ключ. В Next с App Router вы получаете обработчик маршрута, возвращающий потоковый Response. В Vite сервера вообще нет, поэтому руководство проводит вас через создание небольшой конечной точки на Express или в serverless-среде и объясняет, почему переменная окружения Vite не подходит для сокрытия ключа.
Оно работает вместе с вами в редакторе. Если загрузить его в Claude Code или Cursor, оно прочитает ваш проект, спросит о версиях, предложит архитектуру и вместе с вами создаст файлы, но вы проверяете каждый diff, запускаете код и отвечаете за результат. Это опытный напарник по программированию, а не генератор, который достаточно запустить один раз. Вам всё равно придётся самостоятельно печатать код, тестировать и отправлять изменения.
Нет. Архитектура построена на примитивах платформы - fetch, ReadableStream и AbortController, поэтому она работает с любым провайдером, к которому вы обращаетесь. Когда SDK поставщика действительно помогает, руководство об этом говорит, а перед тем как назвать метод, спрашивает, какая версия у вас установлена, потому что эти библиотеки меняют структуру между основными версиями чаще, чем можно предположить по документации.
В первую очередь с Claude Code и Cursor, поскольку оба могут читать ваш проект и вместе с вами создавать файлы. Руководство также работает, если вставить его в Claude, ChatGPT, Gemini или Copilot и вместо этого описать свой проект. Любой ассистент, который принимает длинный файл с инструкциями, сможет ему следовать.
Этот и ещё 2 500+ — прямо в Claude, ChatGPT, Claude Code, Codex или Cursor. Отмена в любой момент.
