Browser extension

The Kombai Browser comes with a pre-installed extension that allows you to visually edit CSS styles and send DOM elements (along with other browser data) back to the Kombai IDE extension as context.

​

Get started

​

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 and view a table of all CSS properties applied to the selected element. The visual editor includes the following capabilities:

1. Position: Move elements across the X, Y, and Z axes or enable absolute positioning.
2. Layout: Edit the direction, dimensions, padding, and margin of an element.
3. Appearance: Change the opacity and corner radius of an element.
4. Text: Experiment with various font families, weights, sizes, colors, line heights, letter spacings, and text alignments.

Once you have made your changes in the editor, send a message to the Agent asking it to translate these changes into code in your repository.

​

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 Select tool and Snip tool sections below to use these tools.

​

Select tool

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.
5. Return to Kombai and press Enter or click the
   icon to send the message.

​

Snip 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.
5. Return to Kombai and press Enter or click the
   icon to send the message.

​

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.

​

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