Step-by-step agent tutorials

Build production agents, step by step.

Clean, copy-paste tutorials for building AI agents: first-class code blocks, real eval results, and no fluff. Follow a path or jump straight to the step you need.

$ npm i && copy-paste the next step

Learning paths

Curated tutorial sequences

Each path is an ordered run of copy-paste tutorials. Start at step one or drop in wherever you are.

Featured tutorials

Single, self-contained walkthroughs you can finish in one sitting.

Intermediate11 min

Cancel an In-Flight Claude Tool Call From the Browser

Wire AbortController from the browser into the Claude stream and your tools, cancel a run even after a reload, and clean up partial side effects safely.

Intermediate13 min

Persist Claude tool-call results across page reloads in Next.js (June 2026)

A step-by-step, copy-paste tutorial for building AI agents.

Intermediate13 min

Resume Claude streams across browser reload with Last-Event-ID (June 2026)

Make a Claude turn survive a browser reload: server-side ring buffer keyed by message.id, the WHATWG Last-Event-ID header, and a Next.js App Router Route Handler that replays missed SSE frames in 180 ms. Measured June 2026 on claude-sonnet-4-6.

Intermediate11 min

Relay Claude SSE to the browser in Next.js (June 2026)

A copy-paste Next.js App Router pattern that relays Claude's Messages-API SSE events to the browser via a Route Handler and a fetch+ReadableStream client. Includes the runtime, headers, and disconnect handling that work around the legacy pages/api flushing bug documented in Vercel Discussion #48427. Measured first-token latency: 480 ms; cost approximately $0.0041 per turn with claude-sonnet-4-6 at June 2026 pricing.

Intermediate11 min

Stream Claude tool calls in a TypeScript agent loop (June 2026)

A complete TypeScript tutorial for the streaming agent loop on Claude: input_json_delta accumulation, multi-turn dispatch, AbortController cancellation, and the eager_input_streaming workaround for the verified 5 second first-content delay on tool use. About $0.03 per call with claude-sonnet-4-6 at June 2026 pricing.

Beginner6 min

Build your first AI agent from scratch in 30 minutes

An AI agent is just a loop: you call a model, the model asks to run a tool, you run it, you feed the result back, and you repeat until the model is done. In this tutorial you build that loop yourself in plain TypeScript against the Anthropic Messages API, no framework. You will wire up two tools (read a file, run a calculation), let the model orchestrate them, add a turn cap and basic guardrails, then verify the whole thing end to end. The result is a small research agent you fully understand and can extend with your own tools.

Pick your stack

Tell us your model provider and runtime, and we'll surface the tutorials that match.

From the notebook

The latest tutorials, fresh off the press.

Found a bug or want a topic covered?

Found a bug in a tutorial, want a topic covered, or shipping something with these patterns? Send the details. Code snippets and repro steps welcome.

Get in touch