KC Blog

Using Cursor IDE to Assist Code Development

9 min read
AI#cursor

Actual Results

  • App development is possible without writing code yourself through AI chat integrated into the IDE

    flutter

  • You can also interact with AI for specific parts only, using cmd+k directly at the cursor position in the editor.

    flutter

Table of Contents

Cursor Features

  • Cursor is an IDE built on vscode

    • It has built-in AI chat functionality that allows AI to develop programs and directly modify files
    • You can specify files in chat to provide them as references for AI, resulting in more accurate results flutter

  • Cursor supports common LLM settings

    • You can develop using the AI you're familiar with
flutter
  • You can also use your own API keys
flutter

  • Cursor Tab: The IDE suggests based on your code while coding. Similar to tab completion or suggestions in other IDEs.

    • Free users: Limited to 2000 suggestions, free of charge.
    • Professional and Business users: Unlimited Cursor Tab suggestions available after payment.

  • Cursor Composer: Write program code directly in the IDE to modify files, providing a true experience of writing code with just prompts.

  • CmdK: Use AI directly in the IDE's code editing page to modify code. Use the shortcut key cmd+k directly at the cursor position flutter

  • .cursorrules: Set basic rules for AI, making AI development more accurate and reducing errors.

    • Create a .cursorrules file in the root directory and set related prompts
    • Or set global rules directly in setting > General > Rule for AI

  • .cursorignore: Set files to ignore for AI.

  • You can enter @ in chat to incorporate relevant references flutter

Usage Steps

  • First, download and install cursor from the official site: https://www.cursor.com/

  • Open your project

    • Click open project to open your project

      flutter

  • Click flutter in the upper right to expand the chat window Or use the shortcut key CTRL / CMD + l

    flutter

  • Cursor's feature is that you can specify files for AI to reference. Click + Add context to select files

    flutter flutter

  • Or type @codebase directly in the dialog box, and cursor will use the entire codebase as a reference

    flutter

  • Other features are similar to general AI chat, such as switching llm models and uploading images

    flutter

  • Enter what you want AI to help with

    • Example: A commonly used method is to input an image to AI, add a prompt, and let AI create it

      flutter

  • Next is a process similar to code merging, where you review the changes made by AI

    • You can click accept or reject directly in the chat window

      flutter

    • Or you can navigate directly to the file and click

      flutter

Results

  • Results generated with claude-3.5.sonnet are very close to the UI diagram

    • All you need to do later is adjust the spacing, size, color, image resources, and code cohesion review for each component based on details set in UI/UX

      flutter

  • Or if you have new strings, it's also convenient to have AI generate them first and then fine-tune them later

    flutter

Usage Techniques

Properly utilizing .cursorrules and .cursorignore

  • Setting up .cursorrules

    • (Global) You can set cursor rules in setting > General's Rules for AI flutter

    • (This project only) Another way is to create .cursorrules in your project flutter

    • Project rule (project-specific rules): Setting > Project Rule > +Add new rule > Directly enter a file name and press Enter, and a .mdc file will be created in ../.cursor/xxx.mdc in your project flutter

  • Setting up .cursorignore

    • Documentation

    • Create a .cursorignore file in the root directory and add files/folders you want to ignore

      flutter

    • The rules are similar to .gitignore, and when set, cursorAI will not include the specified files when indexing (or scanning)

      • This saves wasted time scanning unnecessary files

      • You can also add sensitive data or files to prevent leaking confidential information or uploading to AI provider servers

      • However, the official documentation states that they are currently striving to achieve maximum ignoring of indices

        flutter

        Trying to achieve the following to the maximum extent

        flutter

    • This is based on .gitignore and will use it as a foundation if .gitignore already exists

    • If you can't find the location, you can find it in the IDE under Cursor Setting > Feature > Codebase indexing > Ignore file > Configure ignored files

      flutter

  • .cursorindexingignore

    • This file automatically inherits related content from .gitignore

      • Knowing that cursor indexes and references the codebase, the concept of this file is mainly to exclude large files or binary files unnecessary for development to improve the overall performance of chat

        flutter

    • Also, unnecessary files are set by default, but the content is long, so check the documentation as needed

      flutter

  • .cursorignore and .cursorrules settings can be downloaded from git for reference http://192.168.201.72:8080/admin/repos/CursorConfig,general

AI Chat

  • If your input is too large for AI to process, it's recommended to break it down into smaller parts, narrow the scope, or write more specific prompts.

  • In the Cursor chat window, you can enter @ to set specific types of content as references for AI

    • Example: With @Doc, you can add documents as references. If you have third-party APIs, you can pass them directly for reference (currently, @Doc only supports adding URL-type documents)

      flutter flutter

  • Utilize git: Save file changes frequently. Since cursor modifies files directly, if you find that something doesn't meet requirements after accepting, you can revert to a previous point (suitable for overall changes)

  • Utilize restore in the chat room: You can restore modification results made in the current conversation (suitable for single changes)

    flutter

Settings

  • You can enable privacy mode in the dropdown menu at Cursor setting > General > Private mode

    flutter

  • If you have an MCP Server you want Cursor to reference, you can add it at Cursor setting > feature > MCP Server

    flutter

  • You can add corresponding documents at Cursor setting > feature > Docs to make them default reference items for AI chat

    flutter

Git

  • Cursor IDE provides a git gui called source control that allows you to perform git operations with clicks

    flutter

    • The right edge of the commit message field has a generate commit message feature that generates based on commit messages in the current git graph

      flutter

    • However, in current experiments, it can't generate AirDroid's default template, even with the default format added to local git. Expected:flutter

      Actual:flutter

  • Another method is to use @Commit generate commit message in Chat to generate specified formats. This has been experimentally confirmed to generate our default templates

    flutter

Sharing Personal Cursor IDE Settings

  • Change the left side of the IDE to vertical

    • Open the command function with shortcut key CTRL/CMD + Shift + P

    • Enter Setting.json and click Preferences: Open User Settings (JSON)

      flutter

    • Add key workbench.activityBar.orientation, value vertical to the Json file, and restart Cursor

  • .cursorrules

    • Add according to each project's requirements. Here are some commonly used ones I'll share 
      - Don't make assumptions. 
- Don't silently fix errors
- Use my existing theme for colors,typography and spacing. 
- Ask questions when uncertain about my code or design. 
- Provide a list of tasks for accomplishing an implementation.
- always include a :) at the end of your response
      (The include a :) here is a way to check if the current .cursorrules is effective)
    • Generate using the cursor directory on the internet

  • Installing plugins

    • Cursor is currently based on vscode and doesn't have kotlin-related resources by default. To have kotlin recognized in cursor, download the plugin (this won't affect AI performance, but allows the IDE to identify .kt files)

    • Find and search for MARKPLACE or EXTENSION

    • Install other plugins (like git, java, etc.) according to your needs

      flutter

Thoughts

  • Cursor IDE integrates multiple features, simplifying the AI development process. It has features like directly applying AI suggestions to existing projects

    • Unfortunately, since this is an IDE extended from vscode, it lacks Android-related features like Android Studio
    • Advanced users overseas use cursor to generate code and AS to build and debug code. Example: I Made an Android App in MINUTES with This AI Tool

  • If you're doing a project in a language you're encountering for the first time not Android development, theoretically you can know where to place files faster and get started more quickly. Also, even people who don't do related work can learn development quickly.

  • While generating with AI is certainly convenient, I recommend understanding why it's written that way. This way, you can decide whether to accept AI's approach.

  • Pricing: There's a free usage limit, so try it first to see if it fits your development style before deciding to purchase.

    flutter

  • My free period ended, and cursor composer was locked, and I could no longer use the previous AI models XD. However, completely free chat (chat-only available) is provided, and if you set the model to cursor-small, you can still use it for free.

    flutter

Useful Sites