Prologue
A craftsperson picks their tools carefully.
You do not need every tool listed here. But a professional recognizes each one, knows when to reach for it, and can justify the choice out loud. This chapter is your map of the modern AI developer landscape — and at the end we chain a handful of these into one complete workflow.
Section 4.0
The Tool Map
Every tool falls into one of six categories: author, build, host, connect, sense, sell. Keep this map in your head.
diagramclaude-code
AUTHOR: VS Code · Cursor · Claude Code
BUILD: Lovable · Supabase · Docker
HOST: Vercel · Railway · Render · Cloudflare
CONNECT: n8n · Postman · Bruno · MCP Servers · OpenRouter
SENSE: Firecrawl · Exa · Tavily · ElevenLabs
SELL: Stripe · ResendClaude Code — Terminal
Screenshot placeholder
Foldout diagram from the printed handbook grouping every tool into six colored zones.
Editor
VS Code
The default code editor. Free, extensible, fast.
When to reach for it
- Everyday coding.
- Extensions for language support.
- Pairs with Claude Code and Cursor.
Claude Code — Terminal
Screenshot placeholder
Screenshot of VS Code in action within the recommended workflow.
AI CLI
Claude Code
Terminal-first AI pair programmer that reads and edits files.
When to reach for it
- Terminal edits across many files.
- Long-running refactors.
- Repo-aware questions.
Claude Code — Terminal
Screenshot placeholder
Screenshot of Claude Code in action within the recommended workflow.
AI Editor
Cursor
A VS Code fork with AI baked into the UI. Great for inline edits.
When to reach for it
- Inline autocomplete and edits.
- When you prefer a GUI to the terminal.
- Multi-file edits with visual diffs.
Claude Code — Terminal
Screenshot placeholder
Screenshot of Cursor in action within the recommended workflow.
Source Control
GitHub
Cloud home for repositories, PRs, issues, CI, and releases.
When to reach for it
- Any project you want to keep or share.
- Team collaboration and PR reviews.
- Trigger deployments and Actions.
Claude Code — Terminal
Screenshot placeholder
Screenshot of GitHub in action within the recommended workflow.
Full-stack AI
Lovable
Build production web apps by chatting; ships React + Cloud backend.
When to reach for it
- Zero-to-MVP web apps.
- Client demos in an afternoon.
- Full-stack with built-in auth and DB.
Claude Code — Terminal
Screenshot placeholder
Screenshot of Lovable in action within the recommended workflow.
Backend
Supabase
Postgres, auth, storage, edge functions and realtime in one platform.
When to reach for it
- Auth + database + storage in one.
- Realtime dashboards.
- Serverless edge functions.
Claude Code — Terminal
Screenshot placeholder
Screenshot of Supabase in action within the recommended workflow.
Automation
n8n
Visual workflow builder for chaining APIs, webhooks and AI calls.
When to reach for it
- No-code chaining of APIs and AI.
- Cron jobs and webhooks.
- Great glue between SaaS tools.
Claude Code — Terminal
Screenshot placeholder
Screenshot of n8n in action within the recommended workflow.
Containers
Docker
Package your app plus its environment into a portable image.
When to reach for it
- Package a Python or Node service with its runtime.
- Local dev parity with production.
- Any host that accepts images.
Claude Code — Terminal
Screenshot placeholder
Screenshot of Docker in action within the recommended workflow.
Hosting
Railway
Deploy backends and databases with one click. Great DX for AI apps.
When to reach for it
- Backend + Postgres + cron in minutes.
- Great for hobby projects and paid MVPs.
- Auto-deploys from GitHub.
Claude Code — Terminal
Screenshot placeholder
Screenshot of Railway in action within the recommended workflow.
Hosting
Vercel
The frontend cloud. Ideal for Next.js, Vite and edge functions.
When to reach for it
- Frontends (Next.js, Vite, Astro).
- Edge functions and preview URLs per PR.
- Great free tier.
Claude Code — Terminal
Screenshot placeholder
Screenshot of Vercel in action within the recommended workflow.
Hosting
Render
Simple hosting for web services, cron jobs, background workers.
When to reach for it
- Long-running web services and workers.
- Cron jobs and static sites.
- Simple pricing.
Claude Code — Terminal
Screenshot placeholder
Screenshot of Render in action within the recommended workflow.
API Client
Postman
Explore, test and document HTTP APIs collaboratively.
When to reach for it
- Exploring third-party APIs.
- Sharing collections with a team.
- Auto-generating docs.
Claude Code — Terminal
Screenshot placeholder
Screenshot of Postman in action within the recommended workflow.
API Client
Bruno
Open-source, git-friendly Postman alternative. Requests as files.
When to reach for it
- Version-controlled API requests.
- Offline-first, git-friendly.
- Great pair with Claude Code repos.
Claude Code — Terminal
Screenshot placeholder
Screenshot of Bruno in action within the recommended workflow.
AI Gateway
OpenRouter
One API for many models. Compare and fall back gracefully.
When to reach for it
- Comparing model quality/cost.
- Fallbacks when a provider is down.
- Accessing many models with one key.
Claude Code — Terminal
Screenshot placeholder
Screenshot of OpenRouter in action within the recommended workflow.
Voice AI
ElevenLabs
Ultra-realistic text-to-speech and voice cloning.
When to reach for it
- Voice agents and podcasts.
- Multi-lingual narration.
- Character voices for demos.
Claude Code — Terminal
Screenshot placeholder
Screenshot of ElevenLabs in action within the recommended workflow.
Web Scraping
Firecrawl
Turn websites into clean markdown, perfect for RAG pipelines.
When to reach for it
- Turning URLs into clean markdown for RAG.
- Deep crawls with JS rendering.
- Alternative to writing custom scrapers.
Claude Code — Terminal
Screenshot placeholder
Screenshot of Firecrawl in action within the recommended workflow.
AI Search
Exa
Neural search that returns high-signal results for LLMs.
When to reach for it
- Neural search for research agents.
- Finding blog posts, papers, tweets.
- Similarity search over the web.
Claude Code — Terminal
Screenshot placeholder
Screenshot of Exa in action within the recommended workflow.
AI Search
Tavily
Search API tuned for agents — returns concise, cited answers.
When to reach for it
- Agent-native search with citations.
- Question-first search API.
- Great for real-time answer agents.
Claude Code — Terminal
Screenshot placeholder
Screenshot of Tavily in action within the recommended workflow.
Payments
Stripe
Charge cards, run subscriptions, manage invoices.
When to reach for it
- Card payments and subscriptions.
- Checkout, Customer Portal, invoices.
- Webhooks for entitlement sync.
Claude Code — Terminal
Screenshot placeholder
Screenshot of Stripe in action within the recommended workflow.
Email
Resend
Modern email API with React-based templates.
When to reach for it
- Transactional email with React templates.
- Great DX for developers.
- Domain-based deliverability.
Claude Code — Terminal
Screenshot placeholder
Screenshot of Resend in action within the recommended workflow.
Protocol
MCP Servers
Model Context Protocol — plug tools into Claude Code as capabilities.
When to reach for it
- Add capabilities to Claude Code as pluggable tools.
- Standardized protocol for tool servers.
- Bridge to internal APIs safely.
Claude Code — Terminal
Screenshot placeholder
Screenshot of MCP Servers in action within the recommended workflow.
Part II · End-to-End
One Complete Workflow
Let us wire ten of these tools into a single, shippable product: an AI Research Digest that scrapes the top articles on a topic every morning, summarizes them, emails the digest to subscribers, and charges $5/month.
diagramclaude-code
Cron (Railway)
│
▼
n8n workflow
├─▶ Firecrawl → scrape top 10 URLs on a topic
├─▶ Claude (via OpenRouter) → summarize + rank
├─▶ Supabase → store digest + subscribers
├─▶ Resend → email HTML digest
└─▶ Stripe webhook → sync paid subscribersClaude Code — Terminal
Screenshot placeholder
n8n canvas showing the six-node workflow with a green run indicator on every node.
- Build the frontend in Lovable (signup page + Stripe checkout).
- Persist users and digests in Supabase.
- Compose the daily job in n8n, deployed to Railway.
- Use Firecrawl for scraping and Exa or Tavily for discovery.
- Route AI calls through OpenRouter for provider redundancy.
- Send digests through Resend; monetize via Stripe.
- Wire a Claude Code repo with everything under Git; test endpoints in Bruno.
Claude Code — Terminal
Screenshot placeholder
Final email digest rendered in Gmail: three summarized articles with citations.