> ## Documentation Index
> Fetch the complete documentation index at: https://docs.nativeline.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Toolkit

> Add real assets to your app with # commands

Attach fonts, colors, images, sounds, data, videos, animations, and 3D models directly into your app — no setup required.

## What is the Toolkit?

The Toolkit is a set of **# commands** that let you attach real files and assets to your conversation. When you type `#` in the chat input, a popover appears with all available commands organized into two sections:

* **Assets** — images, fonts, colors, sounds, videos, animations, and 3D models
* **Data** — JSON and CSV files

Each command opens a file picker (or a color picker for `#color`), lets you select your asset, and attaches it as an **orange chip** below the chat input. You then describe how the AI should use that asset, and it gets integrated directly into your app's Xcode project.

<Frame caption="The Toolkit popover showing all available # commands">
  <img src="https://mintcdn.com/nativeline/vCsYc5lY7QSZ2JFR/images/toolkit-popover.png?fit=max&auto=format&n=vCsYc5lY7QSZ2JFR&q=85&s=9f1c92a07c029b9b8f60aaccba7a43e0" alt="Toolkit popover with Assets and Data sections" width="652" height="1130" data-path="images/toolkit-popover.png" />
</Frame>

<Frame caption="An attached file appears as an orange chip in the chat input">
  <img src="https://mintcdn.com/nativeline/vCsYc5lY7QSZ2JFR/images/toolkit-chip.png?fit=max&auto=format&n=vCsYc5lY7QSZ2JFR&q=85&s=9abd1b51d9185a86d670da00387d1c8a" alt="Orange file chip attached to chat input" width="1128" height="210" data-path="images/toolkit-chip.png" />
</Frame>

## Quick Reference

| Command   | What it adds            | File types                           | Icon                |
| --------- | ----------------------- | ------------------------------------ | ------------------- |
| `#image`  | Images to asset catalog | PNG, JPEG, GIF, HEIC, TIFF, BMP, SVG | photo               |
| `#font`   | Custom fonts            | TTF, OTF                             | textformat          |
| `#color`  | Named colors            | Color picker                         | paintpalette.fill   |
| `#sound`  | Audio files             | MP3, WAV, AIFF                       | speaker.wave.2.fill |
| `#video`  | Video files             | MOV, MP4, QuickTime                  | video.fill          |
| `#data`   | JSON/CSV data           | JSON, CSV                            | doc.text.fill       |
| `#lottie` | Lottie animations       | JSON (animation)                     | sparkles            |
| `#3d`     | 3D models               | USDZ, Reality                        | cube.fill           |

## How to Use # Commands

<Steps>
  <Step title="Type # in the chat input">
    Position your cursor in the chat input and type the `#` character.
  </Step>

  <Step title="The toolkit popover appears">
    A popover displays all available commands, organized under Assets and Data.
  </Step>

  <Step title="Click the command you want">
    Select the command that matches the type of asset you want to add.
  </Step>

  <Step title="Select your file">
    A file picker opens filtered to the supported file types for that command. For `#color`, a color picker opens instead.
  </Step>

  <Step title="The file appears as an orange chip">
    Your selected asset shows up as an orange pill-shaped chip below the chat input, confirming it's attached.
  </Step>

  <Step title="Describe how the AI should use it">
    Type a description of where and how the asset should appear in your app.
  </Step>

  <Step title="Press Enter to send">
    The AI receives your asset and description, then integrates it into your app.
  </Step>
</Steps>

<Tip>
  You can use toolkit commands alongside regular text. Just type `#` to open the popover, attach your file, then describe what you want.
</Tip>

<Tip>
  `#image` is for app assets like icons, backgrounds, and UI elements. To show the AI a reference screenshot or mockup, drag-and-drop images directly into the chat instead.
</Tip>

## All Commands

<CardGroup cols={2}>
  <Card title="#image — Add Images" icon="image" href="/toolkit/image">
    Import PNG, JPEG, SVG, and more into your asset catalog.
  </Card>

  <Card title="#font — Custom Fonts" icon="font" href="/toolkit/font">
    Add TTF and OTF font files to your app.
  </Card>

  <Card title="#color — Named Colors" icon="palette" href="/toolkit/color">
    Pick colors and add them to your asset catalog.
  </Card>

  <Card title="#sound — Audio Files" icon="volume" href="/toolkit/sound">
    Bundle MP3, WAV, and AIFF audio into your app.
  </Card>

  <Card title="#video — Video Files" icon="video" href="/toolkit/video">
    Embed MOV and MP4 videos for in-app playback.
  </Card>

  <Card title="#data — JSON & CSV" icon="file" href="/toolkit/data">
    Bundle structured data files into your app.
  </Card>

  <Card title="#lottie — Lottie Animations" icon="sparkles" href="/toolkit/lottie">
    Add lightweight, scalable Lottie animations.
  </Card>

  <Card title="#3d — 3D Models" icon="cube" href="/toolkit/3d">
    Import USDZ and Reality files for AR and 3D views.
  </Card>
</CardGroup>