Documentation

Basic UI

The foundational block containing GeneratedCommand, JsonOutput, and ToolRenderer along with shared types and utilities.

Installation

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

Included Files

Installing this block copies the following into your project:

File	Target
`generated-command.tsx`	`components/commandly/generated-command.tsx`
`json-output.tsx`	`components/commandly/json-output.tsx`
`json-tree.tsx`	`components/commandly/json-tree.tsx`
`tool-renderer.tsx`	`components/commandly/tool-renderer.tsx`
`command-tree.tsx`	`components/commandly/command-tree.tsx`
`installation.tsx`	`components/commandly/installation.tsx`
`types/tool.ts`	`components/commandly/types/tool.ts`
`types/renderer.ts`	`components/commandly/types/renderer.ts`
`utils/tool.ts`	`components/commandly/utils/tool.ts`
`utils/generate-command.ts`	`components/commandly/utils/generate-command.ts`
`utils/tool-file.ts`	`components/commandly/utils/tool-file.ts`
`utils/diff.ts`	`components/commandly/utils/diff.ts`
`utils/clipboard.ts`	`components/commandly/utils/clipboard.ts`
`utils/json-tree.ts`	`components/commandly/utils/json-tree.ts`
`multi-select.tsx`	`components/ui/multi-select.tsx`

Usage

import { GeneratedCommand } from "@/components/commandly/generated-command";
import { JsonOutput } from "@/components/commandly/json-output";
import { ToolRenderer } from "@/components/commandly/tool-renderer";
import type { Tool, Parameter, ParameterValue } from "@/components/commandly/types/tool";
import { Card, CardContent } from "@/components/ui/card";

Using All Three Together

const [values, setValues] = useState<Record<string, ParameterValue>>({})
 
<div className="grid grid-cols-2 gap-4">
  <ToolRenderer
    tool={tool}
    parameterValues={values}
    updateParameterValue={(key, val) =>
      setValues((prev) => ({ ...prev, [key]: val }))
    }
  />
  <div className="flex flex-col gap-4">
    <Card>
      <GeneratedCommand tool={tool} parameterValues={values}>
        <GeneratedCommand.Header>
          <GeneratedCommand.FlagFormPreference />
        </GeneratedCommand.Header>
        <CardContent className="space-y-4">
          <GeneratedCommand.Output />
          <GeneratedCommand.Actions />
        </CardContent>
      </GeneratedCommand>
    </Card>
    <JsonOutput tool={tool} />
  </div>
</div>

Notes

All three components share the same Tool type from types/tool.ts
The utils/ helpers resolve flag forms and inherited parameters (tool.ts, generate-command.ts) and normalise tool files for output (tool-file.ts)
Individual components (generated-command, json-output, tool-renderer) can also be installed separately
GeneratedCommand can be used as a composed card layout or as a minimal output-only renderer