Skip to main content
Kombai’s user browser lets you preview your local web app in a dedicated Chrome instance. It includes built-in listeners that allow you to send elements and errors directly to Kombai as context, helping you iterate faster.

​
Use cases

Kombai reads the browser’s performance metrics directly from the Chrome 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.

​
Get started

​
Open the user browser

To open the user browser without running a specific project immediately:
  1. Click the
    icon in the chat input area.
  2. Click the
    icon next to User.

​
Preview local deployment

To see your project running live in the user browser:
  1. Click the Run Project button located below the chat input. This signals Kombai to start your local development server.
  2. Once the server is running, a localhost link will appear in the chat stream.
  3. Click the link to load your project’s preview in the user browser.
By default, all links in Kombai open in the user browser.

​
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. Open your project’s preview in the user browser.
  2. Click the
    icon in the browser chat window. Alternatively, press ⌘ + ⌥ + . on macOS.
  3. 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.
  4. Add additional instructions that you want to send to Kombai (if any).
  5. Click the Send to chat button.
  6. Return to Kombai and press Enter or click the
    icon to send the message.

​
Send console errors

  1. Open your project’s preview in the user browser.
  2. Click the Console errors button in the browser chat window.
  3. Return to Kombai and press Enter or click the
    icon to send the message.

​
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 fails, the status will show Failed to load. 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 an 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.

​
Expand/Collapse and reposition the browser chat window

To expand and collapse the Kombai’s browser chat window, click the
icon or
icon to expand or collapse the chat window, respectively. To reposition the Kombai’s browser chat window, use the
icon to reposition the chat window to top-left, top-right, bottom-left, or bottom-right of the screen.

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