@mastra/mcp-docs-server 0.13.37 → 0.13.38

package/.docs/raw/voice/overview.mdx

@@ -1,10 +1,11 @@
 ---
-title: Voice in Mastra | Mastra Docs
+title: "Voice in Mastra | Voice | Mastra Docs"
 description: Overview of voice capabilities in Mastra, including text-to-speech, speech-to-text, and real-time speech-to-speech interactions.
 ---
 
-import { Tabs } from "nextra/components";
-import { AudioPlayback } from "@/components/audio-playback";
+import { AudioPlayback } from "@site/src/components/AudioPlayback";
+import Tabs from "@theme/Tabs";
+import TabItem from "@theme/TabItem";
 
 # Voice in Mastra
 
@@ -12,7 +13,7 @@ Mastra's Voice system provides a unified interface for voice interactions, enabl
 
 ## Adding Voice to Agents
 
-To learn how to integrate voice capabilities into your agents, check out the [Adding Voice to Agents](../agents/adding-voice.mdx) documentation. This section covers how to use both single and multiple voice providers, as well as real-time interactions.
+To learn how to integrate voice capabilities into your agents, check out the [Adding Voice to Agents](/docs/agents/adding-voice) documentation. This section covers how to use both single and multiple voice providers, as well as real-time interactions.
 
 ```typescript
 import { Agent } from "@mastra/core/agent";
@@ -39,58 +40,54 @@ Choose from multiple providers like OpenAI, ElevenLabs, and more.
 
 For detailed configuration options and advanced features, check out our [Text-to-Speech guide](./text-to-speech).
 
-{/*
-LLM CONTEXT: This Tabs component demonstrates Text-to-Speech (TTS) implementation across different voice providers.
-Each tab shows how to set up and use a specific TTS provider (OpenAI, Azure, ElevenLabs, etc.) with Mastra agents.
-The tabs help users compare different TTS providers and choose the one that best fits their needs.
-Each tab includes complete code examples showing agent setup, text generation, and audio playback.
-The providers include OpenAI, Azure, ElevenLabs, PlayAI, Google, Cloudflare, Deepgram, Speechify, Sarvam, and Murf.
-*/}
+<Tabs>
+  <TabItem value="openai" label="OpenAI">
 
-<Tabs items={["OpenAI", "Azure", "ElevenLabs", "PlayAI", "Google", "Cloudflare", "Deepgram", "Speechify", "Sarvam", "Murf"]}>
-  <Tabs.Tab>
 ```typescript
-import { Agent } from '@mastra/core/agent';
-import { openai } from '@ai-sdk/openai';
+import { Agent } from "@mastra/core/agent";
+import { openai } from "@ai-sdk/openai";
 import { OpenAIVoice } from "@mastra/voice-openai";
 import { playAudio } from "@mastra/node-audio";
 
 const voiceAgent = new Agent({
-name: "Voice Agent",
-instructions: "You are a voice assistant that can help users with their tasks.",
-model: openai("gpt-4o"),
-voice: new OpenAIVoice(),
+  name: "Voice Agent",
+  instructions:
+    "You are a voice assistant that can help users with their tasks.",
+  model: openai("gpt-4o"),
+  voice: new OpenAIVoice(),
 });
 
-const { text } = await voiceAgent.generate('What color is the sky?');
+const { text } = await voiceAgent.generate("What color is the sky?");
 
 // Convert text to speech to an Audio Stream
 const audioStream = await voiceAgent.voice.speak(text, {
-speaker: "default", // Optional: specify a speaker
-responseFormat: "wav", // Optional: specify a response format
+  speaker: "default", // Optional: specify a speaker
+  responseFormat: "wav", // Optional: specify a response format
 });
 
 playAudio(audioStream);
-
-````
+```
 
 Visit the [OpenAI Voice Reference](/reference/voice/openai) for more information on the OpenAI voice provider.
-  </Tabs.Tab>
-  <Tabs.Tab>
+
+  </TabItem>
+  <TabItem value="azure" label="Azure">
+
 ```typescript
-import { Agent } from '@mastra/core/agent';
-import { openai } from '@ai-sdk/openai';
+import { Agent } from "@mastra/core/agent";
+import { openai } from "@ai-sdk/openai";
 import { AzureVoice } from "@mastra/voice-azure";
 import { playAudio } from "@mastra/node-audio";
 
 const voiceAgent = new Agent({
   name: "Voice Agent",
-  instructions: "You are a voice assistant that can help users with their tasks.",
+  instructions:
+    "You are a voice assistant that can help users with their tasks.",
   model: openai("gpt-4o"),
   voice: new AzureVoice(),
 });
 
-const { text } = await voiceAgent.generate('What color is the sky?');
+const { text } = await voiceAgent.generate("What color is the sky?");
 
 // Convert text to speech to an Audio Stream
 const audioStream = await voiceAgent.voice.speak(text, {
@@ -98,53 +95,57 @@ const audioStream = await voiceAgent.voice.speak(text, {
 });
 
 playAudio(audioStream);
-````
+```
 
 Visit the [Azure Voice Reference](/reference/voice/azure) for more information on the Azure voice provider.
 
-  </Tabs.Tab>
-  <Tabs.Tab>
+  </TabItem>
+  <TabItem value="elevenlabs" label="ElevenLabs">
+
 ```typescript
-import { Agent } from '@mastra/core/agent';
-import { openai } from '@ai-sdk/openai';
+import { Agent } from "@mastra/core/agent";
+import { openai } from "@ai-sdk/openai";
 import { ElevenLabsVoice } from "@mastra/voice-elevenlabs";
 import { playAudio } from "@mastra/node-audio";
 
 const voiceAgent = new Agent({
-name: "Voice Agent",
-instructions: "You are a voice assistant that can help users with their tasks.",
-model: openai("gpt-4o"),
-voice: new ElevenLabsVoice(),
+  name: "Voice Agent",
+  instructions:
+    "You are a voice assistant that can help users with their tasks.",
+  model: openai("gpt-4o"),
+  voice: new ElevenLabsVoice(),
 });
 
-const { text } = await voiceAgent.generate('What color is the sky?');
+const { text } = await voiceAgent.generate("What color is the sky?");
 
 // Convert text to speech to an Audio Stream
 const audioStream = await voiceAgent.voice.speak(text, {
-speaker: "default", // Optional: specify a speaker
+  speaker: "default", // Optional: specify a speaker
 });
 
 playAudio(audioStream);
-
-````
+```
 
 Visit the [ElevenLabs Voice Reference](/reference/voice/elevenlabs) for more information on the ElevenLabs voice provider.
-  </Tabs.Tab>
-  <Tabs.Tab>
+
+  </TabItem>
+  <TabItem value="playai" label="PlayAI">
+
 ```typescript
-import { Agent } from '@mastra/core/agent';
-import { openai } from '@ai-sdk/openai';
+import { Agent } from "@mastra/core/agent";
+import { openai } from "@ai-sdk/openai";
 import { PlayAIVoice } from "@mastra/voice-playai";
 import { playAudio } from "@mastra/node-audio";
 
 const voiceAgent = new Agent({
   name: "Voice Agent",
-  instructions: "You are a voice assistant that can help users with their tasks.",
+  instructions:
+    "You are a voice assistant that can help users with their tasks.",
   model: openai("gpt-4o"),
   voice: new PlayAIVoice(),
 });
 
-const { text } = await voiceAgent.generate('What color is the sky?');
+const { text } = await voiceAgent.generate("What color is the sky?");
 
 // Convert text to speech to an Audio Stream
 const audioStream = await voiceAgent.voice.speak(text, {
@@ -152,53 +153,57 @@ const audioStream = await voiceAgent.voice.speak(text, {
 });
 
 playAudio(audioStream);
-````
+```
 
 Visit the [PlayAI Voice Reference](/reference/voice/playai) for more information on the PlayAI voice provider.
 
-  </Tabs.Tab>
-  <Tabs.Tab>
+  </TabItem>
+  <TabItem value="google" label="Google">
+
 ```typescript
-import { Agent } from '@mastra/core/agent';
-import { openai } from '@ai-sdk/openai';
+import { Agent } from "@mastra/core/agent";
+import { openai } from "@ai-sdk/openai";
 import { GoogleVoice } from "@mastra/voice-google";
 import { playAudio } from "@mastra/node-audio";
 
 const voiceAgent = new Agent({
-name: "Voice Agent",
-instructions: "You are a voice assistant that can help users with their tasks.",
-model: openai("gpt-4o"),
-voice: new GoogleVoice(),
+  name: "Voice Agent",
+  instructions:
+    "You are a voice assistant that can help users with their tasks.",
+  model: openai("gpt-4o"),
+  voice: new GoogleVoice(),
 });
 
-const { text } = await voiceAgent.generate('What color is the sky?');
+const { text } = await voiceAgent.generate("What color is the sky?");
 
 // Convert text to speech to an Audio Stream
 const audioStream = await voiceAgent.voice.speak(text, {
-speaker: "en-US-Studio-O", // Optional: specify a speaker
+  speaker: "en-US-Studio-O", // Optional: specify a speaker
 });
 
 playAudio(audioStream);
-
-````
+```
 
 Visit the [Google Voice Reference](/reference/voice/google) for more information on the Google voice provider.
-  </Tabs.Tab>
-  <Tabs.Tab>
+
+  </TabItem>
+  <TabItem value="cloudflare" label="Cloudflare">
+
 ```typescript
-import { Agent } from '@mastra/core/agent';
-import { openai } from '@ai-sdk/openai';
+import { Agent } from "@mastra/core/agent";
+import { openai } from "@ai-sdk/openai";
 import { CloudflareVoice } from "@mastra/voice-cloudflare";
 import { playAudio } from "@mastra/node-audio";
 
 const voiceAgent = new Agent({
   name: "Voice Agent",
-  instructions: "You are a voice assistant that can help users with their tasks.",
+  instructions:
+    "You are a voice assistant that can help users with their tasks.",
   model: openai("gpt-4o"),
   voice: new CloudflareVoice(),
 });
 
-const { text } = await voiceAgent.generate('What color is the sky?');
+const { text } = await voiceAgent.generate("What color is the sky?");
 
 // Convert text to speech to an Audio Stream
 const audioStream = await voiceAgent.voice.speak(text, {
@@ -206,53 +211,57 @@ const audioStream = await voiceAgent.voice.speak(text, {
 });
 
 playAudio(audioStream);
-````
+```
 
 Visit the [Cloudflare Voice Reference](/reference/voice/cloudflare) for more information on the Cloudflare voice provider.
 
-  </Tabs.Tab>
-  <Tabs.Tab>
+  </TabItem>
+  <TabItem value="deepgram" label="Deepgram">
+
 ```typescript
-import { Agent } from '@mastra/core/agent';
-import { openai } from '@ai-sdk/openai';
+import { Agent } from "@mastra/core/agent";
+import { openai } from "@ai-sdk/openai";
 import { DeepgramVoice } from "@mastra/voice-deepgram";
 import { playAudio } from "@mastra/node-audio";
 
 const voiceAgent = new Agent({
-name: "Voice Agent",
-instructions: "You are a voice assistant that can help users with their tasks.",
-model: openai("gpt-4o"),
-voice: new DeepgramVoice(),
+  name: "Voice Agent",
+  instructions:
+    "You are a voice assistant that can help users with their tasks.",
+  model: openai("gpt-4o"),
+  voice: new DeepgramVoice(),
 });
 
-const { text } = await voiceAgent.generate('What color is the sky?');
+const { text } = await voiceAgent.generate("What color is the sky?");
 
 // Convert text to speech to an Audio Stream
 const audioStream = await voiceAgent.voice.speak(text, {
-speaker: "aura-english-us", // Optional: specify a speaker
+  speaker: "aura-english-us", // Optional: specify a speaker
 });
 
 playAudio(audioStream);
-
-````
+```
 
 Visit the [Deepgram Voice Reference](/reference/voice/deepgram) for more information on the Deepgram voice provider.
-  </Tabs.Tab>
-  <Tabs.Tab>
+
+  </TabItem>
+  <TabItem value="speechify" label="Speechify">
+
 ```typescript
-import { Agent } from '@mastra/core/agent';
-import { openai } from '@ai-sdk/openai';
+import { Agent } from "@mastra/core/agent";
+import { openai } from "@ai-sdk/openai";
 import { SpeechifyVoice } from "@mastra/voice-speechify";
 import { playAudio } from "@mastra/node-audio";
 
 const voiceAgent = new Agent({
   name: "Voice Agent",
-  instructions: "You are a voice assistant that can help users with their tasks.",
+  instructions:
+    "You are a voice assistant that can help users with their tasks.",
   model: openai("gpt-4o"),
   voice: new SpeechifyVoice(),
 });
 
-const { text } = await voiceAgent.generate('What color is the sky?');
+const { text } = await voiceAgent.generate("What color is the sky?");
 
 // Convert text to speech to an Audio Stream
 const audioStream = await voiceAgent.voice.speak(text, {
@@ -260,53 +269,57 @@ const audioStream = await voiceAgent.voice.speak(text, {
 });
 
 playAudio(audioStream);
-````
+```
 
 Visit the [Speechify Voice Reference](/reference/voice/speechify) for more information on the Speechify voice provider.
 
-  </Tabs.Tab>
-  <Tabs.Tab>
+  </TabItem>
+  <TabItem value="sarvam" label="Sarvam">
+
 ```typescript
-import { Agent } from '@mastra/core/agent';
-import { openai } from '@ai-sdk/openai';
+import { Agent } from "@mastra/core/agent";
+import { openai } from "@ai-sdk/openai";
 import { SarvamVoice } from "@mastra/voice-sarvam";
 import { playAudio } from "@mastra/node-audio";
 
 const voiceAgent = new Agent({
-name: "Voice Agent",
-instructions: "You are a voice assistant that can help users with their tasks.",
-model: openai("gpt-4o"),
-voice: new SarvamVoice(),
+  name: "Voice Agent",
+  instructions:
+    "You are a voice assistant that can help users with their tasks.",
+  model: openai("gpt-4o"),
+  voice: new SarvamVoice(),
 });
 
-const { text } = await voiceAgent.generate('What color is the sky?');
+const { text } = await voiceAgent.generate("What color is the sky?");
 
 // Convert text to speech to an Audio Stream
 const audioStream = await voiceAgent.voice.speak(text, {
-speaker: "default", // Optional: specify a speaker
+  speaker: "default", // Optional: specify a speaker
 });
 
 playAudio(audioStream);
-
-````
+```
 
 Visit the [Sarvam Voice Reference](/reference/voice/sarvam) for more information on the Sarvam voice provider.
-  </Tabs.Tab>
-  <Tabs.Tab>
+
+  </TabItem>
+  <TabItem value="murf" label="Murf">
+
 ```typescript
-import { Agent } from '@mastra/core/agent';
-import { openai } from '@ai-sdk/openai';
+import { Agent } from "@mastra/core/agent";
+import { openai } from "@ai-sdk/openai";
 import { MurfVoice } from "@mastra/voice-murf";
 import { playAudio } from "@mastra/node-audio";
 
 const voiceAgent = new Agent({
   name: "Voice Agent",
-  instructions: "You are a voice assistant that can help users with their tasks.",
+  instructions:
+    "You are a voice assistant that can help users with their tasks.",
   model: openai("gpt-4o"),
   voice: new MurfVoice(),
 });
 
-const { text } = await voiceAgent.generate('What color is the sky?');
+const { text } = await voiceAgent.generate("What color is the sky?");
 
 // Convert text to speech to an Audio Stream
 const audioStream = await voiceAgent.voice.speak(text, {
@@ -314,11 +327,11 @@ const audioStream = await voiceAgent.voice.speak(text, {
 });
 
 playAudio(audioStream);
-````
+```
 
 Visit the [Murf Voice Reference](/reference/voice/murf) for more information on the Murf voice provider.
 
-  </Tabs.Tab>
+  </TabItem>
 </Tabs>
 
 ### Speech to Text (STT)
@@ -330,26 +343,21 @@ You can download a sample audio file from [here](https://github.com/mastra-ai/re
 <br />
 <AudioPlayback audio="https://github.com/mastra-ai/realtime-voice-demo/raw/refs/heads/main/how_can_i_help_you.mp3" />
 
-{/*
-LLM CONTEXT: This Tabs component demonstrates Speech-to-Text (STT) implementation across different voice providers.
-Each tab shows how to set up and use a specific STT provider for transcribing audio to text.
-The tabs help users understand how to implement speech recognition with different providers.
-Each tab includes code examples showing audio file handling, transcription, and response generation.
-*/}
+<Tabs>
+  <TabItem value="openai" label="OpenAI">
 
-<Tabs items={["OpenAI", "Azure", "ElevenLabs", "Google", "Cloudflare", "Deepgram", "Sarvam"]}>
-  <Tabs.Tab>
 ```typescript
-import { Agent } from '@mastra/core/agent';
-import { openai } from '@ai-sdk/openai';
+import { Agent } from "@mastra/core/agent";
+import { openai } from "@ai-sdk/openai";
 import { OpenAIVoice } from "@mastra/voice-openai";
-import { createReadStream } from 'fs';
+import { createReadStream } from "fs";
 
 const voiceAgent = new Agent({
-name: "Voice Agent",
-instructions: "You are a voice assistant that can help users with their tasks.",
-model: openai("gpt-4o"),
-voice: new OpenAIVoice(),
+  name: "Voice Agent",
+  instructions:
+    "You are a voice assistant that can help users with their tasks.",
+  model: openai("gpt-4o"),
+  voice: new OpenAIVoice(),
 });
 
 // Use an audio file from a URL
@@ -361,22 +369,24 @@ console.log(`User said: ${transcript}`);
 
 // Generate a response based on the transcript
 const { text } = await voiceAgent.generate(transcript);
-
-````
+```
 
 Visit the [OpenAI Voice Reference](/reference/voice/openai) for more information on the OpenAI voice provider.
-  </Tabs.Tab>
-  <Tabs.Tab>
+
+  </TabItem>
+  <TabItem value="azure" label="Azure">
+
 ```typescript
-import { createReadStream } from 'fs';
-import { Agent } from '@mastra/core/agent';
-import { openai } from '@ai-sdk/openai';
+import { createReadStream } from "fs";
+import { Agent } from "@mastra/core/agent";
+import { openai } from "@ai-sdk/openai";
 import { AzureVoice } from "@mastra/voice-azure";
-import { createReadStream } from 'fs';
+import { createReadStream } from "fs";
 
 const voiceAgent = new Agent({
   name: "Voice Agent",
-  instructions: "You are a voice assistant that can help users with their tasks.",
+  instructions:
+    "You are a voice assistant that can help users with their tasks.",
   model: openai("gpt-4o"),
   voice: new AzureVoice(),
 });
@@ -390,23 +400,25 @@ console.log(`User said: ${transcript}`);
 
 // Generate a response based on the transcript
 const { text } = await voiceAgent.generate(transcript);
-````
+```
 
 Visit the [Azure Voice Reference](/reference/voice/azure) for more information on the Azure voice provider.
 
-  </Tabs.Tab>
-  <Tabs.Tab>
+  </TabItem>
+  <TabItem value="elevenlabs" label="ElevenLabs">
+
 ```typescript
-import { Agent } from '@mastra/core/agent';
-import { openai } from '@ai-sdk/openai';
+import { Agent } from "@mastra/core/agent";
+import { openai } from "@ai-sdk/openai";
 import { ElevenLabsVoice } from "@mastra/voice-elevenlabs";
-import { createReadStream } from 'fs';
+import { createReadStream } from "fs";
 
 const voiceAgent = new Agent({
-name: "Voice Agent",
-instructions: "You are a voice assistant that can help users with their tasks.",
-model: openai("gpt-4o"),
-voice: new ElevenLabsVoice(),
+  name: "Voice Agent",
+  instructions:
+    "You are a voice assistant that can help users with their tasks.",
+  model: openai("gpt-4o"),
+  voice: new ElevenLabsVoice(),
 });
 
 // Use an audio file from a URL
@@ -418,21 +430,23 @@ console.log(`User said: ${transcript}`);
 
 // Generate a response based on the transcript
 const { text } = await voiceAgent.generate(transcript);
-
-````
+```
 
 Visit the [ElevenLabs Voice Reference](/reference/voice/elevenlabs) for more information on the ElevenLabs voice provider.
-  </Tabs.Tab>
-  <Tabs.Tab>
+
+  </TabItem>
+  <TabItem value="google" label="Google">
+
 ```typescript
-import { Agent } from '@mastra/core/agent';
-import { openai } from '@ai-sdk/openai';
+import { Agent } from "@mastra/core/agent";
+import { openai } from "@ai-sdk/openai";
 import { GoogleVoice } from "@mastra/voice-google";
-import { createReadStream } from 'fs';
+import { createReadStream } from "fs";
 
 const voiceAgent = new Agent({
   name: "Voice Agent",
-  instructions: "You are a voice assistant that can help users with their tasks.",
+  instructions:
+    "You are a voice assistant that can help users with their tasks.",
   model: openai("gpt-4o"),
   voice: new GoogleVoice(),
 });
@@ -446,23 +460,25 @@ console.log(`User said: ${transcript}`);
 
 // Generate a response based on the transcript
 const { text } = await voiceAgent.generate(transcript);
-````
+```
 
 Visit the [Google Voice Reference](/reference/voice/google) for more information on the Google voice provider.
 
-  </Tabs.Tab>
-  <Tabs.Tab>
+  </TabItem>
+  <TabItem value="cloudflare" label="Cloudflare">
+
 ```typescript
-import { Agent } from '@mastra/core/agent';
-import { openai } from '@ai-sdk/openai';
+import { Agent } from "@mastra/core/agent";
+import { openai } from "@ai-sdk/openai";
 import { CloudflareVoice } from "@mastra/voice-cloudflare";
-import { createReadStream } from 'fs';
+import { createReadStream } from "fs";
 
 const voiceAgent = new Agent({
-name: "Voice Agent",
-instructions: "You are a voice assistant that can help users with their tasks.",
-model: openai("gpt-4o"),
-voice: new CloudflareVoice(),
+  name: "Voice Agent",
+  instructions:
+    "You are a voice assistant that can help users with their tasks.",
+  model: openai("gpt-4o"),
+  voice: new CloudflareVoice(),
 });
 
 // Use an audio file from a URL
@@ -474,21 +490,23 @@ console.log(`User said: ${transcript}`);
 
 // Generate a response based on the transcript
 const { text } = await voiceAgent.generate(transcript);
-
-````
+```
 
 Visit the [Cloudflare Voice Reference](/reference/voice/cloudflare) for more information on the Cloudflare voice provider.
-  </Tabs.Tab>
-  <Tabs.Tab>
+
+  </TabItem>
+  <TabItem value="deepgram" label="Deepgram">
+
 ```typescript
-import { Agent } from '@mastra/core/agent';
-import { openai } from '@ai-sdk/openai';
+import { Agent } from "@mastra/core/agent";
+import { openai } from "@ai-sdk/openai";
 import { DeepgramVoice } from "@mastra/voice-deepgram";
-import { createReadStream } from 'fs';
+import { createReadStream } from "fs";
 
 const voiceAgent = new Agent({
   name: "Voice Agent",
-  instructions: "You are a voice assistant that can help users with their tasks.",
+  instructions:
+    "You are a voice assistant that can help users with their tasks.",
   model: openai("gpt-4o"),
   voice: new DeepgramVoice(),
 });
@@ -502,23 +520,25 @@ console.log(`User said: ${transcript}`);
 
 // Generate a response based on the transcript
 const { text } = await voiceAgent.generate(transcript);
-````
+```
 
 Visit the [Deepgram Voice Reference](/reference/voice/deepgram) for more information on the Deepgram voice provider.
 
-  </Tabs.Tab>
-  <Tabs.Tab>
+  </TabItem>
+  <TabItem value="sarvam" label="Sarvam">
+
 ```typescript
-import { Agent } from '@mastra/core/agent';
-import { openai } from '@ai-sdk/openai';
+import { Agent } from "@mastra/core/agent";
+import { openai } from "@ai-sdk/openai";
 import { SarvamVoice } from "@mastra/voice-sarvam";
-import { createReadStream } from 'fs';
+import { createReadStream } from "fs";
 
 const voiceAgent = new Agent({
-name: "Voice Agent",
-instructions: "You are a voice assistant that can help users with their tasks.",
-model: openai("gpt-4o"),
-voice: new SarvamVoice(),
+  name: "Voice Agent",
+  instructions:
+    "You are a voice assistant that can help users with their tasks.",
+  model: openai("gpt-4o"),
+  voice: new SarvamVoice(),
 });
 
 // Use an audio file from a URL
@@ -530,11 +550,11 @@ console.log(`User said: ${transcript}`);
 
 // Generate a response based on the transcript
 const { text } = await voiceAgent.generate(transcript);
-
-````
+```
 
 Visit the [Sarvam Voice Reference](/reference/voice/sarvam) for more information on the Sarvam voice provider.
-  </Tabs.Tab>
+
+  </TabItem>
 </Tabs>
 
 ### Speech to Speech (STS)
@@ -542,59 +562,57 @@ Visit the [Sarvam Voice Reference](/reference/voice/sarvam) for more information
 Create conversational experiences with speech-to-speech capabilities. The unified API enables real-time voice interactions between users and AI agents.
 For detailed configuration options and advanced features, check out [Speech to Speech](./speech-to-speech).
 
-{/*
-  LLM CONTEXT: This Tabs component demonstrates Speech-to-Speech (STS) implementation for real-time voice interactions.
-  Currently only shows OpenAI's realtime voice implementation for bidirectional voice conversations.
-  The tab shows how to set up real-time voice communication with event handling for audio responses.
-  This enables conversational AI experiences with continuous audio streaming.
-*/}
-<Tabs items={["OpenAI", "Google Gemini Live"]}>
-  <Tabs.Tab>
-```typescript
-import { Agent } from '@mastra/core/agent';
-import { openai } from '@ai-sdk/openai';
-import { playAudio, getMicrophoneStream } from '@mastra/node-audio';
+<Tabs>
+  <TabItem value="openai" label="OpenAI">
+
+```typescript
+import { Agent } from "@mastra/core/agent";
+import { openai } from "@ai-sdk/openai";
+import { playAudio, getMicrophoneStream } from "@mastra/node-audio";
 import { OpenAIRealtimeVoice } from "@mastra/voice-openai-realtime";
 
 const voiceAgent = new Agent({
   name: "Voice Agent",
-  instructions: "You are a voice assistant that can help users with their tasks.",
+  instructions:
+    "You are a voice assistant that can help users with their tasks.",
   model: openai("gpt-4o"),
   voice: new OpenAIRealtimeVoice(),
 });
 
 // Listen for agent audio responses
-voiceAgent.voice.on('speaker', ({ audio }) => {
+voiceAgent.voice.on("speaker", ({ audio }) => {
   playAudio(audio);
 });
 
 // Initiate the conversation
-await voiceAgent.voice.speak('How can I help you today?');
+await voiceAgent.voice.speak("How can I help you today?");
 
 // Send continuous audio from the microphone
 const micStream = getMicrophoneStream();
 await voiceAgent.voice.send(micStream);
-````
+```
 
 Visit the [OpenAI Voice Reference](/reference/voice/openai-realtime) for more information on the OpenAI voice provider.
 
-  </Tabs.Tab>
-  <Tabs.Tab>
+  </TabItem>
+  <TabItem value="google" label="Google">
+
 ```typescript
-import { Agent } from '@mastra/core/agent';
-import { openai } from '@ai-sdk/openai';
-import { playAudio, getMicrophoneStream } from '@mastra/node-audio';
+import { Agent } from "@mastra/core/agent";
+import { openai } from "@ai-sdk/openai";
+import { playAudio, getMicrophoneStream } from "@mastra/node-audio";
 import { GeminiLiveVoice } from "@mastra/voice-google-gemini-live";
 
 const voiceAgent = new Agent({
   name: "Voice Agent",
-  instructions: "You are a voice assistant that can help users with their tasks.",
+  instructions:
+    "You are a voice assistant that can help users with their tasks.",
   model: openai("gpt-4o"),
   voice: new GeminiLiveVoice({
     // Live API mode
     apiKey: process.env.GOOGLE_API_KEY,
-    model: 'gemini-2.0-flash-exp',
-    speaker: 'Puck',
+    model: "gemini-2.0-flash-exp",
+    speaker: "Puck",
     debug: true,
     // Vertex AI alternative:
     // vertexAI: true,
@@ -608,17 +626,17 @@ const voiceAgent = new Agent({
 await voiceAgent.voice.connect();
 
 // Listen for agent audio responses
-voiceAgent.voice.on('speaker', ({ audio }) => {
+voiceAgent.voice.on("speaker", ({ audio }) => {
   playAudio(audio);
 });
 
 // Listen for text responses and transcriptions
-voiceAgent.voice.on('writing', ({ text, role }) => {
+voiceAgent.voice.on("writing", ({ text, role }) => {
   console.log(`${role}: ${text}`);
 });
 
 // Initiate the conversation
-await voiceAgent.voice.speak('How can I help you today?');
+await voiceAgent.voice.speak("How can I help you today?");
 
 // Send continuous audio from the microphone
 const micStream = getMicrophoneStream();
@@ -627,22 +645,16 @@ await voiceAgent.voice.send(micStream);
 
 Visit the [Google Gemini Live Reference](/reference/voice/google-gemini-live) for more information on the Google Gemini Live voice provider.
 
-  </Tabs.Tab>
+  </TabItem>
 </Tabs>
 
 ## Voice Configuration
 
 Each voice provider can be configured with different models and options. Below are the detailed configuration options for all supported providers:
 
-{/*
-LLM CONTEXT: This Tabs component shows detailed configuration options for all supported voice providers.
-Each tab demonstrates how to configure a specific voice provider with all available options and settings.
-The tabs help users understand the full configuration capabilities of each provider including models, languages, and advanced settings.
-Each tab shows both speech and listening model configurations where applicable.
-*/}
+<Tabs>
+  <TabItem value="openai" label="OpenAI">
 
-<Tabs items={["OpenAI", "Azure", "ElevenLabs", "PlayAI", "Google", "Cloudflare", "Deepgram", "Speechify", "Sarvam", "Murf", "OpenAI Realtime", "Google Gemini Live"]}>
-  <Tabs.Tab>
 ```typescript
 // OpenAI Voice Configuration
 const voice = new OpenAIVoice({
@@ -664,8 +676,9 @@ const voice = new OpenAIVoice({
 
 Visit the [OpenAI Voice Reference](/reference/voice/openai) for more information on the OpenAI voice provider.
 
-  </Tabs.Tab>
-  <Tabs.Tab>
+  </TabItem>
+  <TabItem value="azure" label="Azure">
+
 ```typescript
 // Azure Voice Configuration
 const voice = new AzureVoice({
@@ -689,8 +702,9 @@ const voice = new AzureVoice({
 
 Visit the [Azure Voice Reference](/reference/voice/azure) for more information on the Azure voice provider.
 
-  </Tabs.Tab>
-  <Tabs.Tab>
+  </TabItem>
+  <TabItem value="elevenlabs" label="ElevenLabs">
+
 ```typescript
 // ElevenLabs Voice Configuration
 const voice = new ElevenLabsVoice({
@@ -707,8 +721,9 @@ const voice = new ElevenLabsVoice({
 
 Visit the [ElevenLabs Voice Reference](/reference/voice/elevenlabs) for more information on the ElevenLabs voice provider.
 
-  </Tabs.Tab>
-  <Tabs.Tab>
+  </TabItem>
+  <TabItem value="playai" label="PlayAI">
+
 ```typescript
 // PlayAI Voice Configuration
 const voice = new PlayAIVoice({
@@ -725,8 +740,9 @@ const voice = new PlayAIVoice({
 
 Visit the [PlayAI Voice Reference](/reference/voice/playai) for more information on the PlayAI voice provider.
 
-  </Tabs.Tab>
-  <Tabs.Tab>
+  </TabItem>
+  <TabItem value="google" label="Google">
+
 ```typescript
 // Google Voice Configuration
 const voice = new GoogleVoice({
@@ -746,8 +762,9 @@ const voice = new GoogleVoice({
 
 Visit the [Google Voice Reference](/reference/voice/google) for more information on the Google voice provider.
 
-  </Tabs.Tab>
-  <Tabs.Tab>
+  </TabItem>
+  <TabItem value="cloudflare" label="Cloudflare">
+
 ```typescript
 // Cloudflare Voice Configuration
 const voice = new CloudflareVoice({
@@ -764,8 +781,9 @@ const voice = new CloudflareVoice({
 
 Visit the [Cloudflare Voice Reference](/reference/voice/cloudflare) for more information on the Cloudflare voice provider.
 
-  </Tabs.Tab>
-  <Tabs.Tab>
+  </TabItem>
+  <TabItem value="deepgram" label="Deepgram">
+
 ```typescript
 // Deepgram Voice Configuration
 const voice = new DeepgramVoice({
@@ -785,8 +803,9 @@ const voice = new DeepgramVoice({
 
 Visit the [Deepgram Voice Reference](/reference/voice/deepgram) for more information on the Deepgram voice provider.
 
-  </Tabs.Tab>
-  <Tabs.Tab>
+  </TabItem>
+  <TabItem value="speechify" label="Speechify">
+
 ```typescript
 // Speechify Voice Configuration
 const voice = new SpeechifyVoice({
@@ -803,8 +822,9 @@ const voice = new SpeechifyVoice({
 
 Visit the [Speechify Voice Reference](/reference/voice/speechify) for more information on the Speechify voice provider.
 
-  </Tabs.Tab>
-  <Tabs.Tab>
+  </TabItem>
+  <TabItem value="sarvam" label="Sarvam">
+
 ```typescript
 // Sarvam Voice Configuration
 const voice = new SarvamVoice({
@@ -820,8 +840,9 @@ const voice = new SarvamVoice({
 
 Visit the [Sarvam Voice Reference](/reference/voice/sarvam) for more information on the Sarvam voice provider.
 
-  </Tabs.Tab>
-  <Tabs.Tab>
+  </TabItem>
+  <TabItem value="murf" label="Murf">
+
 ```typescript
 // Murf Voice Configuration
 const voice = new MurfVoice({
@@ -837,8 +858,9 @@ const voice = new MurfVoice({
 
 Visit the [Murf Voice Reference](/reference/voice/murf) for more information on the Murf voice provider.
 
-  </Tabs.Tab>
-  <Tabs.Tab>
+  </TabItem>
+  <TabItem value="openai-realtime" label="OpenAI Realtime">
+
 ```typescript
 // OpenAI Realtime Voice Configuration
 const voice = new OpenAIRealtimeVoice({
@@ -858,8 +880,9 @@ const voice = new OpenAIRealtimeVoice({
 
 For more information on the OpenAI Realtime voice provider, refer to the [OpenAI Realtime Voice Reference](/reference/voice/openai-realtime).
 
-  </Tabs.Tab>
-  <Tabs.Tab>
+  </TabItem>
+  <TabItem value="google-gemini-live" label="Google Gemini Live">
+
 ```typescript
 // Google Gemini Live Voice Configuration
 const voice = new GeminiLiveVoice({
@@ -874,7 +897,7 @@ const voice = new GeminiLiveVoice({
 
 Visit the [Google Gemini Live Reference](/reference/voice/google-gemini-live) for more information on the Google Gemini Live voice provider.
 
-  </Tabs.Tab>
+  </TabItem>
 </Tabs>
 
 ### Using Multiple Voice Providers
@@ -932,13 +955,13 @@ For more information on the CompositeVoice, refer to the [CompositeVoice Referen
 
 ## More Resources
 
-- [CompositeVoice](../../reference/voice/composite-voice.mdx)
-- [MastraVoice](../../reference/voice/mastra-voice.mdx)
-- [OpenAI Voice](../../reference/voice/openai.mdx)
-- [OpenAI Realtime Voice](../../reference/voice/openai-realtime.mdx)
-- [Azure Voice](../../reference/voice/azure.mdx)
-- [Google Voice](../../reference/voice/google.mdx)
-- [Google Gemini Live Voice](../../reference/voice/google-gemini-live.mdx)
-- [Deepgram Voice](../../reference/voice/deepgram.mdx)
-- [PlayAI Voice](../../reference/voice/playai.mdx)
-- [Voice Examples](../../examples/voice/text-to-speech.mdx)
+- [CompositeVoice](/reference/voice/composite-voice)
+- [MastraVoice](/reference/voice/mastra-voice)
+- [OpenAI Voice](/reference/voice/openai)
+- [OpenAI Realtime Voice](/reference/voice/openai-realtime)
+- [Azure Voice](/reference/voice/azure)
+- [Google Voice](/reference/voice/google)
+- [Google Gemini Live Voice](/reference/voice/google-gemini-live)
+- [Deepgram Voice](/reference/voice/deepgram)
+- [PlayAI Voice](/reference/voice/playai)
+- [Voice Examples](/examples/voice/text-to-speech)