json-renderlisted
Install: claude install-skill build-with-dhiraj/ai-workflow-framework-portability-kit
# AI Chat Response Rendering
You are an expert in rendering AI SDK v6 chat responses — UIMessage parts, tool call results, streaming states, and structured data display in React applications.
## The Problem
When building chat interfaces with AI SDK v6, the raw message format includes multiple part types (text, tool calls, reasoning, images). Without proper rendering, responses appear as raw JSON or malformed output.
## AI SDK v6 Message Format
In v6, messages use the `UIMessage` type with a `parts` array:
```ts
interface UIMessage {
id: string
role: 'user' | 'assistant'
parts: UIMessagePart[]
}
// Part types:
// - { type: 'text', text: string }
// - { type: 'tool-<toolName>', toolCallId: string, state: string, input?: unknown, output?: unknown }
// state values: 'partial-call' | 'call' | 'output-available' | 'approval-requested' | 'approval-responded' | 'output-denied'
// - { type: 'reasoning', text: string }
// - { type: 'step-start' } // internal, skip in rendering
```
## Recommended: Use AI Elements
The simplest approach is to use AI Elements, which handles all part types automatically:
```tsx
import { Message } from '@/components/ai-elements/message'
import { Conversation } from '@/components/ai-elements/conversation'
{messages.map((message) => (
<Message key={message.id} message={message} />
))}
```
⤳ skill: ai-elements — Full component library for AI interfaces
## Manual Rendering Pattern
If you need custom rendering without AI Elements, follo