Skip to main content

Launch Kombai Browser

Here are two ways to launch the Kombai Browser:
Use the icon to launch the Kombai Browser without running a specific project.In the desktop app, click the icon in the top bar above the chat, or in the row below the chat input on the home screen. The Kombai Browser opens in a Chrome window. A green dot on the icon means the browser is connected. If the browser isn’t set up yet, clicking the icon opens the Kombai Browser tab in Settings instead.In the IDE extension, use the icon in the row below the chat input:
  1. Click the icon to open the browser menu.
  2. Click the icon next to On.
The menu also lets you control the agent’s browser access and profile:
  • On / Off: Turns the agent’s access to the browser on or off. This is the same setting as Agent can use Browser in the Kombai Browser tab of Settings.
  • Profile avatar: Next to On, pick the default Chrome profile for the Kombai Browser. It appears after you import at least one profile.
  • Status row: Shows Connected, Connecting…, or Not Connected. Click it to open the Kombai Browser tab in Settings.
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 four parts:

Chat selector

The browser extension has a chat selector at the top that lets you choose which chat to send your messages to. You can either send your messages to an existing chat or start a new one. The selector has two sections:
  1. Send to an active chat: Lists the chats you currently have open. Pick one, and your message is appended as the next message in that same thread, so the agent keeps all the context of that conversation.
  2. Send to a new chat: Lists your projects. Pick one, and your message starts a new chat inside that project.
Use the search box at the top to filter chats and projects by name.

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. The send button offers two actions:
  1. Send to agent: It sends your message and the attached context to Kombai immediately.
  2. Add to chat: It stages the attached context in the Kombai chat without sending.

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 supported only on Mac.

Import a Chrome profile

Follow these steps to import an existing Chrome profile:
  1. Click the icon in Kombai’s top menubar to open the Settings page.
  2. Navigate to the Kombai Browser tab.
  3. If the Profiles & Session Sync section shows Chrome profiles with an Allow button, click Allow to let Kombai read your Chrome profiles. macOS may ask you to allow this.
  4. Under, Profiles & Session Sync section, 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.
If macOS blocks access, the section shows Chrome profile access blocked. In the desktop app, click Allow next to Full Disk Access and follow the guide to turn it on in System Settings; if Kombai asks, quit and reopen it to finish. In the IDE extension, follow the Files & Folders steps shown, then click Check again.

How to make a profile default

You can also make a Chrome profile default. This is handy when you work with multiple profiles inside the Kombai Browser. 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 make that profile default. Here’s how to make a profile default:
  1. Click the icon in Kombai’s top menubar to open the Settings page.
  2. Navigate to the Kombai Browser tab.
  3. Under, Profiles & Session Sync section, hover over a profile.
  4. Click the pin icon to make it default.
The default profile shows a Default badge. To stop using it as the default, hover over it and click the unpin icon (Unmark default).

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 Kombai’s top menubar to open the Settings page.
  2. Navigate to the Kombai Browser tab.
  3. Under Profiles & Session Sync section, click the icon next to the profile you want to resync.
Hover over the icon to see when the profile was last synced.

Delete an imported profile

To remove the cookies Kombai imported from a Chrome profile, click the icon (Delete profile data) next to the profile in the Profiles & Session Sync section. Kombai deletes the cookies without asking for confirmation. If the profile was the default, the Kombai Browser stops using it as the default. Your profile in Chrome isn’t affected. To use the profile again, import it again.

Restart the browser server

If the Kombai Browser stops responding, Kombai shows this error:
Click the action on the error to restart the browser server: Restart Browser Server in the desktop app, or Restart in the IDE extension. You can also restart it at any time:
  • Desktop app: Choose View > Restart Browser Server. On macOS, the View menu is in the menu bar. On Windows and Linux, click the menu button at the top of the sidebar to open the app menu.
  • IDE extension: Run Kombai: Restart Browser Server from the Command Palette.
When the restart succeeds, Kombai shows Kombai browser server restarted.