Quick Actions

Add context, references, and integrations to your prompts with one click. Quick Actions help the AI understand your project better and deliver more accurate results.

Written By Nick Gatzoulis

Last updated 4 months ago

What are Quick Actions?

Quick Actions provide instant access to project resources you can reference in your prompts. Instead of manually typing file paths or integration details, Quick Actions let you browse and select what you need.

Access Quick Actions: Click the + button next to your chat input.

Why use Quick Actions:

  • Give the AI context about existing code

  • Reference specific files or documentation

  • Check integration status

  • Browse Figma scenes (Figma projects)

  • Add session summaries for context

  • Upload files for analysis

How it works: Select an item from Quick Actions and it's automatically added to your prompt using @mention syntax. The AI expands these references to full context when processing your request.

Upload Files

Analyze images, documents, or code files with AI, or add them to your project.

What you can upload:

  • Screenshots for UI analysis

  • Design mockups

  • Code snippets

  • Documentation files

  • Data files

How to use:

  1. Click + button → Upload Files

  2. Choose file from your device

  3. App2 analyzes the file with AI

  4. Analysis appears in your chat input

  5. Add your own prompt and send

Example use cases:

  • Upload screenshot: "Build this exact UI"

  • Upload design: "Create a component matching this style"

  • Upload code: "Refactor this code following best practices"

Tip: Upload screenshots when you want the AI to recreate a specific design.

Docs

Reference your project documentation to guide the AI's behavior.

What docs do:

  • Provide project-specific guidelines

  • Define coding standards

  • Explain architecture decisions

  • Document custom patterns

How to use:

  1. Click + button → Docs

  2. Search for the doc you need

  3. Click to add @docs/path to your prompt

  4. Send your message

Managing docs:

  • Add docs in Settings → Project → Docs

  • Create markdown files in your project's /docs folder

  • Use Docs mode to create documentation

Example:

  • Add @docs/api-standards to prompt: "Follow the API standards when creating new endpoints"

  • Reference: "Build the user service following @docs/architecture-guide"

Tip: Create a style guide doc and reference it for consistent UI components.

Rules

Add code quality rules and workflow conventions to your prompts.

What rules do:

  • Define coding standards

  • Set naming conventions

  • Specify file organization

  • Enforce best practices

How to use:

  1. Click + button → Rules

  2. Search for the ruleset you need

  3. Click to add @rules/path to your prompt

  4. Send your message

Managing rules:

  • Add rules in Settings → Project → Rulesets

  • Define rules as markdown files

  • Cover style, patterns, and conventions

Example:

  • Reference @rules/typescript-standards: "Create a new service following @rules/typescript-standards"

  • Apply rules: "Refactor this component to match @rules/react-patterns"

Tip: Create rulesets for TypeScript config, naming conventions, and component patterns.

Files

Reference specific files from your GitHub repository to give the AI context.

What files show:

  • Complete project structure

  • All files from your GitHub repo

  • Searchable file browser

  • Up to 200 files at once

How to use:

  1. Click + button → Files

  2. Search for the file you need

  3. Click to add @file/path to your prompt

  4. Send your message

Example references:

  • @src/components/Header.tsx - "Update the Header component to add a new menu item"

  • @src/api/users.ts - "Add error handling to @src/api/users.ts"

  • @package.json - "Add authentication package to @package.json"

Search tips:

  • Type file name to find quickly

  • Search by folder path

  • Use extensions to filter (.tsx, .ts, .css)

Tip: Reference existing files when asking for modifications to ensure the AI sees the current code.

Chat Sessions

Reference summaries from other chat sessions to provide context.

What session references do:

  • Add context from previous conversations

  • Reference decisions made in other sessions

  • Connect related work across sessions

How to use:

  1. Click + button → Chat Sessions

  2. Browse available sessions

  3. Click to add session summary to your prompt

  4. Send your message

When to reference sessions:

  • Building related features

  • Continuing work from another session

  • Maintaining consistency across features

  • Reminding AI of previous decisions

Example: "Build the checkout flow using the same patterns as [summary from Shopping Cart session]"

Note: Only sessions with summaries can be referenced. Empty sessions won't appear.

Integrations

View and manage connections to external services.

Available integrations:

  • GitHub: Repository and organization management

  • Supabase: Backend database connections

  • Stripe: Payment processing setup

  • Context7: MCP context provider

  • Vercel: Deployment teams

Integration status:

  • Green dot (pulsing): Connected and active

  • Gray dot: Not connected

How to use:

  1. Click + button → Integrations

  2. Select an integration to view details

  3. Check connection status

  4. Manage settings or link projects

Quick management:

  • View connected organizations/projects

  • Access integration settings

  • Link new projects to integrations

  • Check configuration status

Tip: Check integration status before requesting features that need external services.

Figma Flow

Navigate Figma scenes, categories, and phases in Figma-imported projects.

What Figma Flow shows:

  • All scenes from your Figma import

  • Scene categories (grouped by type)

  • Frontend and Backend phases

  • Completion status

How to use:

  1. Click + button → Figma Flow

  2. Search for scenes, categories, or phases

  3. Click a scene to select it as your target

  4. Prompt is auto-filled with scene reference

  5. Send your message

Selection types:

Scenes:

  • Click a scene to implement it

  • Shows Frontend or Backend phase

  • Completion badge (Complete/Pending)

  • Auto-fills: "Implement [Scene Name] • [Phase]"

Categories:

  • Reference entire design categories

  • Useful for related screens

  • Auto-fills: "Reference the [Category Name] Figma category"

Phases:

  • Focus on Frontend or Backend work

  • Shows completion percentage

  • Auto-fills: "Focus on the [Phase] phase"

Completion tracking:

  • Green badge = completed

  • Gray badge = pending

  • Track progress across all scenes

Note: Figma Flow only appears in projects created from Figma imports.

Using @mentions

@mentions are how you reference files, docs, and other resources in your prompts.

Mention syntax

TypeSyntaxExample

File

@file/path

@src/App.tsx

Doc

@docs/path

@docs/api-guide

Rule

@rules/path

@rules/typescript-standards

How mentions work

When you add an @mention, the AI:

  1. Fetches the referenced content

  2. Includes it in the prompt context

  3. Uses it to inform its response

  4. Applies rules or follows guidelines

Benefits of mentions

Better results:

  • AI sees your actual code

  • Follows your specific guidelines

  • Understands project structure

  • Makes context-aware changes

Save credits:

  • Fewer clarification questions

  • Less back-and-forth

  • More accurate first attempts

Example prompt with mentions: "Update @src/components/LoginForm.tsx to follow @rules/form-validation and match the style in @docs/design-system"

Tip: Use multiple mentions in one prompt to provide comprehensive context.

Integration management

Viewing integration status

Quick Actions show real-time integration status:

Connected (green pulsing dot):

  • Integration is active

  • Ready to use in prompts

  • Click to view details

Disconnected (gray dot):

  • Integration not configured

  • Click to set up

Unknown (checking):

  • Loading status

  • Wait for confirmation

Managing integrations

For each integration:

  1. Click + button → Integrations

  2. Select the integration

  3. View connection details

  4. Click "Manage [Integration] settings"

  5. Configure in settings modal

Integration-specific actions:

GitHub:

  • View connected repository

  • Link your own GitHub (Pro feature)

  • Manage organizations

  • Check repository status

Supabase:

  • View linked project

  • Browse available projects

  • Link new Supabase project

  • Check connection status

Stripe:

  • View connected integrations

  • Check default currency

  • Manage payment setup

  • Link to project

Vercel:

  • View deployment teams

  • Manage team tokens

  • Check configuration

Context7:

  • View configuration status

  • Manage API keys

  • Check last update time

Tip: Set up integrations early if your app needs external services like databases or payments.

Best practices

When to use Quick Actions

Use Quick Actions when:

  • Modifying existing code (reference the file)

  • Following project standards (reference docs/rules)

  • Building features with integrations (check status)

  • Working with Figma imports (select scenes)

  • Continuing from previous sessions (reference summaries)

Skip Quick Actions when:

  • Creating completely new files

  • General questions about the platform

  • No specific context needed

Effective file referencing

Do:

  • Reference files you're modifying

  • Include multiple related files

  • Use for understanding existing code

Don't:

  • Reference too many unrelated files

  • Assume AI remembers all files (always reference)

Example: "Add authentication to @src/App.tsx and update @src/routes.ts to protect private routes"

Docs and rules strategy

Create docs for:

  • Architecture decisions

  • API design patterns

  • UI component library

  • Database schema explanations

Create rules for:

  • Code style (formatting, naming)

  • File organization

  • Import patterns

  • Testing requirements

Reference them:

  • "Build new feature following @docs/architecture and @rules/typescript"

Figma workflow optimization

For Figma projects:

  1. Open Quick Actions → Figma Flow

  2. Review available scenes

  3. Select high-priority screens first

  4. Work on Frontend before Backend (or vice versa)

  5. Mark scenes complete as you go

Scene selection tips:

  • Focus on one scene at a time

  • Complete Frontend before moving to Backend

  • Use categories to group related work

  • Check completion status regularly

Examples by scenario

Modifying existing code

Scenario: Add new field to user profile form

Steps:

  1. Click + button → Files

  2. Search "UserProfile"

  3. Click @src/components/UserProfile.tsx

  4. Type: "Add a 'bio' field to @src/components/UserProfile.tsx with 500 char limit"

  5. Send

Following project standards

Scenario: Create new API endpoint following conventions

Steps:

  1. Click + button → Rules

  2. Select @rules/api-standards

  3. Click + button → Docs

  4. Select @docs/api-guide

  5. Type: "Create new /api/posts endpoint following @rules/api-standards and @docs/api-guide"

  6. Send

Building with integrations

Scenario: Add database authentication

Steps:

  1. Click + button → Integrations

  2. Select Supabase

  3. Verify connection (green dot)

  4. Type: "Add Supabase authentication with email and password"

  5. Send

Working with Figma

Scenario: Implement specific screen from design

Steps:

  1. Click + button → Figma Flow

  2. Search for "Profile"

  3. Click "Profile Screen • Frontend"

  4. Auto-filled prompt appears

  5. Optionally add details

  6. Send

Referencing previous work

Scenario: Build feature similar to existing one

Steps:

  1. Click + button → Chat Sessions

  2. Find "Shopping Cart Implementation" session

  3. Click to add summary

  4. Type: "Build wishlist feature similar to [Shopping Cart summary]"

  5. Send

Search functionality

Every Quick Action view includes search to help you find what you need quickly.

Search tips

Files:

  • Search by filename: "Header"

  • Search by path: "components/auth"

  • Search by extension: ".tsx"

  • Shows first 200 results

Docs & Rules:

  • Search by name

  • Search by content keywords

  • Case-insensitive

  • Exact matches highlighted

Chat Sessions:

  • Search by title

  • Search by summary content

  • Recent sessions shown first

Figma Flow:

  • Search scenes by name

  • Search by category

  • Filter by phase (Frontend/Backend)

  • Completion status visible

Tip: Use specific search terms to narrow results quickly. "auth" finds all authentication-related files.

Navigation

Quick Actions uses a stack-based navigation system.

Navigation controls:

  • Back button (←): Return to previous view

  • Root view: Main menu with all action categories

  • Detail views: Specific content for each action

Example flow:

  1. Open Quick Actions (+ button)

  2. Click "Integrations" → view list

  3. Click "GitHub" → view GitHub details

  4. Click ← to go back to integrations

  5. Click ← again to go back to root

Menu automatically resets when you close it.

Common workflows

Adding context to a feature request

Without Quick Actions: "Add a search feature to the app"

With Quick Actions:

  1. Reference existing code: @src/components/SearchBar.tsx

  2. Reference style guide: @docs/design-system

  3. Prompt: "Improve @src/components/SearchBar.tsx to match @docs/design-system"

Result: AI sees existing code and design standards, produces better implementation.

Setting up integrations

Scenario: Check if Supabase is connected before requesting database features

Steps:

  1. Open Quick Actions → Integrations → Supabase

  2. See green dot (connected) or gray dot (not connected)

  3. If connected, proceed with prompt

  4. If not connected, click "Manage settings" to connect

Implementing Figma designs

Scenario: Systematic implementation of all screens

Steps:

  1. Open Quick Actions → Figma Flow

  2. Review all scenes and categories

  3. Select first scene (e.g., "Home Screen • Frontend")

  4. Implement frontend

  5. Switch to "Home Screen • Backend"

  6. Implement backend

  7. Mark complete

  8. Repeat for next scene

Troubleshooting

No files appearing in Files view

Issue: Files view shows "Connect a GitHub repository"

Solution:

  • Connect GitHub integration in Settings

  • Wait for repository sync to complete

  • Refresh the page

Search not finding files

Issue: File exists but doesn't appear in search

Solution:

  • Check spelling

  • Try partial filename

  • Browse without search (if <200 files)

  • Verify file is in GitHub repo

Figma Flow not appearing

Issue: Quick Actions doesn't show Figma Flow option

Solution:

  • Verify project was created from Figma import

  • Check project type in project settings

  • Figma Flow only available for Figma projects

Session summaries not showing

Issue: Can't find sessions to reference

Solution:

  • Sessions need summaries to appear

  • Only parent/child sessions generate summaries

  • Create new session with parent to enable summaries

Integration shows "unknown" status

Issue: Integration has gray dot but should be connected

Solution:

  • Wait a few seconds for status to load

  • Refresh the page

  • Check integration settings

  • Re-authenticate if needed

Advanced tips

Combining multiple references

Use multiple @mentions in one prompt for comprehensive context.

Example: "Refactor @src/components/UserCard.tsx following @rules/react-patterns and @docs/component-guide, similar to @src/components/ProductCard.tsx"

Result: AI has:

  • Current code to refactor

  • Style rules to follow

  • Documentation for guidance

  • Example file for reference

Strategic file selection

Reference parent components: When modifying a child component, reference its parent to maintain consistency.

Reference shared utilities: When using helper functions, reference the utility file so AI knows what's available.

Reference types: Include TypeScript type files for type-safe implementations.

Using session context

When building related features: Reference the session where you built the first feature.

Example: Building "Edit Profile" after building "View Profile":

  • Reference "View Profile" session summary

  • Ensures consistency in data handling

  • Maintains similar UI patterns

Tips for Figma projects

Scene selection workflow

Organized approach:

  1. Review all scenes in Figma Flow

  2. Identify dependencies (which screens need others)

  3. Implement independent screens first

  4. Work through dependent screens

  5. Track completion as you go

Frontend vs. Backend

Flexible workflow:

  • Complete all Frontend first, then Backend (or vice versa)

  • Or complete both phases per scene before moving to next

  • Choose based on your preference

Example Frontend-first:

  1. All scene frontends → visual consistency

  2. Then all backends → data integration

Example Scene-by-scene:

  1. Home Frontend → Home Backend → complete screen

  2. Profile Frontend → Profile Backend → complete screen

Category organization

Categories group related screens. Reference categories when:

  • Building navigation between screens

  • Ensuring consistent styling

  • Planning feature scope

Example: "Implement navigation for all screens in the @Auth category"

Common questions

Do Quick Actions consume credits?

No. Quick Actions are a navigation tool. Credits are consumed when the AI processes your prompt, not when you select references.

Can I manually type @mentions instead of using Quick Actions?

Yes, but Quick Actions ensure correct paths and help you discover available resources. Manual typing works if you know the exact path.

What's the difference between Docs and Rules?

Both are markdown files, but:

  • Docs: Explain concepts, provide guides, document architecture

  • Rules: Define requirements, set standards, enforce patterns

Rules are typically shorter and more prescriptive.

Can I reference files from other projects?

No. Quick Actions only show resources from the current project. Each project has its own isolated context.

Why are some files not showing?

The file browser shows the first 200 files. Use search to narrow results if your project has more files.

Related links