--- title: Generation Hooks: Type-Safe AI Beyond Chat | daily.dev description: TanStack AI has released generation hooks, a unified set of React (with Solid, Vue, and Svelte support coming) hooks for non-chat AI activities like image... canonical: https://daily.dev/posts/generation-hooks-type-safe-ai-beyond-chat-civ6cmwrc twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: Generation Hooks: Type-Safe AI Beyond Chat | daily.dev og:description: TanStack AI has released generation hooks, a unified set of React (with Solid, Vue, and Svelte support coming) hooks for non-chat AI activities like image... og:url: https://daily.dev/posts/generation-hooks-type-safe-ai-beyond-chat-civ6cmwrc og:image: https://api.daily.dev/og/posts/civ6CmwRC.png og:image:alt: Generation Hooks: Type-Safe AI Beyond Chat og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # Generation Hooks: Type-Safe AI Beyond Chat **[TanStack](https://daily.dev/sources/tanstack-blog)** · 7 min read · 0 upvotes · 0 comments ## Summary TanStack AI has released generation hooks, a unified set of React (with Solid, Vue, and Svelte support coming) hooks for non-chat AI activities like image generation, text-to-speech, transcription, summarization, and video generation. Every hook shares the same API surface (generate, result, isLoading, error, stop, reset) and supports three transport modes: server-sent events, direct fetcher calls, and a new server function streaming mode that combines type safety with real-time updates. Video generation handles job-based polling automatically. The hooks are available now in @tanstack/ai-client and @tanstack/ai-react, with plans to expand beyond OpenAI adapters. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Questions this post answers ### What is TanStack AI's server function streaming mode and how does it differ from regular fetcher calls? Server function streaming lets a server function return a Response object containing an SSE stream, which the client automatically detects and parses in real-time. This combines the type safety of server functions (typed input parameters) with the real-time feedback of streaming, unlike a plain fetcher which waits for the full result before updating the UI. Detection is zero-config: if the fetcher returns a Response, it is treated as an SSE stream, otherwise as a direct result. _Developers wiring real-time AI UIs can track TanStack AI updates like this on daily.dev._ ### How does useGenerateVideo handle video generation given that providers like Sora use job-based polling? useGenerateVideo submits a prompt, receives a job ID, and polls for status automatically, exposing jobId and videoStatus as reactive state that updates with pending, processing, progress percentage, and finally the completed video URL. This removes the need to write a manual polling loop, since video generation can take minutes unlike image or speech generation. _Teams adding video generation features can follow tooling like this via daily.dev._ ### What packages do I need to install to use TanStack AI generation hooks with OpenAI in a React app? Install @tanstack/ai, @tanstack/ai-react, @tanstack/ai-client, and @tanstack/ai-openai via a package manager like pnpm. Then create a server function with createServerFn that wraps generateImage (or another generation function) using an adapter like openaiImage('gpt-image-1'), and consume it in a component with useGenerateImage from @tanstack/ai-react. _Developers evaluating AI SDKs for React apps can compare options like this on daily.dev._ ## Similar posts on daily.dev - [TanStack Releases Framework Agnostic AI Toolkit](https://daily.dev/posts/tanstack-releases-framework-agnostic-ai-toolkit-j747yitl6) · InfoQ · 1 upvotes · 0 comments - [Generative UI in 2026: A Developer Guide That Ships](https://daily.dev/posts/generative-ui-in-2026-a-developer-guide-that-ships-didpe5oji) · Alex CloudStar · 0 upvotes · 0 comments --- Tags: [#ai](https://daily.dev/tags/ai), [#react](https://daily.dev/tags/react), [#typescript](https://daily.dev/tags/typescript), [#tanstack](https://daily.dev/tags/tanstack) [View this post on daily.dev](https://daily.dev/posts/generation-hooks-type-safe-ai-beyond-chat-civ6cmwrc) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"Generation Hooks: Type-Safe AI Beyond Chat","url":"https://daily.dev/posts/generation-hooks-type-safe-ai-beyond-chat-civ6cmwrc","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/generation-hooks-type-safe-ai-beyond-chat-civ6cmwrc"},"datePublished":"2026-08-23T12:22:22.745Z","dateModified":"2026-08-23T12:51:44.261Z","description":"TanStack AI has released generation hooks, a unified set of React (with Solid, Vue, and Svelte support coming) hooks for non-chat AI activities like image...","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/ff09349fb92872885440965b6f8e4b09?_a=AQAEuop","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/ff09349fb92872885440965b6f8e4b09?_a=AQAEuop","isAccessibleForFree":true,"articleSection":"TanStack","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"TanStack","logo":"https://media.daily.dev/image/upload/s--TVIrvIT7--/f_auto,q_auto/v1787487634/logos/tanstack-blog?_a=BAMAMicg0","url":"https://daily.dev/sources/tanstack-blog"},"commentCount":0,"discussionUrl":"https://daily.dev/posts/generation-hooks-type-safe-ai-beyond-chat-civ6cmwrc","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":0},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":0}],"keywords":"ai,react,typescript,tanstack","timeRequired":"PT7M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"TanStack","item":"https://daily.dev/sources/tanstack-blog"},{"@type":"ListItem","position":3,"name":"Generation Hooks: Type-Safe AI Beyond Chat"}]} {"@context":"https://schema.org","@type":"FAQPage","@id":"https://daily.dev/posts/generation-hooks-type-safe-ai-beyond-chat-civ6cmwrc#faq","mainEntity":[{"@type":"Question","name":"What is TanStack AI's server function streaming mode and how does it differ from regular fetcher calls?","acceptedAnswer":{"@type":"Answer","text":"Server function streaming lets a server function return a Response object containing an SSE stream, which the client automatically detects and parses in real-time. This combines the type safety of server functions (typed input parameters) with the real-time feedback of streaming, unlike a plain fetcher which waits for the full result before updating the UI. Detection is zero-config: if the fetcher returns a Response, it is treated as an SSE stream, otherwise as a direct result. Developers wiring real-time AI UIs can track TanStack AI updates like this on daily.dev."}},{"@type":"Question","name":"How does useGenerateVideo handle video generation given that providers like Sora use job-based polling?","acceptedAnswer":{"@type":"Answer","text":"useGenerateVideo submits a prompt, receives a job ID, and polls for status automatically, exposing jobId and videoStatus as reactive state that updates with pending, processing, progress percentage, and finally the completed video URL. This removes the need to write a manual polling loop, since video generation can take minutes unlike image or speech generation. Teams adding video generation features can follow tooling like this via daily.dev."}},{"@type":"Question","name":"What packages do I need to install to use TanStack AI generation hooks with OpenAI in a React app?","acceptedAnswer":{"@type":"Answer","text":"Install @tanstack/ai, @tanstack/ai-react, @tanstack/ai-client, and @tanstack/ai-openai via a package manager like pnpm. Then create a server function with createServerFn that wraps generateImage (or another generation function) using an adapter like openaiImage('gpt-image-1'), and consume it in a component with useGenerateImage from @tanstack/ai-react. Developers evaluating AI SDKs for React apps can compare options like this on daily.dev."}}]} ```