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

# Overview

> Learn how to configure the tech stack for code generation.

export const SyncIcon = props => {
  return <div style={{
    display: "inline",
    justifyContent: "center",
    alignItems: "center"
  }}>
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{
    display: "inline"
  }} {...props}>
        <path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"></path>
        <path d="M21 3v5h-5"></path>
        <path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"></path>
        <path d="M8 16H3v5"></path>
      </svg>
    </div>;
};

Kombai supports tech stack configuration through the chat input, tech stack page, and first message in a repository. All your tech stack changes will apply from the next input.

Tech stack is saved at the workspace level. Your last saved configuration will be used in the workspace unless you change it.

## How to configure the tech stack

Here are three ways to configure your tech stack in Kombai:

### Chat input

To configure the tech stack through the chat input, describe your tech stack to the Agent in the chat input along with your message, e.g., "Generate code for the attached Figma. Use Vuetify for the UI."

Kombai will update the tech stack and continue with the code generation process.

### Tech stack page

1. Click the <Icon icon="layer-group" /> icon below the chat input box.
2. Click the <Icon icon="pen" size={15} /> icon in the top-right corner of the **Current tech stack** popover to open the **Tech Stack** tab of the **Settings** page.
3. Click on a category to see the available options or search for a library or framework.
4. Select your preferred library or framework from the listed options.
5. Click the **Save** button at the bottom right.

If you don't find your preferred library or framework, you can also add your own [custom tech stack ](#custom-tech-stack).

### First message in a new repository

When you send the first message in a repository where you haven't used Kombai before, it automatically detects the tech stack and lists it.

You can then click the **Configure** button to configure the tech stack or click the **Approve stack** button to proceed with the detected tech stack.

## Custom tech stack

Kombai also supports custom tech stack configuration. You can add a custom library or framework to the list of available options for any category. There are two ways to add a custom tech stack:

### Input field below categories section

1. Select a category from the left sidebar, e.g., **Build Tool**, **State Management**, **Icon Library**, etc.
2. Add your preferred library or framework name in the input field in the bottom right of the page.
3. Click the **Add** button to add the library to the list of available options for that category.
4. Click the **Save** button to save the changes.

### Search bar in the tech stack page

1. Search for your preferred library or framework in the chat input.
2. Click the **Add** button in the **AI suggestions** section.
3. Click the **Save** button to save the changes.

## Advanced configuration

Kombai supports custom builds, styles, and Storybook instructions. You can configure it to match your project's setup.

<Note>
  This configuration is only available to users on the enterprise plan. To know
  more, contact us at [support@kombai.com](mailto:support@kombai.com).
</Note>

## `stack.json` file

When you enable the **Sync with `stack.json`** toggle, Kombai persists your tech stack configuration in a `stack.json` file located at `.kombai/stack.json` within your repository.

This ensures that Kombai doesn't need to rescan your repository to identify the tech stack every time you work in a new IDE. Once you push this file to your remote Git repository, Kombai will automatically detect the tech stack from `stack.json` for all team members working on this repository.

### `stack.json` structure

The `stack.json` file contains your saved tech stack and type, path, and name of the indexed context graphs, as shown in the example below:

```json theme={null}
// Kombai Tech Stack Configuration
// Each value must be a string or an array of strings.
// Example: "Framework": "Vite" or "Project Type": ["React", "Vue"]
{
  "Project Type": "React",
  "Framework": "Vite",
  "Build Tool": "Vite",
  "Component Library": "MUI v7",
  "CSS Implementation": "Emotion",
  "TS/JS": "TS",
  "Router": "React Router v7 (declarative mode)",
  "State Management": "Zustand",
  "Icon Set": "Lucide",
  "Icon Set secondary": "Material Design",
  "Animation Library": "GSAP",
  "Charting Library": "react-chartjs-2",
  "Package Manager": "npm",
  "Server Runtime": "Node.js v20",
  "context_graphs": [
    {
      "type": "local",
      "path": "src",
      "name": "src"
    }
  ]
}
```

### Generate `stack.json`

1. Click the <Icon icon="layer-group" /> icon below the chat input box.
2. Click the <Icon icon="pen" size={15} /> icon in the top-right corner of the **Current tech stack** popover to open the **Tech Stack** tab of the **Settings** page.
3. Turn on the **Sync with stack.json** toggle at the top-right.

This will generate a `stack.json` file at the `.kombai/stack.json` path in your repository. You can open the file directly by clicking the <Icon icon="file-lines" size={15} /> icon located to the left of the **Sync with stack.json** toggle.

### Sync with `stack.json`

Kombai reads the `stack.json` file every time you open the **Tech Stack** page. However, if you manually update the `stack.json` file while the **Tech Stack** page is already open, the changes will not be reflected automatically.

In this case, click the <SyncIcon /> icon to the left of the **Sync with `stack.json`** toggle on the **Tech Stack page** to sync the page with your latest file changes.