Quick start

This guide walks you through the steps of adding a simple CLI tool that copies a file to your directory.

  1. Open a JSON documentent then add the JSON schema into it, this helps you validate your schema.
{
  "$schema": "https://c0nfig.vercel.app/cli/schema.json"
}
  1. Add some description for your CLI command.
{
  "$schema": "https://c0nfig.vercel.app/cli/schema.json",
  "title": "Simple copy CLI",
  "description": "Add card component into the project",
  "version": 2.0
}
  1. Add your operations. In this case let's serialise the file contents here first before adding it as a content
{
  "$schema": "https://c0nfig.vercel.app/cli/schema.json",
  "title": "Simple copy CLI",
  "description": "Add card component into the project",
  "version": 2.0,
  "operation": [
    {
      "op": "add",
      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Card = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\n      \"rounded-lg border bg-card text-card-foreground shadow-sm\",\n      className\n    )}\n    {...props}\n  />\n))\nCard.displayName = \"Card\"\n\nconst CardHeader = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\"flex flex-col space-y-1.5 p-6\", className)}\n    {...props}\n  />\n))\nCardHeader.displayName = \"CardHeader\"\n\nconst CardTitle = React.forwardRef<\n  HTMLParagraphElement,\n  React.HTMLAttributes<HTMLHeadingElement>\n>(({ className, ...props }, ref) => (\n  <h3\n    ref={ref}\n    className={cn(\n      \"text-2xl font-semibold leading-none tracking-tight\",\n      className\n    )}\n    {...props}\n  />\n))\nCardTitle.displayName = \"CardTitle\"\n\nconst CardDescription = React.forwardRef<\n  HTMLParagraphElement,\n  React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, ...props }, ref) => (\n  <p\n    ref={ref}\n    className={cn(\"text-sm text-muted-foreground\", className)}\n    {...props}\n  />\n))\nCardDescription.displayName = \"CardDescription\"\n\nconst CardContent = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div ref={ref} className={cn(\"p-6 pt-0\", className)} {...props} />\n))\nCardContent.displayName = \"CardContent\"\n\nconst CardFooter = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\"flex items-center p-6 pt-0\", className)}\n    {...props}\n  />\n))\nCardFooter.displayName = \"CardFooter\"\n\nexport { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }\n",
      "targetSrc": "./card.tsx"
    }
  ]
}
  1. Add this json file to your project's public folder. Provided if you project dev server is running, you should be able to access the json file via http://localhost:[PORT_NUMBER]/add-card.json
└── public/
    └── add-card.json
  1. Initliase c0nfig first with the init command
npx k0nfig@latest init
  1. Run the command and you should be seeing the new file being added into your project.
npx k0nfig@latest run http://localhost:[PORT_NUMBER]/add-card.json