recipe-embedded-app-agent

You stream AI agent responses in Next.js by building a POST API route that constructs an agent per-request and emits Server-Sent Events (SSE) for live client updates. This enables progressive disclosure of reasoning and tool usage to interactive web clients.

Yes, you can display live tool call traces in a React chat interface by consuming the SSE stream with a dedicated client-side hook. This hook exposes text deltas and tool call events to render progressive UI patterns for real-time agent reasoning.

Handle streaming agent errors and per-session cost budgets by applying production-grade server-side error handling and per-session budgeting. The API route enforces cost limits and manages agent disposal after each request completes or fails.

The streaming agent approach works with Vue or Svelte frontends, not just React. The server-side API route streams SSE to any frontend, while the dedicated React hook provides ready-to-use client-side consumption for React applications specifically.

For background one-shot processing without streaming, use the same server-side agent construction without emitting SSE events. This handles tasks where streaming is unnecessary, while still maintaining per-request agent construction and disposal best practices.

You must configure the Node.js runtime for streaming API routes in Next.js to satisfy requirements for server-side streaming. This runtime configuration ensures proper SSE emission, per-request agent construction, and production-grade budget handling during live responses.