Skip to content
Primio Docs

Attaching Context

The more context you give the AI, the better the result. Primio supports several ways to attach context beyond plain text.

Open the attachments menu (+ button next to the text field) to see all options. Some have keyboard shortcuts for faster access.

Attachments menu — Add image, Reference files, Prompt library, and Gradient builder

Images

Section titled “Images”

Attach reference images to show the AI what you want — UI mockups, design screenshots, inspiration from other apps, or photos of bugs. You can paste, drag and drop, or use the attachments menu. Supported formats: JPEG, PNG, WebP.

File and folder references (@-mentions)

Section titled “File and folder references (@-mentions)”

Type @ in the text field to open the file picker. Browse your project’s file tree or search by name, then select a file or folder to insert a reference like @file:lib/screens/home.dart into your prompt.

This tells the AI exactly which file or folder you’re talking about, so it can read the current contents and make targeted changes.

Behavior details:

  • Desktop: a dropdown picker appears below the cursor
  • Mobile: a full-screen modal opens
  • Arrow keys jump over @file: tokens so you can navigate around them naturally
  • Backspace at the boundary of an @file: token deletes the entire reference in one keystroke

Good use cases for file references:

  • Direct the AI to modify a specific file: “Update @file:lib/widgets/header.dart to use a gradient background”
  • Provide context: “Look at @file:lib/models/user.dart and add a lastLogin field”
  • Reference multiple files: “Make @file:lib/screens/settings.dart match the style of @file:lib/screens/profile.dart”

Screenshot capture

Section titled “Screenshot capture”

Capture your app’s live preview and attach it as context.

Click the screenshot button (camera icon) — on desktop it’s a floating button in the bottom-right corner of the preview area, on mobile it’s in the preview toolbar. A context menu appears with two options:

  • Save to disk — downloads the screenshot as an image file
  • Add to prompt — on desktop, this opens an area selection tool where you can drag to select a specific region, then click Use selection to attach it. On mobile, the full screenshot is attached instantly (no area selection).

This is useful when you want to point at a specific part of the UI — a misaligned button, a section that needs redesigning, or an area where you want something added.

Gradient builder

Section titled “Gradient builder”

Create custom gradients visually and send the configuration to the AI.

Open the attachments menu and select Gradient Builder. You get a live preview with controls for colors, direction, and type. Choose from 20+ presets or build your own.

See Gradient Builder for full details.

Design Library

Section titled “Design Library”

Browse curated visual styles and apply one to your app.

The Design Library is available via a dedicated Design button when creating a new project. Pick from 12 professionally designed themes that set the overall look and feel of your app.

See Design Library for full details.

Combining context types

Section titled “Combining context types”

You get the best results when you combine multiple types of context in a single message.

Example prompt with rich context:

Redesign the profile screen to match this mockup [attached image]. Update @file:lib/screens/profile.dart — keep the existing data fetching logic but replace the entire UI. Use rounded cards with subtle shadows and the app’s primary blue color.

Next steps

Section titled “Next steps”