Documentation

Generated Command

Displays a real-time generated CLI command string with copy and save functionality.

Generated Command

curl -X GET https://example.com

Installation

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

Usage

import { GeneratedCommand } from "@/components/commandly/generated-command";
import { Card, CardContent } from "@/components/ui/card";

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",
    },
  ],
}
 
const [values, setValues] = useState({})
 
<Card>
  <GeneratedCommand
    tool={tool}
    selectedCommand={tool.commands[0]}
    parameterValues={values}
    onSaveCommand={(cmd) => console.log(cmd)}
  >
    <GeneratedCommand.Header>
      <GeneratedCommand.FlagPreference />
    </GeneratedCommand.Header>
    <CardContent className="space-y-4">
      <GeneratedCommand.Output />
      <GeneratedCommand.Actions />
    </CardContent>
  </GeneratedCommand>
</Card>

Output Only

<GeneratedCommand
  tool={tool}
  parameterValues={values}
/>
  <GeneratedCommand.Output />
</GeneratedCommand>

API Reference

GeneratedCommand

Prop	Type	Default	Description
`tool`	`Tool`	-	The tool definition including `binaryName`, commands, and parameters
`selectedCommand`	`Command \| null`	`tool.commands[0]`	The currently selected command, or `null` to render the root invocation
`parameterValues`	`Record<string, ParameterValue>`	-	Map of parameter key to current value
`onSaveCommand`	`(command: string) => void`	-	Optional callback fired when the save button is clicked
`useLongFlag`	`boolean`	`false`	Initial flag preference for generated flags and options
`children`	`ReactNode`	-	Optional composed layout using the exported subcomponents

Compound Components

Component	Description
`GeneratedCommand.Header`	Renders the `Generated Command` header row
`GeneratedCommand.FlagPreference`	Renders the inline long-flag switch when both short and long flags exist
`GeneratedCommand.Toolbar`	Optional layout wrapper for custom controls inside the command body
`GeneratedCommand.Output`	Renders the scrollable generated command text
`GeneratedCommand.Actions`	Renders the copy and save buttons
`GeneratedCommand.EmptyState`	Renders the empty state when no command can be produced

Notes

The generated command updates reactively whenever parameterValues changes
Flag parameters are only included when their value is true
Option parameters are joined using keyValueSeparator (defaults to a space)
Argument parameters are appended in order of their position field
Global parameters are included regardless of the selected command
Passing selectedCommand={null} includes root-level parameters and skips command path segments
GeneratedCommand.Header and GeneratedCommand.FlagPreference must be rendered inside the GeneratedCommand root to access shared state