Back to Basics

AI Commands & Features

Master Cursor's AI capabilities including Claude 4.5 Sonnet, Composer, codebase context, and advanced code generation.

OverviewBasicsAdvancedFeaturesExamples

AI Features Overview

Cursor's AI features are powered by Claude 4.5 Sonnet and designed to understand your entire codebase context.

AI Chat

Natural language conversations with Claude 4.5 Sonnet for code generation, debugging, and explanations.

Access: Cmd+L (Mac) / Ctrl+L (Windows)

Composer

Multi-file editing with AI that understands your entire project structure and maintains context.

Access: Cmd+I (Mac) / Ctrl+I (Windows)

Codebase Context

AI that understands your entire project, dependencies, and can reference specific files and functions.

Access: @-mentions in chat
1

AI Chat Commands

The AI Chat (Cmd+L / Ctrl+L) is your primary interface for interacting with Claude 4.5 Sonnet.

Basic Chat Commands

Code Generation

TEXT
Create a React component for a user profile card with:
- User avatar
- Name and email
- Edit button
- TypeScript types
- Responsive design

The AI will generate a complete, working React component with all requested features.

Code Explanation

TEXT
Explain this function and suggest improvements:

const processUserData = (users) => {
  return users.filter(user => user.active)
    .map(user => ({
      ...user,
      fullName: `${user.firstName} ${user.lastName}`
    }))
    .sort((a, b) => a.fullName.localeCompare(b.fullName));
}

The AI will explain the function's purpose, identify potential issues, and suggest improvements.

Debugging Help

TEXT
I'm getting an error "Cannot read property 'map' of undefined" in this code. Help me fix it:

const UserList = ({ users }) => {
  return (
    <div>
      {users.map(user => <div key={user.id}>{user.name}</div>)}
    </div>
  );
};

The AI will identify the issue and provide a solution with proper error handling.

Advanced Chat Features

@-mentions for Files

TEXT
@components/Button.tsx How can I add a loading state to this button component?

Reference specific files in your project for context-aware suggestions.

@-mentions for Functions

TEXT
@utils/formatDate Can you optimize this function for better performance?

Reference specific functions or variables for targeted improvements.

Chat Best Practices

✓

Be Specific

Provide clear, detailed requirements for better results.

✓

Include Context

Mention your tech stack, project structure, and constraints.

✓

Iterate and Refine

Ask follow-up questions to improve the generated code.

2

Composer Commands

Composer (Cmd+I / Ctrl+I) is Cursor's revolutionary multi-file editing feature that understands your entire codebase.

Multi-file Creation

Complete Feature Development

TEXT
Create a complete authentication system with:

Files to create:
- components/LoginForm.tsx
- components/RegisterForm.tsx
- components/ProtectedRoute.tsx
- context/AuthContext.tsx
- hooks/useAuth.ts
- types/auth.ts
- utils/auth.ts

Features needed:
- Email/password login
- User registration
- Protected routes
- JWT token handling
- Form validation
- Error handling
- TypeScript types

Composer will create all files with proper imports, types, and consistent code style.

API Integration

TEXT
Create a complete API integration for a blog system:

- API client with axios
- React Query hooks for data fetching
- TypeScript types for API responses
- Error handling and loading states
- Caching and invalidation strategies

Composer understands your existing project structure and creates consistent API patterns.

Multi-file Refactoring

State Management Migration

TEXT
Refactor the entire user management system from useState to Redux Toolkit:

- Create Redux store with user slice
- Update all components to use Redux
- Create selectors for user data
- Add middleware for async actions
- Update all imports and dependencies

Composer will update all related files while maintaining functionality.

Component Restructuring

TEXT
Break down the large Dashboard component into smaller, reusable components:

- Extract header, sidebar, and main content
- Create custom hooks for data fetching
- Implement proper prop drilling or context
- Add proper TypeScript interfaces
- Maintain all existing functionality

Composer understands component relationships and creates a clean architecture.

Composer Best Practices

Effective Prompts:

  • • Be specific about file structure
  • • Mention your tech stack and patterns
  • • Include requirements and constraints
  • • Specify naming conventions

Review Generated Code:

  • • Check imports and dependencies
  • • Verify TypeScript types
  • • Test functionality
  • • Follow your coding standards
3

Codebase Context Features

Cursor's AI understands your entire codebase and can reference specific files, functions, and project patterns.

@-mentions for Context

File References

TEXT
@components/UserCard.tsx How can I add a loading skeleton to this component?

The AI will analyze the specific file and provide context-aware suggestions.

Function References

TEXT
@utils/formatCurrency Can you add support for different currencies and locales?

The AI will understand the function's current implementation and extend it appropriately.

Multiple References

TEXT
@components/Button.tsx @components/Input.tsx Create a consistent design system for these components

The AI will analyze multiple files and create consistent patterns across them.

Codebase Search

Find Similar Patterns

TEXT
Find all components that use the useAuth hook and show me how they handle authentication errors

The AI will search your codebase and show you patterns and implementations.

Analyze Dependencies

TEXT
What dependencies does the UserProfile component have? Are there any circular dependencies?

The AI will analyze your project structure and identify dependency issues.

Context-Aware Suggestions

Project-Specific Code

TEXT
Create a new API endpoint that follows the same patterns as the existing user endpoints

The AI will analyze your existing API patterns and create consistent code.

Style Consistency

TEXT
Update this component to match the styling patterns used in the rest of the project

The AI will understand your project's styling conventions and apply them consistently.

4

Advanced AI Features

Code Generation Patterns

React Patterns

TEXT
Create a custom hook for form validation with:
- Field validation rules
- Error messages
- Dirty state tracking
- Submit handling
- TypeScript support

API Patterns

TEXT
Create a REST API client with:
- Request/response interceptors
- Error handling
- Loading states
- Caching strategy
- TypeScript types

Debugging Assistance

Error Analysis

TEXT
I'm getting this error: "Maximum update depth exceeded". Help me debug this React component:

[Paste your component code here]

The AI will analyze the error and provide specific solutions.

Performance Issues

TEXT
This component is re-rendering too often. Help me optimize it for better performance:

[Paste your component code here]

The AI will identify performance bottlenecks and suggest optimizations.

Code Review

Security Review

TEXT
Review this authentication code for security vulnerabilities:

[Paste your auth code here]

The AI will identify potential security issues and suggest improvements.

Code Quality

TEXT
Review this code for best practices and suggest improvements:

[Paste your code here]

The AI will analyze code quality and suggest improvements.

Next Steps

Now that you understand Cursor's AI features, learn about file management and code generation:

File Management

Learn efficient file and project management

Code Generation

Master AI-powered code generation techniques

OverviewBasicsAdvancedFeaturesExamples