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`
`tool-renderer.tsx`	`components/commandly/tool-renderer.tsx`
`lib/types/flat.ts`	`components/commandly/lib/types/flat.ts`
`lib/types/nested.ts`	`components/commandly/lib/types/nested.ts`
`lib/types/renderer.ts`	`components/commandly/lib/types/renderer.ts`
`lib/utils/flat.ts`	`components/commandly/lib/utils/flat.ts`
`lib/utils/nested.ts`	`components/commandly/lib/utils/nested.ts`

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/lib/types/flat";
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.FlagPreference />
        </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 lib/types/flat.ts
The lib/utils/ helpers handle conversion between flat and nested structures
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