JSON Output

Displays a tool definition as a collapsible JSON tree with search, copy, and diff functionality.

Installation

pnpm dlx shadcn@latest add https://commandly.divyeshio.in/r/json-output.json

Usage

import { JsonOutput } from "@/components/commandly/json-output";

Basic Usage

const tool: Tool = {
  binaryName: "curl",
  displayName: "curl",
  parameters: [
    {
      key: "--url",
      displayName: "URL",
      parameterType: "Option",
      dataType: "String",
      isRequired: true,
    },
  ],
  commands: [],
};
 
<JsonOutput tool={tool} />;

API Reference

JsonOutput

Notes

• Parameters are nested under the command that accepts them, matching the tool definition
• Branches unfold one row at a time and long arrays and objects load in pages
• The tree follows the WAI-ARIA tree pattern: arrow keys move and open, Home and End jump, Enter toggles, and the modifier key with C copies the focused value
• Search highlights every match and opens the branches that hold them
• Each row copies its own value or path from the row actions, and the path of the current row is shown under the tree
• The copy button in the header copies the whole JSON string to the clipboard
• Passing originalTool adds a diff view of the two serialized tools, and onApply adds an editor for the raw JSON