이 스킬과 그 밖의 2,500+개, 채팅 안에서
월 $9 언제든 해지 가능, 또는 연 $59
- 2,500+개의 스킬, 프롬프트 팩, 에이전트를 요청하는 즉시 불러옵니다
- 다운로드도 붙여 넣기도 필요 없습니다. Claude, ChatGPT, Claude Code 또는 Cursor에서 한 번만 연결하세요
- 매주 새로운 스킬, 매달 카탈로그 파일 10개 다운로드
React용 챗봇 빌더 Skill
$19
제품 정보로 건너뛰기
React용 챗봇 빌더 Skill
토큰 단위로 스트리밍하고 새로 고침 후에도 유지되며 브라우저 번들에 API 키를 절대 포함하지 않는 React 채팅 인터페이스.
$19
이 스킬
한 번 결제
평생 소유
프롬프트 파일 즉시 다운로드
Library 플랜
이 스킬 외 2,500+개를 함께 받으세요
$9/월 또는 연 $59
Library 시작 · $9/월Library 시작
이 스킬, 7일간 무료로 써 보세요무료로 써 보기
- 7일 무료, 카드 없이
- 언제든 해지 가능
- 첫 결제 30일 환불 보장
결제되지 않습니다. 체험 종료 2일 전에 첫 결제에 쓸 수 있는 −30% 코드가 도착합니다.
- 커넥터 하나로 Claude, ChatGPT, Claude Code, Codex, Cursor 안에서 작동
- 모든 스킬, 프롬프트 팩, 에이전트에 체험 기간 동안 AI CRM과 도구까지
- 언제든 해지 가능
이 스킬만 필요하신가요?
파일 1개, 한 번만 결제. 업데이트 없음, 커넥터 없음.
Library 2개월 이용료와 비슷한 가격입니다.
$19
Pay once, keep foreverInstant download30-day money-back guarantee
Stripe 보안 결제
각 상표는 해당 소유자의 자산입니다. KissMySkills은(는) 이들과 제휴하거나 보증을 받지 않았습니다.
작동 방식
Ask it something hard.
Next 15 앱 라우터, Tailwind, Supabase 인증을 사용하세요. 로그인한 사용자별로 기록이 유지되는 스트리밍 채팅 페이지를 만들어 주세요.
CLAUDE · WITH THIS SKILL
다음을 확인합니다: React 및 Next 버전, 사용 중인 제공업체, 로그아웃 후에도 기록을 유지해야 하는지 여부 -> 라우트 핸들러 형태에 동의하면 API 키를 서버 측에 유지하는 스트리밍 엔드포인트를 작성합니다 -> 부분적인 SSE 프레임을 버퍼링하는 리더 루프를 작성해 토큰이 절반만 디코딩된 상태로 도착하지 않게 합니다 -> AbortController에 중지 기능을 연결하고 AbortError를 오류로 표시하는 대신 무시합니다 -> 진행 중인 어시스턴트 텍스트를 메시지 배열에서 분리해 마지막 말풍선만 다시 렌더링되게 합니다 -> 스크롤 고정을 추가한 다음 localStorage와 정리 전략을 추가하고, 다음 단계로 넘어가기 전에 각 단계를 확인합니다
또는 모든 스킬을 AI 안에서.
구매 전에 궁금한 점이 있나요? 보통 당일에 사람이 직접 답해 드립니다: hello@kissmyskills.com
// 파일 원본
구매 전에 직접 읽어 보세요.
AI가 읽게 될 파일의 첫 부분을 전달되는 그대로 보여 드립니다. 페이지용으로 고쳐 쓴 내용은 없습니다.
이름으로 불러 보세요
파일을 불러온 뒤에는 이름으로 말을 걸어 보세요: “Serge, 이 페이지 좀 봐 줘.” 이름은 바로 그걸 위해 있습니다. 한 채팅에서 여러 스킬을 구분하는 데도 도움이 됩니다.
파일을 불러온 뒤에는 이름으로 말을 걸어 보세요: “Serge, 이 페이지 좀 봐 줘.” 이름은 바로 그걸 위해 있습니다. 한 채팅에서 여러 스킬을 구분하는 데도 도움이 됩니다.
// 당신의 AI를 움직이는 skill
당신은 React 채팅 인터페이스 빌더이며, 개발자가 에디터를 실행하는 동안 각 부분을 설명한 후 작성합니다. 토큰 단위로 스트리밍되고 새로고침 후에도 유지되는 채팅을 출시하도록 활성화되었습니다.
// 구성
이 스킬에 담긴 내용
- 중지 버튼에서 Fetch ReadableStream 리더와 AbortController를 사용한 스트리밍
- 모든 토큰마다 모든 말풍선을 다시 렌더링하지 않는 메시지 목록
- 라우트 핸들러 또는 엣지 함수의 핵심으로, 클라이언트 번들에는 절대 포함하지 않음
- 먼저 localStorage에 저장한 기록과 이후 백엔드로 옮긴 기록, 그리고 스레드가 길어지면 토큰 예산 설정
이번 주에 채팅 인터페이스를 출시해야 하며, 스크린샷이 아니라 실제 사용자 앞에서도 문제없이 작동하도록 만들어야 하는 React 개발자.
// 두 가지 방법
AI 안에서 바로 쓰거나, 한 번 다운로드하세요.
이 스킬만 파일로
$19 1회 결제
- 결제 후 다운로드해 어떤 AI 채팅에든 붙여 넣으세요
- 파일 하나, 업데이트 없음, 커넥터 없음
- 30일 환불 보장
이미 Library 또는 Both를 이용 중인가요? 이 상품은 포함되어 있어 파일을 따로 구매할 필요가 없습니다.
실제로 구매하는 것
대부분의 React 챗봇 튜토리얼은 데모에서 끝납니다. 8초 후 답변이 한 덩어리로 표시되고, 매번 대화 전체가 모델로 다시 전송되며, 키는 NEXT_PUBLIC_ 변수에 들어가 Next가 브라우저 번들에 그대로 인라인합니다. 스크린샷에서는 멀쩡해 보이지만 실제 사용을 시작한 첫 주에 무너집니다.
이것은 system prompt가 아니라 빌드 가이드입니다. 파일을 프로젝트에 넣고 Claude Code 또는 Cursor로 열면, Fetch ReadableStream 리더를 사용한 스트리밍, 중지 기능이 연결된 AbortController, 토큰이 추가되는 낙관적 사용자 메시지, 토큰이 추가될 때마다 모든 말풍선을 다시 렌더링하지 않는 목록, 위로 스크롤한 사용자를 방해하지 않는 자동 스크롤, 마크다운과 코드 블록, 라우트 핸들러 뒤에 보관하는 키, localStorage에서 실제 백엔드로 이어지는 기록 저장, 그리고 대화가 길어지는 날을 위한 토큰 예산까지 아키텍처를 함께 구성해 줍니다.
한 번 구매하면 계속 소유할 수 있습니다. 구독도, 런타임 종속성도 없으며, 다음 프로젝트에서 다시 사용하거나 코드베이스가 변화함에 따라 수정하는 데 제한이 없습니다.
// 설치 방법
2분 이내
네 단계. 어떤 AI 채팅.
- 01파일 다운로드
결제 후 다운로드 링크가 이메일로 전송됩니다. .txt 파일을 기기의 원하는 위치에 저장하세요.
- 02AI 채팅 열기
이미 사용 중인 AI 채팅이면 무엇이든: Claude, ChatGPT, Gemini, Grok, Copilot 등.
- 03프롬프트 붙여넣기
.txt 파일을 열어 프롬프트 부분을 복사한 뒤 Claude나 ChatGPT에 붙여넣으세요. 프로젝트에 추가해 두면 언제든 바로 쓸 수 있습니다.
- 04작업 시작
귀하의 AI가 이제 전문가로 설정되었습니다. 해당 분야에 관해 무엇이든 질문해 보세요.
기술 지식이 필요하지 않습니다.
Library를 이용하면 다운로드할 것이 없습니다. AI를 한 번 연결하면 원하는 스킬을 이름으로 요청할 수 있습니다.
// faq
이 제품에 대한 질문
이 React 챗봇 가이드는 Next 전용인가요, 아니면 일반 Vite 앱에서도 작동하나요?+
둘 다 가능합니다. 처음 몇 가지 질문에서 어떤 환경을 사용하는지 묻는데, 답변에 따라 키를 저장하는 위치가 달라지기 때문입니다. Next 앱 라우터를 사용하면 스트리밍 Response를 반환하는 라우트 핸들러가 제공됩니다. Vite에는 서버가 전혀 없으므로, 대신 간단한 Express 또는 서버리스 엔드포인트를 설정하는 방법을 안내하고 Vite 환경 변수가 키를 숨겨 두는 곳이 될 수 없는 이유도 설명합니다.
이 가이드가 코드를 대신 작성해 주나요, 아니면 제가 직접 해야 하나요?+
에디터에서 함께 작업하는 방식입니다. Claude Code 또는 Cursor에 불러오면 프로젝트를 읽고, 사용 중인 버전을 묻고, 아키텍처를 제안한 다음, 함께 파일을 작성합니다. 하지만 모든 diff를 직접 검토하고 실행하며 결과에 대한 책임도 본인이 져야 합니다. 한 번 누르면 끝나는 생성기가 아니라 숙련된 페어 프로그래머입니다. 직접 입력하고, 테스트하고, 푸시해야 합니다.
특정 모델 제공업체나 SDK에 의존하나요?+
아니요. 아키텍처가 플랫폼 기본 요소인 fetch, ReadableStream, AbortController를 기반으로 하므로 어떤 제공업체를 호출하든 사용할 수 있습니다. 특정 벤더의 SDK가 실제로 도움이 될 때는 그렇게 안내하며, 메서드 이름을 제시하기 전에 설치된 버전을 묻습니다. 이런 라이브러리는 문서에서 말하는 것보다 주요 버전 간 형태가 더 자주 바뀌기 때문입니다.
어떤 에디터와 AI 도구에서 사용할 수 있나요?+
우선 Claude Code와 Cursor를 지원합니다. 두 도구 모두 프로젝트를 읽고 함께 파일을 작성할 수 있기 때문입니다. 대신 프로젝트를 설명하면 Claude, ChatGPT, Gemini 또는 Copilot에 붙여 넣어 사용할 수도 있습니다. 긴 지침 파일을 받아들일 수 있는 어시스턴트라면 모두 이를 따를 수 있습니다.
AI를 전문화할 준비가 되셨나요?
이 상품과 그 밖의 2,500+개를 Claude, ChatGPT, Claude Code, Codex, Cursor 안에서. 언제든 해지할 수 있습니다.