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.
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
Each path is an ordered run of copy-paste tutorials. Start at step one or drop in wherever you are.
Build a working agent loop with no framework: tool calls, memory, and control flow you fully own.
Drop an agent into an app you already ship, without rewriting your codebase or your data model.
Coordinate specialist agents: routing, hand-offs, and shared state across a multi-agent system.
Measure agents like software: metrics, regression suites, and traces that catch silent failures.
Single, self-contained walkthroughs you can finish in one sitting.
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.
A step-by-step, copy-paste tutorial for building AI agents.
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.
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.
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.
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.
Tell us your model provider and runtime, and we'll surface the tutorials that match.
The latest tutorials, fresh off the press.
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.
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.
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.