Documentation

Generated Command

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

Generated Command

Flag style

curl --request 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",
  parameters: [
    {
      key: "--output",
      displayName: "Output",
      parameterType: "Option",
      dataType: "String",
      aliases: ["-o"],
      isRequired: true,
    },
  ],
  commands: [],
}
 
const [values, setValues] = useState({})
 
<Card>
  <GeneratedCommand
    tool={tool}
    selectedCommand={null}
    parameterValues={values}
    onSaveCommand={(cmd) => console.log(cmd)}
  >
    <GeneratedCommand.Header>
      <GeneratedCommand.FlagFormPreference />
    </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`	Auto-detected default	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
`defaultFlagFormIndex`	`number`	`0`	Position emitted by default: `0` is the full flag, later ones the aliases
`children`	`ReactNode`	-	Optional composed layout using the exported subcomponents

Compound Components

Component	Description
`GeneratedCommand.Header`	Renders the `Generated Command` header row
`GeneratedCommand.FlagFormPreference`	Renders the flag-form picker when any parameter declares an alias
`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
Each flag and option emits the flag form at defaultFlagFormIndex: index 0 is the full flag (key), later indexes are the parameter's aliases in order, falling back to the full flag
Tool-level recursive parameters are inherited by every command, and a command's own recursive parameters by every command beneath it
Passing selectedCommand={null} includes root-level parameters and skips command path segments
GeneratedCommand.Header and GeneratedCommand.FlagFormPreference must be rendered inside the GeneratedCommand root to access shared state