Quickstart

This guide will help you build your first project with Kombai.

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).

To get started, open your repo in the IDE you use.

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.

Generate standout UI designs

If you are starting out with Kombai and want to generate a new section or page but don’t already have a design, use Design mode. Design mode allows Kombai to generate standout designs that you can further iterate on an infinite canvas, either by making precise manual adjustments or by letting the agent refine and perfect the work based on your instructions.

Select Design from the mode dropdown, describe the UI you want to create, and send your prompt. Kombai will generate the design in a new Canvas where you can iterate by selecting specific elements, snipping targeted areas, or using the visual CSS Editor.

Once you are satisfied with the design, click Code design in the top toolbar. Kombai will automatically switch to Code mode and generate the implementation using your project’s tech stack and reusable code.

See here for complete information on how Design mode works.

Plan your task

For complex features that involve business logic, state management, or integration across multiple systems, start in Plan mode. This provides 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 editable plan.md file that outlines exactly how it intends to build your feature, including the technical strategy, component reuse, 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 or initiate coding from Design mode, 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, debug, and refine UI 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 UIs faster.

To open the preview, click the localhost link in the Kombai chat. If you don’t see the link, click the icon (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 tool to select a specific DOM element. This attaches the element to the browser’s chat input and opens the visual styles editor, where you can modify properties or text directly. You can also use the tool to make all text in your UI editable, allowing you to click and type changes directly on the page. For areas that don’t share a common parent, use the tool to snip them and attach as context.

In the end, send the attached elements to the agent. The DOM element code of the attached elements along with the manual edits (if made) will be automatically send to the agent, which will then iterate and update the preview after generating the code

If you prefer not to point out changes manually or want to test flows, simply ask Kombai to perform your action in the browser. 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.

Next steps

Now that you’ve a understanding of how Kombai works, you can explore other features like Figma to Code, Inspiration Library, Agent Variants, and Context Graphs.

If you get stuck or have any questions along the way, please reach out to us at [e-mail].