Skip to main content

​
@Files

Use @Files to attach files from your codebase to the Kombai chat.

​
Use cases

  • Explain the logic in @auth.ts.
  • Break @ProjectSection.tsx into smaller components.
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

Reference a folder before asking Kombai to scaffold a new feature based on that structure.
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.

​
@Excalidraw

Use @Excalidraw to paste Excalidraw elements into the Kombai chat. When you select @Excalidraw, a Paste JSON dialog opens where you can paste copied Excalidraw elements. The pasted content is sent to Kombai as a JSON context that it can interpret and work with.

​
Use cases

Select all the relevant nodes in your Excalidraw diagram, copy them (Ctrl + C on Windows or Cmd + C on Mac), paste them back via @Excalidraw, and ask Kombai to refine, extend, or modify the diagram.
Select all the relevant nodes of a hand-drawn wireframe or architecture sketch in Excalidraw, copy them, and paste via @Excalidraw to ask Kombai to implement it in code.
You can also paste copied Excalidraw elements directly into the chat input without using the @Excalidraw menu.

​
@Figma

Use @Figma to attach Figma links to the Kombai chat.

​
Use cases

Reference the Figma link for which you want to generate the code.
Tag different frames to explain how the app should look in different states (e.g., Loading, Error, Success).
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

  • Resolve peer dependency warnings and version mismatches.
  • Fix npm install / pnpm install failures with lockfile conflicts.
  • Fix getStaticPaths errors 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

Instruct Kombai to use a specific library (like Magic UI or Google Fonts) when generating code.
Ask questions about how to implement specific components from these libraries.

​
Supported resources

CategorySub-categoryResource nameAccess 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
ColorsPalette generatorCoolors@Resources
ColorsPalette generatorGoodpalette@Resources
ColorsPalette libraryBrandcolors@Resources
ColorsPalette libraryCoolors Palette@Resources
ColorsPalette libraryColor Hunt@Resources
ColorsGradient libraryColortopia@Resources
ColorsGradient libraryGradient Page@Resources
TypographyFont libraryGoogle Fonts@Resources
TypographyFont pair libraryFontpair@Resources
TypographyFont pair generatorFont Pairing Studio@Resources
Animation library-GSAP@Resources
Animation library-Motion@Resources
Animation library-Codepen (GSAP)@Resources
AssetsIllustration libraryStreamlineHQResource library button
AssetsLogo libraryBrandlogosResource library button
AssetsLogo libraryLogo.devResource library button