Skip to content

Interactive Answers

JSON Viewer

Structured output as a collapsible tree — types, counts, search, copy path and copy value.

2 variantsMIT

Preview

get_order

22 values · 8 objects and arrays

:{6}
:"ord_7Kq2"
:"requires_review"
:{3}
:"Mira Hoffmann"
:"mira@example.com"
:"de-DE"
:[3]
:{3}
:155
:29.45
:"EUR"
:{2}
:false
:null

Click a key to copy its path · ↑↓ to move, → ← to open and close

Installation

Copies the component into components/ui and installs its dependencies and theme tokens.

pnpm dlx shadcn@latest add https://tuffui.com/r/json-viewer.json

Usage

Pass your own data and wire the callbacks to your agent runtime.

import { JsonViewer } from "@/components/ui/json-viewer";

export function ToolResult({ call }: { call: { name: string; result: unknown } }) {
  return (
    <JsonViewer
      title={call.name}
      data={call.result as JsonValue}
      defaultDepth={1}
      onCopy={(kind, text) => toast(kind === "path" ? `Copied ${text}` : "Value copied")}
    />
  );
}

Props

PropTypeDefaultDescription
data*JsonValue—Any JSON-serializable value.
titlestring"Output"Header title and root label.
view"tree" | "raw""tree"Collapsible tree with search, or pretty-printed JSON with a copy button.
defaultDepthnumber1Levels open on first render. Search opens every ancestor of a match.
onCopy(kind: "path" | "value", text: string) => void—Called after copying — clicking a key copies its path ($.items[2].price), the row button copies its value.
classNamestring—Extra classes for the shell.
type JsonValue = string | number | boolean | null | JsonValue[] | { [key: string]: JsonValue };

// Keyboard: ↑ ↓ move, → opens or steps in, ← closes or steps out, Enter toggles or copies.