4IT580: Docs
4IT580 WebGitLab

12th Practical Class:
AI Prompting Guide for Developers

Modern AI Coding Tools Overview

Before we dive into Cursor specifically, it helps to understand where it fits in the current AI tooling landscape.

ChatGPT (Browser / App)

GitHub Copilot / Microsoft Copilot (Inline Assistant)

Cursor (AI-First IDE)

Introduction to Cursor

Cursor is an AI-powered code editor that has rapidly become the go-to IDE for TypeScript developers and modern web development. Built on top of VS Code, Cursor integrates AI assistance directly into your coding workflow, making it one of the most popular AI coding tools available today.

Why Cursor?

Core Concepts

Understanding Cursor's core concepts is essential for effective use. Based on the official Cursor documentation, here are the fundamental concepts:

Tab - Multi-line Autocomplete

Code completion that predicts multi-line edits. Press to accept suggestions based on your current code and recent changes. This is the fastest way to get code suggestions as you type.

Tab autocomplete in Cursor

Agent

An AI that can read and modify code across multiple files. Describe changes in natural language and Agent executes them. Agent can:

Agent mode in Cursor

Inline Edit

Edit selected code with natural language. Press (Mac) or (Windows/Linux) to describe changes and see them applied in place. Perfect for targeted edits to specific code sections.

Inline edit in Cursor

Chat

Interface for AI conversations supporting:

Rules (Project, User, Team, AGENTS.md)

Rules provide persistent, system-level instructions to Agent. They encode your coding standards, architecture patterns, and workflows and are applied automatically as part of the model context.

See the official Rules docs for the full model.

Cursor rules editor

Codebase Indexing

Semantic analysis of your codebase enabling:

Cursor automatically indexes your codebase to understand structure and relationships.

Codebase indexing in Cursor

MCP (Model Context Protocol)

Model Context Protocol is a standardized way to connect Cursor to external tools and services. Think of MCPs as plugins that give Cursor superpowers beyond just reading your code.

What is MCP? Diagram showing an AI application connected via MCP to databases, web APIs, GitHub, Gmail, Slack, and local filesystem

What MCPs can do:

Popular MCPs:

How to use MCPs:

  1. Install an MCP from the Cursor settings
  2. Configure it with necessary credentials (API keys, etc.)
  3. Use it in Agent mode - just ask Agent to use the MCP
  4. Example: "Use the Figma MCP to convert this design to React code"

MCPs make Cursor context-aware of your entire development ecosystem, not just your code.

Risks when using MCP servers

MCPs are powerful plugins. Use them like production integrations.

Mitigations

See the official MCP docs.

Context

Information provided to AI models during code generation, including:

Context management in Cursor

Models

Different AI models are available for both thinking (deep analysis) and implementation (code editing), each with different speed and capability characteristics. You can select models per conversation, per edit, and per mode (Ask vs Agent).

Model selection in Cursor

Core Cursor Features

Cursor provides three main ways to interact with AI:

1. Tab - Multi-line Autocomplete

What it is: Cursor's autocomplete model provides intelligent code suggestions as you type.

Usage: Simply start typing, and Cursor will suggest multi-line completions based on your codebase patterns.

2. Ctrl+K - Inline Edit

What it is: Edit a specific selection of code using natural language instructions.

Example: Select a function, press , type "Add error handling and logging", and Cursor will rewrite the function accordingly.

3. Chat with Agent - Full Agent Mode

What it is: A powerful AI agent that can make changes across multiple files, run commands, and test code.

Understanding Cursor Modes: Ask and Agent

Cursor provides two main modes for interacting with AI:

Ask Mode (Read-Only)

Purpose: Ask questions and explore your codebase without making changes.

Example: "How does the authentication flow work?" or "What's the best way to add a likes feature?"

Agent Mode (Implementation)

Purpose: Actually write and modify code autonomously.

Working with Agent: Direct vs Plan Approach

Agent can work in two ways:

1. Direct Approach (Default)

2. Plan Approach (Press )

How the Plan Approach works:

  1. Press when writing your prompt (or toggle Plan mode)
  2. Agent researches your codebase thoroughly
  3. Creates a structured, step-by-step plan
  4. Shows you the plan for review
  5. You can edit the plan - add, remove, or modify steps
  6. Once approved, Agent implements the plan

When to use the Plan Approach:

Example workflow:

Key insight: Plan mode isn't a separate mode - it's just Agent being more thoughtful and giving you a chance to review before acting.

The Recommended Workflow

For effective development, combine Ask and Agent modes:

  1. Ask Mode: Understand the codebase and requirements

    • "How does the current Quack module work?"
    • "What patterns are used for GraphQL mutations?"

  2. Agent with Plan enabled (for complex features):

    • Press to enable planning
    • "Add a likes feature to Quacks"
    • Review and edit the generated plan
    • Approve to proceed with implementation

  3. Agent without Plan (for simple tasks):

    • "Add error handling to this function"
    • Agent implements immediately

The key is choosing the right approach for the task complexity: Ask for understanding, Agent + Plan for complex work, Agent direct for straightforward edits.

Agent Tools and Capabilities

Agent has access to various tools that enable it to work autonomously:

Tools Available to Agent

File Operations:

Terminal Commands:

Codebase Search:

MCP Servers:

Web Search:

Reviews - Code Review Process

When Agent makes changes, it can:

Automatic Reviews:

Manual Reviews:

Review Workflow:

  1. Agent proposes changes
  2. You review the diff
  3. Approve, reject, or request modifications
  4. Agent applies approved changes

Browser Testing

Agent can test your application in a browser:

Capabilities:

When it's used:

Example: After implementing a login form, Agent can open the browser, navigate to the login page, and test that the form works correctly.

Security Features

Cursor has built-in security measures to protect sensitive information:

Environment Files Protection:

File Exclusions:

Best Practices:

What's Protected:

Note: While Cursor protects these files by default, always be cautious and review what Agent is doing, especially when it needs to access configuration files.

Inline Edit (Ctrl+K) Deep Dive

The inline edit feature is one of Cursor's most powerful tools:

How It Works

  1. Select code: Highlight the code you want to modify
  2. Press Ctrl+K: Opens inline edit prompt
  3. Describe changes: Type what you want in natural language
  4. Review & accept: Cursor shows the changes, you accept or modify

Examples

Refactoring:

Bug Fix:

Feature Addition:

Tips for Inline Edit

Rules in Cursor (Project Rules, AGENTS.md, Legacy )

Cursor uses Rules to give Agent persistent guidance across projects (official docs):

Rules are applied to Agent (Chat). They do not affect Tab autocomplete or Inline Edit (Cmd/Ctrl+K), which is consistent with the official FAQ in the Rules docs.

Project Rules:

Project Rules live in directories and are written in MDC (), which supports optional metadata and markdown content. They are version-controlled and can be scoped to the whole repo or to specific subdirectories.

Use Project Rules to:

Example Project Rule (simplified)

AGENTS.md

is a simpler, plain-markdown alternative. Place it in your project root (and optionally in subfolders) when you want straightforward, human-readable instructions without MDC metadata.

For student projects, is often the fastest way to teach Cursor how you want the code to look and feel.

User and Team Rules

(legacy)

The older single-file in the project root is still supported but is explicitly marked as legacy and will be deprecated in the Cursor docs.

For new projects, prefer Project Rules in or , and gradually migrate any existing content into those newer mechanisms.

MCPs (Model Context Protocol)

MCPs allow Cursor to connect to external tools and services in a standardized way:

In practice, MCPs are most useful when you want Cursor to:

MCPs extend Cursor's capabilities beyond just code generation—they enable it to interact with your entire development ecosystem.

Working with Documentation in Cursor

Cursor provides multiple ways to work with documentation while you code:

For students, the most important takeaway is: you can and should ask Cursor about docs instead of constantly alt-tabbing—but always skim the underlying source it cites to build your own understanding.

Complete Feature Development with Cursor

One of Cursor's most impressive capabilities is generating complete, production-ready features including:

✅ Backend implementation (GraphQL resolvers, services, types)
✅ Frontend implementation (components, hooks, queries)
✅ Database migrations (Prisma schema changes)
✅ Unit tests (Vitest, React Testing Library)
✅ Integration testing (browser automation)
✅ Documentation updates (README, code comments)
✅ Code review (linting, formatting, best practices)

The Workflow

  1. Start with Ask mode: Understand the codebase and requirements
  2. Use Agent mode with Plan approach: For complex features, press to get a plan first
  3. Review and approve the plan: Edit if needed, then let Agent implement
  4. Review changes: In Auto mode, Agent asks before applying changes
  5. Iterate with inline edits: Refine specific parts with Ctrl+K
  6. Test and review: Always review generated code
  7. Update .cursorrules: Add new patterns if needed

Example: Adding Likes Feature to Quacker

Let's see a practical example of implementing a complete feature using Cursor effectively.

Step 1: Understanding (Ask Mode)

Start with Ask mode to understand the codebase:

Step 2: Implementation with Planning (Agent Mode)

For this complex feature, use Agent mode with the Plan approach ():

Agent will:

  1. Research your codebase thoroughly
  2. Create a detailed, step-by-step plan
  3. Show you the plan for review
  4. You can edit the plan before approving
  5. Once approved, Agent implements everything

Alternative: Direct Implementation (Agent Mode)

If you prefer to give Agent all the details directly (without planning first), you can use the direct approach:

Step 3: Refinement (Inline Edit)

Use Ctrl+K for specific refinements:

What Cursor Will Do

  1. Analyze the existing Quack module structure
  2. Create Prisma migration for Like model
  3. Implement backend resolver, service, and repository
  4. Update GraphQL schema and types
  5. Create frontend like button component
  6. Add GraphQL mutation hook
  7. Write unit tests
  8. Test in browser (if Background Agent is enabled)
  9. Update documentation

Real-World Example: Plan Mode in Action

Here's a video recording of implementing the likes feature using Agent mode with Plan approach ():

Setup and Context

Before starting:

Model used: Composer 1 in Max mode (more expensive, pay-per-use, but with much larger context window for better codebase understanding)

What Went Well ✅

What Went Wrong ❌

  1. Got stuck on issues: Agent encountered some problems that took multiple attempts to resolve, requiring manual intervention and guidance

  2. Browser testing limitations: Cursor's browser testing feature is not very mature yet. Agent was unable to properly fill in the login form during testing, limiting the effectiveness of automated browser verification

  3. Pattern adherence: Agent didn't always follow project patterns perfectly:

    • Created helper functions inline in seed files instead of extracting them to separate utility functions
    • Added likes service to the existing quacks module rather than creating a separate likes module (which might have been preferred for better separation of concerns)

  4. Unit test issues: Agent attempted to create a unit test but failed to fix syntax errors in it, requiring manual correction

  5. Manual handling required: Despite using Max mode (more autonomous), the process still required significant manual oversight and intervention throughout

Key Takeaways

Time taken: Including all issues, pauses, and manual interventions, the complete implementation took 26 minutes (video is sped up for viewing).

The importance of Rules: This example demonstrates why having proper or project rules in place is crucial. With better guidance about:

The implementation would likely have been significantly faster and required less manual intervention. Rules help Cursor understand your team's preferences and avoid common pitfalls.

Recommendation: Set up project rules ( or ) early in your project to guide Cursor's behavior and reduce the need for manual corrections.

Tips for Effective Prompting

  1. Start with Ask mode: Understand the codebase before making changes
  2. Use Plan approach () for complex tasks: Get a structured plan first
  3. Be specific: Include exact field names, types, and requirements
  4. Reference existing patterns: "Follow the same pattern as addQuack"
  5. Include edge cases: "Handle duplicate likes gracefully"
  6. Specify testing: "Add tests for X, Y, Z scenarios"
  7. Mention styling: "Match existing component styles"
  8. Break down complex features: Let Agent create a plan, then review it
  9. Use Auto: Let Agent propose diffs, but always review before applying
  10. Edit plans before approving: Refine the plan when Agent shows it to you

Best Practices

Do's ✅

Don'ts ❌

Advanced: Multi-Step Features

For complex features, break them into steps:

Use Ask mode to understand, then Agent mode with Plan approach () to create a structured plan. Review and approve the plan, then Agent implements it. With Auto mode enabled, you'll review changes before they're applied.

Pricing Considerations

Conclusion

Cursor is a powerful tool that can dramatically accelerate development when used correctly. The key is:

  1. Understanding the different modes (Ask vs Agent) and approaches (Direct vs Plan, Auto vs Max)
  2. Using the right tool for each task (Tab, Ctrl+K, or Agent)
  3. Writing effective prompts that are specific and detailed
  4. Reviewing and refining the generated code
  5. Using .cursorrules to maintain consistency
  6. Iterating on your prompting skills

Remember: Cursor is a pair programming partner, not a replacement for understanding code. Always review, test, and understand what it generates!

Quick Reference

Mode Selection Guide