@Files
Use@Files to attach files from your codebase to the Kombai chat.
Use cases
Ask specific questions
Ask specific questions
-
Explain the logic in
@auth.ts. -
Break
@ProjectSection.tsxinto smaller components.
Provide references
Provide references
Use
@theme.ts as a style guide for new code generation.You can also drag and drop files into the input box, or type
@ to quickly
select from your three most recently opened files.@Folders
Use@Folders to attach codebase folders containing multiple files to the Kombai chat.
Use cases
Broad code generation
Broad code generation
Reference a folder before asking Kombai to scaffold a new feature based on that structure.
Multi-file understanding
Multi-file understanding
Ask questions that require connecting logic across several components.
We recommend adding folders that don’t have too many files within them. If your
folder has too many files, add sub-folders instead.
@Figma
Use@Figma to attach Figma links to the Kombai chat.
Use cases
Generate code from design
Generate code from design
Reference the Figma link for which you want to generate the code.
State management
State management
Tag different frames to explain how the app should look in different states (e.g., Loading, Error, Success).
Design queries
Design queries
Ask questions specifically about the layout, spacing, or colors in your linked
design.
@Terminal
Use@Terminal to attach the terminal state (logs, errors, and output) to the Kombai chat. You can also select a portion of the terminal output, right-click, and “Add to Kombai” to attach it to the chat.
Use cases
Debug dependency and version conflicts
Debug dependency and version conflicts
- Resolve peer dependency warnings and version mismatches.
- Fix
npm install/pnpm installfailures with lockfile conflicts.
Debug Next.js build and generation errors
Debug Next.js build and generation errors
- Fix
getStaticPathserrors when pages fail to generate at build time - Debug API route handler failures with request logs
@Resources
Use@Resources to attach external frontend resources from our design library to the Kombai chat.
Use cases
Use design elements from resources
Use design elements from resources
Instruct Kombai to use a specific library (like Magic UI or Google Fonts) when generating code.
Read documentation
Read documentation
Ask questions about how to implement specific components from these libraries.
Supported resources
| Category | Sub-category | Resource name | Access using |
|---|---|---|---|
| UI library | - | Magic UI | @Resources |
| UI library | - | Aceternity UI | @Resources |
| UI library | - | Badtz UI | @Resources |
| UI library | - | Kokonut UI | @Resources |
| UI library | - | Hover | @Resources |
| UI library | - | Animate UI | @Resources |
| UI library | - | Smooth UI | @Resources |
| Design inspiration | - | Saasframe | @Resources |
| Design inspiration | - | Framer | @Resources |
| Design inspiration | - | One Page Love | @Resources |
| Design inspiration | - | Mobbin | @Resources |
| Colors | Palette generator | Coolors | @Resources |
| Colors | Palette generator | Goodpalette | @Resources |
| Colors | Palette library | Brandcolors | @Resources |
| Colors | Palette library | Coolors Palette | @Resources |
| Colors | Palette library | Color Hunt | @Resources |
| Colors | Gradient library | Colortopia | @Resources |
| Colors | Gradient library | Gradient Page | @Resources |
| Typography | Font library | Google Fonts | @Resources |
| Typography | Font pair library | Fontpair | @Resources |
| Typography | Font pair generator | Font Pairing Studio | @Resources |
| Animation library | - | GSAP | @Resources |
| Animation library | - | Motion | @Resources |
| Animation library | - | Codepen (GSAP) | @Resources |
| Assets | Illustration library | StreamlineHQ | Resource library button |
| Assets | Logo library | Brandlogos | Resource library button |
| Assets | Logo library | Logo.dev | Resource library button |