File Context

File Context is a powerful feature that allows you to guide Frontend AI by adding specific files to your prompts. By including files in context, you can make precision edits and ensure the AI focuses on exactly the files you want to modify or reference.

How to Add File Context

Add specific files to your prompt using the @ key in the chat message panel:

1. Click in the chat message input
2. Type the @ symbol
3. A file selection menu appears
4. Browse or search for the file you want to include
5. Select the file from the menu
6. The file is added to your prompt context
7. Continue typing your prompt or add additional files

You can add multiple files to a single prompt by repeating this process.

Why Use File Context

File Context provides several important benefits:

Precision Editing

Direct the AI to specific files:

• “Update the styling in @header.css to use the new brand colors”
• “Refactor the authentication logic in @auth.ts”
• “Fix the bug in @checkout.tsx where the total isn’t calculating correctly”

By explicitly mentioning files, you ensure the AI focuses exactly where you need changes.

Avoid Ambiguity

When your project has multiple similar files:

• Multiple components with similar names
• Shared functionality across files
• Common patterns in different sections

File Context eliminates confusion by specifying exactly which file to modify.

Targeted Changes

Make changes to specific files without affecting others:

• Update one component without touching similar components
• Modify a specific route handler
• Edit configuration in a particular file

Multi-File Coordination

Coordinate changes across related files:

• “@header.tsx and @footer.tsx should both use the new navigation structure”
• “Update @api-client.ts to match the changes in @types.ts”
• “Ensure @login.tsx and @signup.tsx have consistent form styling”

Common Use Cases

Component Updates

Target specific components for modification:

@components/Button.tsx needs a loading state with a spinner

The AI knows exactly which component to modify.

Style Changes

Update specific stylesheets:

In @styles/theme.css, change the primary color to #3B82F6

No ambiguity about which style file to edit.

Bug Fixes

Point to the exact file with the issue:

There's a null pointer exception in @utils/formatDate.ts when the date is undefined. Add a check to handle this case.

The AI focuses on the specific file mentioned.

Refactoring

Specify which files need refactoring:

Refactor @services/api.ts to use async/await instead of promises

Clear direction on what needs to change.

Cross-File Updates

Coordinate changes across multiple files:

Update @models/User.ts to add an email field, then modify @components/UserProfile.tsx to display it

The AI understands the relationship between files.

Configuration Changes

Target specific config files:

In @vite.config.ts, add a new environment variable for the API endpoint

Precise configuration updates.

Best Practices

Be Specific

Even when using file context, be clear about what you want:

• Good: “@Header.tsx should have a sticky position when scrolling”
• Less Effective: “@Header.tsx needs to be better”

Use with Text Instructions

File Context works best combined with clear instructions:

• Add the file with @
• Explain what changes you need
• Provide context or reasoning if helpful

Multiple Files

Don’t hesitate to include multiple files when needed:

@components/Cart.tsx and @components/CartItem.tsx should use the updated pricing structure from @utils/pricing.ts

Verify File Paths

Make sure you’re selecting the correct file:

• Check the file path in the selection menu
• Verify it’s the file you intend to modify
• Similar names can be confusing—double-check

Combine with Other Features

File Context works well with other Frontend features:

• With Manual Approval: Review changes to specified files
• With Image Prompting: “Make @Hero.tsx match this design” (with uploaded image)
• With Version History: Easy to see what changed in specific files

File Context Menu

The file selection menu provides:

Search Functionality

• Type to search for files by name
• Filter results as you type
• Quickly find files in large projects

File Path Display

• See the full path to each file
• Distinguish between similarly named files
• Understand project structure

Recent Files

• Access recently edited files quickly
• Common files appear at the top
• Faster workflow for frequently modified files

When File Context is Most Valuable

Large Projects

In projects with many files:

• Specify exactly which file to modify
• Avoid unintended changes to similar files
• Navigate complex project structures

Shared Component Names

When multiple components have similar purposes:

• @components/admin/Header.tsx vs @components/user/Header.tsx
• Clear differentiation prevents mistakes

Precise Bug Fixes

When fixing specific issues:

• Point directly to the problematic file
• Ensure fix is applied in the right location
• No guesswork about which file needs changes

Learning Codebases

When exploring unfamiliar code:

• Ask about specific files: “What does @services/auth.ts do?”
• Understand file purposes and relationships
• Get targeted explanations

Example Workflows

Styling a Component

@components/ProductCard.tsx should have a hover effect that lifts the card slightly and adds a shadow

Adding a Feature

Add a search function to @components/Navbar.tsx that filters products from @data/products.ts

Fixing a Bug

The form validation in @components/ContactForm.tsx isn't working for phone numbers. Fix the regex pattern.

Refactoring Code

Extract the payment logic from @pages/Checkout.tsx into a new @utils/payment.ts file

Configuration Update

Update @next.config.js to enable image optimization for the /images directory

File Context transforms how you communicate with Frontend AI, enabling precision and clarity that leads to exactly the changes you need, exactly where you need them. Use the @ symbol to take control and guide AI with confidence.