After finishing this lesson, you will be able to confidently do the following 3 things.

• ▸✅ Selection criteria: Cursor vs Copilot vs Claude Code
• ▸✅ Setting up MCP servers (filesystem · github · postgres)
• ▸✅ The context window size and pricing of each tool

Keep the learning objectives as a checklist — close the lesson once you can answer all of them.

Core takeaway

"The best tool" is not the goal — "the right tool for my situation" is. Choosing wrong means wasted tokens + skyrocketing learning time.

5-second decision flowchart

Just starting out?
   │
   ├─ YES → Cursor free plan ($0/month, 14-day Pro trial)
   │         └─ Once Tab autocomplete feels natural → Try Composer
   │
   └─ NO ──┐
           │
           ├─ Need UI/design fast?
           │    └─ YES → v0.dev (Vercel) or Lovable
           │
           ├─ Full-stack MVP in 1 hour?
           │    └─ YES → Bolt.new (StackBlitz)
           │
           ├─ Comfortable with terminal + autonomous tasks?
           │    └─ YES → Claude Code (npm global install)
           │
           ├─ Company / Enterprise?
           │    └─ YES → GitHub Copilot Business
           │              (legal liability · IP indemnification)
           │
           └─ Open source only?
                └─ Cody Free, Continue.dev

Recommended combinations (by monthly cost)

🟢 Free — Students / Job seekers

• ▸Cursor free plan — unlimited Tab autocomplete
• ▸ChatGPT free — general chat · debugging help
• ▸v0 free — monthly UI generation quota
• ▸GitHub Copilot — free with student verification

💚 $20/month — Serious learning

• ▸Cursor Pro $20 — unlimited Composer · advanced models
• ▸or Claude API + Claude Code — pay as you go (avg $5-15/month)

💎 $40-60/month — Professional developer

• ▸Cursor Pro + Claude API + ChatGPT Plus
• ▸Use the optimal tool for each task

Real strengths of each tool

Quick summary

• ▸Start with Cursor free
• ▸UI = v0, full-stack MVP = Bolt
• ▸Autonomous agent = Claude Code
• ▸Enterprise = Copilot

Cursor (Anysphere, 2023) — VS Code fork + AI-native

• ▸Tab: code autocomplete (predicts the next line)
• ▸Cmd+K: inline edit (modifies selected region)
• ▸Composer: multi-file editing · refactoring
• ▸Chat: right-sidebar conversation
• ▸Rules: per-project rules via .cursorrules
• ▸Pricing: $20/month, $400M ARR (2025), 1M+ developers

Windsurf (Codeium, 2024) — Cursor alternative

• ▸Cascade: more autonomous than Composer
• ▸Flow: multi-file change tracking
• ▸Slightly more proactive than Cursor (agentic)

GitHub Copilot (MS + OpenAI, 2021) — Enterprise standard

• ▸Integrates with VS Code · JetBrains · Vim · Neovim
• ▸Copilot Chat (conversation) + Workspace (multi-file)
• ▸Enterprise license · legal protection (IP indemnification)
• ▸Pricing: $10/month individual, $19/month business

Selection criteria:

Claude Code (Anthropic, 2024) — Autonomous agent in the terminal

• ▸Run with a single claude command
• ▸Automatically understands the entire project context (reads CLAUDE.md)
• ▸Autonomously edits multiple files, runs code, tests, and commits
• ▸MCP integration: calls DB · Slack · GitHub tools
• ▸Skills: domain-specific tools (claude-api · gstack, etc.)
• ▸Permission modes: ask · acceptEdits · plan · bypassPermissions

Aider (open source, 2023) — Claude/GPT pair programmer

• ▸CLI tool, git integration
• ▸Auto-commits on every change (easy rollback)
• ▸Auto-generates repo-map

Cursor vs Claude Code:

> 💡 2025 trend: Use both. Writing → Cursor (Tab is fast), complex tasks → Claude Code.

v0 (Vercel, 2024) — UI component generation

• ▸Prompt → React + Tailwind component instantly
• ▸Based on shadcn/ui (consistent design system)
• ▸Deploy immediately (Vercel integration)
• ▸Pricing: $20/month

Bolt (StackBlitz, 2024) — Full-stack app generation

• ▸Prompt → full Next.js · React · Vue app
• ▸Runs in the browser (WebContainer)
• ▸DB · auth integration (Supabase · Neon)

Lovable (Sweden, 2024) — Non-developer friendly

• ▸Full-stack app generation + natural language editing
• ▸Automatic GitHub push · deployment (Netlify)
• ▸"AI-powered version of Wix"

Comparison of 3 tools:

Usage patterns:
1. Idea validation: working MVP in 30 minutes with Bolt
2. UI mockups: explore component variations with v0
3. Internal tools: non-developers can build with Lovable

> 💡 Not finished code. Think of it as a prototype · mockup · starting point. Real production requires hardening with Cursor/Claude Code.

MCP (Anthropic, standardized 2024) — the standard protocol for LLM ↔ external tools.

Why standardize? Integrating every tool · DB · service individually creates an N×M problem → MCP provides a common interface.

3 capabilities:

Transport:

• ▸stdio — local process (Claude Desktop · Claude Code)
• ▸HTTP/SSE — remote server (team sharing)
• ▸WebSocket — bidirectional real-time

Existing MCP servers:

• ▸@modelcontextprotocol/server-filesystem — local files
• ▸@modelcontextprotocol/server-postgres — database queries
• ▸@modelcontextprotocol/server-github — Issues · PRs
• ▸Slack · Notion · Linear · Figma and many more

Build your own (Python · Node SDK available):

# server.py
from mcp.server import Server
app = Server("my-tools")

@app.tool()
async def get_user(id: str) -> dict:
    return await db.users.find(id)

Register in claude_desktop_config.json → Claude uses it like any other tool.

> 💡 2025 standard: VS Code · JetBrains · Cursor have all adopted MCP. Like LSP (2016), it is the common interface for AI tools.

Why you need it

Repeating "my project uses Next.js 15 · TypeScript · Drizzle · Postgres..." in every conversation means wasted tokens + wasted time. A single file at the project root gets automatically applied to every conversation.

File locations

• ▸Claude Code → CLAUDE.md (project root)
• ▸Cursor → .cursorrules or .cursor/rules/*.md (latest)
• ▸GitHub Copilot → .github/copilot-instructions.md
• ▸Aider → CONVENTIONS.md

Practical template (copy-paste to get started)

# Project Guide

## Stack
- **Framework**: Next.js 15 (App Router)
- **Language**: TypeScript (strict mode)
- **Styles**: Tailwind CSS + shadcn/ui
- **DB**: PostgreSQL + Drizzle ORM
- **Auth**: NextAuth.js v5 (OAuth: Google · Kakao)
- **Deployment**: Vercel
- **Testing**: Vitest + Playwright

## Folder structure
\\`\\`\\`
src/
├── app/              # App Router pages + API
├── components/       # React components
│   ├── ui/           # shadcn base
│   └── features/     # domain-specific
├── lib/              # utils · DB client
├── hooks/            # custom hooks
└── server/           # server-only (DB actions)
\\`\\`\\`

## Coding conventions
- Components: `function` declaration (no arrow functions)
- exports: named exports preferred (default only for page.tsx)
- import order: external → @/ → relative
- Comments: Korean OK. Complex logic only
- Variable names: camelCase, constants are UPPER_CASE
- Types: prefer `type`, use `interface` for extension

## Forbidden patterns
- ❌ `any` type
- ❌ `var` (const/let only)
- ❌ fetch inside React `useEffect` (use server component or react-query instead)
- ❌ new functions without tests
- ❌ "TODO" comments (use Linear/GitHub Issues)
- ❌ console.log in production code (use logger)

## Domain glossary
- User = User (both members and guests)
- Learner = Learner (subtype of User)
- Lesson = Lesson
- Progress = Progress

## Environment variables
- All in `.env.local` (keep `.env.example` in sync)
- Client-side: `NEXT_PUBLIC_` prefix only

## Workflow
1. New feature → write spec.md first (even if brief)
2. Small PRs — under 200 lines
3. Commit convention: feat/fix/refactor/test/chore

The effect of this file

Same request with vs without this file:

❌ Without:
> Me: "Create a login API"
> AI: "What framework? DB? Auth method?" (questions multiply)
> Me: Explains over 5 turns...
> Output tokens: ~5000

✅ With:
> Me: "Create a login API"
> AI: (reads CLAUDE.md and implements precisely with NextAuth + Drizzle + Postgres)
> Output tokens: ~800

6x savings + done in one shot.

Quick summary

• ▸CLAUDE.md = the single source of truth for all project context
• ▸Write once → auto-applied to every conversation
• ▸5-10x token savings · improved accuracy
• ▸New team members onboard fast through AI too

What MCP is — a recap

MCP (Model Context Protocol) = connects external tools to LLMs like Claude · Cursor · VS Code via a standard interface. Configure once and use the same tools everywhere.

The simplest setup — filesystem MCP

Edit the claude_desktop_config.json file for Claude Desktop:

Location:

• ▸macOS: ~/Library/Application Support/Claude/claude_desktop_config.json
• ▸Windows: %APPDATA%\Claude\claude_desktop_config.json

{
  "mcpServers": {
    "filesystem": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-filesystem",
        "/Users/myname/projects"
      ]
    }
  }
}

→ Claude can now directly read and write files in my projects folder.

Adding the GitHub MCP

{
  "mcpServers": {
    "github": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-github"],
      "env": {
        "GITHUB_PERSONAL_ACCESS_TOKEN": "ghp_xxxxxxxxxxxx"
      }
    }
  }
}

→ Claude can browse Issues · create PRs · search code. Get the GitHub token at settings > Developer settings > Personal access tokens.

Adding the Slack MCP

{
  "mcpServers": {
    "slack": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-slack"],
      "env": {
        "SLACK_BOT_TOKEN": "xoxb-...",
        "SLACK_TEAM_ID": "T01ABCDEFGH"
      }
    }
  }
}

Building your own — the simplest MCP server (Python)

# server.py — MCP that tells the current time
from mcp.server.fastmcp import FastMCP
from datetime import datetime

mcp = FastMCP("time-server")

@mcp.tool()
async def get_current_time(timezone: str = "Asia/Seoul") -> str:
    \"\"\"Get current time\"\"\"
    return datetime.now().isoformat()

if __name__ == "__main__":
    mcp.run()

pip install mcp
python server.py

Add to the config file:

{
  "mcpServers": {
    "time": {
      "command": "python",
      "args": ["/path/to/server.py"]
    }
  }
}

→ Ask Claude "What time is it?" and it calls the tool directly.

Common pitfalls

1. JSON syntax errors — missing commas. Open as .json in VS Code and check syntax
2. command path — if npx is not in PATH, use the absolute path (/usr/local/bin/npx)
3. Insufficient permissions — never point filesystem MCP at the root folder — security risk
4. Restart required — fully restart Claude Desktop after changing the config
5. Check logs — Claude Desktop > Developer > Open MCP Logs

The value of MCP from a token perspective

• ▸No repeated searches: no need to ask "Where is that file?" every time. MCP finds it directly
• ▸Automatic context: no more copy-pasting code every time. MCP reads it when needed
• ▸Automation: repetitive tasks (create PR · close issue, etc.) require zero repeated explanation

Quick summary

• ▸MCP = standard protocol for LLM ↔ external tools
• ▸Connect filesystem · GitHub · Slack in 5 minutes
• ▸Build your own MCP server in dozens of lines with Python · Node
• ▸Token savings + automation benefits

Understanding the concepts in this lesson lets you give AI specific instructions. Instead of a vague "fix this," use requests with vocabulary — that is the starting point for saving tokens.

• ▸"Recommend a workflow for using Cursor + Claude Code simultaneously"
• ▸"Create 5 MCP servers suitable for this project + config files"

Why this reduces tokens

Without the concepts, even after receiving an AI answer you need to ask "What does that mean?" again. That follow-up question is what burns tokens. Learn the concepts once and the conversation ends in a single exchange.