ai-sdk-ui
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.
Why use this skill?
Master Vercel AI SDK v6 with our expert guide. Implement message parts, tool approval workflows, and troubleshoot React chat UI issues with ease.
Install via CLI (Recommended)
clawhub install openclaw/skills/skills/veeramanikandanr48/ai-sdk-uiWhat This Skill Does
The ai-sdk-ui skill acts as your primary technical manual and implementation assistant for Vercel AI SDK v6. It provides structured guidance on building production-grade React chat interfaces, specifically addressing the breaking changes introduced in version 6. The core focus is on the new 'parts' message architecture, where content, tool invocations, files, and reasoning are decoupled into a structured array. This skill helps developers implement complex features like Human-in-the-Loop tool approval workflows, type-safe agent communication, and state management for streaming responses. It is designed to proactively solve common integration issues such as 'stale closure' problems, React Strict Mode hydration errors, and concurrent streaming conflicts. By leveraging this skill, you ensure your frontend components align with the latest architectural patterns for AI agents.
Installation
To integrate this skill into your OpenClaw environment, execute the following command in your terminal:
clawhub install openclaw/skills/skills/veeramanikandanr48/ai-sdk-ui
Ensure that your project dependencies include @ai-sdk/[email protected] and [email protected] or higher to maintain compatibility with the patterns documented in this skill.
Use Cases
This skill is intended for:
- Migrating existing v5 AI SDK implementations to the v6 message parts structure.
- Implementing robust 'Human-in-the-Loop' tool approval flows where end-users must confirm sensitive API calls before execution.
- Debugging React streaming performance bottlenecks or 'Maximum update depth' errors common in complex state-dependent UIs.
- Type-safe binding of agent schemas to chat components using InferAgentUIMessage.
- Handling multi-modal AI interactions including text, file uploads, and model reasoning traces.
Example Prompts
- "How do I migrate my existing v5 chat interface to use the new v6 .parts message structure without breaking my UI components?"
- "Explain how to implement a custom tool approval workflow where I can render a modal for user confirmation before the model proceeds with a tool call."
- "My application is throwing a 'Maximum update depth exceeded' error during streaming; how can I troubleshoot my useChat hooks and prevent stale body values?"
Tips & Limitations
- Always prioritize the use of the
.partsarray for rendering, as legacy direct access to.contentis deprecated and will fail in v6. - Use
InferAgentUIMessageto maintain strict type safety between your agent's tool schema and your UI components. - When implementing tool approval, ensure your state management for
addToolApprovalResponseis decoupled from the render cycle to prevent unnecessary re-renders of the entire message list. - This skill focuses on the frontend React implementation; ensure your server-side API routes are also updated to comply with the v6 stream structure.
Metadata
Not sure this is the right skill?
Describe what you want to build — we'll match you to the best skill from 16,000+ options.
Find the right skillPaste this into your clawhub.json to enable this plugin.
{
"plugins": {
"official-veeramanikandanr48-ai-sdk-ui": {
"enabled": true,
"auto_update": true
}
}
}Tags(AI)
Related Skills
better-auth
Self-hosted auth for TypeScript/Cloudflare Workers with social auth, 2FA, passkeys, organizations, RBAC, and 15+ plugins. Requires Drizzle ORM or Kysely for D1 (no direct adapter). Self-hosted alternative to Clerk/Auth.js. Use when: self-hosting auth on D1, building OAuth provider, multi-tenant SaaS, or troubleshooting D1 adapter errors, session caching, rate limits, Expo crashes, additionalFields bugs.
security-reviewer
Use when conducting security audits, reviewing code for vulnerabilities, or analyzing infrastructure security. Invoke for SAST scans, penetration testing, DevSecOps practices, cloud security reviews.
api-designer
Use when designing REST or GraphQL APIs, creating OpenAPI specifications, or planning API architecture. Invoke for resource modeling, versioning strategies, pagination patterns, error handling standards.
cli-developer
Use when building CLI tools, implementing argument parsing, or adding interactive prompts. Invoke for CLI design, argument parsing, interactive prompts, progress indicators, shell completions.
swift-expert
Use when building iOS/macOS applications with Swift 5.9+, SwiftUI, or async/await concurrency. Invoke for protocol-oriented programming, SwiftUI state management, actors, server-side Swift.