Skip to main content

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