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 Start Preview button below the Kombai input box. Kombai will start the dev server. Once the server is runnning, click the Kombai Browser button to open the browser preview. Alternatively, press the Kombai Browser button that appears after the code generation process is completed.

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

​
Preview multiple apps

If you have multiple apps in your repo, click the Start Preview button to open the previews of all the apps in the repo. To switch between multiple previews:
  1. Click Open Preview button. You will see all previews that are running on the Kombai browser, along with the port number.
  2. Select one of the previews to open it in Kombai browser.

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