Cursor 2.0 AI Tutorial for Beginners

Key Concepts

Cursor 2.0: The latest major release of the AI code editor Cursor, featuring a new AI coding model and an enhanced interface for AI agent interaction.
AI Agents: Autonomous entities within Cursor that can perform tasks like writing code, running commands, modifying files, and interacting with external tools like browsers.
Composer 1 Model: A new, proprietary AI coding model developed by the Cursor team, known for its speed.
Agent View: The primary interface in Cursor 2.0, designed for an AI-centric workflow, focusing on features and tasks rather than individual files.
Editor View: The traditional view in Cursor, displaying files and their contents.
Plan Mode: A feature within Agent View that prompts the AI to create a detailed plan before executing code changes, allowing for review and correction.
Create Vololo App: An open-source starter kit for building applications, used in the demonstration to quickly set up a project.
Browser Integration: Cursor 2.0's ability to connect to and interact with a user's browser, allowing AI agents to inspect console logs, navigate URLs, and observe application behavior.
Revert Changes: A feature that allows users to undo AI-generated code modifications, providing a safety net and enabling experimentation.
Parallel Agent Execution: The capability to run multiple AI agents simultaneously, allowing for comparison of different approaches or model outputs.
AI Coding for Entrepreneurs Course: A course offered on Skillap AI that teaches AI coding skills, from basic scripting to full-stack application development using tools like Cursor.

Cursor 2.0 Release and New Features

Cursor 2.0 represents the most significant release from Cursor, introducing a custom-built AI coding model and a revamped interface for interacting with AI agents. The core philosophy has shifted towards a more "agentic AI-centric approach," moving away from the traditional editor-centric view.

Getting Started with Cursor 2.0

Download and Installation: Cursor is a desktop application. Users can download it from cursor.com.
Pricing: Cursor is a paid product with a one-week free trial. Pro plans are available, with potential for high costs depending on usage. The "ultra tier" and usage-based pricing are options for professional developers.
Project Setup: Upon opening Cursor, users can either open an existing project folder or clone a Git repository. The demonstration begins with an empty project folder.

Building a Habit Tracking Application with Cursor 2.0

The video demonstrates building a habit tracking application from scratch using Cursor 2.0's new features.

Project Initialization

Using Create Vololo App: To quickly establish a baseline, the speaker instructs Cursor to use "create Vololo app" to start the project. This command is executed in the Agent View using the Composer 1 model.
Composer 1 Model: This new AI model developed by Cursor is highlighted for its speed. Users can switch to other models like "sonnet 45" from a dropdown.
Functionality: The create Vololo app command sets up a basic front-end, back-end, and local database.
Server Start: The command pnpm rundev is used to start the server, which runs on port 5501.

Feature Development: Habit Tracking App

The speaker then opens a new agent to focus on specific features, aiming to build a habit tracking app where users can plant habits and see them grow.

Agent Mode vs. Plan Mode: The agent is switched to Plan Mode to generate a detailed plan before coding. This approach allows for AI-generated plans to be reviewed and corrected before implementation, preventing wasted effort.
Voice Input: The new voice input method is used to describe the app: "We are building a habit tracking app that allows users to plant habits and see them grow over time as they follow those habits day after day."
AI Planning and Execution: Cursor explores the codebase, clarifies details, and generates a plan. The Composer 1 model is noted for its speed in executing this plan.
Reviewing Plans: It's emphasized that reviewing AI-generated plans is crucial before allowing the AI to build them.
Agent Capabilities: Cursor agents can run commands, modify files, read files, search for data, and look up information online.
Code Generation: The agent writes 12 files, totaling over 1,000 lines of code.
Change Review: Cursor 2.0's new interface allows for file-by-file review of changes, making it easier to track modifications.
Find Issues Button: This feature allows Cursor to automatically review its own code for potential problems. In this instance, no issues were found.
Integrated Planning and Review: The speaker praises Cursor's integration of planning and review into the core workflow, noting that this was previously done manually using custom prompts.

Initial Application Testing and Debugging

Habits Page: The application now has a habits page. Creating a habit like "drinking water" daily is attempted.
Observed Issues: An issue with font color is noted, and planting a flower habit fails.
Browser Console Errors: Dev tools reveal errors.
Browser Integration for Debugging: Cursor 2.0's integrated browser feature is demonstrated. The speaker connects to Google Chrome and asks Cursor to "Please check the errors in the browser console log."
Autonomous Browser Interaction: The AI autonomously drives the browser, navigates to the correct page, checks logs, and identifies errors.
Reverting Changes: The ability to revert changes made by the AI is highlighted as a valuable feature, allowing users to return to a previous state.
Corrected Browser Context: The speaker re-initiates the browser interaction, specifying "browser tab" and providing the correct URL to ensure the AI is looking at the live application.
API and Database Issues: Errors related to pnpm db push are encountered. The speaker manually runs the command in a new terminal to update the database.
Successful Habit Creation: After fixing the database issue, creating a habit is successful.
Garden Page Issues: The garden page does not load correctly. Dev tools are used within Cursor to inspect logs.
AI-Assisted Fixes: The speaker describes the logs to Cursor, asking it to investigate the garden page issue. Cursor identifies and fixes the problem, resulting in the first planted habit.

Iterative Development and Parallel Agents

The development process continues with iterative improvements and the use of parallel agents.

Enhancing the Garden and Cleaning Up Pages

Parallel Agents: Two agents are run in parallel.
- Agent 1: Focuses on improving the garden page experience and removing unnecessary pages, keeping only the habits page.
- Agent 2: Aims to create a more interesting and engaging way to interact with the app on the garden page, switching to Plan Mode for a concrete plan.
Agent 1 Completion: Agent 1 finishes, modifying app.tsx and app.sidebar. The garden becomes the default landing page, and unnecessary pages are removed. Changes are accepted ("keep all").
Agent 2 Plan Review: Agent 2's plan is reviewed and approved, then built.
Feature-Level Development: The speaker emphasizes that Cursor 2.0 facilitates feature-level development, moving beyond individual files.

Addressing API and Database Issues in Development

API Errors: After implementing the second agent's feature, API issues re-emerge.
Database Migration: Cursor correctly identifies the need for new fields in the database and creates a migration file.
Real-World Challenges: The speaker notes that dealing with database errors and migrations is a common challenge in real-world application development.
AI Coding for Entrepreneurs Course: The speaker promotes their course on Skillap AI, which covers these topics.
Database Update: pnpm db push is run again to update the database, resolving the habit display issue.
Garden Interaction: Habits can now be selected and placed on the canvas in the garden.

UI Refinements and Drag-and-Drop Functionality

UI Squishing: The garden display appears "squished."
Select Element Option: The "select element" option is used to select UI elements and provide them as context to Cursor for specific UI changes.
Full-Width Garden: The request is made to "keep the habit seeds at the top so that we can see the garden in full width at all times."
Drag-and-Drop Limitation: Dragging and dropping elements is not yet functional. This is added as a to-do.
Scrolling Issue: A zoom-and-scroll issue is identified.
Batch Edits: The speaker compiles a list of edits and issues for Cursor to address.
New Agent for Habit Tracking Page: A separate agent is opened to add a page for tracking habits.

Parallel Agent Comparison and Model Diversity

Cursor 2.0's ability to run multiple agents in parallel is showcased for comparing different implementations and models.

Parallel Feature Implementation: Two agents are tasked with implementing the habit tracking page feature twice, allowing for comparison of the resulting versions.
Model Diversity: The demonstration includes running agents with different models: Composer 1 and Sonnet 45. This allows for comparing the outputs of different AI models.
Parallel Execution Monitoring: The progress of running agents is visible, with prompts appearing when human input is required.
Applying Changes: To see the changes in the UI, the "apply all" button for a specific agent must be clicked, applying its changes to the main branch.
Comparing Branches: The speaker demonstrates undoing applied changes and applying changes from another agent to compare different implementations.
Agent Failure: One agent fails to import a particular item, leading to its abandonment in favor of the working version.
Calendar View: The applied changes result in a calendar view for habit tracking.
Drag-and-Drop Feature: The drag-and-drop functionality, added by a parallel agent, is now functional.

Post-Development Assistance and Traditional Features

Even after development, Cursor's AI capabilities remain valuable for understanding and maintaining the codebase.

Understanding Codebase: A new agent is opened to ask about how the habit streak is tracked. Cursor reads files and provides an explanation.
Real-World Application of AI: This is compared to a personal experience of using Cursor to understand a previously developed project (create volo app).
Debugging Streak Discrepancy: An issue where the "zero days" display contradicts the calendar streak is identified. Cursor analyzes files to find the root cause and proposes a solution.
Implementing Fixes: The proposed solution is implemented by switching to agent mode and asking Cursor to "Please implement this in my code."
Streak Display Correction: After refreshing, the application now correctly displays the habit streak.

Traditional Cursor Features

While the focus is on Cursor 2.0's new agent-centric approach, traditional features are still accessible.

Editor View: Users can revert to the traditional editor view to see files side-by-side.
Integrated Browser: The new Cursor browser can still be used within the editor view for interaction.
File Navigation: The traditional file tree is available on the side.
Chat Interface: The chat interface remains on the right.
Feature-Level vs. File-Level Development: The speaker reiterates that the Cursor 2.0 agent view is highly effective for feature-level development, which is becoming the dominant paradigm.

Channel Update and Future Content

The speaker announces a shift in the channel's format.

Format Evolution: The channel will move away from tool-driven tutorials towards building "cool stuff" and showcasing the AI tools used in the process.
Focus on Real Projects: The new format aims to teach AI coding within the context of building real projects.
Upcoming Content: The new format will launch with three videos released simultaneously in the coming weeks.

Conclusion

Cursor 2.0 introduces a significant evolution in AI-assisted software development. The new agent-centric interface, coupled with a custom AI model and enhanced debugging tools like browser integration, streamlines the development process. The ability to plan, review, and execute features with AI agents, along with parallel execution for comparison, accelerates development and allows for more creative exploration. The emphasis on feature-level development and the seamless integration of debugging and problem-solving tools make Cursor 2.0 a powerful platform for building complex applications.