by Alem Tuzlak on Mar 11, 2026.

Chat is just the beginning. Your AI-powered app probably needs to generate images, convert text to speech, transcribe audio, summarize documents, or create videos. Until now, wiring up each of these activities meant writing custom fetch logic, managing loading states, handling errors, and juggling streaming protocols for every single one.

Not anymore.

TanStack AI now ships generation hooks: a unified set of React hooks (with Solid, Vue, and Svelte support) that give you first-class primitives for every non-chat AI activity:

• useGenerateImage() for image generation
• useGenerateSpeech() for text-to-speech
• useTranscription() for audio transcription
• useSummarize() for text summarization
• useGenerateVideo() for video generation

Every hook follows the exact same API surface. Learn one, and you know them all:

The result is fully typed. The error is handled. Loading state is tracked. Abort is built in. No boilerplate, no useEffect spaghetti, no manual state management.

Every generation hook supports three transport modes, so you can pick the one that fits your architecture:

1. Streaming (Connection Adapter)

The classic SSE approach. Your server wraps the generation in toServerSentEventsResponse(), and the client consumes it through fetchServerSentEvents():

This is the most flexible option. It works with any server framework, any hosting provider, any deployment model.

2. Direct (Fetcher)

Sometimes you don't need streaming. You just want to call a function and get a result. The fetcher mode does exactly that:

The server function runs, returns JSON, and the hook updates your UI. Simple, synchronous from the user's perspective, and fully type-safe.

3. Server Function Streaming (NEW)

This is the one we're most excited about. It combines the type safety of server functions with the real-time feedback of streaming, and it works beautifully with TanStack Start.

Here is the problem we solved: the connection approach uses a generic Record<string, any> for its data payload. Great for flexibility, but your input loses all type information. The fetcher approach is fully typed, but it waits for the entire result before updating the UI.

Server Function Streaming gives you both. Your fetcher returns a Response object (an SSE stream), and the client automatically detects it and parses the stream in real-time:

From the client's perspective, the API is identical to a direct fetcher call. But behind the scenes, TanStack AI detects the Response object, reads the SSE stream, and feeds chunks through the same event pipeline used by the connection adapter. Progress events fire in real-time. Errors are reported as they happen. And your input parameter stays fully typed throughout.

The detection is simple and zero-config: if your fetcher returns a Response, it's treated as an SSE stream. If it returns anything else, it's treated as a direct result. No flags, no configuration, no separate hook.

When a fetcher returns a Response, the GenerationClient runs a simple check:

The parseSSEResponse utility reads the response body as a stream of newline-delimited SSE events, parses each data: line into a StreamChunk, and yields them into the same processStream method that the ConnectionAdapter uses. Same event types, same state transitions, same callbacks.

This means every feature that works with streaming connections also works with server function streaming: progress reporting, chunk callbacks, abort signals, error handling. All of it.

Sometimes the raw result from the server isn't what you want to store in state. Every generation hook accepts an onResult callback that can transform the result before it's stored:

TypeScript infers the output type from your transform function. No explicit generics needed.

Video generation is a different beast. Unlike image or speech generation, video providers like OpenAI's Sora use a jobs-based architecture: you submit a prompt, receive a job ID, then poll for status until the video is ready. This can take minutes.

useGenerateVideo() handles all of this transparently:

The hook exposes jobId and videoStatus as reactive state that updates in real-time as the server streams polling updates. Your users see "pending", "processing", progress percentages, and finally the completed video URL, all without you writing a single polling loop.

Here's what makes this design special: the API is identical across all five generation types. Once you've built an image generation page, building a speech generation page is a matter of swapping the hook name and adjusting the input:

Same generate(). Same result. Same isLoading. Same error. Same stop() and reset(). The consistency is intentional: we want AI features to be as easy to add to your app as a form submission.

Install the packages:

Create a server function that streams:

Use it in your component:

Three lines of hook setup. Type-safe input. Streaming progress. Error handling. Abort support. That's it.

Generation hooks are available now in @tanstack/ai-client and @tanstack/ai-react. Support for Solid, Vue, and Svelte is coming soon with the same API surface.

We're also working on expanding the adapter ecosystem so you can use these hooks with providers beyond OpenAI. The generation functions are provider-agnostic by design, so swapping from OpenAI to Anthropic or a local model will be a single line change.

Build something cool and let us know. We can't wait to see what you create.