How Kombai Reuses Existing Components, Tokens, and Hooks

Kombai reuses your existing components, tokens, and hooks by reading the decisions already made in your repo, Figma, Storybook, or a reference website, then carrying those decisions into new work instead of generating from AI defaults. It does this through two mechanisms named on its site: a Design System that remembers your key design decisions, and Context Graphs that let it code with your components, tokens, and hooks. This matters most when you already have a design system and a large codebase, and least when you are starting from nothing.

The two mechanisms

Design System: remembering design decisions

Kombai's Design System layer stores the design decisions that define your product's look — things like type scale, accent contrast, and component styling. When it generates new UI, it pulls from those stored decisions rather than inventing a fresh visual language for each task.

The site illustrates this with a set of decisions it says it makes per task, each sourced from a different place:

The pattern: decisions that should stay consistent with your product come from your design system or repo, while open creative decisions draw on a curated inspiration library (the site cites 20k+ curated pages and sections).

Context Graphs: coding with your components, tokens, and hooks

Context Graphs are how Kombai connects generated code to what already exists in your codebase. The site states it "consistently reuses components, tokens, and hooks from your repo, npm package, or Storybook, and carries them into new work."

Concretely, the page shows a Context Graph surfacing items like:

• MatchCard · useMatchPolling — a component and a hook from your repo
• @acme/ui — an internal package
• DataGrid · Combobox · +46 — additional components
• Storybook: 12 stories · real props — stories with their actual props
• matches/[id]/page.tsx — a real route in the app

So the reuse is not just visual matching. It resolves the actual component names, hook names, and props that exist in your project, including those exposed through npm packages and Storybook stories.

What "fits in" means in practice

The site frames the problem as two-sided: AI outputs tend to repeat generic design choices across very different tasks, and they miss the code patterns already decided in large repos. Kombai's stated fix is to be "creative on open decisions" while staying "consistent with your brief and repo."

That translates to behavior like:

• Reusing existing components instead of writing new ones that duplicate them
• Applying your tokens rather than hardcoded values
• Calling your hooks rather than reimplementing data logic
• Following the conventions of your stack, with the site claiming built-in best practices for 400+ libraries

Where the reuse inputs come from

Kombai reads decisions from several sources, and you can point it at whichever you have:

• Your repo — components, tokens, hooks, and existing page patterns
• Figma — design decisions captured in design files
• Storybook — stories and their real props
• Websites — reference sites for inspiration on open decisions

If you have a design system and a component library, most of the consistency comes from the repo and Storybook inputs. If you only have Figma, the design side is covered but code reuse depends on what exists in the codebase.

How to verify it's actually reusing your code

Because the value depends on correct reuse, check the output rather than assuming:

1. Generate a piece of UI that overlaps with something you already have (for example, a card that resembles an existing MatchCard).
2. Inspect the generated code for imports from your packages and paths (e.g., @acme/ui) rather than newly defined components.
3. Confirm tokens appear as references, not literal hex values or spacing numbers.
4. Check that data-fetching logic calls your existing hooks instead of new fetch code.
5. If something is missed, the likely cause is that the relevant component, token, or story wasn't available to the context — add it to the repo, package, or Storybook and retry.

When this approach fits

Kombai's reuse model is most useful when you have an established design system and a non-trivial codebase, since that is exactly the situation where generic AI output clashes with existing patterns. It is less relevant for greenfield projects with no components or tokens to reuse, where there is nothing to stay consistent with yet.

The site also notes Kombai is available for macOS, Windows, Linux, VS Code, and Cursor, with 600K+ installs cited on the page. Pricing details are not covered in the provided material, so check the pricing page directly if cost matters for your decision.