json-render

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.

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.

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.

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.

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.

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.