docs: expand coverage with framework quick-starts, generation hooks, and realtime voice#426
Conversation
… ElevenLabs adapter, and expanded realtime voice guide New pages: - Quick Start guides for Vue, Svelte, and server-only Node.js - @tanstack/ai-vue and @tanstack/ai-svelte API references - ElevenLabs realtime voice adapter documentation - Generation hooks guide (useGenerateImage, useGenerateSpeech, etc.) - Thinking & Reasoning content guide (ThinkingPart, extended thinking) Expanded: - Realtime voice guide with VAD modes, audio visualization, ElevenLabs - Renamed existing quick-start to "Quick Start: React" with cross-links Cross-links added to image-generation, text-to-speech, and streaming pages.
📝 WalkthroughWalkthroughThis pull request adds comprehensive documentation across multiple areas: new framework-specific quick-start guides (Vue, Svelte, server-only), API documentation for Vue and Svelte integrations, new feature documentation for thinking/reasoning and generation hooks, ElevenLabs adapter documentation, and updates to existing guides with cross-references and enhanced VAD explanations. Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~18 minutes Poem
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 inconclusive)
✅ Passed checks (2 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 |
|
View your CI Pipeline Execution ↗ for commit 99f485b
☁️ Nx Cloud last updated this comment at |
🚀 Changeset Version PreviewNo changeset entries found. Merging this PR will not cause a version bump for any packages. |
@tanstack/ai
@tanstack/ai-anthropic
@tanstack/ai-client
@tanstack/ai-code-mode
@tanstack/ai-code-mode-skills
@tanstack/ai-devtools-core
@tanstack/ai-elevenlabs
@tanstack/ai-event-client
@tanstack/ai-fal
@tanstack/ai-gemini
@tanstack/ai-grok
@tanstack/ai-groq
@tanstack/ai-isolate-cloudflare
@tanstack/ai-isolate-node
@tanstack/ai-isolate-quickjs
@tanstack/ai-ollama
@tanstack/ai-openai
@tanstack/ai-openrouter
@tanstack/ai-preact
@tanstack/ai-react
@tanstack/ai-react-ui
@tanstack/ai-solid
@tanstack/ai-solid-ui
@tanstack/ai-svelte
@tanstack/ai-vue
@tanstack/ai-vue-ui
@tanstack/preact-ai-devtools
@tanstack/react-ai-devtools
@tanstack/solid-ai-devtools
commit: |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@docs/adapters/elevenlabs.md`:
- Around line 196-210: Update the realtime-chat.md docs to clearly mark VAD
examples and APIs (vadMode, setVADMode(), semanticEagerness, updateSession()) as
OpenAI-specific: add a note near the VAD examples stating these calls work only
with the OpenAI Realtime adapter and cannot be used with the ElevenLabs adapter;
also mention ElevenLabs uses ElevenLabsVADConfig and server-side thresholds and
that its adapter logs "ElevenLabs does not support runtime session updates.
Configure at connection time." to guide readers.
In `@docs/media/realtime-chat.md`:
- Around line 475-490: Standardize the token endpoint and expand the ElevenLabs
docs: change the example in realtime-chat.md to use the same endpoint path as
docs/adapters/elevenlabs.md (use /api/realtime-token), add a short snippet
showing how to pass adapter options to elevenlabsRealtime (mention
connectionMode and debug) when calling useRealtimeChat, and replace the vague
"overrides" note with a concrete server-side example that references
realtimeToken and elevenlabsRealtimeToken and shows passing overrides (voiceId,
systemPrompt, firstMessage, language) at token generation time; locate and
update the examples around useRealtimeChat, elevenlabsRealtime, realtimeToken,
and elevenlabsRealtimeToken.
🪄 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: 25eb8c2a-7683-471c-9a02-6ed6d626bace
📒 Files selected for processing (14)
docs/adapters/elevenlabs.mddocs/api/ai-svelte.mddocs/api/ai-vue.mddocs/chat/streaming.mddocs/chat/thinking-content.mddocs/config.jsondocs/getting-started/quick-start-server.mddocs/getting-started/quick-start-svelte.mddocs/getting-started/quick-start-vue.mddocs/getting-started/quick-start.mddocs/media/generation-hooks.mddocs/media/image-generation.mddocs/media/realtime-chat.mddocs/media/text-to-speech.md
| ## Differences from OpenAI Realtime | ||
|
|
||
| ElevenLabs and OpenAI take different approaches to realtime voice: | ||
|
|
||
| | | ElevenLabs | OpenAI | | ||
| |---|---|---| | ||
| | **Configuration** | Agent-based. Configure voice, personality, and knowledge in the ElevenLabs dashboard or via `overrides` at token time. | Session-based. Configure `instructions`, `voice`, `temperature`, etc. per session via `useRealtimeChat` options. | | ||
| | **Token type** | Signed WebSocket URL (valid 30 minutes) | Ephemeral API token (valid ~10 minutes) | | ||
| | **Transport** | WebSocket (default) or WebRTC | WebRTC | | ||
| | **Audio handling** | `@11labs/client` SDK manages audio capture and playback automatically | TanStack AI manages WebRTC peer connection and audio tracks | | ||
| | **VAD** | Handled by ElevenLabs server-side | Supports `server`, `semantic`, and `manual` modes | | ||
| | **Runtime updates** | Session config is set at creation time and cannot be changed mid-session | Supports `updateSession()` for mid-session config changes | | ||
| | **Image input** | Not supported | Supported via `sendImage()` | | ||
| | **Time domain data** | Not available from the SDK | Available for waveform visualizations | | ||
|
|
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# Check if ElevenLabs adapter implements VAD-related features
echo "=== Checking for vadMode support ==="
rg -n "vadMode" --type=ts -g '*elevenlabs*' -C3
echo -e "\n=== Checking for setVADMode support ==="
rg -n "setVADMode" --type=ts -g '*elevenlabs*' -C3
echo -e "\n=== Checking for semanticEagerness support ==="
rg -n "semanticEagerness" --type=ts -g '*elevenlabs*' -C3
echo -e "\n=== Checking ElevenLabs adapter interface ==="
ast-grep --pattern $'interface $_ {
$$$
vadMode
$$$
}'Repository: TanStack/ai
Length of output: 18168
🏁 Script executed:
# Find the ElevenLabs adapter implementation
find . -type f -name "*elevenlabs*" | head -20Repository: TanStack/ai
Length of output: 84
🏁 Script executed:
# Search for the ElevenLabs adapter main file
fd -i elevenlabs --type fRepository: TanStack/ai
Length of output: 82
🏁 Script executed:
# Look at the realtime-chat.md documentation to understand adapter-specific features
cat -n docs/media/realtime-chat.md | sed -n '175,230p'Repository: TanStack/ai
Length of output: 1867
🏁 Script executed:
# Check the ElevenLabs adapter interface/type definitions
rg -n "elevenlabs" --type=ts -i -lRepository: TanStack/ai
Length of output: 645
🏁 Script executed:
# Check the ElevenLabs adapter implementation for VAD support
cat packages/typescript/ai-elevenlabs/src/realtime/adapter.tsRepository: TanStack/ai
Length of output: 8411
🏁 Script executed:
# Check the ElevenLabs types definition
cat packages/typescript/ai-elevenlabs/src/realtime/types.tsRepository: TanStack/ai
Length of output: 1513
🏁 Script executed:
# Check if there's an OpenAI adapter to compare
fd -i openai --type f | grep -i realtimeRepository: TanStack/ai
Length of output: 37
Clarify that VAD features in realtime-chat.md documentation are OpenAI-specific.
The elevenlabs.md comparison table is accurate—ElevenLabs does not support vadMode, setVADMode(), or semanticEagerness. However, the realtime-chat.md documentation (lines 175–206) shows VAD examples without clearly stating these features are OpenAI-only.
The ElevenLabs adapter explicitly logs warnings when updateSession() is called: "ElevenLabs does not support runtime session updates. Configure at connection time." VAD in ElevenLabs is configured via ElevenLabsVADConfig with server-side thresholds and cannot be changed mid-session.
Update realtime-chat.md to clarify that VAD mode switching examples apply only to OpenAI Realtime, or add a note stating which features are adapter-specific.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@docs/adapters/elevenlabs.md` around lines 196 - 210, Update the
realtime-chat.md docs to clearly mark VAD examples and APIs (vadMode,
setVADMode(), semanticEagerness, updateSession()) as OpenAI-specific: add a note
near the VAD examples stating these calls work only with the OpenAI Realtime
adapter and cannot be used with the ElevenLabs adapter; also mention ElevenLabs
uses ElevenLabsVADConfig and server-side thresholds and that its adapter logs
"ElevenLabs does not support runtime session updates. Configure at connection
time." to guide readers.
| ## Using ElevenLabs | ||
|
|
||
| TanStack AI supports [ElevenLabs](../adapters/elevenlabs) as an alternative realtime voice provider. The client API is identical — swap the adapter and token function: | ||
|
|
||
| ```typescript | ||
| import { useRealtimeChat } from '@tanstack/ai-react' | ||
| import { elevenlabsRealtime } from '@tanstack/ai-elevenlabs' | ||
|
|
||
| const { status, messages, connect, disconnect } = useRealtimeChat({ | ||
| getToken: () => fetch('/api/elevenlabs-token').then(r => r.json()), | ||
| adapter: elevenlabsRealtime(), | ||
| }) | ||
| ``` | ||
|
|
||
| > **Note:** ElevenLabs uses agent-based configuration — voice and system prompt are set in the ElevenLabs dashboard or via token overrides. See the [ElevenLabs adapter page](../adapters/elevenlabs) for setup details. | ||
|
|
There was a problem hiding this comment.
Inconsistent endpoint path and missing adapter options documentation.
Three documentation gaps create confusion for developers implementing ElevenLabs:
-
Endpoint path mismatch - This page uses
/api/elevenlabs-token(line 484), butdocs/adapters/elevenlabs.mduses/api/realtime-token(lines 82, 165, 223). Standardize on one path across both documentation files. -
Missing adapter options -
elevenlabsRealtime()supportsconnectionModeanddebugoptions (documented indocs/adapters/elevenlabs.mdlines 193-194), but these options are not mentioned here. -
Overrides mentioned but not demonstrated - Line 489 references overrides conceptually, but developers would benefit from seeing a concrete code example.
docs/adapters/elevenlabs.mdlines 47-58 shows how to passoverrides: { voiceId, systemPrompt, firstMessage, language }at token generation time.
📝 Proposed documentation improvements
Option 1: Align endpoint path with elevenlabs.md
- getToken: () => fetch('/api/elevenlabs-token').then(r => r.json()),
+ getToken: () => fetch('/api/realtime-token', { method: 'POST' }).then(r => r.json()),Option 2: Document adapter options
Add after line 486:
const { status, messages, connect, disconnect } = useRealtimeChat({
getToken: () => fetch('/api/realtime-token', { method: 'POST' }).then(r => r.json()),
adapter: elevenlabsRealtime({
connectionMode: 'websocket', // or 'webrtc'
debug: true, // enable debug logging
}),
})Option 3: Show overrides example
Replace the note at line 489 with a concrete server-side example:
// Server: Override agent settings at token time
const token = await realtimeToken({
adapter: elevenlabsRealtimeToken({
agentId: process.env.ELEVENLABS_AGENT_ID!,
overrides: {
voiceId: 'custom-voice-id',
systemPrompt: 'You are a helpful voice assistant.',
firstMessage: 'Hello! How can I help you today?',
},
}),
})🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@docs/media/realtime-chat.md` around lines 475 - 490, Standardize the token
endpoint and expand the ElevenLabs docs: change the example in realtime-chat.md
to use the same endpoint path as docs/adapters/elevenlabs.md (use
/api/realtime-token), add a short snippet showing how to pass adapter options to
elevenlabsRealtime (mention connectionMode and debug) when calling
useRealtimeChat, and replace the vague "overrides" note with a concrete
server-side example that references realtimeToken and elevenlabsRealtimeToken
and shows passing overrides (voiceId, systemPrompt, firstMessage, language) at
token generation time; locate and update the examples around useRealtimeChat,
elevenlabsRealtime, realtimeToken, and elevenlabsRealtimeToken.
1 participant
Summary
@tanstack/ai-vueand@tanstack/ai-svelteuseGenerateImage,useGenerateSpeech,useTranscription,useSummarize,useGenerateVideowith complete React examplesThinkingPartrendering and provider config (Anthropic extended thinking, OpenAI reasoning)Test plan
pnpm test:docspasses (243 files, 0 broken links)pnpm run sync-docs-configgenerates correct sidebar with all new pagesSummary by CodeRabbit
Release Notes