JSON Output

Displays a tool definition as formatted JSON in flat or nested structure with copy 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",
  commands: [{ key: "curl", name: "curl" }],
  parameters: [
    {
      key: "url",
      name: "url",
      parameterType: "Option",
      dataType: "String",
      longFlag: "-X",
      isRequired: true,
      commandKey: "curl",
    },
  ],
}
 
<JsonOutput tool={tool} />

Output Format

The output format (flat or nested) is synced to the URL query string via the output parameter using nuqs. You can link directly to a specific format:

// defaults to flat; navigate to ?output=nested for nested structure
<JsonOutput tool={tool} />

API Reference

JsonOutput

Notes

• The selected output format (flat or nested) is persisted in the URL query string (?output=)
• flat format is the native Commandly storage format with all parameters in a flat array
• nested format converts the structure so parameters are nested under their parent commands
• The copy button copies the current JSON string to the clipboard