Skip to main content
Code mode generates code from Figma, text, image, and code inputs. It’s the default selected mode in Kombai. Use it to generate code for small components to full app UIs.

Abilities

UX Interpretation

Breaks the design into logical sections. Extracts components, assets, and theme from Figma.

Purpose-built RAG for libraries and frameworks

Generates code with higher contextual knowledge of popular frontend libraries and frameworks.

Contextual Understanding

Indexes the codebase and reads relevant files to understand the context better.

Working Set

Generates the complete working set of code files and assets based on the input.

Kombai Browser

Runs the code in Kombai Browser. Lets you tag DOM elements and send them back to Kombai as context.

Workflow

Here’s the workflow you have to follow to generate code using Kombai:
1

Configure the tech stack

Select the tech stack you want to use for the code generation. Kombai supports 30+ frameworks and libraries in the tech stack configuration.
2

Add the input

Add the Figma, text, or image input for which you want to generate code.
3

Generate plan

Switch to Plan mode to generate a plan for the code.
4

Review plan

Kombai will provide a detailed plan that includes sections like Design Plan, Technical Implementation, and To-dos. Approve or update the plan to proceed with the code generation.
5

Generate code

Kombai will generate the code based on the plan. It will also auto-fix any TS or linting errors found in the generated code.
6

Preview and follow up

Run the code in Kombai Browser to preview the generated code. If you find any visual mismatches in the preview, you can tag DOM elements and suggest Kombai to make the necessary changes. Kombai will regenerate the code accordingly.

How to switch to Code mode

Code mode is the default mode in Kombai. If you have switched to Ask or Plan mode and want to switch to code again, follow the steps below:
  1. Click the mode dropdown in the Kombai’s input box.
  2. Select Code.

How to plan in Code mode

Kombai has a dedicated Plan mode for generating detailed code plans. However, if you want to generate a plan without leaving Code mode, you can explicitly ask Kombai to plan the task before generating the code (e.g., “Plan the logic for this task first”).

FAQ

Kombai is not letting me continue with the older chats

Older chats from history that were created with Agent mode toggled off are no longer supported. You can still copy the contents of the files generated in these chats. To continue with the task, start a new chat in Code mode and paste the input.

I am unable to start a new chat with Agent mode toggled off

New chats with Agent mode toggled off are no longer supported. To continue with the task, start a new chat with Agent mode toggled on or update the extension to the latest version.