json-render

Name: json-render
Availability: InStock
Author: Vercel

Render AI SDK v6 UIMessage parts into React chat UI components.

246|42|Updated Mar 4, 2026

Search Tags:#ui #streaming #chat #ai-sdk #render #ui-message #tool-call

Ready to run

npx skills add https://github.com/vercel/vercel-plugin --skill json-render-vercel

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: json-render
Source: https://github.com/vercel/vercel-plugin/tree/main/skills/json-render
Command: npx skills add https://github.com/vercel/vercel-plugin --skill json-render-vercel

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Rendering AI SDK v6 chat responses into user-friendly UIs requires correct handling of UIMessage parts (text, tool calls, reasoning, and streaming states) rather than raw JSON content.

Core Features & Use Cases

Robust rendering of UIMessage parts for custom chat UIs, including text, tool calls, reasoning, and streaming indicators.
Guidance on using AI Elements for out-of-the-box rendering or implementing manual rendering with structured tool output cards.
Use cases include customer support chat interfaces, developer dashboards, and internal tools that display tool call results and streaming content clearly.

Quick Start

Render a sample UI that maps each UIMessage part to UI components and handles tool call outputs with a dedicated card component.

Frequently Asked Questions about json-render

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I render AI SDK v6 chat responses in a custom UI?▼

To render AI SDK v6 chat responses, you map UIMessage parts—such as text, tool calls, and reasoning—to dedicated UI components instead of displaying raw JSON content. This ensures clean, user-friendly interfaces for custom chat UIs.

What is the best way to display tool call outputs during a streaming chat?▼

The best way to display tool call outputs during a streaming chat is to map UIMessage parts to a dedicated card component. This approach cleanly handles streaming states and tool results without relying on raw JSON.

Do I need external dependencies to render UIMessage parts in React?▼

You do not need external dependencies to render UIMessage parts beyond standard React and AI SDK v6 rendering patterns. You can implement manual rendering or use AI Elements for out-of-the-box UI components.

Why does my AI SDK chat interface show raw JSON instead of formatted text?▼

Your AI SDK chat interface shows raw JSON because UIMessage parts are not properly mapped to UI components. You must manually parse text, tool calls, and reasoning parts to render clean, user-friendly content.

Can I use AI Elements for out-of-the-box rendering of streaming chat responses?▼

You can use AI Elements for out-of-the-box rendering of streaming chat responses. It provides pre-built UI components that properly handle UIMessage parts, serving as an alternative to manual rendering.

When should I manually structure tool output cards in a chat UI?▼

You should manually structure tool output cards when building custom developer dashboards or internal tools that require specific display formats for tool call results beyond what standard AI Elements provide.