Skip to main content

​
Launch Kombai Browser

Here are two ways to launch the Kombai Browser:
Follow the steps below to launch the Kombai Browser without running a specific project:
  1. Click the icon in the chat input box.
  2. Click the icon.
Follow the steps below to preview your project in the Kombai 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 Kombai Browser.
If you want Kombai to autonomously control the browser, you can ask Kombai in the chat to perform your task in the browser.

​
Extension UI

Kombai Browser has a pre-installed extension that lets you update the UI with built-in tools and send the data back to the agent as context. The browser extension is divided into three parts:

​
Chat input window

The chat input window is the main area where you can type messages and send them to the Kombai agent. All attached DOM elements and CSS changes are displayed at the top of this window.

​
Layers

The Layers section, located below the chat input window, contains the entire DOM tree of the current page. Scroll within the Layers section to view the page’s DOM structure. Click on an element to attach it to the chat input window.

​
Design and CSS

The Design and CSS tabs, located below Layers, let you visually edit the CSS of the current page, view a table of all applied CSS properties, and edit the CSS properties directly in the table. The visual editor includes the following capabilities:
  1. Text Styles: Experiment with various font families, weights, sizes, colors, line heights, letter spacings, text alignments, and text cases.
  2. Appearance: Change the opacity and corner radius of an element.
  3. Position: Move elements across the X, Y, and Z axes or enable absolute positioning.
  4. Layout: Edit the flow, dimensions, padding, and margin of an element.
  5. Background: Add solid colors or gradients as backgrounds and adjust opacity.
  6. Border: Add borders with solid colors or gradients and adjust the opacity, style, width, and direction.
  7. Shadow & Blur: Add drop shadows, inner shadows, layer blurs, and background blurs to a UI element.
  8. Animation: Choose from the available animation types and adjust duration, delay, timing, and iteration count.
Once you have made your changes in the editor, click the Send to agent button to send the changes to the agent.

​
Import cookies from Chrome profiles

By default, the Kombai agent operates within its own dedicated Chrome profile to keep it separate from your regular web browsing. As a result, it appears as a distinct application in your dock and won’t have any of your accounts logged in. To use your existing Chrome profiles, you need to import them into the Kombai Browser. When you import a Chrome profile, Kombai only downloads the cookies of that specific Chrome profile.
This feature is currently in Beta and is supported only on Mac.

​
Import your first Chrome profile

Follow these steps to import an existing Chrome profile:
  1. Click the icon in the Kombai IDE extension’s chat window.
  2. Click the icon next to connected.
  3. Switch to the Profiles tab.
  4. Click the icon next to the profile you want to import.
  5. Click Proceed and authenticate.
  6. Click Mark as Default to make this profile the default in the Kombai Browser.

​
Import multiple Chrome profiles

Once you have imported your first profile and want to import other Chrome profiles to Kombai, follow steps 4 and 5 in Import your first Chrome profile. You can also make a Chrome profile the default by hovering over it and clicking the pin icon. This is handy when you work with multiple profiles inside the Kombai Browser.

​
Switch between profiles

Here’s how to switch between multiple Chrome profiles in Kombai:
  1. Click the icon in the Kombai IDE extension’s chat window.
  2. Click your profile avatar inside the On option.
  3. A dropdown will appear showing all your imported profiles.
  4. Select the profile you want to switch to.
Kombai automatically sets a profile as your default when you switch to it.

​
What does “Mark as Default” do

When you set a Chrome profile as the default in Kombai and launch the Kombai Browser, it will use the saved cookies from that default profile. To use another profile in the Kombai Browser, you need to switch your profile. This will open a new Kombai Browser instance with the selected profile.

​
Sync cookies

When you import a Chrome profile, Kombai downloads your cookies at that specific time. If you later log into new sites in your regular Chrome browser, those sessions won’t be available in the Kombai Browser automatically. Here’s how to sync your cookies:
  1. Click the icon in the Kombai IDE extension’s chat window.
  2. Click the icon next to connected.
  3. Switch to the Profiles tab.
  4. Click the icon next to the profile you want to resync.