AGENT Mode

Why We Need 🟡 AGENT Mode

The AGENT mode is for complex, multi-step tasks that require a deep understanding of your entire project.

This is the mode you activate when a simple question or a single snippet isn't enough.

The AGENT can read your codebase, understand file relationships, and orchestrate changes across multiple files to fulfill a single, high-level request.

⚡ This is your powerhouse for:

• Large-Scale Refactoring:
  "Rename the LegacyButton component to UIButton and update all its imports and props across the entire project."
• Implementing Features:
  "Add a new userService.js file to fetch user data, and modify the ProfilePage component to use this new service to display the user's name."
• Debugging Complex Issues:
  "There's a bug where the login button is disabled incorrectly. Find the cause in the state management and the component logic, and fix it."
• Project-Wide Updates:
  "Migrate all instances of the deprecated fetchData function to the new api.call method."
  

💡 Use the AGENT when the task requires context beyond a single file and involves making coordinated edits in several places.

⚙️ How It Works

When you make a request in AGENT mode, you are giving the AI more autonomy to achieve a goal.

1️⃣ Prompt:
You provide a high-level goal in the chat with AGENT mode enabled.

2️⃣ Analysis:
The AI analyzes your request and scans your project structure to identify all the relevant files it needs to read or modify.

3️⃣ Execution:
It then proceeds to make the necessary changes. This could involve creating new files, deleting code, and modifying multiple existing files.

4️⃣ Review:
Crucially, the changes are not saved automatically.
The AGENT presents all its modifications to you in a diff view.

👉 You can:

• review each change line-by-line
• accept the entire set of changes
• reject them

This review step gives you the final say and ensures the AGENT has performed the task correctly.

💻 Example: Adding a New Feature

1. Open the AI chat and activate AGENT mode.
2. The AGENT will perform the following actions:
   • Create a new file: src/contexts/ThemeContext.js
   • Write the React Context creation and provider logic inside it
   • Open src/index.js or src/App.js (wherever your root component is)
   • Import the ThemeProvider from the new file
   • Wrap the <App /> component with <ThemeProvider>
3. You will then see a diff view showing:
   • the new ThemeContext.js file
   • the modifications to your App.js file

Prompt:

"Create a new React context for theme management called ThemeContext. It should provide a theme ('light' or 'dark') and a toggleTheme function. Then, wrap the root App component with this new context provider."

👉 You can approve these changes to apply them to your project.

🧩 Working with AGENT Mode example:

Agent-mode-1.mp4 - Meeting recording by Fireflies.ai

The meeting focused on discussing the candidate’s technical skills and experiences with AI tools for coding, particularly in agent mode functionalities.

Fireflies.ai