ai-sdk-ui
Vercel AI SDK v6を使用してReactチャットインターフェースを構築できます。useChat/useCompletion/useObjectフック、メッセージパーツ構造、ツール承認ワークフロー、18種類のUIエラー解決方法に対応しています。React Strict Mode、同時リクエスト、stale closure、ツール承認エッジケースなど、ドキュメント化された問題を防ぎます。 以下の場合に使用してください：AI チャットUIの実装、v5からv6への移行、「useChat failed to parse stream」「stale body values」「React maximum update depth」「Cannot read properties of undefined (reading 'state')」などのトラブルシューティング、またはツール承認ワークフローエラーの解決。
description の原文を見る
Build React chat interfaces with Vercel AI SDK v6. Covers useChat/useCompletion/useObject hooks, message parts structure, tool approval workflows, and 18 UI error solutions. Prevents documented issues with React Strict Mode, concurrent requests, stale closures, and tool approval edge cases. Use when: implementing AI chat UIs, migrating v5→v6, troubleshooting "useChat failed to parse stream", "stale body values", "React maximum update depth", "Cannot read properties of undefined (reading 'state')", or tool approval workflow errors.
SKILL.md 本文
AI SDK UI - フロントエンド React フック
Vercel AI SDK v6 を使用した AI パワード ユーザーインターフェイス用フロントエンド React フック。
バージョン: AI SDK v6.0.42 (安定版) フレームワーク: React 18+/19、Next.js 14+/15+ 最終更新: 2026-01-20
AI SDK v6 安定版 (2026年1月)
ステータス: 安定リリース 最新: ai@6.0.42、@ai-sdk/react@3.0.44、@ai-sdk/openai@3.0.7 マイグレーション: v5 → v6 での最小限の破壊的変更
v6 の新しい UI 機能
1. メッセージ パーツ構造 (破壊的変更)
v6 では、メッセージコンテンツは .content の代わりに .parts 配列経由でアクセスされるようになりました:
// ❌ v5 (古い)
{messages.map(m => (
<div key={m.id}>{m.content}</div>
))}
// ✅ v6 (新しい)
{messages.map(m => (
<div key={m.id}>
{m.parts
...
詳細情報
- 作者
- slavochek2
- ライセンス
- AGPL-3.0
- 最終更新
- 2026/5/12
Source: https://github.com/slavochek2/claritypledge / ライセンス: AGPL-3.0