Shippable Studio

How to use Cursor to launch your startup idea

Cursor has generated immense buzz in 2024. Developers are leveraging it to build products at unprecedented speeds, and even non-technical founders are using it to prototype ideas and launch MVPs.

However, for beginners, it can feel overwhelming. Let's explore how to configure Cursor to maximize its potential.

  1. What is Cursor?
  2. The AI Pane and Composer
  3. Setting up Cursor
  4. Cursor Rules
  5. Got stuck?
  6. Wrapping up

What is Cursor?

Cursor is an AI-powered code editor revolutionizing how code is written. At its core, it employs various AI models to offer suggestions, answer queries, and even write code on your behalf.

As a fork of the popular Visual Studio Code (VS Code), switching is easy for most developers. When utilized correctly, it acts as a tireless "intern" or assistant for your startup, available 24/7.

The AI Pane and Composer

In Cursor, you will primarily use two workflows: the AI Pane and Composer. Let's break them down.

The AI Pane

The AI Pane is a chat interface where you interact with the AI. You can ask questions about your code and receive intelligent suggestions.

AI Pane toggle

You can reference specific files using @filename.

Rule of thumb: Provide as much context as possible. To fix a bug, mention the specific file and describe the issue.

To implement a new feature, describe it in detail and tag the relevant files. For larger features spanning multiple files, reference the entire codebase with CMD + ENTER.

Interaction is key—your first response may not be perfect, so continue guiding the conversation.

Tip: periodically re-index your project so Cursor is aware of the latest changes. Go to Cursor Settings > Features > Codebase indexing.

Composer

Cursor Composer is a powerful feature that generates entire applications from high-level instructions.

Enable it under Cursor Settings > Beta > Composer.

Cursor Settings > Beta > Composer

Toggle Composer with CMD + I (MacOS) or CTRL + I (Windows).

Cursor Composer window

Composer works similarly to the AI Pane but takes it a step further: instead of just showing code, it automatically generates and modifies files in your project.

Setting up Cursor

Setup is straightforward. Visit the Cursor website, download the editor, and try it for free.

Spend some time exploring the interface. Once comfortable, use these tips to enhance your experience.

Choose the AI model

Cursor allows you to select your preferred AI model. Currently, the best general-purpose model is claude-3.5-sonnet.

Ensure claude-3.5-sonnet is selected in Cursor Settings.

Cursor Settings

Then, select claude-3.5-sonnet in the AI Pane dropdown to make it the default for new chats.

Cursor AI Pane

Note: The top model may change, so check back periodically.

Cursor Pro

Cursor offers a free tier, but heavy users should consider Cursor Pro.

For $20/month, you get unlimited completions and requests. While you can bring your own API key, the Pro plan is generally more cost-effective and convenient.

Cursor Pro Pricing

Cursor Rules

Cursor recently introduced "Rules" to guide the AI. Depending on your tech stack or product, defining these rules is crucial.

You can specify what the AI should do, what it should avoid, and formatting preferences.

Enable "Include .cursorrules file" in Cursor Settings > General.

Cursor Settings > General > Rules for AI

Create a .cursorrules file at your project root. Here is the configuration we use at Shippable for our web applications:

text
You are an expert full-stack web developer focused on producing clear, readable Next.js code.

You always use the latest stable versions of Next.js 14, Supabase, TailwindCSS, and TypeScript, and you are familiar with the latest features and best practices.

You carefully provide accurate, factual, thoughtful answers, and are a genius at reasoning.

Technical preferences:

- Always use kebab-case for component names (e.g. my-component.tsx)
- Favour using React Server Components and Next.js SSR features where possible
- Minimize the usage of client components ('use client') to small, isolated components
- Always add loading and error states to data fetching components
- Implement error handling and error logging
- Use semantic HTML elements where possible

General preferences:

- Follow the user's requirements carefully & to the letter.
- Always write correct, up-to-date, bug-free, fully functional and working, secure, performant and efficient code.
- Focus on readability over being performant.
- Fully implement all requested functionality.
- Leave NO todo's, placeholders or missing pieces in the code.
- Be sure to reference file names.
- Be concise. Minimize any other prose.
- If you think there might not be a correct answer, you say so. If you do not know the answer, say so instead of guessing.

For more inspiration, visit Cursor Directory.

Got stuck?

If you hit a roadblock, try searching the Cursor Community Forum.

For hands-on assistance, reach out to us at Shippable. Cursor is integral to our process, helping us turn ideas into market-ready MVPs in under a month.

Wrapping up

Cursor is reshaping product development.

  • Developers can build faster.
  • Non-technical users can prototype effectively.
  • Customization via models and Rules tailors the tool to your needs.

The learning curve is real, but the rewards are well worth the effort.