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
earnings-calendar
This skill retrieves upcoming earnings announcements for US stocks using the Financial Modeling Prep (FMP) API. Use this when the user requests earnings calendar data, wants to know which companies are reporting earnings in the upcoming week, or needs a weekly earnings review. The skill focuses on mid-cap and above companies (over $2B market cap) that have significant market impact, organizing the data by date and timing in a clean markdown table format. Supports multiple environments (CLI, Desktop, Web) with flexible API key management.
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.
dividend-growth-pullback-screener
Use this skill to find high-quality dividend growth stocks (12%+ annual dividend growth, 1.5%+ yield) that are experiencing temporary pullbacks, identified by RSI oversold conditions (RSI ≤40). This skill combines fundamental dividend analysis with technical timing indicators to identify buying opportunities in strong dividend growers during short-term weakness.
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.
options-strategy-advisor
Options trading strategy analysis and simulation tool. Provides theoretical pricing using Black-Scholes model, Greeks calculation, strategy P/L simulation, and risk management guidance. Use when user requests options strategy analysis, covered calls, protective puts, spreads, iron condors, earnings plays, or options risk management. Includes volatility analysis, position sizing, and earnings-based strategy recommendations. Educational focus with practical trade simulation.