What this is

This is the developer-facing slice of the AI Path. The broader AI stack 2026 Map covers everything - models, protocols, agents, agent extensions, and tools. This page narrows to the surface a builder actually touches on a normal day: an AI pair programmer for code, an AI design partner, an image model, and the model and protocol that make all of it work.

If you read every article on this page in order, you finish with a working map of what AI looks like inside a developer's workflow in 2026. No agents-and-frameworks theory. No general-purpose AI primer. Just the tools you reach for between commits.

It also skips a few things on purpose: AI in CI and testing, and the meta-frameworks under each tool. Those belong in the broader AI stack 2026 map - this one stays on the developer surface.

The shortest path from "I write code" to "I write code with AI" - in one page.

Coding with AI

The largest category by daily usage. Two products dominate, in two different interaction shapes: ambient autocomplete that types alongside you, and an agentic session that takes a goal end-to-end.

LAYER 01

Coding tools

AI · Coding

Two AI pair programmers, two different shapes. GitHub Copilot is ambient autocomplete - inline completions, a chat sidebar, agent mode, all inside your IDE. Claude Code is an agentic session - you describe a goal and it works on it end-to-end, running in a terminal or inside VS Code / JetBrains through the official extension. Most teams use both for different parts of the workflow.

Designing with AI

The category that grew up fastest in 2025. AI is now a credible partner for the early stages of UI work - exploring layouts, generating component variants, and rapidly producing visual options.

LAYER 02

Design tools

AI · Design

Claude Design is Anthropic's web surface for using Claude as a design partner. It is most useful for the explore-and-iterate part of UI work - not as a Figma replacement, but as a way to generate, branch, and refine design directions through conversation.

Generating images

The third common surface for developers: when you need an image - a hero, a placeholder, an illustration for a slide - and you do not have a designer available right now.

LAYER 03

Image tools

AI · Image

Nano Banana is the nickname for Google's Gemini 2.5 Flash Image - a fast, conversational image-generation and editing model. The first article covers what it is; the second tours what it can actually do, with concrete examples that show why it fits a developer workflow more than a designer one.

The model and the wire

The two layers underneath every tool above. You do not need to understand them to use Copilot, but understanding them changes what you can build with the same tools.

LAYER 04

Model

AI · Models

Claude is the foundation-model family underneath Claude Code, Claude Design, and (now) one of the model options inside Copilot's model picker. Understanding the tier system (small / mid / large) and the practical differences from other providers makes every downstream tool more legible.

LAYER 05

Protocol

AI · Protocol

Model Context Protocol (MCP) is how AI assistants connect to external tools, data, and services. Every coding tool on this map speaks MCP. You do not need it to use them, but if you want Claude Code or Copilot to talk to your internal tools, MCP is the answer.

Three reading orders

The map is sorted by category, but most readers want a route. Three orders, depending on who you are.

For: developer trying AI for the first time

The shortest way in

  1. What is Claude?
  2. What is GitHub Copilot?
  3. Copilot and Claude Code
  4. Try Copilot inside your editor for a week
For: developer already using AI daily

Broaden the toolkit

  1. What is Claude Code?
  2. Copilot and Claude Code
  3. Copilot vs Claude Code: engineer vs artist
  4. Claude Code is a Magician
  5. What is Claude Design?
  6. Nano Banana + what it can do
  7. MCP to wire your own tools in
For: depth-first reader

Every article, in order

  1. Read the full index table below, top to bottom - every article on this map with a one-line reason for each.

The map at a glance

If you read only this section, here is the developer-facing AI stack from the top down - in the same order the body sections walk:

For everything not in this slice - agents, frameworks, the Microsoft Agent Framework, agent skills as a packaging format - read the broader AI stack 2026 map.

Every article in the map

Every article on this developer-facing slice, by category, with a one-line reason to read.

Category Article Why read it
Coding What is GitHub Copilot? 101 The editor-resident AI pair programmer - completions, chat, agent mode, and the model picker.
Coding What is Claude Code? 101 The terminal-based autonomous coding agent - long sessions, file edits, command execution.
Coding GitHub Copilot and Claude Code 101 The side-by-side - editor vs terminal, when to pick which, and the workflow split.
Coding Copilot vs Claude Code: engineer vs artist 101 The focused temperament essay - one axis, with concrete tasks where each tool's default pays.
Coding Claude Code is a Magician 101 A real 2018 snake game migrated in one Claude Code session - what twenty minutes of agentic work actually looks like, screenshot by screenshot.
Design What is Claude Design? 101 Anthropic's web surface for using Claude as a design partner - where it fits in a designer's workflow.
Image What is Nano Banana? 101 Google's fast image-generation model - the practical answer for image work in a dev workflow.
Image What Nano Banana can do 101 The capability tour - concrete examples of what Nano Banana ships day-to-day.
Model What is Claude? 101 The foundation model family underneath Claude Code, Claude Design, and one option in Copilot's picker.
Protocol What is Model Context Protocol? 101 The open standard for connecting AI assistants to your tools, data, and services.