Skip to main content
Kombai browser lets you preview your app’s local deployment in the browser (optimized for Google Chrome and Chromium based browsers), with built-in listeners so you can iterate fast by sending elements and errors back to Kombai as context. To open the preview, click the Run Project button below the Kombai input box. Kombai will start the dev server. Once the server is runnning, click the localhost link in Kombai chat to open the browser preview.
All links in Kombai open in the User-controlled browser by default.

​
Use cases

Kombai can read the performance tab in the browser dev tools. It has access to metrics such as LCP, CLS, and INP. As a result, it can help you improve the performance of your page by making code changes and comparing the web vitals before and after the changes.

​
Example prompts

  1. My page is loading slowly. Help me improve the performance.
  2. Give me the current performance metrics of the page.
  3. What is LCP, FCP, FID, CLS, etc. of the page?
Kombai captures all the network requests from the network tab in the browser dev tools. It can see what type of requests are being made and whether they are successful or not.

​
Example prompts

  1. My screen is blank. Identify the issue and fix it.
  2. Check why the images are not loading.
  3. Identify the slow network requests and suggest improvements.
  4. I am getting CORS errors on this page, how to proceed?
Kombai can identify the component associated with the tagged DOM element. Tag an element and describe the changes you want to make to its component. Kombai will refactor the code accordingly.

​
Example prompts

  1. Use the <Accordion> component for each heading description pair.
  2. Create a new <CardGroup> component to group the tagged cards together.
Kombai can read the rendered DOM elements in the browser. It can check the text, style, spacing, layout, color, etc. of the rendered DOM elements along with having access to the component code. As a result, Kombai can make UI changes faster and more accurately.

​
Example prompts

  1. Change the text of the button to “Click me”.
  2. Change the spacing of the tagged div to 10px.
  3. Use flex instead of grid.
Kombai can read the console errors from the browser dev tools. Attach the console errors to the browser chat and ask Kombai to fix them.

​
Example prompt

  1. Fix the console error.

​
Send elements & errors to Kombai

When you send a DOM element or console error to Kombai, it is attached to your current active chat in Kombai.

​
Send DOM elements

  1. Click the
    icon in the browser chat window. Alternatively, press ⌘ + ⌥ + . keyboard shortcut on macOS.
  2. Click the DOM element that you want to send to Kombai. When you click the DOM element, Kombai captures the screenshot of the DOM element and the entire page.
  3. Add additional instructions that you want to send to Kombai (if any).
  4. Click the Send to chat button.
  5. Then, come back to the Kombai and click the
    icon.

​
Send console errors

  1. Click the Console errors button in the browser chat window.
  2. Then, come back to the Kombai and click the
    icon.

​
Connection status

The connection status is shown in the browser input.
  • If the connection is successful, you will see the Connected status.
  • If the connection is lost, you will see the Disconnected status. Click Reconnect app to connect again. If the problem persists, try the troubleshooting steps mentioned here.
  • If the connection is failed, you will see the Failed to load status. Click Retry to connect.

​
Preview multiple screens

You can use multiple browser tabs to preview multiple screens of your app. This enables you to select elements from other screens that you want to refer in your current browser tab. For example, if you have the Homepage open in the browser and want to add a avatar from the Accounts page to Home, open the Accounts page in a new tab. Then, select the avatar and return to the previous tab (Home). You’ll see the avatar’s DOM element highlighted in yellow. You can then ask Kombai to add the avatar to Home.

​
Select large DOM elements

You can select a large DOM element quickly with the snipping tool. Click the
icon in the browser chat window to open the snipping tool. Drag the mouse on the screen to select the DOM elements. DOM elements from the dragged area will be captured and sent to Kombai.

​
How to expand the browser chat

  1. Click the
    icon to expand the chat window.
  2. Click the
    icon to collapse the chat window.

​
How to move browser chat position on the screen

  1. Click the
    and
    icons to move the chat window to the left and right of the screen, respectively.
  2. Click the
    and
    icons to move the chat window to the top and bottom of the screen, respectively.

​
How to switch to User-controlled browser

  1. Click the
    icon in the chat input box.
  2. Click User-controlled browser.

​
Image library

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