Component-aware CLI

Start with the components you already have.

Compokit scans a component library, matches a request to its vocabulary, and assembles code from those parts. The output is a starting point for developer review.

Install the CLI See capabilities

Run locally with Node.js 22 or newer. Your scan and generated output stay in the folders you choose.

A component-aware flow

Example

01 / SCAN

Button · required label · tokens

02 / MATCH

“button with label "Save"”

03 / GENERATE

Imports from your library

ButtonWithLabel.tsx CLI-generated example

import React from 'react';
import { Button } from './Button';

type ButtonWithLabelProps = {
  className?: string;
  children?: React.ReactNode;
};

export function ButtonWithLabel({ className, children }: ButtonWithLabelProps) {
  return (
    <div className={className}>
      <Button label={"Save"} />
    </div>
  );
}

Generated by the downloadable CLI from the demonstrated Button component. Review imports and typecheck in your own project.

How it works

A focused path from library to code.

Each step is visible. You choose the input, inspect the match, and review the generated result.

Scan a component library

Index React, Vue, or Svelte components and extract CSS custom properties from a local project directory.

Component and token scanner

Match a request

Compare a description with the indexed components. Matches use keyword scoring; inspect the ranked matches before generation.

Explainable matching

Generate a starting point

Compose framework-specific code that imports selected components. Review the result in your own codebase before shipping.

React · Vue · Svelte

Your codebase, your review

Built to assist review, not replace it.

Component matching currently uses keywords. Generated code and accessibility checks need validation in the target project. Use explicit values for required string props; unsupported required prop types need manual completion in your component library.

Bring your component library.

Install the bundled CLI 0.1.0 into your project with Node.js 22 or newer. Scan and generate locally without an AI provider key. Use your own component library and review the result in your project.

Download CLI SHA-256 checksum

npm install ./compokit-cli-0.1.0.tgz
npx compokit --help
npx compokit scan ./components -o design-system.json
npx compokit generate 'button with label "Save"' -d design-system.json -o Generated.tsx

Point the scan at your actual library. Review import paths and typecheck the output in that project before use. A missing or conflicting required string prop produces an error before output is written.