Skip to main content
The Kombai Browser comes with a pre-installed extension that lets you visually edit CSS styles, live-edit site texts, visually rearrange and delete DOM elements, and attach the edited data along with other browser data back to the Kombai IDE extension as context.

​
Get started

​
Import your browser profile

By default, Kombai agent operates within its own dedicated browser profile to keep it separate from your regular web browsing. As a result, it appears as a distinct application in your dock and won’t have any of your accounts logged in.
This feature is currently in Beta and is supported only on Mac.
If you want to use your default browser profile instead, follow the steps below:
  1. Click the icon in the browser extension’s chat window.
  2. Click the icon next to connected.
  3. Switch to the Profiles tab.
  4. Click the download icon next to the profile you want to import.
    You can also make a browser profile default by hovering on it and clicking the pin icon. This is handy when you work with multiple profiles inside Kombai Browser.
  5. Click Proceed and authenticate.
Now, you will see a success message with the number of cookies imported to Kombai Browser from your profile.

​
Switch between profiles

Here’s how to switch between multiple browser profiles in Kombai:
  1. Click the icon in the browser extension’s chat window.
  2. Click your profile avatar inside the On option.
  3. A dropdown will appear showing all your imported profiles.
  4. Select the profile you want to switch to.

​
Resync a profile

When you import a browser profile, Kombai downloads your cookies at that point in time. If you later log into new sites in your regular Chrome browser, those sessions won’t be available in Kombai Browser automatically. Resync your profile to download new cookies. From the Profiles tab in Browser Settings, click the sync icon next to the profile you want to resync.

​
Launch the Kombai Browser extension

Once the Kombai Browser is open, click the Kombai logo in the extension bar, or click the / icons in the Kombai bar (middle right of the screen) to open the extension.

​
Extension UI

The browser extension is divided into three parts:

​
Chat input window

The chat input window is the main area where you can type messages and send them to the Kombai agent. All attached DOM elements and CSS changes are displayed at the top of this window.

​
Layers

The Layers section, located below the chat input window, contains the entire DOM tree of the current page. Scroll within the layers section to view the page’s DOM structure. Click on an element to attach it to the chat input window.

​
Design and CSS

The Design and CSS tabs, located below Layers, let you visually edit the CSS of the current page, view a table of all CSS properties applied, and edit the CSS properties code in the table. The visual editor includes the following capabilities:
  1. Text Styles: Experiment with various font families, weights, sizes, colors, line heights, letter spacings, text alignments, and text cases.
  2. Appearance: Change the opacity and corner radius of an element.
  3. Position: Move elements across the X, Y, and Z axes or enable absolute positioning.
  4. Layout: Edit the flow, dimensions, padding, and margin of an element.
  5. Background: Add solid colors or gradients as background and adjust opacity.
  6. Border: Add borders with solid colors or gradients and adjust the opacity, style, width, and direction.
  7. Shadow & Blur: Add drop shadow, inner shadow, layer blur, and background blur to a UI element.
  8. Animation: Choose from the available animation types and adjust duration, delay, timing, and iteration count.
Once you have made your changes in the editor, click the Send to agent button to send the changes to the Agent.

​
Extension capabilities

​
Send DOM elements as context

Kombai includes and tools to help you select or snip DOM elements and attach them to the browser extension’s chat window. Follow the steps in the Element Selector and Snipping tool sections below to use these tools.

​
Element selector

  1. Click the icon in the browser extension’s chat window. Alternatively, press ⌘ + ⌥ + . on macOS.
  2. Click the DOM element you want to send to Kombai. When you click, Kombai captures a screenshot of both the element and the entire page.
  3. Add any additional instructions you want to send to Kombai.
  4. Click the Send to agent button.

​
Snipping tool

  1. Click the icon in the browser extension’s chat window.
  2. Hold and drag the mouse over the UI area you want to snip. Snipped DOM elements and their screenshots will be captured and attached as context.
  3. Add any additional instructions you want to send to Kombai.
  4. Click the Send to agent button.

​
Send visually edited CSS styles to Kombai as context

You can select an element and visually edit its CSS to preview how that element will look like before sending the changes to Kombai for implementation. You can visually edit the position, layout, appearance, and font styles of the selected element.
  1. Click the icon in the browser extension’s chat window. Alternatively, press ⌘ + ⌥ + . on macOS.
  2. Click the DOM element you want to send to Kombai.
  3. Go to the Design tab in the Kombai extension and edit the CSS values visually based on the available dropdowns and input boxes.
  4. Ask Kombai to implement changes and send the message to agent.

​
Edit site texts live and send them to Agent

The text editor lets you edit texts in your webpage live and send them to Agent for code implementation. You can edit the text of any element on the page, including headings, paragraphs, buttons, and input fields.
  1. Click the icon in the browser extension’s chat window.
  2. Click on a text element on the page to make it editable.
  3. Edit the text.
  4. Click the Send to agent button.

​
Use DOM editor to visually rearrange and delete DOM elements

You can use the DOM editor to visually drag and rearrange DOM elements or delete theme from the UI.

​
Drag and rearrange DOM elements

  1. Click the icon in the browser extension’s chat window.
  2. Click and hold a UI element on the page and drag it to a new position to rearrange it.
  3. Click the Send to agent button.

​
Delete DOM elements

  1. Click the icon in the browser extension’s chat window.
  2. Click a UI element on the page and press the Delete / Backspace key on your keyboard to delete the element.
  3. Click the Send to agent button.

​
Preview multiple screens

You can use multiple browser tabs to preview different screens of your app simultaneously. This enables you to select elements from other screens that you want to refer to in your current browser tab. For example, if you have the Homepage open and want to add an avatar from the Accounts page:
  1. Open the Accounts page in a new tab.
  2. Select the avatar element.
  3. Return to the previous tab (Homepage).
You will see the avatar’s DOM element highlighted in yellow. You can then ask Kombai to add the avatar to the Homepage.

​
Send browser data

The browser extension automatically attaches all available browser data to your messages as context. Beyond DOM elements and applied CSS changes, it captures the entire DOM tree, console output, network logs, and performance metrics. Using this data, Kombai fixes console and network errors, boosts page performance, refactors UI components, and edits your UI with precision.

​
Example prompts

  1. Fix console errors in my app.
  2. Create a new <CardGroup> component to group the tagged cards together.
  3. Identify slow network requests and suggest improvements.
  4. Give me the current performance metrics of the page.

​
Access Resource and Image Library

Kombai features a built-in resource library of top design resources and an image library containing all screenshots you have uploaded to the Agent’s chat. Use the and icons to access them.

​
Resource Library

Kombai has curated a library of top-tier frontend resources— UI libraries, design inspiration, colors, typography, animations, and assets. Use it to discover high-quality resources and creative inspiration for building beautiful interfaces. Read more about the Resource Library here.

​
Image Library

Kombai maintains a library of all images you attach to the Agent’s chat. With the image library, you can select or snip a portion of a previously attached screenshot without having to re-upload it. Use this to iterate on your code by asking Kombai to refine specific elements from your screenshots. To access the image library:
  1. Click the icon at the top-right of the browser extension’s chat window.
  2. Select the image you want to use from the left sidebar.

​
FAQs

If the Kombai Browser shows a ‘Disconnected’ status, try reopening the current browser window. To do so:
  1. Close the current instance of the Kombai Browser.
  2. Click the icon in the Kombai IDE extension, then click the icon. Alternatively, click the Run Project button and click the link from the chat stream to open your project’s preview in the Kombai Browser.
If your current page breaks or you are on one of the special pages of Chrome, e.g., chrome://version, chrome://extensions, etc, the browser will remain disconnected.
If the issue persists, please reach out to support@kombai.com.
If you have accidentally removed the Kombai extension from the browser, you have to close and reopen the current browser window. To do so:
  1. Close the current instance of the Kombai Browser.
  2. Click the icon in the Kombai IDE extension, then click the icon. Alternatively, click the Run Project button and click the link from the chat stream to open your project’s preview in the Kombai Browser.
If the issue persists, please reach out to support@kombai.com.
Kombai Browser profiles are isolated from each other. This means that if you are working across multiple Kombai Browsers, your profile data is not synced. If you are using the Kombai Browser windows for multiple repositories on which you are currently working, it’s best to open your repositories in a single IDE instance.To do so, follow the steps below:
  1. Open a repo in your IDE.
  2. Click File > Add Folder to Workspace… at the top menubar of your IDEand select the other repository you want to work on.
  3. Launch Kombai Browser in this IDE instance.
The color-coded pills represent the status of the context attached to your chat:
  • Green: The attached context is on your current page.
  • Yellow: The attached context belongs to a different page than the one you are viewing.
  • Red: The attached context is now missing from the DOM, or the browser tab where the context originated has been closed.