Skip to main content
Kombai Browser lets you preview your local web app with built-in listeners that allow you to send elements and errors directly to Kombai as context, helping you iterate faster. To open the Kombai Browser without running a specific project immediately, click the
icon in the chat input box and then click the
icon.

​
Browser capabilities

​
Run project

You can launch and preview your project in the Kombai Browser. To do so:
  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 Kombai Browser.
By default, all links in Kombai open in the Kombai Browser.

​
Use element selection tools to attach DOM elements to the Kombai chat

You can use the
or
tools to attach DOM elements to the Kombai chat.

​
Select tool

  1. Open your project’s preview in the Kombai 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.

​
Snip tool

  1. Open your project’s preview in the Kombai Browser.
  2. Click the
    icon in the browser chat window.
  3. Hold and drag the mouse over the DOM element you want to snip and release the mouse button. The DOM element will be captured and sent to Kombai.
  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.

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

​
Send console errors

Kombai can access the console output from the browser dev tools. It helps you attach the console errors to the Kombai chat for a quick fix.
  1. Open your project’s preview in the Kombai Browser.
  2. Click the button in the browser chat window.
  3. Return to Kombai and press Enter or click the
    icon to send the message.

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

​
Usage examples

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.

​
FAQs

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