--- name: cursor-hello-world description: 'Create your first project using Cursor AI features: Tab, Chat, Composer, and Inline Edit. Triggers on "cursor hello world", "first cursor project", "cursor getting started", "try cursor ai", "cursor basics", "cursor tutorial". ' allowed-tools: Read, Write, Edit, Bash(cmd:*) version: 1.18.0 license: MIT author: Jeremy Longshore tags: - saas - cursor - cursor-hello compatibility: Designed for Claude Code, also compatible with Codex and OpenClaw --- # Cursor Hello World A hands-on 10-minute walkthrough of Cursor's four core AI features: Tab Completion, Chat, Inline Edit, and Composer. ## Setup ```bash mkdir cursor-hello && cd cursor-hello npm init -y npm install typescript tsx @types/node --save-dev npx tsc --init ``` Open the project in Cursor: `cursor .` (or File > Open Folder). ## Exercise 1: Tab Completion Create `src/utils.ts`. Start typing and let Tab complete: ```typescript // Type this much: export function formatCurrency(amount: number, currency: string // Tab suggests: export function formatCurrency(amount: number, currency: string = 'USD'): string { return new Intl.NumberFormat('en-US', { style: 'currency', currency, }).format(amount); } ``` Press **Tab** to accept the full suggestion, or **Cmd+Right Arrow** to accept word-by-word. ### Try These Prompts for Tab Type a comment describing what you want, then start the function: ```typescript // Validate an email address using regex export function validateEmail( // Sort an array of objects by a key export function sortBy( // Calculate the distance between two lat/lng points in km export function haversineDistance( ``` Tab reads your comment and generates the implementation. ## Exercise 2: Chat (Cmd+L) Open Chat with `Cmd+L`. Try these prompts: **Ask about your code:** ``` @src/utils.ts What does the formatCurrency function do? Does it handle edge cases like negative numbers or very large values? ``` **Generate new code:** ``` Write a TypeScript function that converts a nested object to a flat key-value map with dot-separated keys. Example: { a: { b: 1 } } → { "a.b": 1 } ``` **Debug a concept:** ``` Explain the difference between Promise.all() and Promise.allSettled() with code examples showing when to use each. ``` Chat responds with explanations and code snippets. Click **Apply** on any code block to insert it into your editor. ## Exercise 3: Inline Edit (Cmd+K) Open `src/utils.ts`. Select the `formatCurrency` function body. Press `Cmd+K`. Type your instruction: ``` Add support for locale parameter with default 'en-US'. Handle NaN input by returning '$0.00'. ``` Cursor shows the diff inline: - Green = added lines - Red = removed lines Press `Cmd+Y` to accept, `Esc` to reject. ### Inline Edit Quick Tasks Select any code and press `Cmd+K` with instructions like: - `"Add TypeScript types"` - `"Refactor to use early returns"` - `"Add error handling"` - `"Convert to async/await"` - `"Add JSDoc documentation"` ## Exercise 4: Composer (Cmd+I) Press `Cmd+I` to open Composer. Ask it to create a complete feature: ``` Create a simple task manager module: 1. src/types/task.ts - Task interface with id, title, completed, createdAt 2. src/services/task-service.ts - TaskService class with: - addTask(title: string): Task - completeTask(id: string): Task - listTasks(): Task[] - deleteTask(id: string): void 3. src/index.ts - Demo script that creates 3 tasks, completes one, lists all Use in-memory storage (Map). Include TypeScript types throughout. ``` Composer shows all files it will create/modify. Review each diff, then click **Apply All**. ### Run the Result ```bash npx tsx src/index.ts ``` ## Feature Comparison Summary | Feature | Shortcut | Use For | Scope | |---------|----------|---------|-------| | **Tab** | Automatic | Line/block completions while typing | Current cursor position | | **Chat** | `Cmd+L` | Questions, explanations, code snippets | Conversation-based | | **Inline Edit** | `Cmd+K` | Edit selected code with instructions | Selected code block | | **Composer** | `Cmd+I` | Multi-file generation and refactoring | Multiple files | ## Next Steps After Hello World 1. **Add project rules**: Create `.cursor/rules/` with coding standards (see cursor-rules-config skill) 2. **Index your codebase**: Open a real project and wait for indexing (see cursor-codebase-indexing skill) 3. **Learn @-mentions**: Use `@Files`, `@Codebase`, `@Docs` in Chat (see cursor-context-management skill) 4. **Configure your model**: Try different models for different tasks (see cursor-model-selection skill) ## Enterprise Considerations - Hello World exercises do not send sensitive code to AI providers -- safe for evaluation - Enable Privacy Mode before using Cursor with production codebases - Tab completions work immediately; Chat and Composer require active subscription or BYOK API key ## Resources - [Cursor Getting Started](https://docs.cursor.com/get-started/overview) - [Cursor Keyboard Shortcuts](https://docs.cursor.com/kbd) - [Cursor Feature Overview](https://cursor.com/features)