The tool shelf.
Start with the workflow, not the hype. These guides explain what each tool is good for, where it breaks, and how to build a reliable habit around it — step by step.
Cursor
A fork of VS Code with AI baked into the editor itself.
Cursor is a code editor built on top of VS Code that integrates AI directly into the editing workflow. Instead of copy-pasting between a chat window and your editor, Cursor can read your entire codebase, make multi-file edits, run terminal commands, and iterate on your feedback — all from within the editor.
How to use Cursor
- 1
Download and install
Download Cursor from cursor.com and install it. Your VS Code extensions and settings transfer automatically, so you can switch without losing your setup.
- 2
Open a project folder
Open your repository in Cursor. The editor indexes your codebase so the AI can search across all files when answering questions or generating code.
- 3
Use Cmd+K for inline edits
Press Cmd+K (Ctrl+K on Windows) anywhere in a file to describe a change. Cursor proposes an edit you can accept, reject, or refine with a follow-up instruction.
- 4
Use Cmd+L for chat
Press Cmd+L to open a chat panel that can see your codebase. Ask it to explain a function, find a bug, or draft a feature. Reference specific files with @ to narrow the context.
- 5
Try the agent mode
In the chat panel, switch to agent mode. The agent can make changes across multiple files, run tests, and read terminal output to self-correct. Give it a bounded task and review the diff before committing.
- + Reference specific files or folders with @ to keep the AI focused on the right context.
- + Use .cursorrules files to give project-specific instructions (coding standards, architecture decisions).
- + Review every diff before accepting — the AI is fast but not infallible.
- ! Don't let the agent make unbounded changes across the whole repo in a single pass. Scope tasks tightly.
- ! Large generated diffs are harder to review. Ask for smaller, incremental changes instead.
Claude Code
A command-line AI agent that works directly in your repository.
Claude Code is a terminal-based AI coding agent. Instead of an editor plugin, it runs in your shell and can read files, search the codebase, make edits, run commands, and prepare commits. It is well suited for engineers who live in the terminal and want AI assistance without leaving their workflow.
How to use Claude Code
- 1
Install the CLI
Install Claude Code via npm: npm install -g @anthropic-ai/claude-code. You need an Anthropic API key or a Claude subscription to use it.
- 2
Navigate to your project
Open a terminal and cd into your repository. Claude Code operates on the current working directory, so it sees the files around it.
- 3
Start a session
Run claude to start an interactive session. You can type natural-language instructions like "find all uses of the deprecated API and list the files" or "add input validation to the login handler".
- 4
Let it search and edit
Claude Code can read files, search with ripgrep, make edits, and run shell commands. It shows you what it plans to do before executing, so you can approve or redirect.
- 5
Review and commit
After the agent finishes, review the changes with git diff. The agent does not commit automatically — you stay in control of what enters your history.
- + Give it a specific, bounded task: "fix the failing test in auth.test.ts" works better than "fix all the tests".
- + Use it for codebase exploration: "explain how the payment flow works" gives you a guided tour of the relevant files.
- + It can run your test suite and read the output to self-correct. Point it at the test command.
- ! Review file writes before accepting. The agent can make correct-looking but subtly wrong changes.
- ! Be cautious with commands that have side effects (deployments, migrations). Approve those manually.
v0
Describe an interface in plain English and get production-ready code.
v0 is an AI-powered interface generator. You describe a UI in natural language — a dashboard, a landing page, a form — and v0 produces responsive, accessible frontend code using React and Tailwind CSS. It is useful for designers and developers who want to skip the blank-canvas phase and start from a working draft.
How to use v0
- 1
Go to v0.app
Visit v0.app and sign in. No local installation is required — the tool runs in the browser.
- 2
Describe your interface
Type a description like "a pricing page with three tiers, a toggle for monthly and annual billing, and a FAQ accordion below". v0 generates a first draft in seconds.
- 3
Iterate with follow-ups
Refine the result with instructions like "make the middle tier highlighted" or "add a sticky header with a sign-in button". Each message updates the preview.
- 4
Copy the code
When you are happy with the result, copy the generated React and Tailwind code. Paste it into your project and adapt it to your data and routing.
- 5
Wire up real data
The generated code uses placeholder content. Replace the static data with your API calls, form handlers, and navigation logic.
- + Be specific about layout, spacing, and content. Vague prompts produce generic results.
- + Mention the framework and styling system you use so the output matches your stack.
- + Use it to explore variations quickly, then take the best ideas into your real codebase.
- ! Generated code may not match your existing design system. Plan to adjust colors, fonts, and spacing.
- ! Accessibility and responsive behavior are usually decent but should be verified in a real browser.
GitHub Copilot
AI inline suggestions and chat inside your existing editor.
GitHub Copilot integrates AI code completion and chat into VS Code, JetBrains, and Neovim. It suggests the next line or block as you type, and a chat sidebar can answer questions, explain code, and generate tests. It is the most widely deployed AI coding tool and works well as a lightweight daily assistant.
How to use GitHub Copilot
- 1
Install the extension
Install the GitHub Copilot extension from the VS Code marketplace (or the JetBrains/Neovim plugin). Sign in with your GitHub account and an active subscription.
- 2
Start typing and accept suggestions
As you type, Copilot shows grayed-out suggestions. Press Tab to accept, or keep typing to dismiss. The suggestions adapt to the surrounding code and comments.
- 3
Use Copilot Chat
Open the chat sidebar (Cmd+I or Ctrl+I) to ask questions about your code, request explanations, or generate functions. Reference files with @ to include them in context.
- 4
Generate tests and docs
Select a function and ask Copilot Chat to "write unit tests for this" or "add documentation comments". Review and adapt the output.
- 5
Use inline chat for quick edits
Press Cmd+I inline to describe a change in the middle of your code. Copilot proposes an edit you can accept or reject without switching to chat.
- + Write clear comments and function names. Copilot uses your context to make better suggestions.
- + Use it for repetitive tasks: generating similar functions, test cases, or data transformations.
- + Copilot Chat can explain unfamiliar code — select it and ask "what does this do?"
- ! Suggestions can look correct but use wrong APIs or types. Always review before accepting.
- ! Don't rely on it for security-sensitive code. Run your linters and security scanners as usual.