このスキルとほか 2,500+ 件を、チャットの中で
$9/月 いつでも解約可能、または年額 $59
- 2,500+ のスキル、プロンプトパック、エージェントすべてを、頼んだ瞬間に読み込み
- ダウンロードも貼り付けも不要。Claude、ChatGPT、Claude Code、Cursor で一度接続するだけ
- 毎週新しいスキルを追加、カタログのファイルを月10件までダウンロード可能
React向けチャットボットビルダーSkill
$19
商品情報へスキップ
React向けチャットボットビルダーSkill
トークン単位でストリーミングし、リフレッシュ後も状態を保持し、APIキーをブラウザのバンドルに決して含めないReactチャットインターフェース。
$19
このスキル
1回払い
ずっとあなたのもの
プロンプトファイル すぐにダウンロード
Library プラン
このスキルとほか2,500+点を手に入れる
$9/月 または年額 $59
Library を始める · $9/月Library を始める
このスキルを7日間無料で試す無料で試す
- 7日間無料、カード不要
- いつでも解約可能
- 初回のお支払いは30日間返金保証
請求は一切ありません。トライアル終了の2日前に、初回のお支払いに使える−30%コードが届きます。
- 1つのコネクタで 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のApp Router、Tailwind、Supabase Auth。ログインユーザーごとに履歴を保持するストリーミングチャットページを作成してください。
CLAUDE · WITH THIS SKILL
入力するのは、ReactとNextのバージョン、プロバイダー、そしてログアウト後も履歴を保持する必要があるかどうかです -> ルートハンドラーの形に合意すると、キーをサーバー側に保持するストリーミングエンドポイントを作成します -> リーダーループを作成し、部分的なSSEフレームをバッファリングして、トークンが途中までデコードされた状態で届かないようにします -> 停止操作をAbortControllerに接続し、AbortErrorを失敗として表示せずに処理します -> 進行中のアシスタントテキストをメッセージ配列から分離し、最後の吹き出しだけが再レンダリングされるようにします -> スクロール位置の固定、次にlocalStorage、最後にトリミング戦略を追加し、各ステップを次に進む前に検証します
または、すべてのスキルを AI の中に。
購入前のご質問は？ 担当者が通常その日のうちにお答えします： hello@kissmyskills.com
// ファイルそのもの
購入前に中身を読めます。
AI が読むファイルの冒頭部分を、納品されるそのままの形で掲載しています。ページ用の書き換えは一切ありません。
名前で呼びましょう
ファイルを読み込んだら、名前で話しかけてください：「Serge、このページを見て。」名前はそのためにあります。1つのチャットで複数のスキルを使い分けるのにも役立ちます。
ファイルを読み込んだら、名前で話しかけてください：「Serge、このページを見て。」名前はそのためにあります。1つのチャットで複数のスキルを使い分けるのにも役立ちます。
// あなたのAIを動かすskill
あなたはReactチャットインターフェースのビルダーであり、開発者がエディターを実行する間、コードを書く前に各要素を説明します。トークンごとにストリーミングし、更新後も状態が保持されるチャットをリリースするよう指示されています。
// 中身
このスキルの中身
- FetchのReadableStreamリーダーと停止ボタンのAbortControllerを使ったストリーミング
- トークンごとにすべての吹き出しを再レンダリングしないメッセージリスト
- ルートハンドラーまたはエッジ関数の背後に置くキーで、クライアントバンドルには決して含めない
- まずlocalStorageに履歴を保存し、その後バックエンドに移行し、スレッドが長くなったらトークン予算を設定する
今週中にチャットインターフェースをリリースしなければならず、スクリーンショット上ではなく実際のユーザーの前でも通用するものにしたいReact開発者。
// 2つの入手方法
AI の中で使うか、一度だけダウンロードするか。
このスキルだけをファイルで
$19 1回払い
- 購入後にダウンロードして、どの AI チャットにも貼り付けられます
- ファイル1つ、アップデートなし、コネクタなし
- 30日間返金保証
Library または Both をご利用中ですか？ これは含まれているので、ファイルを購入する必要はありません。
実際に購入するもの
Reactチャットボットのチュートリアルの多くは、デモで終わります。8秒後に返信がひとかたまりで表示され、ターンごとにスレッド全体がモデルへ再送信され、キーはNEXT_PUBLIC_変数に置かれてNextがそのままブラウザのバンドルにインライン化します。スクリーンショットでは問題なく見えても、実際に使い始めると最初の1週間で破綻します。
これはシステムpromptではなく、構築ガイドです。ファイルをプロジェクトに入れてClaude CodeまたはCursorで開けば、Fetch ReadableStreamリーダーによるストリーミング、停止用に接続したAbortController、トークンを追加していく楽観的なユーザーメッセージ、トークンが追加されるたびにすべての吹き出しを再レンダリングしないリスト、上にスクロールした読者の邪魔をしない自動スクロール、Markdownとコードブロック、ルートハンドラーの背後に隠したキー、localStorage、そして実際のバックエンドでの履歴管理、さらにスレッドが長くなった日に備えたトークン予算まで、アーキテクチャを一緒に組み立てていけます。
一度購入すれば、ずっと使えます。サブスクリプションもランタイム依存関係もなく、次のプロジェクトで再利用したり、コードベースの変化に合わせて編集したりするのを妨げるものもありません。
// インストール方法
2分未満
4つのステップ。どんなAIチャットでも。
- 01ファイルをダウンロード
購入後、ダウンロードリンクがメールで届きます。.txtファイルを端末の好きな場所に保存してください。
- 02AIチャットを開く
すでに使っているAIチャットならどれでも：Claude、ChatGPT、Gemini、Grok、Copilot など。
- 03プロンプトを貼り付ける
.txtファイルを開き、プロンプト部分をコピーしてClaudeやChatGPTに貼り付けます。プロジェクトに追加しておけばいつでも使えます。
- 04作業を開始する
あなたのAIは専門家として設定されています。専門分野について何でも質問してください。
技術的な知識は必要ありません。サブスクリプション不要。一度支払えば、ずっと使えます。.
Libraryなら、ダウンロードは不要です。 AIを一度接続すれば、あとはどのスキルも名前で呼び出せます。
// faq
この製品についての質問
このReactチャットボットガイドはNext専用ですか、それとも通常のViteアプリでも使えますか？+
どちらにも対応しています。最初の数問でどちらを使っているかを尋ねます。答えによってキーの置き場所が変わるためです。NextのApp Routerでは、ストリーミングResponseを返すルートハンドラーを使います。Viteにはサーバーがまったくないため、代わりに小規模なExpressまたはサーバーレスのエンドポイントを手順に沿って構築し、Viteの環境変数が隠し場所にならない理由も説明します。
これはコードを自動で書いてくれますか？それとも自分で書く必要がありますか？+
エディター上で一緒に作業します。Claude CodeまたはCursorに読み込ませると、プロジェクトを読み取り、使用中のバージョンについて質問し、アーキテクチャを提案したうえで、一緒にファイルを作成します。ただし、すべての差分を確認して実行し、結果に責任を持つのはあなたです。ボタンを一度押すだけで生成するツールではなく、経験豊富なペアプログラマーのようなものです。入力、テスト、プッシュは自分で行う必要があります。
特定のモデルプロバイダーやSDKに依存しますか？+
いいえ。アーキテクチャは、fetch、ReadableStream、AbortControllerなどのプラットフォーム標準の機能を基盤としているため、どのプロバイダーを呼び出しても利用できます。ベンダーのSDKが本当に役立つ場合はそのことを明記し、メソッド名を挙げる前にインストール済みのバージョンを尋ねます。こうしたライブラリは、ドキュメントから受ける印象以上に、メジャーリリース間で形が変わることが多いためです。
どのエディターやAIツールで使えますか？+
まずはClaude CodeとCursorです。どちらもプロジェクトを読み取り、一緒にファイルを作成できるためです。プロジェクトについて説明すれば、Claude、ChatGPT、Gemini、Copilotに貼り付けて使うこともできます。長い指示ファイルを受け付けるアシスタントなら、どれでも従えます。
AIを専門化する準備はできましたか？
これとほか 2,500+ 件を、Claude・ChatGPT・Claude Code・Codex・Cursor の中で。いつでも解約できます。