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.
@Blocks
Use@Blocks to attach a saved Block from Design Mode to the Kombai chat. Type @Blocks in the chat input, then select the Block you want to attach.
Code generation
Code generation
Generate a functional component that matches the layout and visual style of a saved Block.
Design reference for new sections
Design reference for new sections
Use a saved Block as a structural or visual template to design a new section or page that follows the same pattern.
@Canvas
Use@Canvas to attach a Canvas from Design Mode to the Kombai chat. Type @Canvas in the chat input, then select the Canvas you want to attach.
Generate layouts
Generate layouts
Provide context for full-page layouts, including sidebars, headers, and main content areas.
Consistency checks
Consistency checks
Verify layout patterns and design consistency across all designs within a specific Canvas.
@Designs
Use@Designs to attach individual designs from a Canvas to the Kombai chat. Type @Designs in the chat input, then select the design you want to attach.
Component generation
Component generation
Reference individual designs for precise code generation of specific pages or complex components.
Iterate on designs
Iterate on designs
Request specific modifications, style updates, or additions to an existing design in your Canvas.
@Excalidraw
Use@Excalidraw to paste Excalidraw elements into the Kombai chat. Type @Excalidraw in the chat input to open a Paste JSON dialog 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.
Generate code from wireframes
Generate code from wireframes
Provide hand-drawn wireframes or UI sketches as visual context to generate functional code and layouts.
Iterate on architecture diagrams
Iterate on architecture diagrams
Refine, extend, or modify existing architecture diagrams and flowcharts by pasting them back into the chat.
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. Type @Figma in the chat input, then paste the Figma link you want to attach.
High-fidelity generation
High-fidelity generation
Reference Figma links for high-fidelity code implementation that matches your design’s layout and styling.
Define component states
Define component states
Tag multiple Figma designs to explain how the app should look in different states like Loading, Error, and Success.
Query design details
Query design details
Ask specific questions about layout, spacing, or color choices within your linked Figma design.
@Files
Use@Files to attach files from your codebase to the Kombai chat. Type @Files in the chat input, then select the file you want to attach.
Code analysis
Code analysis
Get explanations for complex logic or request refactoring of large components into smaller, reusable parts.
Implementation context
Implementation context
Attach specific files to provide implementation details, configuration constants, or architectural context 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. Type @Folders in the chat input, then select the folder you want to attach.
Broad scaffolding
Broad scaffolding
Reference a folder before asking Kombai to scaffold a new feature following that folder’s existing structure and patterns.
Multi-file logic
Multi-file logic
Ask questions that require connecting logic and data flow across several related components or files.
@Indexed Items
Use@Indexed Items to attach specific items from your Context Graphs to the Kombai chat. Type @Indexed Items in the chat input, then select the item you want to attach.
Explicit component selection
Explicit component selection
Manually select specific indexed components or hooks you want Kombai to use for a particular task.
Ask specific questions
Ask specific questions
Ask about the props, internal logic, or implementation details of a specific indexed item.
@Resources
Use@Resources to attach external frontend resources from our design library to the Kombai chat. Type @Resources in the chat input, then select the resource you want to attach.
Use design elements from resources
Use design elements from resources
Instruct Kombai to use element from a specific library (like Magic UI or Google Fonts) when generating code.
Read documentation
Read documentation
Ask questions about how to implement or customize specific components from supported external resources.
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 |
@Style Guide
Use@Style Guide to attach a Style Guide from Design Mode to the Kombai chat. Type @Style Guide in the chat input, then select the Style Guide you want to attach.
Generate new UI designs
Generate new UI designs
Use a saved Style Guide to provide high-level design direction, such as color palettes and typography, for new UI generation.
Redesign existing components
Redesign existing components
Redesign existing components in your repository to align them with the visual identity of a saved Style Guide.
@Terminals
Use@Terminals to attach the terminal state (logs, errors, and output) to the Kombai chat. Type @Terminals in the chat input, then select the terminal you want to attach. You can also select a portion of the terminal output, right-click, and Add to Kombai to attach it to the chat.
Debug conflicts
Debug conflicts
Resolve peer dependency warnings, version mismatches, and installation failures with lockfile conflicts.
Debug runtime errors
Debug runtime errors
Troubleshoot build failures and API route errors using logs and error messages directly from your terminal.
@Themes
Use@Themes to attach a Theme from Design Mode to the Kombai chat. Type @Themes in the chat input, then select the Theme you want to attach.
Apply saved themes
Apply saved themes
Use a saved Theme to style a new UI design during generation, ensuring it inherits your project’s visual identity from the start.
Granular styling
Granular styling
Use specific design tokens from a Theme to restyle an existing component in your app or refine its visual details.