mcpField
A
ai-sdk-ui-v7

ai-sdk-ui-v7

github.com/blockmatic開発1223 回インストール5 週間前に更新
リポジトリ

ai-sdk-ui-v7 について

AI SDK v7 と `@ai-sdk/react` でチャット画面を開発する人向けのスキルです。`useChat`によるクライアント側のメッセージ処理とストリーミングUIを扱い、バックエンドの生成処理はai-sdk-coreに委ねます。

主な機能

  1. 01バージョンに沿ったuseChatの指針
  2. 02DefaultChatTransportの設定
  3. 03ローカル入力とメッセージ表示のパターン
  4. 04ストリーミングUI応答の指針
  5. 05チャットUIのコードテンプレート

活用シーン

  1. 01Reactチャット画面の構築
  2. 02チャットを独自APIエンドポイントに接続
  3. 03partsとstatusを使ったメッセージ表示

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/blockmatic/basilic-skills --skill ai-sdk-ui-v7

インストール後、Claude Code で/ai-sdk-ui-v7を入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

templates/
nextjs-api-route.ts
nextjs-chat-app-router.tsx
use-chat-basic.tsx

詳細

スキル：ai-sdk-ui

対象範囲

  • 対象：@ai-sdk/react の useChat および ai の DefaultChatTransport
  • 対象外：バックエンドでの生成（ai-sdk-core を参照）

前提

  • SDK のメジャーバージョンは ai ^7 です。@ai-sdk/react は別のメジャーバージョンのパッケージです。フォルダーは ai に従います。
  • useChat を記憶を頼りに書かないでください。 node_modules/@ai-sdk/react/docs/ と node_modules/ai/docs/ を grep してください。それができない場合は https://ai-sdk.dev/docs/ai-sdk-ui/chatbot を参照してください。
  • チャットの HTTP サーバーには Fastify を使う場合があります。URL が /api/chat でない場合は transport を渡してください。

原則

  • useChat は @ai-sdk/react から、DefaultChatTransport は ai からインポートします。
  • 入力状態はローカルで管理し、sendMessage({ text }) を使用します。isLoading ではなく status を使用し、message.parts をレンダリングします。
  • サーバーについては ai-sdk-core を参照してください。ハンドラーでは createUIMessageStreamResponse と toUIMessageStream({ stream: result.stream }) を使用します。タスクがストリーミングまたは SDK に関係しない場合に限り、非推奨の toUIMessageStreamResponse() はそのままにします。

制約

必須
  • エンドポイントが /api/chat でない場合は DefaultChatTransport({ api }) を使用します。
  • status !== 'ready' の間は送信を無効にします。
使用を避ける
  • import { useChat } from 'ai/react'
  • toDataStreamResponse / pipeDataStreamToResponse
  • v5 より前の handleInputChange / handleSubmit / useAssistant

連携

テンプレート

コメント

Markdown 対応