Prerequisites
Before getting started with Kombai, ensure you have:- An active repository
- The Kombai extension installed and you are signed up within your IDE
Open your repo in an IDE
Kombai is available as an extension in your preferred IDEs. Since it works directly within your IDE, it can analyze your codebase, components, and design tokens to generate code that naturally aligns with your project. Kombai is officially supported in VS Code, Cursor, Antigravity, Windsurf, TRAE, and Kiro.Kombai is also compatible with other IDEs in the Open VSX registry (guide).
Launch Kombai extension
Launch the Kombai extension from the sidebar in your IDE. See here if you cannot locate the extension. If you have not installed the Kombai extension yet, please install it and sign up first. Read the set-up guide for more information.Plan your task
For large or complex features, we recommend starting in “Plan mode.” This gives you a transparent, editable roadmap of how Kombai will approach your task, ensuring you maintain full control over the implementation. Select Plan from the mode dropdown, describe your task, and send the message. Kombai will generate an editableplan.md file that outlines exactly how it intends to build your feature, including the design plan, component reuse strategy, and specific To-Dos.
Review the plan carefully. If you want to change anything, ask Kombai in natural language to update it, or edit plan.md yourself. See here to learn how to update the generated plan.
Once you are satisfied with the plan, click Approve Plan. Kombai will automatically switch to Code mode and generate code based on your approved plan—reducing the likelihood of major refactors later.
Review generated code
Once you approve the plan, Kombai begins code generation. It automatically writes new files to your codebase and updates existing ones as needed. After the process is complete, you can review the output directly:- Inspect files: Open files from your IDE’s file explorer, or use Kombai’s Working Set to view the generated code.
- Check quality and diffs: Review code quality and compare changes by viewing diffs between the new and previous versions of any modified files.
- Iterate: If you need changes, simply describe them to Kombai in the chat. You can also use the Kombai Browser to pinpoint the exact element and ask Kombai to update it in the code.
Preview and debug in Kombai Browser
Once you are happy with the generated code, preview it in the Kombai Browser. The browser includes several powerful features to help you debug and iterate faster, such as DOM element selection tools and Agent-controlled actions. To open the preview, click the localhost link in the Kombai chat. If you don’t see the link, click Run Project below the chat input, then click the generated localhost link. This opens your project in the Kombai Browser. If you spot any issues or want to tweak the UI, use the and tools in the browser chat input (bottom-right) to select or snip the relevant DOM element. Then, describe the change and send it to Kombai. For example, “adjust the spacing between cards” or “change the button color to match the primary theme.” Kombai will iterate on the code and update the preview so you can see changes immediately. If you prefer not to point out changes manually or want to test flows, simply ask Kombai to open the browser and perform actions. For example, “Open the browser and check if the sidebar navigation works” or “Open the browser and fix any content overflow in the app.” See here for complete information on how the browser works.Use Resource Library to improve UI
Beyond code generation and debugging, Kombai offers a curated “Resource Library” to help you elevate your project’s UI. This built-in collection gives you access to external frontend resources, such as UI and animation libraries, design inspiration, and typography tools. To use a resource from chat, type@resources in the chat input, attach the resource you want, and describe your task. For example, you can ask Kombai to “find a modern font pair from @fontpairstudio” or “suggest card animations from @motion.” Kombai will open the attached resource’s website, evaluate options based on your project’s context, and implement the best fit directly in your code.
You can also browse and hand-pick design elements yourself. Click Resources below the chat input to open the Resource Library in the browser. Browse the available resources, find the element you want, and follow the instructions in the resource modal to apply it correctly.
See here for complete information on how the Resource Library works.