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

# @Mentions

> `@Mentions` lets you attach Blocks, Canvas designs, individual designs, Excalidraw diagrams, Figma links, files, folders, indexed items, design resources, Style Guides, terminals, and Themes to the context.

## @Blocks

Use `@Blocks` to attach a saved Block from [Design Mode](/design/design-system/blocks) to the Kombai chat. Type `@Blocks` in the chat input, then select the Block you want to attach.

<AccordionGroup>
  <Accordion title="Code generation">
    Generate a functional component that matches the layout and visual style of a saved Block.
  </Accordion>

  <Accordion title="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.
  </Accordion>
</AccordionGroup>

## @Canvas

Use `@Canvas` to attach a Canvas from [Design Mode](/design/canvas) to the Kombai chat. Type `@Canvas` in the chat input, then select the Canvas you want to attach.

<AccordionGroup>
  <Accordion title="Generate layouts">
    Provide context for full-page layouts, including sidebars, headers, and main content areas.
  </Accordion>

  <Accordion title="Consistency checks">
    Verify layout patterns and design consistency across all designs within a specific Canvas.
  </Accordion>
</AccordionGroup>

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

<AccordionGroup>
  <Accordion title="Component generation">
    Reference individual designs for precise code generation of specific pages or complex components.
  </Accordion>

  <Accordion title="Iterate on designs">
    Request specific modifications, style updates, or additions to an existing design in your Canvas.
  </Accordion>
</AccordionGroup>

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

<AccordionGroup>
  <Accordion title="Generate code from wireframes">
    Provide hand-drawn wireframes or UI sketches as visual context to generate functional code and layouts.
  </Accordion>

  <Accordion title="Iterate on architecture diagrams">
    Refine, extend, or modify existing architecture diagrams and flowcharts by pasting them back into the chat.
  </Accordion>
</AccordionGroup>

<Note>
  You can also paste copied Excalidraw elements directly into the chat input without using the `@Excalidraw` menu.
</Note>

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

<AccordionGroup>
  <Accordion title="High-fidelity generation">
    Reference Figma links for high-fidelity code implementation that matches your design's layout and styling.
  </Accordion>

  <Accordion title="Define component states">
    Tag multiple Figma designs to explain how the app should look in different states like Loading, Error, and Success.
  </Accordion>

  <Accordion title="Query design details">
    Ask specific questions about layout, spacing, or color choices within your linked Figma design.
  </Accordion>
</AccordionGroup>

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

<AccordionGroup>
  <Accordion title="Code analysis">
    Get explanations for complex logic or request refactoring of large components into smaller, reusable parts.
  </Accordion>

  <Accordion title="Implementation context">
    Attach specific files to provide implementation details, configuration constants, or architectural context for new code generation.
  </Accordion>
</AccordionGroup>

<Note>
  You can also drag and drop files into the input box, or type `@` to quickly
  select from your three most recently opened files.
</Note>

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

<AccordionGroup>
  <Accordion title="Broad scaffolding">
    Reference a folder before asking Kombai to scaffold a new feature following that folder's existing structure and patterns.
  </Accordion>

  <Accordion title="Multi-file logic">
    Ask questions that require connecting logic and data flow across several related components or files.
  </Accordion>
</AccordionGroup>

## @Indexed Items

Use `@Indexed Items` to attach specific items from your [Context Graphs](/context/context-graphs) to the Kombai chat. Type `@Indexed Items` in the chat input, then select the item you want to attach.

<AccordionGroup>
  <Accordion title="Explicit component selection">
    Manually select specific indexed components or hooks you want Kombai to use for a particular task.
  </Accordion>

  <Accordion title="Ask specific questions">
    Ask about the props, internal logic, or implementation details of a specific indexed item.
  </Accordion>
</AccordionGroup>

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

<AccordionGroup>
  <Accordion title="Use design elements from resources">
    Instruct Kombai to use element from a specific library (like Magic UI or Google Fonts) when generating code.
  </Accordion>

  <Accordion title="Read documentation">
    Ask questions about how to implement or customize specific components from supported external resources.
  </Accordion>
</AccordionGroup>

### 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](/design/design-system/style-guides) from Design Mode to the Kombai chat. Type `@Style Guide` in the chat input, then select the Style Guide you want to attach.

<AccordionGroup>
  <Accordion title="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.
  </Accordion>

  <Accordion title="Redesign existing components">
    Redesign existing components in your repository to align them with the visual identity of a saved Style Guide.
  </Accordion>
</AccordionGroup>

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

<AccordionGroup>
  <Accordion title="Debug conflicts">
    Resolve peer dependency warnings, version mismatches, and installation failures with lockfile conflicts.
  </Accordion>

  <Accordion title="Debug runtime errors">
    Troubleshoot build failures and API route errors using logs and error messages directly from your terminal.
  </Accordion>
</AccordionGroup>

## @Themes

Use `@Themes` to attach a [Theme](/design/design-system/themes) from Design Mode to the Kombai chat. Type `@Themes` in the chat input, then select the Theme you want to attach.

<AccordionGroup>
  <Accordion title="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.
  </Accordion>

  <Accordion title="Granular styling">
    Use specific design tokens from a Theme to restyle an existing component in your app or refine its visual details.
  </Accordion>
</AccordionGroup>