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.

Start from zero Pick your stack

$ 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.

Agent from scratch

5 tutorials1h 35m total

Build a working agent loop with no framework — tool calls, memory, and control flow you fully own.

1Build your first agent loop
2Define structured tool schemas
3Add memory and conversation state
4Handle tool errors and retries
5Ship it: package and run your agent

Add agents to an existing SaaS

4 tutorials1h 12m total

Drop an agent into an app you already ship — without rewriting your codebase or your data model.

1Pick the sidecar vs. inline pattern
2Expose scoped, audited DB tools
3Wire the agent to your auth context
4Deploy the agent alongside your app

Multi-agent orchestration

4 tutorials1h 20m total

Coordinate specialist agents — routing, hand-offs, and shared state across a multi-agent system.

1Design a router/worker topology
2Pass context between agents cleanly
3Add a supervisor and hand-offs
4Parallelize and merge agent results

Agent eval & observability

3 tutorials58m total

Measure agents like software — metrics, regression suites, and traces that catch silent failures.

1Pick 5 metrics that catch regressions
2Build a repeatable eval harness
3Trace and debug failing runs

Featured tutorials

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

All tutorials

Beginner1 min

Image rendering smoke test (June 25, 2026)

Internal QA test for the markdown image-size + alignment rollout. Will be deleted within minutes of creation.

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.

Intermediate10 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.

Beginner5 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.

Beginner5 min

Add an AI agent to an existing SaaS without rewriting it

You do not need to rebuild your product to ship an AI agent inside it. The trick is to expose the service functions you already have — search records, create an order, fetch a customer — as tools, then run a small server-side agent loop that the model uses to orchestrate them. This tutorial wraps an existing service layer as tools, scopes every call to the authenticated user, separates safe read tools from gated write tools, exposes the agent as one authenticated endpoint, and deploys that endpoint to Totalum. Your database, auth, and business logic stay untouched.