Mastering AI Code Assistants - Cursor Chat

Asking Effective Questions

To get the best answers from the chat:

• Be Clear and Specific: State exactly what you need. Instead of "fix this", try "Why does the selected code throw a TypeError?".
• Provide Context:
  • Highlight relevant code in your editor *before* opening chat (Cmd+L) to automatically include it.
  • Use @ symbols in your prompt to reference files (@filename.js), folders (@src/components), or documentation (@ReactDocs).
  • Use @Codebase to allow the AI to search across your indexed project.
  • If Chat is already open, you can also select code in the editor and click "Add to Prompt" in the chat interface.
• Refine Iteratively: If the first answer doesn't fully address your needs, ask follow-up questions to clarify or request alternatives.

Using "Agent" vs "Ask" Mode

The chat panel offers two distinct modes:

1. Ask Mode: For Information & Explanation
   1. Best for questions, explanations, and generating code snippets that you'll manually apply.
   2. Doesn't automatically modify your files.
   3. Example: "Explain how this useEffect hook works" or "Generate a regular expression to validate email addresses".
2. Agent Mode: For Complex Tasks
   1. Best for tasks that require editing or working with multiple files.
   2. Can autonomously make changes to your codebase based on your instructions.
   3. Shows a preview of changes before applying them.
   4. Examples: "Refactor this component to use React hooks", "Add error handling to all API calls in the project", or "Create a new API endpoint for user signup".

⚠️ Important: When using Agent mode, always review the changes before applying them, as they can modify multiple files.

Explaining and Understanding Code

Use chat to understand code you're working with:

• Code Explanation: Select code in the editor, open chat, and ask "Explain what this code does" or "What might be the bug in this function?".
• Understanding Libraries: Ask about third-party libraries or APIs. For example: "How do I use the useContext hook in React?" or "Explain the purpose of the Express middleware pattern."
• Learning Idioms: Ask about language-specific patterns and best practices. For example: "What's the Python idiomatic way to filter a list?" or "Show me the TypeScript best practice for handling optional props."

// Example prompt after selecting code:
Explain this React useEffect hook and potential issues with its dependency array.

Refactoring and Improving Code

Agent mode is ideal for transforming and improving existing code:

• Refactoring: "Convert this class component to a functional component with hooks" or "Refactor this to use the async/await pattern."
• Adding Features: "Add form validation to this component" or "Implement pagination for this data table."
• Performance Optimization: "Optimize this function for better performance" or "Identify and fix performance bottlenecks in this component."
• Code Quality: "Add proper error handling to this function" or "Improve the readability of this complex logic."

// Example in Agent mode:
Take this JavaScript code and convert it to TypeScript with proper interfaces.
Add JSDoc comments for all functions.

Working with Multiple Files

Agent mode shines when your task spans multiple files or requires understanding the broader codebase:

• Cross-File Refactoring: "Update all imports of this module across the project to use the new API" or "Rename this component and update all references."
• Feature Implementation: "Add a new user profile page with the required components, routes, and API calls."
• Pattern Application: "Apply the repository pattern to all database access in our project" or "Convert all callback-based code to use promises."
• Documentation: "Add JSDoc comments to all functions in the utils directory" or "Create a README.md file explaining the project structure and setup."

For best results, provide clear details about file locations and your specific requirements.