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".
A hands-on 10-minute walkthrough of Cursor's four core AI features: Tab Completion, Chat, Inline Edit, and Composer.
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).
Create src/utils.ts. Start typing and let Tab complete:
// 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 to accept word-by-word.
Type a comment describing what you want, then start the function:
// Validate an email address using regex
export function validateEmail(
// Sort an array of objects by a key
export function sortBy<T>(
// Calculate the distance between two lat/lng points in km
export function haversineDistance(
Tab reads your comment and generates the implementation.
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.
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:
Press Cmd+Y to accept, Esc to reject.
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"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.
npx tsx src/index.ts
| 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 |
.cursor/rules/ with coding standards (see cursor-rules-config skill)@Files, @Codebase, @Docs in Chat (see cursor-context-management skill)