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

# Navigating the desktop app

> Find your way around the Kombai desktop app: the sidebar, top-bar controls, home screen, right panel, projects, and playgrounds.

export const VSCodeIcon = ({size = 16, ...props}) => {
  return <div style={{
    display: "inline",
    justifyContent: "center",
    alignItems: "center"
  }}>
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128" width={size} height={size} style={{
    display: "inline"
  }} {...props}>
        <mask id="vscode-mask" width="128" height="128" x="0" y="0" data-test="where" maskUnits="userSpaceOnUse" style={{
    maskType: "alpha"
  }}>
          <path fill="#fff" fillRule="evenodd" d="M90.767 127.126a7.968 7.968 0 0 0 6.35-.244l26.353-12.681a8 8 0 0 0 4.53-7.209V21.009a8 8 0 0 0-4.53-7.21L97.117 1.12a7.97 7.97 0 0 0-9.093 1.548l-50.45 46.026L15.6 32.013a5.328 5.328 0 0 0-6.807.302l-7.048 6.411a5.335 5.335 0 0 0-.006 7.888L20.796 64 1.74 81.387a5.336 5.336 0 0 0 .006 7.887l7.048 6.411a5.327 5.327 0 0 0 6.807.303l21.974-16.68 50.45 46.025a7.96 7.96 0 0 0 2.743 1.793Zm5.252-92.183L57.74 64l38.28 29.058V34.943Z" clipRule="evenodd" />
        </mask>
        <g mask="url(#vscode-mask)">
          <path fill="#0065A9" d="M123.471 13.82 97.097 1.12A7.973 7.973 0 0 0 88 2.668L1.662 81.387a5.333 5.333 0 0 0 .006 7.887l7.052 6.411a5.333 5.333 0 0 0 6.811.303l103.971-78.875c3.488-2.646 8.498-.158 8.498 4.22v-.306a8.001 8.001 0 0 0-4.529-7.208Z" />
          <g filter="url(#vscode-filter-1)">
            <path fill="#007ACC" d="m123.471 114.181-26.374 12.698A7.973 7.973 0 0 1 88 125.333L1.662 46.613a5.333 5.333 0 0 1 .006-7.887l7.052-6.411a5.333 5.333 0 0 1 6.811-.303l103.971 78.874c3.488 2.647 8.498.159 8.498-4.219v.306a8.001 8.001 0 0 1-4.529 7.208Z" />
          </g>
          <g filter="url(#vscode-filter-2)">
            <path fill="#1F9CF0" d="M97.098 126.882A7.977 7.977 0 0 1 88 125.333c2.952 2.952 8 .861 8-3.314V5.98c0-4.175-5.048-6.266-8-3.313a7.977 7.977 0 0 1 9.098-1.549L123.467 13.8A8 8 0 0 1 128 21.01v85.982a8 8 0 0 1-4.533 7.21l-26.369 12.681Z" />
          </g>
          <path fill="url(#vscode-gradient)" fillRule="evenodd" d="M90.69 127.126a7.968 7.968 0 0 0 6.349-.244l26.353-12.681a8 8 0 0 0 4.53-7.21V21.009a8 8 0 0 0-4.53-7.21L97.039 1.12a7.97 7.97 0 0 0-9.093 1.548l-50.45 46.026-21.974-16.68a5.328 5.328 0 0 0-6.807.302l-7.048 6.411a5.336 5.336 0 0 0-.006 7.888L20.718 64 1.662 81.386a5.335 5.335 0 0 0 .006 7.888l7.048 6.411a5.328 5.328 0 0 0 6.807.303l21.975-16.681 50.45 46.026a7.959 7.959 0 0 0 2.742 1.793Zm5.252-92.184L57.662 64l38.28 29.057V34.943Z" clipRule="evenodd" opacity="0.25" style={{
    mixBlendMode: "overlay"
  }} />
        </g>
        <defs>
          <filter id="vscode-filter-1" width="144.744" height="113.408" x="-8.41115" y="22.5944" colorInterpolationFilters="sRGB" filterUnits="userSpaceOnUse">
            <feFlood floodOpacity="0" result="BackgroundImageFix" />
            <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
            <feOffset />
            <feGaussianBlur stdDeviation="4.16667" />
            <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0" />
            <feBlend in2="BackgroundImageFix" mode="overlay" result="effect1_dropShadow" />
            <feBlend in="SourceGraphic" in2="effect1_dropShadow" result="shape" />
          </filter>
          <filter id="vscode-filter-2" width="56.6667" height="144.007" x="79.6667" y="-8.0035" colorInterpolationFilters="sRGB" filterUnits="userSpaceOnUse">
            <feFlood floodOpacity="0" result="BackgroundImageFix" />
            <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
            <feOffset />
            <feGaussianBlur stdDeviation="4.16667" />
            <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0" />
            <feBlend in2="BackgroundImageFix" mode="overlay" result="effect1_dropShadow" />
            <feBlend in="SourceGraphic" in2="effect1_dropShadow" result="shape" />
          </filter>
          <linearGradient id="vscode-gradient" x1="63.9222" x2="63.9222" y1="0.329902" y2="127.67" gradientUnits="userSpaceOnUse">
            <stop stopColor="#fff" />
            <stop offset="1" stopColor="#fff" stopOpacity="0" />
          </linearGradient>
        </defs>
      </svg>
    </div>;
};

export const HouseIcon = props => {
  return <div style={{
    display: "inline",
    justifyContent: "center",
    alignItems: "center"
  }}>
      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" style={{
    display: "inline"
  }} {...props}>
        <path d="M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8"></path>
        <path d="M3 10a2 2 0 0 1 .709-1.528l7-6a2 2 0 0 1 2.582 0l7 6A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
      </svg>
    </div>;
};

export const NewChat = props => {
  return <div style={{
    display: "inline",
    justifyContent: "center",
    alignItems: "center"
  }}>
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="18" height="18" fill="currentColor" stroke="currentColor" strokeWidth="0" style={{
    display: "inline"
  }} {...props}>
        <path d="M14 7v1H8v6H7V8H1V7h6V1h1v6h6z"></path>
      </svg>
    </div>;
};

export const Globe = 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="currentColor" stroke="currentColor" strokeWidth="0" style={{
    display: "inline"
  }} {...props}>
        <path d="M12 1c6.075 0 11 4.925 11 11s-4.925 11-11 11S1 18.075 1 12 5.925 1 12 1Zm3.241 10.5v-.001c-.1-2.708-.992-4.904-1.89-6.452a13.919 13.919 0 0 0-1.304-1.88L12 3.11l-.047.059c-.354.425-.828 1.06-1.304 1.88-.898 1.547-1.79 3.743-1.89 6.451Zm-12.728 0h4.745c.1-3.037 1.1-5.49 2.093-7.204.39-.672.78-1.233 1.119-1.673C6.11 3.329 2.746 7 2.513 11.5Zm18.974 0C21.254 7 17.89 3.329 13.53 2.623c.339.44.729 1.001 1.119 1.673.993 1.714 1.993 4.167 2.093 7.204ZM8.787 13c.182 2.478 1.02 4.5 1.862 5.953.382.661.818 1.29 1.304 1.88l.047.057.047-.059c.354-.425.828-1.06 1.304-1.88.842-1.451 1.679-3.471 1.862-5.951Zm-1.504 0H2.552a9.505 9.505 0 0 0 7.918 8.377 15.773 15.773 0 0 1-1.119-1.673C8.413 18.085 7.47 15.807 7.283 13Zm9.434 0c-.186 2.807-1.13 5.085-2.068 6.704-.39.672-.78 1.233-1.118 1.673A9.506 9.506 0 0 0 21.447 13Z"></path>
      </svg>
    </div>;
};

The Kombai desktop app is a standalone workspace for design, code generation, visual editing, and testing.

<Note>
  The concepts on this page (the sidebar, right panel, Projects, and
  Playgrounds) are specific to the **desktop app**. In the [IDE
  extension](/get-started/set-up/ide-extension), Kombai runs inside your IDE, so
  it uses the IDE's own file explorer, editor tabs, and workspace folder
  instead.
</Note>

## Layout

The app has three regions:

* **Left sidebar:** Start a new chat, open your [Design Systems](/design/design-system/overview), search, and browse your [Projects](#projects) and chats. Your referral link and account are placed at the bottom.
* **Center:** The [home screen](#home-screen) and your active chat panel, with the [top bar](#top-bar) above the chat.
* **Right panel:** Tabbed [contextual pages](#right-panel) (Canvas Gallery, Inspirations, Browse Files, Changes, and Settings). Toggle it from the [top bar](#top-bar).

## Left sidebar

The sidebar holds your navigation, from top to bottom:

* **New chat** (<NewChat />): Start a fresh conversation.
* **Design Systems:** Open your [Design Systems](/design/design-system/overview) library. The page has **Public design systems** and **My design systems** tabs, and a **Create** button.
* **Search:** Search across your chats.
* **Active chats:** Chats you currently have open.
* **Projects:** Your opened folders, each grouping its own chats. See [Projects](#projects).
* **Share Kombai:** Your referral link. You earn credits for each paid referral.
* **Account:** Your avatar, email, and plan. Opens the [account menu](#account-menu).

### Projects

A **Project** is a folder you've opened in Kombai. Each project keeps its own chats grouped together, so work on different codebases stays separate. Chats are listed under their project with a relative timestamp (e.g. `1d`, `2d`).

Each project row has two controls:

* **+** sets that project as the active project for your next chat.
* **⋮** opens **Remove from recents** option.

### Account menu

Clicking your account details at the bottom of the sidebar reveals:

* **Your plan:** Your subscription and remaining plan credits.
* **Credit Logs:** A history of how your credits have been used.
* **Generated assets:** Images and videos Kombai has generated for you.
* **Documentation:** Links to **Get Started**, the **Product Docs**, and **What's new**.
* **Support:** Reach the support team.
* **Log out:** Sign out of your account.

## Center

The center is where you work. It holds the [home screen](#home-screen) and your active chat panel, with a top bar above the chat.

### Top bar

The top bar sits above the chat panel. On the left, it shows a button to toggle the sidebar, the current chat's name, and a badge for the active project. On the right, a set of quick-access controls let you switch surfaces:

| Control                                                  | Action                                                                                                                                                                                       |
| -------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <Globe /> **Globe**                                      | Opens the [Kombai Browser](/browser/overview). A green dot indicates the browser is running.                                                                                                 |
| <Icon icon="terminal" size={16} /> **Terminal**          | Opens the [terminal](/features/terminal) app, which opens at your project's path by default.                                                                                                 |
| <Icon icon="code" size={16} /> **Code** (`</>`)          | Opens the current project in your external code editor. When a supported editor is installed, the button names it (e.g. **Open in VS Code**); otherwise it reads **Open project in editor**. |
| <Icon icon="table-columns" size={16} /> **Panel toggle** | Shows or hides the [right panel](#right-panel).                                                                                                                                              |

<Tip>
  **Code** (`</>`) opens your project in a *separate* editor app. To browse and edit files *inside* Kombai, use **Browse Files** in the [right panel](#right-panel).
</Tip>

### Home screen

The **chat input** sits at the center, with a row of controls beneath it:

* **+:** Opens the unified menu of modes, [context and attachments](/context/mentions), and [skills](/features/frontend-skills). Typing `@` in the input opens the same menu for context, and typing `/` opens it for skills.
* **Model:** Pick a [model or router](/features/models), for example Claude Opus 5.
* **Mode:** The mode chip shows the active [mode](/features/modes). Pick one from the menu: Design, Plan, Ask, or Debug.
* **Design System:** In Design mode, the palette icon lets you attach a [Design System](/design/design-system/overview) to guide generation.
* **Variations and passes:** In Design mode, the "1 | 3" control sets how many variations to generate per design and how many refinement passes each new design gets.
* **Send:** Submit your prompt.

Below the input, a row lets you switch context and jump to key surfaces:

* **Project switcher:** The folder dropdown. See [Switching projects and playgrounds](#switching-projects-and-playgrounds).
* **Designs:** Open your [Canvas Gallery](/design/canvas#canvas-gallery).
* **Inspirations:** Open the [Inspirations](/features/inspirations) library.
* <Globe /> **Kombai Browser** and <Icon icon="gear" size={15} /> **Settings**.

#### Switching projects and playgrounds

Use the project switcher (the folder dropdown below the chat input) to change which folder Kombai is working in, or to spin up a scratch space. The dropdown includes:

* **Your recent projects:** Switch the active folder to any project you've recently opened.
* **Playgrounds:** Lightweight scratch spaces for experimenting without opening a real project or repo. Hover **Playgrounds** to see your existing ones.
* **New playground:** Create a fresh playground.
* **Open folder…:** Open a folder from your disk as the active project.

## Right panel

Toggle the right panel from the [top bar](#top-bar). It opens a launcher for five pages, and each one opens as a **tab**, so you can keep several open at once and add more with **+**.

| Page                               | Description                                                                                                                                               |
| ---------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Canvas Gallery** (<HouseIcon />) | Manage all your [canvases and designs](/design/canvas#canvas-gallery). Create a new canvas, search, and sort.                                             |
| **Inspirations**                   | Browse the [Inspirations](/features/inspirations) library: production-ready pages, app pages, sections, and animations you can remix.                     |
| **Browse Files**                   | An in-app file explorer and code view for the current project, with the file tree on the left and file contents on the right.                             |
| **Changes**                        | Review the edits Kombai has made as a diff, similar to your IDE's diff view.                                                                              |
| **Settings**                       | Open [Settings](/account/settings) for the active project: Tech Stack, Context Graphs, Models, MCP Servers, Rules, Commands & Skills, and Kombai Browser. |