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.
Tag
6 posts tagged.
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.
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.
The Model Context Protocol (MCP) is a standard way to expose tools to any MCP-capable client, Claude Desktop, IDEs, or your own agents, so you write an integration once and reuse it everywhere. In this tutorial you build an MCP server in TypeScript that exposes a single typed tool over the stdio transport, test it with the MCP Inspector, then register it with Claude and call it from a real conversation. You will also learn the one rule that trips up everyone on stdio: never write to stdout. By the end you have a reusable server you can extend with your own tools.