Structured Output Viewer

The StructuredOutputViewer extends Response for useGenerateObject. It pretty-prints the extracted JSON in a scrollable block, pairs it with an independently-usable InferenceStats footer (token count, wall-clock duration, attempt/retry count), and offers a navigable typed SchemaTree view so output can be inspected both as data and as its schema shape.

Preview

Installation

pnpm dlx shadcn@latest add @localmode/ui/conversation/structured-output-viewer

npx shadcn@latest add @localmode/ui/conversation/structured-output-viewer

yarn dlx shadcn@latest add @localmode/ui/conversation/structured-output-viewer

bunx --bun shadcn@latest add @localmode/ui/conversation/structured-output-viewer

Data source & dependencies

Data source: renders the parsed object + usage you pass — works with any backend. Recommended producer: useGenerateObject result + usage from @localmode/react (on-device, optional).

• clsx + tailwind-merge — via the shared cn() util (installed automatically as a registry dependency)

Files installed

• structured-output-viewer.tsx — StructuredOutputViewer, InferenceStats, SchemaTree
• lib/utils.ts — the cn() helper (if not already present)

Props

Examples

Render a generated object

import { useGenerateObject } from '@localmode/react';
import { StructuredOutputViewer } from '@/components/structured-output-viewer';

const { data } = useGenerateObject({ model, schema });

{data && <StructuredOutputViewer object={data.object} usage={data.usage} durationMs={elapsed} />}

Customization

InferenceStats is exported separately — drop it beneath any useGenerateText result for the same tokens/duration footer. SchemaTree derives its tree from the value's runtime shape; swap it to read your Zod/JSON schema directly if you prefer the declared shape.

These primitives are presentational and hook-driven: they render props and emit callbacks, holding only local view state. The orchestration state (e.g. useGenerateObject) lives in your app. Every surface uses shadcn/ui CSS-variable utilities, so it inherits your theme — restyle the copied file freely.