How to Become an Expert in AI-Assisted Coding

Imagine writing code 3-4x faster while maintaining quality. That's what AI-assisted development can offer. In simple terms, you can be more productive with AI tools like GitHub Copilot as your coding partner. They suggest code, help you debug, and speed up repetitive tasks.

Why This Matters

When coding traditionally, you’re typing every line yourself, searching documentation, and figuring out syntax. With AI, you can:

Focus on solving problems instead of remembering syntax
Learn faster by seeing good code examples in real-time
Build projects quickly without sacrificing quality

Research shows that experienced developers can complete tasks faster with AI assistance. But here's the key: you need to know how to use these tools effectively. And you need a bit of background in programming to do that.

Interested? Let’s dive into the world of AI-based coding tools that have taken the world by storm.

Essential AI Terminology
When to Use AI vs When to Code Yourself
Prerequisites
Your Complete Learning Journey
How to Generate Your First AI-Assisted Code (Quick Start)
Stage 1: Foundation – Getting Started with AI Coding
Stage 2: Advanced GitHub Copilot Features
Stage 3: CLI-Based AI Agents (Claude Code & Gemini)
Stage 4: Mastery – Combining Tools and Advanced Workflows
Common AI Issues
What's Next After Completing All Stages?
Conclusion

Essential AI Terminology

Before we get started, let’s make sure you understand these key terms:

Tokens: Think of tokens as "word pieces" – how AI reads your code and text. Each character, word, or symbol uses tokens. Free tiers limit how many tokens you can use.
Context Window: How much code/conversation the AI can "remember" at once. Like short-term memory, larger windows mean better understanding of your project.
Hallucinations: When AI confidently suggests wrong information – like making up functions that don't exist. Always verify AI suggestions!
Prompt: Your instructions to the AI – comments, questions, or requests that guide what code it generates.

When to Use AI vs When to Code Yourself

Use AI for:

Writing boilerplate code (getters, setters, basic CRUD)
Learning new frameworks or syntax
Writing tests and documentation
Refactoring repetitive patterns
Getting unstuck on syntax errors

Code yourself when you’re:

Designing system architecture
Making security-critical decisions
Writing complex business logic
Learning new concepts (first time)
Working on performance-critical optimizations

The Golden Rule: Use AI to speed up implementation, but keep architectural decisions to yourself. AI is excellent at "how", but you decide "what" and "why."

Prerequisites

Before starting this tutorial, you should have:

Basic programming experience – You can write simple programs in any language
A code editor installed – VS Code is recommended (free from code.visualstudio.com)
Basic Git knowledge – You know how to commit and push code
Free to start – Many tools now have generous free tiers, and paid plans start around $10-20/month

Your Complete Learning Journey

This comprehensive tutorial is structured as a step-by-step program to transform you into an AI-assisted development expert:

Note: To keep the tutorial approachable, we’ll just focus on a core handful of tools. But you should research and explore more tools that might fit your specific needs beyond the ones we use here.

Your Learning Path:

You'll progress through 4 stages: mastering GitHub Copilot basics, unlocking advanced features like chat modes and agents, exploring CLI tools (Claude Code & Gemini), and finally combining multiple tools strategically for complete project workflows.

First, let's quickly see how you can generate your first AI code snippet.

How to Generate Your First AI-Assisted Code (Quick Start)

Let's start with the absolute basics. Don't worry about choosing the "perfect" tool – you can always switch later. Here's how to get started:

GitHub Copilot (Recommended for Beginners)

You can install GitHub Copilot by following these steps:

Open VS Code
Click the Extensions icon (or press Ctrl+Shift+X)
Search for "GitHub Copilot"
Click "Install"
Sign in with your GitHub account

GitHub Copilot has a free tier (2000 code completions + 50 chat requests per month), which should be enough for this experiment.

TIP: Students, teachers, and OSS maintainers can get the Pro plan for free, which provides unlimited usage instead of the free tier limits.

Your First AI Suggestion

Once installed, create a new file called test.js and type:

// function to calculate the area of a circle

Press Enter and wait. You'll see gray text appear – that's your AI suggestion! Press Tab to accept it.

That’s it! You’ve just gotten your first AI suggestion! Isn’t that cool?

Stage 1: Foundation – Getting Started with AI Coding

Step 1: Understanding Your Options

Think of AI coding assistants like different types of helpful friends and colleagues. Let’s cover a few:

IDE-based: Some tools are designed to work with familiar code editors or are a standalone fork of editors like VS Code. For example:

GitHub Copilot (VS Code Extension) – An AI coding assistant from GitHub, works directly in VS Code with tab completion and chat features
Cursor (Standalone) – VS Code fork with enhanced agent modes, faster autonomous coding, and better handling of large codebase refactoring
Windsurf (Standalone or VS Code Extension) – Focuses on collaborative AI development with real-time suggestions and team features
Zed – High-performance editor with built-in AI assistance and fast rendering

CLI-based: Some tools are CLI-based, which you can launch within your terminal app:

Claude Code – Anthropic's terminal AI for autonomous development sessions and complex reasoning
Gemini – Google's CLI tool with large context windows and multimodal capabilities (images, documents)
OpenCode – Open-source alternative with customizable models and local processing options
Cursor CLI – Terminal version of Cursor for command-line AI assistance

UI-based and Background Agents: Besides these, there are also background agents and tools that can operate entirely in the background, such as performing pull-request reviews and more.

For example, both ChatGPT and Claude's desktop app can edit files on your local file system if you set them up. Similarly, some cloud-based agents can "run in the background" to complete your instructions. We will exclude these from the scope of this guide.

Step 2: Making Your Choice & Learning Automatic Suggestions (Tab Completion)

For your first stage, I recommend starting with either GitHub Copilot. You can always switch to the tool that fits your needs after you learn the basics.

Step 3: Step-by-Step Setup

How to Set Up GitHub Copilot (You can skip this if you already followed the Quick Start earlier)

Open VS Code. If you don't have it, download from code.visualstudio.com.
Install the Extension
- Press Ctrl+Shift+X (Windows/Linux) or Cmd+Shift+X (Mac)
- Type "GitHub Copilot" in the search box
- Click the blue "Install" button
- You'll see a pop-up asking you to sign in
Sign In
- Click "Sign in to GitHub"
- Your browser will open
- Log in with your GitHub account (create one free at github.com if needed)
- Click "Authorize GitHub Copilot"
Start using Copilot
- Back in VS Code, you'll see "GitHub Copilot is ready"

Step 4: Mastering Tab Completion

Let's make sure it's working. Create a new file: hello.py. Type this comment and press Enter:

# function to greet a user by name

Wait 1-2 seconds. You should see gray text appear. Just press Tab to accept the suggestion.

What you should see:

# function to greet a user by name
def greet_user(name):
    return f"Hello, {name}!"

If you see this, congratulations! You're now using AI to help you write code.

If you’re having setup issues you can check the Troubleshooting Quick Reference for solutions.

Step 5: Essential Keyboard Shortcuts & First Practice

Here are the only shortcuts you need for your first week:

The Basics:

Tab – Accept the AI suggestion (use this the most!)
Esc – Dismiss the suggestion (when you don't want it)

When you're ready for more, try these:

Windows/Linux:

Alt+] – See the next suggestion
Alt+[ – See the previous suggestion
Ctrl+Enter – See all suggestions in a panel

macOS:

Option+] (or Alt+]) – See the next suggestion
Option+[ (or Alt+[) – See the previous suggestion
Ctrl+Enter – See all suggestions in a panel

Stage 1 Practice Exercise

Exercise: Build a Simple Todo App

Create a new file called todo.js
Start with this comment: // TODO app with add, remove, and list functions
Add this comment and wait for AI suggestions: // function to add a new todo item
Accept the suggestion with Tab if they look good to you
Continue adding comments for remove and list functions
Test your functions to make sure they work

Goal: Learn to "converse" with AI through clear comments and build confidence accepting/rejecting suggestions.

Need help? See the Troubleshooting Quick Reference for common issues and solutions.

Ready for the next stage? Before moving on, make sure you can:

- [ ] Get AI suggestions by typing comments
- [ ] Accept suggestions with Tab and dismiss with Esc
- [ ] Use Alt+] and Alt+[ to see different suggestions
- [ ] Write basic functions with AI help

If you're comfortable with these basics, you're ready to learn more powerful Copilot features.

Stage 2: Advanced GitHub Copilot Features

Step 6: Getting Better AI Suggestions

Now that you know the basics, let's learn how to get much better suggestions from your AI. The secret is understanding what your AI can see.

What Your AI Assistant Sees

Think of your AI assistant like a helpful friend looking over your shoulder. It can see:

What you're typing right now – Your current file
Other open tabs – Files you have open (this is important!)
Your project structure – Folder and file names
Your comments – This is how you "talk" to the AI

The "Neighboring Tabs" Trick

Here's a pro tip that will save you hours: Keep related files open in tabs.

Example: If you're writing a React component:

Have your component file open (Button.jsx)
Also, open your CSS file (Button.css)
Keep your test file visible too (Button.test.js)

You can then share these additional files as context with the AI in several ways:

@mention files: Type @filename.js in chat to reference specific files
Use @workspace: This chat participant can see all files in your project
Drag and drop: Simply drag files from the explorer into the chat window
Select code: Highlight code and right-click "Ask Copilot" to include it in context

The AI uses these open files to understand your project structure and suggest more relevant code that matches your existing patterns.

Step 7: Quality Control & Best Practices

Understanding AI Limitations

AI is powerful but it’s not perfect. Here are the key things to watch for:

Common AI Mistakes:

Made-up functions: for example, const result = array.superSort(); doesn't exist!
Wrong parameters: for example, greetUser("John", "Doe"); when function expects greetUser(name)
Overcomplicated solutions: for example, const isEven = (num) => num.toString(2).slice(-1) === "0"; – just use num % 2 === 0

Quick quality checklist:

- [ ] Test the code - does it actually work?
- [ ] Read it - does it make logical sense?
- [ ] Check basics - are all functions/variables defined?
- [ ] Trust instincts - if it feels wrong, investigate

Security Essentials

Before accepting AI suggestions, make sure you check for these security issues:

- [ ] No hardcoded passwords or API keys
- [ ] User input is validated
- [ ] No eval() with user data
- [ ] Error messages don't expose sensitive info

Better Prompt Writing

Here’s a formula for writing solid prompts: What + How + Return type.

// ❌ Vague: "make function"
// ✅ Clear: "function to validate email format using regex, returns boolean"

Repository-Level Customization with Copilot Instructions

GitHub Copilot now supports repository-level customization through .github/copilot-instructions.md files. This feature helps Copilot understand your project's specific patterns and conventions.

Here’s how to set up Copilot instructions:

# Create GitHub directory if it doesn't exist
mkdir -p .github
touch .github/copilot-instructions.md

Example copilot-instructions.md file:

# Copilot Instructions

## Code Style

- Use React functional components with hooks
- Prefer TypeScript over JavaScript for new files
- Use Tailwind CSS for styling
- Follow the existing file structure in `/src/components`

## Testing

- Write tests with React Testing Library
- Place test files in `__tests__` directories
- Use descriptive test names that explain the behavior

## API Patterns

- Use custom hooks for API calls
- Handle loading and error states consistently
- Use React Query for data fetching

## Naming Conventions

- Components: PascalCase (e.g., `UserProfile.tsx`)
- Hooks: camelCase starting with 'use' (e.g., `useUserData.ts`)
- Utilities: camelCase (e.g., `formatDate.ts`)

What this enables:

Copilot suggests code that matches your project patterns
Automatically follows your naming conventions
Suggests appropriate testing approaches
Understands your preferred libraries and frameworks

Best practices:

Keep instructions clear and specific
Update them as your project standards evolve
Include examples of preferred patterns
Mention libraries and frameworks you use

Step 8: Unlocking Advanced Copilot Features

Understanding Your Options

GitHub Copilot offers multiple ways to get AI help:

Tab Completion (what you've been using) – Suggestions while typing
Chat Mode – Have conversations with AI about your code
Edit Mode – Ask AI to modify existing code
Agent Mode – Let AI work autonomously on big tasks

We’ll discuss these modes in more detail below so you know how they work and when you should use them.

Model Selection

Copilot now offers different AI models for different needs:

Free with subscription:

GPT-4.1 – Default model with solid all-around performance
GPT-4 – Reliable for most coding tasks

Premium models (limited monthly usage):

Claude 3.5 Sonnet – Great for complex logic
GPT-5 – Latest and most capable
Gemini 2.0 Flash – Very fast responses

How to switch models: Click the model dropdown in Chat view

Tip: Start with free models (GPT-4.1) for learning, and save premium models for complex problems.

GitHub Copilot Limitations

Here are some important things to consider when you’re using AI to help you out with your coding:

Internet dependency – Requires stable connection for suggestions
Context limitations – Only sees open files, not your entire project structure
Free tier limits – 2,000 completions and 50 chat requests per month
Code quality varies – Always review suggestions, especially for security-sensitive code
Learning curve – Takes time to write effective prompts for complex tasks
Privacy considerations – Your code is sent to GitHub's servers (check your organization's policies)

Basic Chat vs Suggestions

So you might be wondering - when should you use tab completion vs when should you use chat? It’s best to use tab completion for writing new functions, quick syntax help, and completing patterns. You can use chat for explaining existing code, getting help with errors, and planning your approach to problems.

Try it: Open Chat (Ctrl+Shift+I) and ask: "What does this function do?" while selecting code.

Step 9: Mastering Chat and Agent Modes

The Three Chat Modes

Ask Mode (Default) – for questions and explanations:

"What does this function do?"
"How can I optimize this code?"
"Explain this error message"

Edit Mode – For making changes to existing code:

"Refactor this to use async/await"
"Add error handling to all API calls"
"Convert this to TypeScript"

Shows inline diffs before applying changes
Works across multiple files
Great for systematic refactoring

Agent Mode – For autonomous development:

"Create a REST API with authentication"
"Build a todo app with React and testing"
"Migrate this codebase from Vue 2 to Vue 3"

Press Shift+Cmd+I (Mac) or Ctrl+Shift+I (Windows/Linux)
Works independently for hours
Installs packages, creates files, runs tests automatically

When to Use Each Mode

Each mode has its particular use cases. Use ask mode when you’re learning new concepts, you want to understand existing code, for getting explanations, and for planning approaches.

Use edit mode when you’re refactoring existing code, applying consistent changes, adding features to existing functions, or for style/pattern updates.

Agent mode is useful for building complete features (30+ minutes of work), setting up new projects, large-scale refactoring, and for when you want to work on other things while AI codes.

Agent Mode Examples

Small agent task (15 minutes):

"Add user authentication to my Express app"

What the agent generated:

// middleware/auth.js
const jwt = require('jsonwebtoken');

const authenticateToken = (req, res, next) => {
  const authHeader = req.headers['authorization'];
  const token = authHeader && authHeader.split(' ')[1];

  if (!token) return res.sendStatus(401);

  jwt.verify(token, process.env.ACCESS_TOKEN_SECRET, (err, user) => {
    if (err) return res.sendStatus(403);
    req.user = user;
    next();
  });
};

// routes/auth.js
router.post('/login', async (req, res) => {
  // Authentication logic with bcrypt
  const accessToken = jwt.sign({username: user.username}, process.env.ACCESS_TOKEN_SECRET);
  res.json({accessToken: accessToken});
});

Key issues I found: The agent initially forgot to hash passwords and didn't include refresh tokens. This required one iteration to fix security gaps and add proper error handling.

Large agent task (4+ hours):

"Modernize this React class-based app to hooks with TypeScript"

What the agent generated:

// Before (Class component)
class UserProfile extends React.Component {
  constructor(props) {
    this.state = { user: null, loading: true };
  }
  // ... lifecycle methods
}

// After (Hooks + TypeScript)
interface User {
  id: number;
  name: string;
  email: string;
}

const UserProfile: React.FC = () => {
  const [user, setUser] = useState<User | null>(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetchUser().then(setUser).finally(() => setLoading(false));
  }, []);

  return <div>{loading ? 'Loading...' : user?.name}</div>;
};

Key issuesI found: the agent successfully updated 47 files, but initially had typing issues with event handlers and needed refinement of generic types. The automated tests also required manual review to ensure proper TypeScript coverage.

Using Chat Participants

Chat participants are specialized AI assistants that have access to specific parts of your development environment. Think of them as experts in different areas who can help with targeted tasks.

They’re basically AI helpers prefixed with @ that have special knowledge and capabilities:

@workspace has access to your entire project structure, and can search files and understand relationships between components. Use @workspace when you need project-wide analysis: "Find all API endpoints in this project" or "Show me where user authentication is implemented."
@terminal knows about command-line operations, and can suggest shell commands and explain terminal output. Use @terminal for command-line help: "What command runs the tests?" or "How do I build this project for production?"
@vscode is an expert in VS Code features, and can help with settings, debugging, and editor configuration. Use @vscode for editor assistance: "Set up debugging for Node.js" or "Configure auto-formatting for this project."

Example usage:

@workspace Can you find all the database models in this project?
@terminal What's the command to install dependencies and start the dev server?
@vscode How do I set up breakpoints for debugging this Express app?

Step 10: Power User Features and Advanced Workflows

Beyond the core Copilot features you've learned, there are specialized tools and commands that can supercharge your productivity. These features go beyond basic chat modes and model selection, focusing on complex multi-file operations and advanced automation.

Advanced Slash Commands

/doc - Generate documentation
/explain - Detailed code explanation
/fix - Fix errors in selected code
/tests - Generate unit tests
/new - Create new project structure

Multi-File Operations

Using # References:

The # symbol creates specific references that tell Copilot exactly what to focus on. These references work like precise pointers to different parts of your project:

#file:filename: References a specific file: #file:UserModel.js
#codebase: References your entire project codebase for searching
#selection: References currently selected code
#editor: References the currently active file

"Update #file:UserModel.js to include timestamps"
"Search #codebase for all database queries"  
"Refactor #selection to use modern JavaScript syntax"
"Add error handling to #editor for all API calls"

These references help Copilot understand exactly where to look and what to change, making multi-file operations much more precise.

Drag and Drop:

Drag and drop is one of the most intuitive ways to provide context to Copilot. You can simply drag files from the VS Code explorer directly into the chat window, and Copilot will instantly understand their contents and structure.

This feature is particularly useful when you're working on related components and need the AI to understand how different files connect together. Copilot remembers these file relationships throughout your conversation, so you don't need to re-upload files when continuing the same discussion.

This context persistence works across multiple chat sessions, making it easy to pick up where you left off on complex multi-file projects.

Stage 2 Practice Exercises

Exercise 1: Chat Mode Practice

Use Ask Mode to understand a complex function
Switch to Edit Mode to refactor it
Compare the approaches

Exercise 2: Agent Mode Project

Start Agent Mode (Shift+Cmd+I)
Request: "Create a simple todo app with testing"
Watch the autonomous development process
Review the generated code

Exercise 3: Advanced Features

Use @ participants for project questions
Experiment with slash commands
Practice multi-file operations

Ready for CLI Tools?

You've now learned the basics of GitHub Copilot in VS Code! CLI tools like Claude Code and Gemini offer even more power for terminal-based development.

If you’re interested in terminal AI you can continue to Stage 3 just below. If you prefer to stick with VS Code, just skip to Stage 4 for advanced workflows.

Stage 3: CLI-Based AI Agents (Claude Code & Gemini)

Step 11: Meet Claude Code – Your Terminal AI Assistant

What is Claude Code?

Remember how GitHub Copilot helps you in VS Code? Claude Code does the same thing, but in your terminal.

Instead of typing in VS Code and getting suggestions, you type in your terminal and have conversations with AI. It's like having a coding buddy right in your command line.

Simple example:

In VS Code with Copilot:

// create a function to validate email
[AI suggests code]

In Terminal with Claude Code:

claude
> Create a function to validate email addresses
[AI writes the code for you]

So when should you use VS Code/Copilot and when should you use Claude Code?

Claude Code is great if you:

Like working in the terminal
Want to have AI conversations about code
Need help with command-line tasks
Want more control over AI interactions

Stick with VS Code Copilot if you:

Prefer visual editors
Are happy with your current workflow
Don't spend much time in terminal

Pricing

Claude Code requires Claude Pro (100/month),orClaudeMax+(100/month),orClaudeMax+(200/month) subscription, or pay-per-use with API credits.

Claude Code Limitations

Here are some important considerations if you’re planning to use Claude Code:

Paid only – No free tier, requires Claude Pro subscription or API credits
Terminal-based – Less visual than IDE-integrated tools
Learning curve – Requires comfort with command-line interfaces
Context management – You need to manage conversation context manually
Internet dependency – Requires stable connection for all operations
Session limits – Long autonomous sessions consume significant API credits

Installation

Recommended (all platforms):

npm install -g @anthropic-ai/claude-code

Alternative installs:

macOS/Linux: curl -fsSL https://claude.ai/install.sh | bash
Windows: irm https://claude.ai/install.ps1 | iex

Basic Usage

Interactive Mode (Recommended):

Interactive mode is Claude Code's primary interface where you have real-time conversations with the AI. Unlike one-shot commands that execute once and exit, interactive mode creates a persistent session where you can ask follow-up questions, iterate on solutions, and build complex projects over time.

Interactive mode is recommended because:

Context persistence: Claude remembers the entire conversation and project context
Iterative development: You can refine requests and build on previous responses
Real-time collaboration: Ask questions, get explanations, and modify approaches as you work
Session resumption: Continue previous conversations with claude --resume

Other Modes Available:

One-shot mode: Single command execution (explained below)
Agent mode: Autonomous development sessions that can work for hours independently

Navigate to your project:

cd your-project
claude

Start conversing naturally:

Claude Code > analyze this codebase and suggest improvements

Claude Code > now help me refactor the user authentication

Claude Code > add unit tests for the payment module

Continue previous session:

claude --resume

One-shot Commands (for quick tasks):

One-shot commands are single-execution commands that perform a specific task and then exit. Unlike interactive mode, these don't maintain conversation context – they're perfect for quick, standalone tasks.

What are One-shot Commands?

These are commands you run with a specific instruction directly from your terminal, without entering an interactive session. Claude executes the request and provides results immediately.

When to Use One-shot Commands:

Quick analysis or code reviews
Simple file modifications
Automated scripts and CI/CD integration
When you need a single, specific answer

Examples:

claude "analyze this codebase and suggest improvements"
claude "fix all TypeScript errors in src/"
claude "generate unit tests for utils.js"
claude "explain what this function does" --file src/auth.js

The key difference is that one-shot commands don't remember context between runs, while interactive mode maintains full conversation history and project understanding.

Interactive vs Autonomous Sessions:

Within interactive mode, you can choose between collaborative and autonomous approaches:

Interactive Session (collaborative):

Claude Code > I'm building user authentication. What approach should we take?

You: Use JWT tokens with refresh token rotation

Claude Code > implement JWT authentication with refresh tokens
[Shows you the implementation step by step]

Claude Code > shall I also add password reset functionality?

You: Yes, use email-based reset

Autonomous Session (hands-off development):

Claude Code > Build a complete user management system with authentication, profiles, preferences, and admin features. Use best practices for security and testing.

[Claude works for hours autonomously, providing periodic updates]
[Final result: Complete user management system ready for production]

When to Use Each: Use interactive sessions when learning or when you want control over decisions. Use autonomous sessions for well-defined tasks where you trust Claude to make good choices independently.

Key Features

Thinking Modes (use in interactive session):

Thinking modes are special commands that tell Claude how deeply to analyze before responding. You choose these modes manually based on your problem's complexity.

When to Use Each Mode:

think – Quick analysis for straightforward tasks: "think: review this function for bugs"
think hard – Deeper reasoning for complex logic: "think hard: optimize this algorithm"
think harder – Complex problem solving with multiple considerations: "think harder: design a scalable database schema"
ultrathink – Maximum depth analysis for architectural decisions: "ultrathink: evaluate microservices vs monolith for this project"

How They Work:

Claude shows you its reasoning process with longer thinking modes. You'll see step-by-step analysis before getting the final answer. Higher thinking modes take longer but provide more thorough solutions.

Choosing the Right Mode:

Use think for quick code reviews, think hard for debugging complex issues, think harder for system design problems, and ultrathink for major architectural decisions that affect your entire project.

Project-Level Customization with Claude.md

One of Claude Code's most powerful features is project-level customization using .claude/CLAUDE.md files. This lets you give Claude context about your specific project, coding standards, and preferences.

Set up CLAUDE.md like this:

# Create project-level configuration
mkdir -p .claude
touch .claude/CLAUDE.md

Here’s an example CLAUDE.md file:

# Project Context

This is a Node.js REST API using Express and PostgreSQL.

## Coding Standards

- Use async/await, never callbacks
- All database queries use Prisma ORM
- Write tests with Jest for all new functions
- Follow RESTful conventions

## Project Structure

- `/src/routes` - API endpoints
- `/src/models` - Database models
- `/src/middleware` - Express middleware
- `/tests` - Unit and integration tests

## Preferences

- Use TypeScript for all new files
- Prefer functional programming patterns
- Include JSDoc comments for all functions

This helps Claude understand your project structure automatically. It also helps Claude follow your specific coding standards, suggest appropriate patterns for your tech stack, and remember your preferences across sessions.

Pro tip: Update your CLAUDE.md as your project evolves to keep Claude's suggestions relevant and accurate.

Claude Code Autonomous Development Sessions

Here’s an example of a multi-hour autonomous development session:

cd your-project
claude

Your prompt: "Build a scalable GraphQL API with real-time subscriptions, authentication, rate limiting, and comprehensive testing"

Claude's 6-hour autonomous process:

Claude Code > ultrathink: analyzing requirements and designing architecture

[Creates detailed technical specifications and development plan]

Claude Code > implementing core GraphQL server with Apollo
[Runs: npm install apollo-server-express graphql]
[Creates: server.js, schema/typeDefs.js, resolvers/index.js]

Claude Code > adding authentication and authorization middleware
[Creates: middleware/auth.js, utils/jwt.js, models/User.js]
[Implements JWT strategy with proper error handling]

Claude Code > setting up real-time subscriptions with Redis
[Runs: npm install graphql-redis-subscriptions]
[Configures WebSocket connections, creates subscription resolvers]

Claude Code > implementing rate limiting and security measures
[Adds helmet, express-rate-limit, query complexity analysis]

Claude Code > writing comprehensive test suite
[Creates unit tests, integration tests, load tests]
[Runs: npm test - sees 8 failing tests]

Claude Code > fixing test failures automatically
[Identifies async timing issues, fixes resolver logic]
[Re-runs tests repeatedly until 94/94 tests pass]

Claude Code > performance optimization and caching
[Implements Redis caching, optimizes database queries]
[Adds performance monitoring and logging]

Claude Code > generating comprehensive documentation
[Creates API docs with examples, README, deployment guide]

Claude Code > final validation and cleanup
[Runs full test suite, checks code coverage: 96%]
[Creates production build and deployment scripts]

This represents 6 hours of autonomous work (you can work on other projects while it’s doing this). The result is a production-ready GraphQL API with authentication, real-time features, and comprehensive testing.

Why this works:

Autonomous Feedback Loops: Claude runs tests, sees failures, fixes them automatically
Context Awareness: Maintains understanding of the entire project structure
Self-Correction: Iterates on solutions until they work properly
Tool Integration: Uses git, npm, testing frameworks seamlessly

Web Search Integration:

Claude Code can search the web to get current information, which is especially useful since AI training data has cutoff dates. This feature helps you stay current with the latest documentation, best practices, and solutions.

Claude Code > search for the latest React 19 features and update my components

[Claude searches web, then continues the conversation with findings]

Claude Code > now apply those new features to the UserProfile component

When Web Search Helps:

Getting current documentation for new library versions
Finding solutions to recent error messages or bugs
Researching latest best practices and patterns
Comparing current approaches to problems

The web search happens automatically when Claude detects it needs current information, or you can explicitly request it by mentioning "search" or "latest" in your prompts.

Claude Code Keyboard Shortcuts

You can use these keyboard shortcuts to be even more productive:

Essential controls:

Ctrl+C – Cancel current input or generation
Ctrl+D – Exit Claude Code session
Ctrl+L – Clear terminal screen
Up/Down arrows – Navigate command history
Esc + Esc – Edit previous message

Multiline Input:

\ + Enter – Quick escape to create newline (works in all terminals)
Option+Enter (Mac) / Shift+Enter (configured) – Insert newline

Step 12: Google Gemini CLI

When to Use Gemini vs Claude Code:

Gemini is another CLI-based AI tool that complements Claude Code rather than competing with it. While Claude Code excels at deep reasoning and complex development tasks, Gemini offers unique advantages: massive context windows (1M+ tokens), generous free limits, and powerful multimodal capabilities.

Use Gemini when you:

Need to analyze entire large codebases at once
Want to process images, diagrams, or sketches
Are working within budget constraints (generous free tier)
Need extremely large context windows for complex projects

Use Claude Code when you:

Need sophisticated reasoning and problem-solving
Want autonomous development sessions
Prefer advanced thinking modes for complex analysis
Are building production systems requiring detailed planning

The Best Approach: Many developers use both tools strategically – Gemini for analysis and visual inputs, Claude Code for complex development tasks.

Gemini brings Google's AI to your terminal with generous free limits.

Installation

Using npx (recommended for trying):

npx @google/gemini-cli

Global installation:

npm install -g @google/gemini-cli
gemini  # Starts interactive session

Authentication

gemini auth login

Check status:

gemini auth status

Free limits:

60 requests/minute
1,000 requests/day with Google account

Built-in tools:

/memory – Manage conversation memory
/stats – View usage statistics
/tools – List available tools
/mcp – Configure Model Context Protocol servers

Gemini CLI Limitations

Here are some important considerations if you’re planning to use Gemini:

Rate limits – 60 requests/minute and 1,000/day on free tier
Google dependency – Requires Google account and internet connection
Newer tool – Smaller community and fewer resources compared to GitHub Copilot
Terminal-focused – Less integration with popular IDEs
Multimodal processing – Image uploads have size limits (20MB)
Beta features – Some advanced features may be unstable

Unique Gemini Features

Massive Context Window:
Gemini can handle 1 million+ tokens in a single session, meaning it can analyze entire large codebases simultaneously. This is particularly useful for understanding complex system architectures and relationships between many files.

Multimodal Capabilities:
Gemini can process and understand various types of visual content alongside code, making it uniquely powerful for design-to-code workflows and visual debugging.

Turn Your Sketches Into Code

This is really cool: you can literally draw something on paper and Gemini will turn it into working code!

Here's how to do it:

Create your sketch: Draw your idea on paper, a whiteboard, or digital tablet
Take a photo or screenshot: Use your phone or take a screenshot to capture the sketch digitally
Save the image: Save it as JPG, PNG, or WebP format (under 20MB)
Show it to Gemini using the command line:

gemini -p "Turn this sketch into a React component with nice styling" sketch.jpg

Alternative methods:

# If you're in an interactive session, you can reference the file:
gemini
> analyze this UI sketch and create the HTML/CSS: @sketch.jpg

# Or drag and drop in supported terminals
gemini
> implement this design as a Vue component
[drag sketch.jpg into terminal]

Gemini then looks at your drawing and creates:

A working React component that matches your sketch
Nice CSS styling that makes it look good
Form validation if you drew a form
All the code you need to make it work

It's like having a designer and developer that can read your mind!

Fix Bugs By Showing Gemini Images

Got a bug in your UI? You can show Gemini visual information to help debug:

gemini -p "This UI looks broken. What's wrong and how do I fix it?" image.png

Gemini can analyze visual information and tell you:

What's causing the problem
Exactly what code to change
Sometimes even better ways to do it

Turn Architecture Diagrams Into Code

Draw a system diagram and Gemini can build it:

gemini -p "Build this system architecture with Docker and databases" diagram.jpg

Gemini will:

Understand your diagram
Create all the Docker files you need
Set up the databases and connections
Give you a working system based on your design

Why This Visual Coding is Amazing

Instead of spending hours translating a design into code, you can:

Show Gemini your sketch or design
Ask Gemini to build it
Get working code in minutes instead of hours and just refine as necessary

Most of the time, Gemini gets pretty close to what you wanted on the first try. Even when it's not perfect, it gives you a great starting point that saves you tons of time.

Step 13: Comparing CLI Tools

Here’s a quick table to help you compare the features of Claude Code and Gemini CLI:

Feature	Claude Code	Gemini CLI
Context Window	Large	1M+ tokens
Web Search	Built-in	Google Search integration
File Editing	Direct edits	Diff-based
Thinking Modes	4 levels	ReAct loop
IDE Integration	VS Code shortcuts	Terminal-first
Free Tier	Limited	Generous (1000/day)
Open Source	No	Yes
Multimodal	No	Yes (images, PDFs)

Step 14: Advanced CLI Workflows

Workflow 1: Interactive Code Review with Claude Code

Claude Code > review my recent git changes

[Claude analyzes the diff]

Claude Code > fix the security issue you found in the login function

Claude Code > now create a pull request with a good description

Workflow 2: Conversational Architecture Analysis with Gemini

Gemini > analyze this codebase architecture and identify technical debt

[Gemini provides comprehensive analysis]

Gemini > create a migration plan for the database issues you found

Gemini > generate API documentation for the endpoints

Workflow 3: Interactive Test-Driven Development

Claude Code > I need to add payment processing. Start by writing comprehensive tests

[Claude creates test suite]

Claude Code > now implement the payment service to pass these tests

Claude Code > add error handling and edge cases

Combining VS Code with CLI Tools

The Power of Hybrid Workflows:

The most productive developers don't typically choose just one AI tool – they strategically combine VS Code extensions with CLI tools to maximize their efficiency. Each tool has unique strengths, and combining them creates a workflow that's greater than the sum of its parts.

Benefits of Combining Tools:

Seamless Context Switching: Start with Copilot for rapid development, then seamlessly move to Claude Code for complex analysis without losing momentum
Complementary Strengths: Use each tool's best features, like Copilot's real-time suggestions + Claude's deep reasoning + Gemini's visual processing
Continuous Workflow: No need to copy/paste code between tools - work directly in your project with different AI assistance as needed
Reduced Mental Load: Tools handle different cognitive tasks, letting you focus on creative problem-solving

How to Practically Combine Tools:

Example workflow – building a user dashboard:

Start in VS Code with Copilot: Use tab completion to rapidly build basic component structure
Keep VS Code open, launch Claude Code: Get architectural advice and refactoring suggestions while maintaining your editor context
Switch to Gemini for visual elements: Upload UI mockups to generate matching styles
Return to VS Code: Apply all suggestions with Copilot helping with implementation details

Key Integration Points:

Shared Project Context: All tools work in the same directory, understanding your project structure
File System Coordination: Changes made by CLI tools are immediately visible in VS Code
Version Control Integration: Use CLI tools for git operations while VS Code shows visual diffs

Quick Switching Setup

What is Quick Switching?

A quick switching setup refers to configuring your development environment so you can rapidly move between different AI tools without friction. Instead of typing long commands or navigating through multiple setup steps, you create shortcuts that let you instantly access the right AI tool for your current task.

Add to your shell config (.zshrc or .bashrc):

# Quick AI commands for interactive mode
alias cc="claude"
alias gc="gemini"

# For quick one-shot commands when needed
alias think="claude 'think hard:'"
alias analyze="gemini -p 'analyze:'"

Stage 3 Practice Exercises

Exercise 1: Interactive Claude Code Project Setup

Create a new project directory
Launch: claude
Start conversation: "set up a Node.js Express API with PostgreSQL"
Continue chatting: "add authentication middleware"
Keep going: "now add comprehensive error handling"
Review the generated code and ask questions

Exercise 2: Interactive Gemini Codebase Analysis

Navigate to an existing project
Launch: gemini
Start with: "analyze this codebase and identify potential security vulnerabilities"
Follow up: "explain the most critical issue in detail"
Continue: "create a fix for the authentication vulnerability"
Ask: "what other improvements should I prioritize?"

Exercise 3: Interactive Combined Workflow

Start with Copilot in VS Code for initial development
Switch to interactive Claude Code session for complex refactoring
Use interactive Gemini session for codebase analysis and documentation
Practice seamlessly moving between tools

Need help with CLI tools? See the Troubleshooting Quick Reference for setup and common issues.

Stage 4: Mastery – Combining Tools and Advanced Workflows

Step 15: Tool Selection Strategy

When to Use Each Tool

Alright, so when should you use each tool in your workflows?

You can use GitHub Copilot as an inline pair-programmer when speed matters. It helps you crank out new functions, get real-time suggestions as you type, and pick up unfamiliar APIs or frameworks on the fly. It’s also handy for quick docs lookups without breaking your flow.

Then you can switch to Claude Code for bigger, messier jobs: complex multi-file refactors, drafting comprehensive tests, and “thinking out loud” about architecture and trade-offs. Here it also helps with Git tasks like guiding you through operations and assembling pull requests.

Finally, you can reach for the Gemini CLI from the terminal when you need to analyze large codebases end-to-end or incorporate visual inputs (like screenshots/diagrams) into your workflow. It’s useful for lots of runs thanks to a free tier, and it fits scenarios where you might want a customizable, script-friendly setup.

Step 16: Understanding MCP – Making AI Tools Work Together

What is MCP?

MCP (Model Context Protocol) is a simple way to give your AI tools extra powers. Think of it like adding apps to your phone – each MCP server adds a new capability to your AI.

Why Should Beginners Care About MCP?

Here’s the problem without MCP: your AI can only work with what it knows and what you tell it. It can't:

Search the web for current information
Test your website automatically
Remember your project details between sessions
Connect to your databases or APIs

But with MCP servers, your AI can suddenly:

Get current information – Search Google for latest docs and solutions
Test your code – Automatically check if your website works
Remember your project – Keep track of your architecture and decisions
Connect to tools – Work with GitHub, databases, and more

So instead of manually doing repetitive tasks, your AI can handle them automatically. This means you’ll spend less time googling error messages, manually testing your code, and explaining your project to the AI each session. And you’ll spend more time actually building things.

Simple MCP Examples for Beginners

Here are beginner-friendly examples of what MCP can do for you:

Example 1: Getting Help Without Googling

You: "This CSS isn't working. Find out why and fix it"

Without MCP: You'd google the error, read docs, try solutions
With MCP: AI searches current CSS docs, finds the issue, fixes it automatically

Example 2: Testing Your Website Automatically

You: "Check if my contact form actually works"

Without MCP: You'd manually fill out the form, check email, test edge cases
With MCP: AI fills out the form, verifies email is sent, tests different inputs

Example 3: AI Remembers Your Project

You: "Add a new feature to my todo app"

Without MCP: You explain your database structure, API routes, frontend framework
With MCP: AI already remembers everything and just builds the feature

Ready to Try MCP?

Don't worry if this seems overwhelming! You can start with just one simple MCP server and add more as you get comfortable.

Easy MCP Setup for Beginners

We’ll start with VS Code (as it’s the easiest option):

Open VS Code
Go to Extensions (Ctrl+Shift+X)
Search for "GitHub Copilot MCP" or similar MCP extensions
Click "Install"

And you’re done! The extension handles everything automatically

With this, you get web search capability for your AI, basic project memory, and simple automation features.

To test it out, ask your AI: "Search for the latest React best practices and show me an example". If it can search and bring back current information, MCP is working!

Want More MCP Power?

Once you're comfortable with basic MCP, you can explore a more advanced setup below:

Custom MCP server installation
Advanced configuration options
Building your own MCP integrations

For now, the VS Code extension approach above will give you plenty of AI superpowers to get started!

That's MCP in a nutshell! Start with the simple VS Code extension approach above, and you'll quickly see how much more powerful your AI becomes.

Next Steps

Try the basic VS Code MCP extension
Test it with simple requests like "search for X and implement it"
Once comfortable, explore more MCP servers in Stage 4

MCP transforms your AI from a code suggester into a true development partner. The best part? Once you set it up with one tool, it works with all of them!

MCP Not Working?

If the AI says it can't search the web, there are a couple things you can try.

First, check if the MCP extension is actually installed in VS Code. Then try restarting VS Code. Finally, make sure you're asking in a way the AI understands: "Search for X and show me Y".

If VS Code extension won't install, try checking your internet connection or updating VS Code to the latest version. You can also look for "MCP" or "Model Context Protocol" extensions in different names.

If you’re still having trouble, we’ll cover advanced troubleshooting below. Or you can also ask your AI: "Help me troubleshoot MCP setup".

Advanced MCP Setup and Integration

Manual MCP Server Installation

For advanced users who want full control over their MCP setup:

Step 1: Install MCP Servers

Most MCP servers can be installed via npm:

# For web automation and testing
npm install -g @modelcontextprotocol/server-puppeteer

# For web search without API keys
npm install -g @mcp-servers/duckduckgo

# For database access
npm install -g @modelcontextprotocol/server-postgres

Some servers (like GitHub) use Docker instead:

docker pull ghcr.io/github/github-mcp-server

Step 2: Configure Your Tool

Understanding Hierarchical Configuration:

Each AI tool checks for MCP configurations in multiple locations, prioritizing more specific settings over general ones. This means you can have global defaults but override them for specific projects. Think of it like CSS – more specific rules override general ones.

Claude Code has the most flexible setup:

Claude Code configuration hierarchy (checked in order):

Project level: .claude/mcp.json (highest priority)
Local settings: .claude/settings.local.json
Global config: ~/.claude/mcp.json (fallback)

Other tools:

VS Code: .vscode/mcp.json (project-level only)
Cursor: .cursor/mcp.json (project-level only)
Windsurf: Uses VS Code's configuration format

Here’s an example configuration (works in any tool, just adjust the file location):

{
  "mcpServers": {
    "puppeteer": {
      "command": "npx",
      "args": ["@modelcontextprotocol/server-puppeteer"]
    },
    "duckduckgo": {
      "command": "npx",
      "args": ["@mcp-servers/duckduckgo"]
    },
    "github": {
      "command": "docker",
      "args": [
        "run",
        "-i",
        "--rm",
        "-e",
        "GITHUB_PERSONAL_ACCESS_TOKEN",
        "ghcr.io/github/github-mcp-server"
      ],
      "env": {
        "GITHUB_PERSONAL_ACCESS_TOKEN": "your_token_here"
      }
    }
  }
}

Production MCP Servers

1. Game-Changing Cognitive Tools:

Sequential Thinking Server:
This server transforms how AI approaches complex problems by breaking them into logical steps. When you ask for a large feature implementation, instead of jumping straight to code, the AI first creates a detailed plan with phases, dependencies, and decision points.

This is invaluable for refactoring legacy systems or building new features where order of operations matters. The server maintains this planning context throughout the entire development session, ensuring consistent decision-making.

Memory Bank Server:
Eliminates the frustrating need to re-explain your project structure every session. This server creates persistent memory about your architecture choices, coding standards, team preferences, and project goals. When you return to work days later, the AI immediately knows your database schema, API patterns, and even why certain decisions were made. It's like having a project documentation system that stays perfectly synchronized with your development work.

Knowledge Graph Server:
Creates a living map of your codebase relationships – not just file dependencies, but conceptual connections between features, shared utilities, and architectural patterns. When you modify one component, the AI can instantly identify all related areas that might need updates. This prevents bugs caused by missing related changes and helps with impact analysis during refactoring.

2. Web Automation & Testing Servers:

Puppeteer Server:
Provides headless Chrome browser control for comprehensive testing workflows. The AI can automatically navigate your web application, fill forms, click buttons, and verify expected behaviors.

This is particularly powerful for regression testing – the AI can replay user workflows and catch breaking changes before deployment. It also enables screenshot-based testing and performance monitoring automation.

Playwright Server:
Extends browser automation across Chrome, Firefox, and Safari simultaneously. This server is essential for cross-browser compatibility testing and allows the AI to catch browser-specific issues early in development.

Unlike manual testing, the AI can run identical test scenarios across all browsers in parallel, generating comparative reports on functionality and performance differences.

3. Development Integration Servers:

GitHub Server:
Transforms your terminal into a full GitHub interface with AI intelligence. The AI can automatically create branches, manage pull requests, analyze code review comments, and even generate PR descriptions based on code changes. It can also triage issues, assign labels based on content analysis, and maintain project boards by understanding the relationship between issues and actual code changes.

DuckDuckGo Search Server:
Provides real-time access to current documentation and solutions without API costs. When the AI encounters errors or needs to verify best practices, it can instantly search for the most recent information. This is crucial for rapidly evolving technologies where training data becomes outdated quickly. The server also helps with troubleshooting by finding solutions to error messages you haven't seen before.

PostgreSQL Server:
Enables direct database analysis and optimization. The AI can examine query performance, suggest index optimizations, analyze data patterns, and even generate migration scripts. This server is particularly valuable for debugging production issues where the AI needs to understand actual data distribution and query execution patterns rather than just theoretical database design.

4. Helper Tools:

MCP Compass
Helps you find the right MCP server for any task.

These servers turn your AI from a code suggester into a real development partner that can test, search, remember, and automate!

Step 17: Advanced Prompt Engineering

Contextual Prompting

Provide examples:

// Instead of: "create a validation function"
// Use: "create a validation function like this one but for email:
// function validatePhone(phone) { return /^\d{10}$/.test(phone); }"

Specify constraints:

claude "refactor this code to use functional programming, no loops, use map/filter/reduce"

Include edge cases:

gemini -p "implement user authentication that handles: expired tokens, concurrent logins, rate limiting"

Step 18: Building AI-Assisted Development Pipelines

Automated Code Review Pipeline

Pre-commit with Copilot:

// .copilot-instructions
"Review all changes for: security issues, performance problems, code style";

PR Review with Claude:

claude "review this PR: git diff main..feature-branch"

Documentation with Gemini:

gemini -p "generate changelog and update README for these changes"

Test-Driven AI Development

Write test specifications:

claude "write comprehensive test specs for a payment processing system"

Generate test code:

gemini -p "implement these test specifications using Jest"

Implement with Copilot:
- Use Agent Mode to implement features
- Tests guide the implementation

Step 19: Creating Your Personal AI Workflow

Setting Up Your Environment

1. VS Code Settings (settings.json):

{
  "github.copilot.enable": {
    "*": true
  },
  "github.copilot.advanced": {
    "inlineCompletions.enable": true,
    "chat.enabled": true
  }
}

2. Claude Code Configuration (~/.claude/settings.json):

{
  "cleanupPeriodDays": 7,
  "permissions": {
    "allow": [
      "Bash(fd:*)",
      "Bash(rg:*)",
      "Bash(ls:*)",
      "WebFetch(domain:github.com)",
      "WebFetch(domain:stackoverflow.com)"
    ],
    "deny": ["WebFetch(domain:medium.com)"]
  }
}

3. Gemini Setup (~/.gemini/config.json):

{
  "defaultModel": "gemini-2.5-pro",
  "contextWindow": "large",
  "safetyMode": "interactive"
}

Custom Commands and Aliases

Shell aliases for common tasks:

# Launch interactive sessions
alias cc='claude'
alias gc='gemini'

# Quick one-shot commands (when you need them)
alias aicommit='claude "create a git commit with a descriptive message"'
alias aireview='claude "review my uncommitted changes"'
alias complexity='gemini -p "analyze code complexity and suggest simplifications"'
alias security='claude "think harder: check for security vulnerabilities"'
alias aidocs='gemini -p "generate comprehensive documentation"'

Final Project: Build a Full Application with AI

Project Requirements

Build a task management API with:

User authentication
CRUD operations
Real-time updates
Testing suite
Documentation

Suggested Workflow

Phase 1: Interactive Planning

# Start Claude Code session
claude

Claude Code > ultrathink: design a scalable task management API architecture

[Claude provides detailed analysis]

Claude Code > now break this down into implementation phases

# Switch to Gemini for specifications
gemini

Gemini > create detailed technical specifications for this task management API

Gemini > include database schema and API endpoint specifications

Phase 2: Interactive Implementation

Use Copilot Agent Mode for initial setup
Implement features with inline Copilot
Switch to interactive Claude Code session for complex logic:

Claude Code > implement the user authentication system we planned

Claude Code > now add the task CRUD operations

Claude Code > integrate real-time updates with WebSockets

Phase 3: Interactive Testing & Documentation

# Claude Code session for testing
claude

Claude Code > write comprehensive tests for all API endpoints

Claude Code > add integration tests for the authentication flow

Claude Code > create performance tests for high load scenarios

# Gemini session for documentation
gemini

Gemini > generate comprehensive API documentation with examples

Gemini > create a developer onboarding guide

Phase 4: Interactive Optimization

# Claude Code for performance optimization
claude

Claude Code > analyze and optimize our database queries

Claude Code > implement caching for frequently accessed data

Claude Code > add monitoring and logging

# Gemini for final review
gemini

Gemini > review the entire codebase for improvements

Gemini > identify potential security vulnerabilities

Gemini > suggest deployment optimizations

Measuring Your Progress

Stage 1 Milestones

Comfortable with tab completion
Can write effective prompts
Understand AI limitations

Stage 2 Milestones

Using multiple models effectively
Mastering chat modes and agents
Using advanced chat features

Stage 3 Milestones

Fluent with CLI tools
Can combine VS Code and terminal workflows
Understanding tool strengths

Stage 4 Milestones

Created custom AI workflow
Built complete application with AI
Can teach others AI-assisted development

Stage 4 Practice Exercises

Exercise 1: Tool Selection Mastery

Pick a medium-complexity coding task (for example, "Build a URL shortener API")
Plan which tool to use for each phase (design, coding, testing, deployment)
Execute using your chosen workflow
Document what worked well and what you'd change

Exercise 2: Custom Workflow Creation

Identify a repetitive development task in your work
Design an AI-assisted workflow using multiple tools
Test and refine the workflow
Create documentation for teammates

Exercise 3: Complete Project Build

Build a small but complete application using only AI assistance
Use at least 2 different AI tools strategically
Include testing, documentation, and deployment
Reflect on productivity gains vs traditional development

Continuing Your Journey

Stay Updated

Follow tool release notes
Join AI coding communities
Experiment with new features

Advanced Topics to Explore

Custom MCP server development
AI model fine-tuning
Enterprise deployment strategies
Team collaboration patterns

Resources for Continued Learning

Official documentation for each tool
Community forums and Discord servers
Open-source AI coding projects
Conference talks and tutorials

Common AI Issues

Even with the best AI tools, you'll encounter challenges. These issues are normal and manageable once you understand their patterns. Here are the most common problems developers face and practical solutions that actually work.

"My AI suggestions are terrible!"

Problem: AI gives irrelevant or wrong suggestions

Solution:

Write clearer comments
Open related files for context
Start with simpler tasks
Make sure you're in the right file type

Example Fix:

// Instead of: "make function"
// Try: "create function to validate US phone number format (xxx) xxx-xxxx"

"AI is too slow"

Problem: Waiting too long for suggestions

Solution:

Check your internet connection
Close unnecessary programs
Try a lighter-weight AI tool
Be patient - complex suggestions take time

"I'm afraid of becoming dependent on AI"

Problem: Worried about losing coding skills

Solution:

Use AI as a learning tool, not a crutch
Always understand the code before accepting
Practice coding without AI regularly
Focus on problem-solving, not syntax

"It's suggesting outdated code"

Problem: AI suggests old patterns or deprecated methods

Solution:

Specify versions in your comments
Keep your tools updated
Learn to recognize outdated patterns

Example:

// create React functional component using hooks (not class component)

Troubleshooting Quick Reference

Common Issues (All Tools)

Problem	Quick Fix
No AI suggestions	Check internet connection, restart editor, verify login
"Need to pay" message	Check free tier limits, verify account status
Suggestions are poor	Use clearer comments, open related files for context
Tool won't install	Update editor, check internet, try different installation method

GitHub Copilot Issues

Problem	Solution
No suggestions in VS Code	Check bottom-right for "GitHub Copilot" status
Free tier expired	Check free access for students/maintainers
Agent Mode not working	Try `Shift+Cmd+I` (Mac) or `Ctrl+Shift+I` (Windows/Linux)
Chat not responding	Try restarting VS Code, check internet connection

Claude Code Issues

Problem	Solution
"Command not found"	Reinstall: `npm uninstall -g @anthropic-ai/claude-code && npm install -g @anthropic-ai/claude-code`
Authentication failed	Run `claude auth login`, check API credits remaining
Slow responses	Check network: `ping api.anthropic.com`, try lighter model with `--model claude-3-haiku`
MCP servers not working	Check `~/.claude/mcp.json` syntax, test server: `npx @mcp/server-github --help`
Commands hang/freeze	Press `Ctrl+C` to cancel, restart terminal, check background processes

Gemini CLI Issues

Problem	Solution
Authentication required	Run `gemini auth login`, check Google account permissions
Rate limit exceeded	Check usage: `gemini /stats`, wait 1 minute or upgrade plan
Won't install	Try `npx @google/gemini-cli` instead, check Node.js 16+
Image upload fails	Check format (JPG/PNG/WebP), size under 20MB, verify file path
Context window errors	Break large requests into smaller chunks, clear history

Emergency Checklist

When nothing works, try these in order:

Restart your editor/terminal
Check internet connection
Verify you're logged in to the right account
Update to latest version of the tool
Try a different tool (if one fails, others usually work)
Ask the AI itself: "Help me troubleshoottooltoolsetup"

What's Next After Completing All Stages?

Once you've mastered the basics, here are some simple next steps:

Working with Your Team

Team AI Workflow Basics

Shared Prompt Libraries:

Building a team prompt library transforms how your entire team uses AI. Start by creating a shared repository where developers document prompts that work well for your specific domain and codebase.

For example, if you're building e-commerce software, create standardized prompts for common tasks like "generate product catalog API endpoints following our REST conventions" or "create payment processing error handling using our standard patterns."

Document successful Agent Mode workflows that team members can reuse. One developer might discover that Claude Code works particularly well for database migrations when given specific context about your schema evolution practices. By sharing these workflows, you prevent each team member from having to discover effective approaches independently.

Tool Standardization:

Team productivity multiplies when everyone uses compatible AI tools. Agree on primary tools based on your team's needs - for instance, GitHub Copilot for all developers to ensure consistent inline assistance, plus Claude Code for complex architectural tasks that benefit from deep reasoning. Establish clear guidelines about when to use autonomous Agent Mode versus collaborative sessions to prevent conflicts and ensure code quality.

Set up shared MCP server configurations that give all team members access to the same enhanced AI capabilities. This might include team-specific servers for your internal APIs, shared database access, or custom tools that understand your deployment pipeline. When everyone has the same AI capabilities, collaboration becomes seamless.

AI-Generated Code Reviews:

Transform your code review process to work effectively with AI-generated code. Establish conventions for tagging AI-generated sections in pull requests - this helps reviewers focus their attention appropriately. Instead of nitpicking syntax that AI typically handles well, reviewers can concentrate on architectural decisions, business logic correctness, and integration patterns that require human judgment.

Implement rigorous testing for AI-generated code, as automated tests catch AI mistakes more reliably than manual review. Create team standards for testing AI output, including edge cases and integration scenarios that AI might miss. This allows you to benefit from AI's speed while maintaining quality through systematic verification.

Document AI tool decisions in commit messages.

Simple Team Setup

Start small and build up:

Get everyone using the same AI tools first
Create a shared document of prompts that work well for your projects
Figure out when your team should use Agent Mode vs regular assistance
Set up MCP servers for your most important team tools

For Bigger Projects

As your projects grow, you might want to:

Try different AI models for different tasks (fast ones for simple code, powerful ones for complex problems)
Create shortcuts for tasks you do often
Connect AI tools with your existing development workflow

Keep Learning

AI coding tools improve every month! Stay current by:

Following the tools' release notes (they email updates)
Joining Discord communities for AI coding
Trying new features as they come out

Conclusion

Congratulations! You now have everything you need to start your AI-assisted coding journey. Remember, every expert was once a beginner, and with AI as your coding partner, you can learn and grow faster than ever before.

Remember:

AI doesn't replace your creativity – it amplifies it
Every suggestion is a learning opportunity
Mistakes are part of the journey
The community is here to help

You're not just learning to code with AI – you're learning about the future of software development. In a few months, you'll wonder how you ever coded without it. The developers who embrace AI assistance today will be the leaders of tomorrow.

Happy coding! 🚀

Why This Matters

Table of Contents

Essential AI Terminology

When to Use AI vs When to Code Yourself

Prerequisites

Your Complete Learning Journey

Your Learning Path:

How to Generate Your First AI-Assisted Code (Quick Start)

GitHub Copilot (Recommended for Beginners)

Your First AI Suggestion

Stage 1: Foundation – Getting Started with AI Coding

Step 1: Understanding Your Options

Step 2: Making Your Choice & Learning Automatic Suggestions (Tab Completion)

Step 3: Step-by-Step Setup

How to Set Up GitHub Copilot (You can skip this if you already followed the Quick Start earlier)

Step 4: Mastering Tab Completion

Step 5: Essential Keyboard Shortcuts & First Practice

Stage 1 Practice Exercise

Exercise: Build a Simple Todo App

Ready for the next stage? Before moving on, make sure you can:

Stage 2: Advanced GitHub Copilot Features

Step 6: Getting Better AI Suggestions

What Your AI Assistant Sees

The "Neighboring Tabs" Trick

Step 7: Quality Control & Best Practices

Understanding AI Limitations

Security Essentials

Better Prompt Writing

Repository-Level Customization with Copilot Instructions

Step 8: Unlocking Advanced Copilot Features

Understanding Your Options

Model Selection

GitHub Copilot Limitations

Basic Chat vs Suggestions

Step 9: Mastering Chat and Agent Modes

The Three Chat Modes

When to Use Each Mode

Agent Mode Examples

Using Chat Participants

Step 10: Power User Features and Advanced Workflows

Advanced Slash Commands

Multi-File Operations

Stage 2 Practice Exercises

Exercise 1: Chat Mode Practice

Exercise 2: Agent Mode Project

Exercise 3: Advanced Features

Ready for CLI Tools?

Stage 3: CLI-Based AI Agents (Claude Code & Gemini)

Step 11: Meet Claude Code – Your Terminal AI Assistant

What is Claude Code?

Simple example:

Pricing

Claude Code Limitations

Installation

Basic Usage

Key Features

Project-Level Customization with Claude.md

Claude Code Autonomous Development Sessions

Claude Code Keyboard Shortcuts

Step 12: Google Gemini CLI

When to Use Gemini vs Claude Code:

Installation

Authentication

Gemini CLI Limitations

Unique Gemini Features

Turn Your Sketches Into Code

Fix Bugs By Showing Gemini Images

Turn Architecture Diagrams Into Code

Why This Visual Coding is Amazing

Step 13: Comparing CLI Tools

Step 14: Advanced CLI Workflows

Workflow 1: Interactive Code Review with Claude Code

Workflow 2: Conversational Architecture Analysis with Gemini

Workflow 3: Interactive Test-Driven Development

Combining VS Code with CLI Tools

The Power of Hybrid Workflows:

How to Practically Combine Tools:

Quick Switching Setup

What is Quick Switching?

Stage 3 Practice Exercises