Technical writing from the Jodei team
Practical notes on AI-native development, React, and shipping fast web products.
- 6 min read
Streaming Structured Objects: Type-Safe Partial JSON with streamObject in Next.js
generateObject waits for the complete response — streamObject delivers typed partial JSON as tokens arrive. Here's how to wire it into a Next.js 16 route handler, read it with useObject, and show incremental structured data without a full-list wait.
- 6 min read
LLM Error Handling in Production: Rate Limits, Timeouts, and Fallbacks in Next.js
Production AI apps fail in predictable ways — 429s, read timeouts, and content refusals. Here's how to classify each error type, retry transient failures with backoff, and surface a clean degraded state instead of a broken spinner.
- 5 min read
Model Routing in Next.js: Directing Requests to the Right LLM
Not every LLM request needs your most capable model. Here's how to classify request complexity, route between a fast cheap model and a capable one in a Next.js route handler, and fall back gracefully when the lighter model misses.
- 6 min read
LLM Observability with OpenTelemetry: Tracing AI Calls in Next.js
The Vercel AI SDK has built-in OpenTelemetry tracing — add one telemetry option and every LLM call emits spans with token counts, model names, and latency. Here's how to wire it into Next.js 16 and what to watch in production.
- 6 min read
Context Window Management: Keeping Long Conversations Under the Token Limit
Every token in your conversation history costs money and slows down the model. Here's how to track usage, implement a sliding-window strategy, and compress history into a rolling summary — all in a Next.js 16 route handler.
- 7 min read
RAG with the Vercel AI SDK: Grounding LLM Responses in Your Own Data
Retrieval-Augmented Generation lets you feed relevant documents into the model's context window at query time — no fine-tuning required. Here's how to build a minimal RAG pipeline in Next.js 16 using the AI SDK's embed helpers, a cosine-similarity search, and streamText.
- 6 min read
Multi-Step AI Agents with the Vercel AI SDK: Agentic Loops in Next.js
The maxSteps option in streamText unlocks true agentic behaviour — the model reasons, calls tools, sees results, and loops until it has a final answer. Here's how to wire it up in Next.js 16 and keep it from spinning forever.
- 6 min read
Prompt Caching with the Claude API: Cut LLM Costs in Next.js
Claude's prompt caching pins your system prompt tokens in its KV store so repeat requests pay 10x less for that prefix. Here's how to configure it in a Next.js 16 route handler and when it's worth the setup cost.
- 5 min read
unauthorized() and forbidden() in Next.js 16: Auth Interrupts for Clean Access Control
Next.js 16 adds unauthorized() and forbidden() — two functions that terminate rendering with a proper 401 or 403 and render a custom page. Here's how to use them in Server Components, Server Functions, and AI route handlers.
- 6 min read
Multimodal Inputs with the Vercel AI SDK: Sending Images to Vision Models in Next.js
Vision models can interpret screenshots, product photos, and scanned documents — but feeding them images through the Vercel AI SDK requires understanding how message content parts work. Here's the complete pattern for Next.js 16.
- 5 min read
next-devtools-mcp: Giving AI Agents Real-Time Access to Your Next.js App
Next.js 16 ships a built-in MCP endpoint at /_next/mcp. Pair it with next-devtools-mcp and your coding agent can read live errors, inspect routes, and look up Server Actions without guessing at runtime state.
- 6 min read
Edge Runtime vs Node.js: Choosing the Right Environment for AI Workloads in Next.js
Edge functions start faster and run closer to users, but lack the Node.js APIs that most AI SDKs require. Here's how to pick the right runtime for each part of your AI-native Next.js app.
- 6 min read
AI SDK Middleware: Logging, Retries, and Rate-Limiting Without Boilerplate
The Vercel AI SDK's middleware API lets you wrap every LLM call with cross-cutting concerns — token logging, exponential-backoff retries, per-user rate limits — in one place, without touching your route handlers.
- 6 min read
Tool Use with the Vercel AI SDK: LLM Function Calling in Next.js
Tool use turns a text model into a reasoning engine that can invoke real code. Here's how to define tools with Zod, wire them into streamText, and surface results in a Next.js 16 Server Component — without a waterfall.
- 5 min read
Structured Outputs with Zod: Type-Safe LLM Responses in Next.js
LLMs return untyped JSON that can drift from your schema at any time. Zod lets you validate and type every response at the boundary — so hallucinated keys and mistyped fields never reach your JSX.
- 5 min read
Parallel LLM Requests in React Server Components: Eliminating AI Fetch Waterfalls
Calling multiple LLM endpoints sequentially multiplies your latency. React Server Components make parallelising them almost free — here's the pattern, when to use Promise.allSettled, and how Suspense gives you incremental streaming on top.
- 5 min read
The after() API in Next.js 16: Non-Blocking Work After the Response
after() lets you run callbacks once the response is sent — perfect for logging LLM usage, writing audit trails, and firing analytics without slowing down your AI-native app.
- 5 min read
View Transitions in Next.js 16: Animating Between Pages Without a Library
React's ViewTransition component integrates with the browser's View Transitions API to animate route changes declaratively. Here's how to enable it in Next.js 16 and which three patterns cover most AI-native app use cases.
- 5 min read
useOptimistic in AI-Native Apps: Instant Feedback While the LLM Thinks
React 19's useOptimistic hook lets you show a temporary UI state immediately — before the server responds. Here's how to use it in AI-native Next.js apps to make LLM interactions feel instant.
- 5 min read
Server Functions in Next.js 16: Mutations Without an API Layer
Next.js 16 formalises the 'Server Function' model — async functions that run on the server and are callable from the client. Here's how they work, how to handle pending state with React 19's useActionState, and where they fit in AI-native workflows.
- 5 min read
Partial Prerendering in Next.js 16: Static Shells, Dynamic Holes
Partial Prerendering combines a cached static shell with streamed dynamic content in one HTTP response — no layout shift, no separate loading state. Here's how to enable it and when to reach for it.
- 5 min read
The use cache Directive: Next.js 16's New Approach to Caching
Next.js 16 introduces Cache Components — a new model where caching is declared inside functions with a directive, not set on routes or fetch calls. Here's how it works and when to adopt it.
- 6 min read
Caching AI API Responses in Next.js: What to Store, What to Skip
LLM calls are slow and expensive. Next.js gives you three caching layers — here's how to apply each one without serving stale or wrong output.
- 5 min read
Streaming UI with React Suspense: The Right Mental Model
Suspense lets you stream server-rendered HTML progressively — no client-side loading states needed. Here's how it works and when to reach for it in AI-native apps.
- 4 min read
React Server Components: How Your Bundle Stays Small
RSC renders components exclusively on the server — their code never ships to the browser. Here's what that means in practice for AI-native apps.