# Send Ai Sdk Ui to your agent
Hand the extracted package to your coding agent with a concrete install brief instead of figuring it out manually.
## Fast path
- Download the package from Yavira.
- Extract it into a folder your agent can access.
- Paste one of the prompts below and point your agent at the extracted folder.
## Suggested prompts
### New install

```text
I downloaded a skill package from Yavira. Read SKILL.md from the extracted folder and install it by following the included instructions. Then review README.md for any prerequisites, environment setup, or post-install checks. Tell me what you changed and call out any manual steps you could not complete.
```
### Upgrade existing

```text
I downloaded an updated skill package from Yavira. Read SKILL.md from the extracted folder, compare it with my current installation, and upgrade it while preserving any custom configuration unless the package docs explicitly say otherwise. Then review README.md for any prerequisites, environment setup, or post-install checks. Summarize what changed and any follow-up checks I should run.
```
## Machine-readable fields
```json
{
  "schemaVersion": "1.0",
  "item": {
    "slug": "ai-sdk-ui",
    "name": "Ai Sdk Ui",
    "source": "tencent",
    "type": "skill",
    "category": "通讯协作",
    "sourceUrl": "https://clawhub.ai/Veeramanikandanr48/ai-sdk-ui",
    "canonicalUrl": "https://clawhub.ai/Veeramanikandanr48/ai-sdk-ui",
    "targetPlatform": "OpenClaw"
  },
  "install": {
    "downloadUrl": "/downloads/ai-sdk-ui",
    "sourceDownloadUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=ai-sdk-ui",
    "sourcePlatform": "tencent",
    "targetPlatform": "OpenClaw",
    "packageFormat": "ZIP package",
    "primaryDoc": "SKILL.md",
    "includedAssets": [
      ".claude-plugin/plugin.json",
      "README.md",
      "SKILL.md",
      "references/links-to-official-docs.md",
      "references/nextjs-integration.md",
      "references/streaming-patterns.md"
    ],
    "downloadMode": "redirect",
    "sourceHealth": {
      "source": "tencent",
      "slug": "ai-sdk-ui",
      "status": "healthy",
      "reason": "direct_download_ok",
      "recommendedAction": "download",
      "checkedAt": "2026-04-29T03:28:17.656Z",
      "expiresAt": "2026-05-06T03:28:17.656Z",
      "httpStatus": 200,
      "finalUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=ai-sdk-ui",
      "contentType": "application/zip",
      "probeMethod": "head",
      "details": {
        "probeUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=ai-sdk-ui",
        "contentDisposition": "attachment; filename=\"ai-sdk-ui-0.1.0.zip\"",
        "redirectLocation": null,
        "bodySnippet": null,
        "slug": "ai-sdk-ui"
      },
      "scope": "item",
      "summary": "Item download looks usable.",
      "detail": "Yavira can redirect you to the upstream package for this item.",
      "primaryActionLabel": "Download for OpenClaw",
      "primaryActionHref": "/downloads/ai-sdk-ui"
    },
    "validation": {
      "installChecklist": [
        "Use the Yavira download entry.",
        "Review SKILL.md after the package is downloaded.",
        "Confirm the extracted package contains the expected setup assets."
      ],
      "postInstallChecks": [
        "Confirm the extracted package includes the expected docs or setup files.",
        "Validate the skill or prompts are available in your target agent workspace.",
        "Capture any manual follow-up steps the agent could not complete."
      ]
    }
  },
  "links": {
    "detailUrl": "https://openagent3.xyz/skills/ai-sdk-ui",
    "downloadUrl": "https://openagent3.xyz/downloads/ai-sdk-ui",
    "agentUrl": "https://openagent3.xyz/skills/ai-sdk-ui/agent",
    "manifestUrl": "https://openagent3.xyz/skills/ai-sdk-ui/agent.json",
    "briefUrl": "https://openagent3.xyz/skills/ai-sdk-ui/agent.md"
  }
}
```
## Documentation

### AI SDK UI - Frontend React Hooks

Frontend React hooks for AI-powered user interfaces with Vercel AI SDK v6.

Version: AI SDK v6.0.42 (Stable)
Framework: React 18+/19, Next.js 14+/15+
Last Updated: 2026-01-20

### AI SDK v6 Stable (January 2026)

Status: Stable Release
Latest: ai@6.0.42, @ai-sdk/react@3.0.44, @ai-sdk/openai@3.0.7
Migration: Minimal breaking changes from v5 → v6

### New UI Features in v6

1. Message Parts Structure (Breaking Change)
In v6, message content is now accessed via .parts array instead of .content:

// ❌ v5 (OLD)
{messages.map(m => (
  <div key={m.id}>{m.content}</div>
))}

// ✅ v6 (NEW)
{messages.map(m => (
  <div key={m.id}>
    {m.parts.map((part, i) => {
      if (part.type === 'text') return <span key={i}>{part.text}</span>;
      if (part.type === 'tool-invocation') return <ToolCall key={i} tool={part} />;
      if (part.type === 'file') return <FilePreview key={i} file={part} />;
      return null;
    })}
  </div>
))}

Part Types:

text - Text content with .text property
tool-invocation - Tool calls with .toolName, .args, .result
file - File attachments with .mimeType, .data
reasoning - Model reasoning (when available)
source - Source citations

3. Agent Integration
Type-safe messaging with agents using InferAgentUIMessage<typeof agent>:

import { useChat } from '@ai-sdk/react';
import type { InferAgentUIMessage } from 'ai';
import { myAgent } from './agent';

export default function AgentChat() {
  const { messages, sendMessage } = useChat<InferAgentUIMessage<typeof myAgent>>({
    api: '/api/chat',
  });
  // messages are now type-checked against agent schema
}

4. Tool Approval Workflows (Human-in-the-Loop)
Request user confirmation before executing tools:

import { useChat } from '@ai-sdk/react';
import { useState } from 'react';

export default function ChatWithApproval() {
  const { messages, sendMessage, addToolApprovalResponse } = useChat({
    api: '/api/chat',
  });

  const handleApprove = (toolCallId: string) => {
    addToolApprovalResponse({
      toolCallId,
      approved: true,  // or false to deny
    });
  };

  return (
    <div>
      {messages.map(message => (
        <div key={message.id}>
          {message.toolInvocations?.map(tool => (
            tool.state === 'awaiting-approval' && (
              <div key={tool.toolCallId}>
                <p>Approve tool call: {tool.toolName}?</p>
                <button onClick={() => handleApprove(tool.toolCallId)}>
                  Approve
                </button>
                <button onClick={() => addToolApprovalResponse({
                  toolCallId: tool.toolCallId,
                  approved: false
                })}>
                  Deny
                </button>
              </div>
            )
          ))}
        </div>
      ))}
    </div>
  );
}

5. Auto-Submit Capability
Automatically continue conversation after handling approvals:

import { useChat, lastAssistantMessageIsCompleteWithApprovalResponses } from '@ai-sdk/react';

export default function AutoSubmitChat() {
  const { messages, sendMessage } = useChat({
    api: '/api/chat',
    sendAutomaticallyWhen: lastAssistantMessageIsCompleteWithApprovalResponses,
    // Automatically resubmit after all approval responses provided
  });
}

6. Structured Output in Chat
Generate structured data alongside tool calling (previously only available in useObject):

import { useChat } from '@ai-sdk/react';
import { z } from 'zod';

const schema = z.object({
  summary: z.string(),
  sentiment: z.enum(['positive', 'neutral', 'negative']),
});

export default function StructuredChat() {
  const { messages, sendMessage } = useChat({
    api: '/api/chat',
    // Server can now stream structured output with chat messages
  });
}

### useChat Hook - v4 → v5 Breaking Changes

CRITICAL: useChat no longer manages input state in v5!

v4 (OLD - DON'T USE):

const { messages, input, handleInputChange, handleSubmit, append } = useChat();

<form onSubmit={handleSubmit}>
  <input value={input} onChange={handleInputChange} />
</form>

v5 (NEW - CORRECT):

const { messages, sendMessage } = useChat();
const [input, setInput] = useState('');

<form onSubmit={(e) => {
  e.preventDefault();
  sendMessage({ content: input });
  setInput('');
}}>
  <input value={input} onChange={(e) => setInput(e.target.value)} />
</form>

Summary of v5 Changes:

Input management removed: input, handleInputChange, handleSubmit no longer exist
append() → sendMessage(): New method for sending messages
onResponse removed: Use onFinish instead
initialMessages → controlled mode: Use messages prop for full control
maxSteps removed: Handle on server-side only

See references/use-chat-migration.md for complete migration guide.

### useAssistant Hook (Deprecated)

⚠️ Deprecation Notice: useAssistant is deprecated as of AI SDK v5. OpenAI Assistants API v2
will sunset on August 26, 2026. For new projects, use useChat with custom backend logic instead.
See the openai-assistants skill for migration guidance.

Interact with OpenAI-compatible assistant APIs with automatic UI state management.

Import:

import { useAssistant } from '@ai-sdk/react';

Basic Usage:

'use client';
import { useAssistant } from '@ai-sdk/react';
import { useState, FormEvent } from 'react';

export default function AssistantChat() {
  const { messages, sendMessage, isLoading, error } = useAssistant({
    api: '/api/assistant',
  });
  const [input, setInput] = useState('');

  const handleSubmit = (e: FormEvent) => {
    e.preventDefault();
    sendMessage({ content: input });
    setInput('');
  };

  return (
    <div>
      {messages.map(m => (
        <div key={m.id}>
          <strong>{m.role}:</strong> {m.content}
        </div>
      ))}
      <form onSubmit={handleSubmit}>
        <input
          value={input}
          onChange={(e) => setInput(e.target.value)}
          disabled={isLoading}
        />
      </form>
      {error && <div>{error.message}</div>}
    </div>
  );
}

Use Cases:

Building OpenAI Assistant-powered UIs
Managing assistant threads and runs
Streaming assistant responses with UI state management
File search and code interpreter integrations

See official docs for complete API reference: https://ai-sdk.dev/docs/reference/ai-sdk-ui/use-assistant

### Top UI Errors & Solutions

See references/top-ui-errors.md for complete documentation. Quick reference:

### 1. useChat Failed to Parse Stream

Error: SyntaxError: Unexpected token in JSON at position X

Cause: API route not returning proper stream format.

Solution:

// ✅ CORRECT
return result.toDataStreamResponse();

// ❌ WRONG
return new Response(result.textStream);

### 2. useChat No Response

Cause: API route not streaming correctly.

Solution:

// App Router - use toDataStreamResponse()
export async function POST(req: Request) {
  const result = streamText({ /* ... */ });
  return result.toDataStreamResponse(); // ✅
}

// Pages Router - use pipeDataStreamToResponse()
export default async function handler(req, res) {
  const result = streamText({ /* ... */ });
  return result.pipeDataStreamToResponse(res); // ✅
}

### 3. Streaming Not Working When Deployed

Cause: Deployment platform buffering responses.

Solution: Vercel auto-detects streaming. Other platforms may need configuration.

### 4. Stale Body Values with useChat

Cause: body option captured at first render only.

Solution:

// ❌ WRONG - body captured once
const { userId } = useUser();
const { messages } = useChat({
  body: { userId },  // Stale!
});

// ✅ CORRECT - use controlled mode
const { userId } = useUser();
const { messages, sendMessage } = useChat();

sendMessage({
  content: input,
  data: { userId },  // Fresh on each send
});

### 5. React Maximum Update Depth

Cause: Infinite loop in useEffect.

Solution:

// ❌ WRONG
useEffect(() => {
  saveMessages(messages);
}, [messages, saveMessages]); // saveMessages triggers re-render!

// ✅ CORRECT
useEffect(() => {
  saveMessages(messages);
}, [messages]); // Only depend on messages

See references/top-ui-errors.md for 13 more common errors (18 total documented).

### Performance

Always use streaming for better UX:

// ✅ GOOD - Streaming (shows tokens as they arrive)
const { messages } = useChat({ api: '/api/chat' });

// ❌ BAD - Non-streaming (user waits for full response)
const response = await fetch('/api/chat', { method: 'POST' });

### UX Patterns

Show loading states:

{isLoading && <div>AI is typing...</div>}

Provide stop button:

{isLoading && <button onClick={stop}>Stop</button>}

Auto-scroll to latest message:

useEffect(() => {
  messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
}, [messages]);

Disable input while loading:

<input disabled={isLoading} />

See references/streaming-patterns.md for comprehensive best practices.

### React Strict Mode Considerations

React Strict Mode intentionally double-invokes effects to catch bugs. When using useChat or useCompletion in effects (auto-resume, initial messages), guard against double execution to prevent duplicate API calls and token waste.

Problem:

'use client';
import { useChat } from '@ai-sdk/react';
import { useEffect } from 'react';

export default function Chat() {
  const { messages, sendMessage, resumeStream } = useChat({
    api: '/api/chat',
    resume: true,
  });

  useEffect(() => {
    // ❌ Triggers twice in strict mode → two concurrent streams
    sendMessage({ content: 'Hello' });
    // or
    resumeStream();
  }, []);
}

Solution:

// ✅ Use ref to track execution
import { useRef } from 'react';

const hasSentRef = useRef(false);

useEffect(() => {
  if (hasSentRef.current) return;
  hasSentRef.current = true;

  sendMessage({ content: 'Hello' });
}, []);

// For resumeStream specifically:
const hasResumedRef = useRef(false);

useEffect(() => {
  if (!autoResume || hasResumedRef.current || status === 'streaming') return;
  hasResumedRef.current = true;
  resumeStream();
}, [autoResume, resumeStream, status]);

Why It Happens: React Strict Mode double-invokes effects to surface side effects. The SDK doesn't guard against concurrent requests, so both invocations create separate streams that fight for state updates.

Impact: Duplicate messages, doubled token usage, race conditions causing TypeError: "Cannot read properties of undefined (reading 'state')".

Source: GitHub Issue #7891, Issue #6166

### Use ai-sdk-ui When:

Building React chat interfaces
Implementing AI completions in UI
Streaming AI responses to frontend
Building Next.js AI applications
Handling chat message state
Displaying tool calls in UI
Managing file attachments with AI
Migrating from v4 to v5 (UI hooks)
Encountering useChat/useCompletion errors

### Don't Use When:

Need backend AI functionality → Use ai-sdk-core instead
Building non-React frontends (Svelte, Vue) → Check official docs
Need Generative UI / RSC → See https://ai-sdk.dev/docs/ai-sdk-rsc
Building native apps → Different SDK required

### Related Skills:

ai-sdk-core - Backend text generation, structured output, tools, agents
Compose both for full-stack AI applications

### Package Versions

Stable (v6 - Recommended):

{
  "dependencies": {
    "ai": "^6.0.8",
    "@ai-sdk/react": "^3.0.6",
    "@ai-sdk/openai": "^3.0.2",
    "react": "^18.3.0",
    "zod": "^3.24.2"
  }
}

Legacy (v5):

{
  "dependencies": {
    "ai": "^5.0.99",
    "@ai-sdk/react": "^1.0.0",
    "@ai-sdk/openai": "^2.0.68"
  }
}

Version Notes:

AI SDK v6.0.6 (stable, Jan 2026) - recommended for new projects
AI SDK v5.x (legacy) - still supported but not receiving new features
React 18.3+ / React 19 supported
Next.js 14+/15+ recommended
Zod 3.24.2+ for schema validation

### Links to Official Documentation

Core UI Hooks:

AI SDK UI Overview: https://ai-sdk.dev/docs/ai-sdk-ui/overview
useChat: https://ai-sdk.dev/docs/ai-sdk-ui/chatbot
useCompletion: https://ai-sdk.dev/docs/ai-sdk-ui/completion
useObject: https://ai-sdk.dev/docs/ai-sdk-ui/object-generation

Advanced Topics (Link Only):

Generative UI (RSC): https://ai-sdk.dev/docs/ai-sdk-rsc/overview
Stream Protocols: https://ai-sdk.dev/docs/ai-sdk-ui/stream-protocols
Message Metadata: https://ai-sdk.dev/docs/ai-sdk-ui/message-metadata

Next.js Integration:

Next.js App Router: https://ai-sdk.dev/docs/getting-started/nextjs-app-router
Next.js Pages Router: https://ai-sdk.dev/docs/getting-started/nextjs-pages-router

Migration & Troubleshooting:

v4→v5 Migration: https://ai-sdk.dev/docs/migration-guides/migration-guide-5-0
Troubleshooting: https://ai-sdk.dev/docs/troubleshooting
Common Issues: https://ai-sdk.dev/docs/troubleshooting/common-issues

Vercel Deployment:

Vercel Functions: https://vercel.com/docs/functions
Streaming on Vercel: https://vercel.com/docs/functions/streaming

### Templates

This skill includes the following templates in templates/:

use-chat-basic.tsx - Basic chat with manual input (v5 pattern)
use-chat-tools.tsx - Chat with tool calling UI rendering
use-chat-attachments.tsx - File attachments support
use-completion-basic.tsx - Basic text completion
use-object-streaming.tsx - Streaming structured data
nextjs-chat-app-router.tsx - Next.js App Router complete example
nextjs-chat-pages-router.tsx - Next.js Pages Router complete example
nextjs-api-route.ts - API route for both App and Pages Router
message-persistence.tsx - Save/load chat history
custom-message-renderer.tsx - Custom message components with markdown
package.json - Dependencies template

### Reference Documents

See references/ for:

use-chat-migration.md - Complete v4→v5 migration guide
streaming-patterns.md - UI streaming best practices
top-ui-errors.md - 18 common UI errors with solutions
nextjs-integration.md - Next.js setup patterns
links-to-official-docs.md - Organized links to official docs

Production Tested: WordPress Auditor (https://wordpress-auditor.webfonts.workers.dev)
Last verified: 2026-01-20 | Skill version: 3.1.0 | Changes: Updated to AI SDK v6.0.42 (+19 patches). Added React Strict Mode section. Expanded Issue #7 (stale body) with 3 workarounds. Added 6 new issues: TypeError with resume+onFinish (#13), concurrent sendMessage state corruption (#14), tool approval callback edge case (#15), ZodError on early stop (#16), convertToModelMessages tool approval bug (#17), undefined id infinite loop (#18). Error count: 12→18.
## Trust
- Source: tencent
- Verification: Indexed source record
- Publisher: Veeramanikandanr48
- Version: 0.1.0
## Source health
- Status: healthy
- Item download looks usable.
- Yavira can redirect you to the upstream package for this item.
- Health scope: item
- Reason: direct_download_ok
- Checked at: 2026-04-29T03:28:17.656Z
- Expires at: 2026-05-06T03:28:17.656Z
- Recommended action: Download for OpenClaw
## Links
- [Detail page](https://openagent3.xyz/skills/ai-sdk-ui)
- [Send to Agent page](https://openagent3.xyz/skills/ai-sdk-ui/agent)
- [JSON manifest](https://openagent3.xyz/skills/ai-sdk-ui/agent.json)
- [Markdown brief](https://openagent3.xyz/skills/ai-sdk-ui/agent.md)
- [Download page](https://openagent3.xyz/downloads/ai-sdk-ui)