> ## Documentation Index
> Fetch the complete documentation index at: https://docs.kombai.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Install Kombai IDE extension

export const Logout = props => {
  return <div style={{
    display: "inline",
    justifyContent: "center",
    alignItems: "center"
  }}>
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{
    display: "inline"
  }} {...props}>
        <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path>
        <polyline points="16 17 21 12 16 7"></polyline>
        <line x1="21" x2="9" y1="12" y2="12"></line>
      </svg>
    </div>;
};

Kombai is available as an IDE extension. You can install it in [VS Code](vscode:extension/kombai.kombai), [Cursor](cursor:extension/kombai.kombai), [Antigravity](antigravity:extension/kombai.kombai), [Windsurf](windsurf:extension/kombai.kombai), [Trae](trae:extension/kombai.kombai), or [Kiro](kiro:extension/kombai.kombai) from the extension marketplace.

## Installation

### VS Code

Follow the steps below to install Kombai in VS Code:

1. Go to the VS Code marketplace in your IDE.
2. Search for Kombai.
3. Select **Kombai - The AI Agent Built for Frontend**.
4. Click the **Install** button.

### Open VSX

Open VSX Registry is an open-source alternative to the VS Code Marketplace for VS Code-compatible editors that cannot access the official marketplace due to licensing restrictions.

If you are on a VS Code-compatible editor like Cursor or Antigravity that supports Open VSX Registry, there are two ways to install Kombai:

#### From the marketplace

1. Go to the extension marketplace in your IDE.
2. Search for Kombai.
3. Select **Kombai - The AI Agent Built for Frontend**.
4. Click the **Install** button.

#### From VSIX

<div
  style={{
position: "relative",
width: "100%",
paddingTop: "62.5%",
overflow: "hidden",
}}
>
  <iframe
    src="https://player.vimeo.com/video/1175083643?quality=1080p&badge=0&autopause=0&player_id=0&app_id=58479"
    title="Create Wireframes"
    style={{
  position: "absolute",
  top: 0,
  left: 0,
  width: "100%",
  height: "100%",
  border: 0,
}}
    frameBorder="0"
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
    allowFullScreen
  />
</div>

1. Go to [Kombai's Open VSX Registry page](https://open-vsx.org/extension/kombai/kombai).
2. Scroll and click the download button on the right side.
3. Click **Windows x64** or **Universal**, depending on your operating system.
4. Launch your IDE and open the command palette using <code>Ctrl+Shift+P</code> (or <code>Cmd+Shift+P</code> on Mac).
5. Search for **Install from VSIX** and select it.
6. Browse to the downloaded `.vsix` file and install it.

## System requirements

Kombai requires the following minimum versions of the IDEs to function correctly:

| IDE          | Supported Version        |
| :----------- | :----------------------- |
| **VS Code**  | version 1.84.1 and above |
| **Cursor**   | version 0.44 and above   |
| **Windsurf** | version 1.94.0 and above |

For **Antigravity**, **Trae**, **Kiro**, and other IDEs, Kombai requires versions released from **January 2025 onwards**.

## Sign in

1. Click **Sign In** button in Kombai. You will be redirected to the Kombai website.
2. Sign up or log in to your Kombai account.
3. After signing in, you will be redirected back to the IDE.

## Sign up from private invite

If you have a private invite, you can sign up for Kombai by following these steps:

1. Open the email with the following subject- **Confirm your email address for Kombai**.
2. Click **Confirm Email** and set the password for your Kombai account.
3. [Install Kombai](#installation) in your IDE and sign in.

## Launch Kombai extension

### VS Code

<div
  style={{
position: "relative",
width: "100%",
borderRadius: "6px",
overflow: "hidden",
}}
>
  <iframe
    src="https://player.vimeo.com/video/1108659283?badge=0&autopause=0&player_id=0&app_id=58479&dnt=1"
    title="Code Figma"
    style={{
  position: "absolute",
  top: 0,
  left: 0,
  width: "100%",
  height: "100%",
  border: 0,
}}
    frameBorder="0"
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
    allowFullScreen
  />
</div>

Once the Kombai extension is installed, it will be available in the Primary Side Bar of VS Code. If you are unable to find it, click on <Icon icon="ellipsis" size={20} /> icon and click **Kombai**.

<Note>
  You can also drag Kombai to the secondary sidebar of VS Code for a smoother
  experience. This lets you keep the file explorer open while working with
  Kombai.
</Note>

### Cursor

<div
  style={{
position: "relative",
width: "100%",
borderRadius: "6px",
overflow: "hidden",
}}
>
  <iframe
    src="https://player.vimeo.com/video/1108655176?badge=0&autopause=0&player_id=0&app_id=58479&dnt=1"
    title="Code Figma"
    style={{
  position: "absolute",
  top: 0,
  left: 0,
  width: "100%",
  height: "100%",
  border: 0,
}}
    frameBorder="0"
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
    allowFullScreen
  />
</div>

Once the Kombai extension is installed, it will be available in the Primary Side Bar of Cursor. Go to the <Icon icon="chevron-down" size={20} /> icon and click **Kombai**.

### Windsurf

<div
  style={{
position: "relative",
width: "100%",
borderRadius: "6px",
overflow: "hidden",
}}
>
  <iframe
    src="https://player.vimeo.com/video/1108654370?badge=0&autopause=0&player_id=0&app_id=58479&dnt=1"
    title="Code Figma"
    style={{
  position: "absolute",
  top: 0,
  left: 0,
  width: "100%",
  height: "100%",
  border: 0,
}}
    frameBorder="0"
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
    allowFullScreen
  />
</div>

Once the Kombai extension is installed, it will be available in the Primary Side Bar of Windsurf. If you are unable to find it, click on <Icon icon="ellipsis" size={20} /> icon and click **Kombai**.

### Trae

<div
  style={{
position: "relative",
width: "100%",
borderRadius: "6px",
overflow: "hidden",
}}
>
  <iframe
    src="https://player.vimeo.com/video/1108635112?badge=0&autopause=0&player_id=0&app_id=58479&dnt=1"
    title="Code Figma"
    style={{
  position: "absolute",
  top: 0,
  left: 0,
  width: "100%",
  height: "100%",
  border: 0,
}}
    frameBorder="0"
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
    allowFullScreen
  />
</div>

Once the Kombai extension is installed, it will be available in the Primary Side Bar of Trae. If you are unable to find it, click on <Icon icon="ellipsis" size={20} /> icon and click **Kombai**.

## Update Kombai extension

### With Auto Update on

If the **Auto Update** is turned on, the Kombai extension will be updated on its own in your IDE. After the updated version is installed, you will be prompted to reinstall the extension host.

If you see a **Restart Extensions** button against Kombai in the IDE marketplace, please click on it before using the tool.

### With Auto Update off

If the **Auto Update** is turned off:

1. Go to your IDE's extension marketplace.
2. Search for **Kombai**.
3. Select **Kombai - AI Agent for Frontend Devs**.
4. Click the **Update** button with the specific version mentioned.

## Log out

1. Click the <Icon icon="ellipsis-vertical" size={17} /> icon in the top menubar.
2. Click the <Logout /> icon besides your email ID to log out.

## Get latest version

Click the cards below to get the latest version of the Kombai extension for your IDE.

<Columns cols={3}>
  <Card icon="code" title="VS Code" href="vscode:extension/kombai.kombai">
    v 2.0.61
  </Card>

  <Card icon="code" title="Cursor" href="cursor:extension/kombai.kombai">
    v 2.0.61
  </Card>

  <Card icon="code" title="Antigravity" href="antigravity:extension/kombai.kombai">
    v 2.0.61
  </Card>

  <Card icon="code" title="Devin Desktop" href="devin:extension/kombai.kombai">
    v 2.0.61
  </Card>

  <Card icon="code" title="Trae" href="trae:extension/kombai.kombai">
    v 2.0.61
  </Card>

  <Card icon="code" title="Kiro" href="kiro:extension/kombai.kombai">
    v 2.0.61
  </Card>
</Columns>