docs(blog): TanStack AI Just Learned to Compose Music#854
docs(blog): TanStack AI Just Learned to Compose Music#854LadyBluenotes merged 2 commits intoTanStack:mainfrom
Conversation
Announces the new generateAudio activity, streaming support, and fal + Gemini Lyria adapters for music, speech, and transcription. Covers: - One generateAudio() call, any adapter - stream: true -> AsyncIterable<StreamChunk> via toServerSentEventsResponse() - useGenerateAudio (React/Solid/Vue) + createGenerateAudio (Svelte) - geminiAudio(): Lyria 3 Pro/Clip + Gemini 3.1 Flash TTS multi-speaker - falAudio() / falSpeech() / falTranscription() tree-shakeable adapters
👷 Deploy request for tanstack pending review.Visit the deploys page to approve it
|
📝 WalkthroughWalkthroughA new blog post documenting TanStack AI's audio generation feature release, including the Changes
Estimated code review effort🎯 1 (Trivial) | ⏱️ ~3 minutes Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 inconclusive)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
src/blog/tanstack-ai-audio-generation.md (1)
37-37: Tighten wording for readabilityLine 37: “the exact same call” reads a bit wordy; consider “the same call”.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/blog/tanstack-ai-audio-generation.md` at line 37, Update the sentence that reads "the exact same call generates music..." to use tighter wording by replacing "the exact same call" with "the same call" in the paragraph mentioning geminiAudio and falAudio; ensure the rest of the sentence still lists MiniMax, DiffRhythm, Stable Audio 2.5 and the adapter examples (music_length_ms, seconds_total, duration) unchanged so the meaning remains clear.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@src/blog/tanstack-ai-audio-generation.md`:
- Line 86: The snippet accesses result.audio.url on a union type ({ url: string
} | { b64Json: string }) without narrowing; update the conditional to narrow the
union before accessing url (e.g., check that result and result.audio exist AND
that "url" is in result.audio using the in operator or a type guard) so you only
render <audio> when result.audio has a url property; refer to result, audio, url
and b64Json to locate the code and apply the in-based or guard-based type
narrowing.
---
Nitpick comments:
In `@src/blog/tanstack-ai-audio-generation.md`:
- Line 37: Update the sentence that reads "the exact same call generates
music..." to use tighter wording by replacing "the exact same call" with "the
same call" in the paragraph mentioning geminiAudio and falAudio; ensure the rest
of the sentence still lists MiniMax, DiffRhythm, Stable Audio 2.5 and the
adapter examples (music_length_ms, seconds_total, duration) unchanged so the
meaning remains clear.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: c1ebcd2f-e0a6-4bcf-8426-14742390d72e
⛔ Files ignored due to path filters (1)
public/blog-assets/tanstack-ai-audio-generation/header.pngis excluded by!**/*.png
📒 Files selected for processing (1)
src/blog/tanstack-ai-audio-generation.md
| Generate | ||
| </button> | ||
| {isLoading && <button onClick={stop}>Stop</button>} | ||
| {result?.audio.url && <audio src={result.audio.url} controls />} |
There was a problem hiding this comment.
🧩 Analysis chain
🌐 Web query:
In TypeScript, for a union type like { url: string } | { b64Json: string }, is result.audio.url valid without narrowing? Please provide canonical docs/examples.
💡 Result:
No, result.audio.url is not valid without narrowing on a union type like { url: string } | { b64Json: string } for result.audio. TypeScript only allows access to properties common to ALL members of a union type. Here, url exists only on the first member, while b64Json exists only on the second—there are no common properties beyond structural compatibility. Attempting audio.url produces the error: "Property 'url' does not exist on type '{ url: string; } | { b64Json: string; }". This prevents runtime errors if audio is the { b64Json: string } variant. To access url safely, narrow the type first using a type guard, such as the in operator: if ('url' in result.audio) { // TypeScript narrows to { url: string } console.log(result.audio.url); // Valid } else { // TypeScript narrows to { b64Json: string } console.log(result.audio.b64Json); } For better ergonomics with multiple variants, use discriminated unions by adding a literal discriminant property (e.g., kind: 'url' | 'b64'): type Audio = { kind: 'url'; url: string } | { kind: 'b64'; b64Json: string }; Then narrow with switch (result.audio.kind) { ... }. This behavior is unchanged as of TypeScript 5.x (current in 2026).
Citations:
- 1: https://www.typescriptlang.org/docs/handbook/unions-and-intersections.html
- 2: https://typescriptlang.org/docs/handbook/unions-and-intersections.html
- 3: https://stackoverflow.com/questions/58974640/typescript-property-does-not-exist-on-union-type
- 4: https://typescriptlang.org/docs/handbook/advanced-types.html
🏁 Script executed:
# Read the file around the relevant lines
cat -n src/blog/tanstack-ai-audio-generation.md | sed -n '30,90p'Repository: TanStack/tanstack.com
Length of output: 2685
Fix TypeScript type error in the React snippet
Line 86 accesses result.audio.url directly on the union type declared on line 34 ({ url: string } | { b64Json: string }). TypeScript does not allow this without narrowing—the code will fail type-checking with "Property 'url' does not exist on type '{ url: string; } | { b64Json: string; }'" because url is not a common property across all union members.
Narrow the type using the in operator before accessing the property:
Fix
- {result?.audio.url && <audio src={result.audio.url} controls />}
+ {result?.audio && 'url' in result.audio && (
+ <audio src={result.audio.url} controls />
+ )}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| {result?.audio.url && <audio src={result.audio.url} controls />} | |
| {result?.audio && 'url' in result.audio && ( | |
| <audio src={result.audio.url} controls /> | |
| )} |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@src/blog/tanstack-ai-audio-generation.md` at line 86, The snippet accesses
result.audio.url on a union type ({ url: string } | { b64Json: string }) without
narrowing; update the conditional to narrow the union before accessing url
(e.g., check that result and result.audio exist AND that "url" is in
result.audio using the in operator or a type guard) so you only render <audio>
when result.audio has a url property; refer to result, audio, url and b64Json to
locate the code and apply the in-based or guard-based type narrowing.
2 participants
Summary
Announces TanStack AI's new audio support: a single
generateAudioactivity with streaming, plus fal and Gemini Lyria adapters for music, speech, and transcription. Framework hooks land for React, Solid, Vue, and Svelte (useGenerateAudio/createGenerateAudio).src/blog/tanstack-ai-audio-generation.mdpublic/blog-assets/tanstack-ai-audio-generation/header.pngThe post leads with the real developer pain (every audio provider ships a different SDK shape — Lyria returns raw PCM; ElevenLabs wants
music_length_ms; Stable Audio wantsseconds_total) and then shows the fix as a one-line adapter swap behind a sharedgenerateAudio()call. Code samples are grounded against the actual exports (geminiAudio,falAudio,falSpeech,falTranscription,useGenerateAudio) and verified against the library source.Test plan
pnpm dev) and confirm the header image loads/ai/docs/media/audio-generation)Summary by CodeRabbit