fix: DOCS - React Guide

api-reference/react-text-to-speech-guide.mdx

@@ -173,9 +173,9 @@ export default AudioComponent;
 
 For more details on working with our API, including additional endpoints, refer to our [official documentation](https://api.elevenlabs.io/docs#/).
 
-## Leveraging ElevenLabs' AudioStream React Component
+## Leveraging ElevenLabs' AudioBuilder React Component
 
-Want to take it one step further? Beyond our API, we also offer a reusable React component called `AudioStream` to facilitate text-to-speech conversion directly within your React app.
+Want to take it one step further? Beyond our API, we also offer a reusable React component called `AudioBuilder` to facilitate text-to-speech conversion directly within your React app.
 
 This component requires the following props:
 
@@ -193,13 +193,13 @@ interface VoiceSettings {
 }
 ```
 
-### Using AudioStream React Component
+### Using AudioBuilder React Component
 
-Integrating `AudioStream` into your React application is a straightforward process:
+Integrating `AudioBuilder` into your React application is a straightforward process:
 
 1. Create a react project using `vite` by running `npm create vite@latest` in your terminal and follow along the instructions.
 2. Open the project in your favorite code editor and install axios by running `npm install axios` in your terminal.
-3. Create a component in your `src` directory called `AudioStream.tsx` and copy the following code into it, this is our implementation of the `AudioStream` component in it's most basic form:
+3. Create a component in your `src` directory called `AudioBuilder.tsx` and copy the following code into it, this is our implementation of the `AudioBuilder` component in it's most basic form:
 
 ```tsx
 import React from 'react';
@@ -210,14 +210,14 @@ interface VoiceSettings {
   similarity_boost: number;
 }
 
-interface AudioStreamProps {
+interface AudioBuilderProps {
   voiceId: string;
   text: string;
   apiKey: string;
   voiceSettings?: VoiceSettings;
 }
 
-const AudioStream: React.FC<AudioStreamProps> = ({
+const AudioBuilder: React.FC<AudioBuilderProps> = ({
   voiceId,
   text,
   apiKey,
@@ -230,7 +230,7 @@ const AudioStream: React.FC<AudioStreamProps> = ({
   const [error, setError] = React.useState('');
 
   // Asynchronous function to fetch audio data and update state variables
-  const convertAndStream = async () => {
+  const convertAndPlay = async () => {
     setLoading(true);
     setError('');
 
@@ -277,22 +277,22 @@ const AudioStream: React.FC<AudioStreamProps> = ({
           <source src={sourceUrl} type='audio/mpeg' />
         </audio>
       )}
-      <button type='button' onClick={convertAndStream} disabled={loading}>
-        Convert and Stream
+      <button type='button' onClick={convertAndPlay} disabled={loading}>
+        Convert and Play
       </button>
       {error && <p>{error}</p>}
     </div>
   );
 };
 
-export default AudioStream;
+export default AudioBuilder;
 ```
 
-4. Import the component: Import `AudioStream` from its source file: `import AudioStream from './AudioStream';` in your `App.tsx` file like so:
+4. Import the component: Import `AudioBuilder` from its source file: `import AudioBuilder from './AudioBuilder';` in your `App.tsx` file like so:
 
 ```tsx
 import React from 'react';
-import AudioStream from './AudioStream';
+import AudioBuilder from './AudioBuilder';
 
 const voiceSettings = {
   stability: 0,
@@ -302,9 +302,9 @@ const voiceSettings = {
 const App = () => {
   return (
     <div>
-      <AudioStream
+      <AudioBuilder
         voiceId='304fx0Tcm4TlvDq8ikWAM'
-        text='The following is an example text to test the AudioStream component.'
+        text='The following is an example text to test the AudioBuilder component.'
         apiKey='your-api-key'
         voiceSettings={voiceSettings}
       />
@@ -320,11 +320,11 @@ Just replace `voiceId`, text, `apiKey`, and `voiceSettings` with the specific se
 ```tsx
 import React from 'react';
 import ReactDOM from 'react-dom';
-import SpeechStreamComponent from './SpeechStreamComponent';
+import SpeechBuilderComponent from './SpeechBuilderComponent';
 
 const voiceSettingsId = '304fx0Tcm4TlvDq8ikWAM';
 const sampleText =
-  'The following is an example text to test the AudioStream component.';
+  'The following is an example text to test the SpeechBuilderComponent component.';
 const apiAccessKey = 'your-api-key';
 
 const audioQualitySettings = {
@@ -334,7 +334,7 @@ const audioQualitySettings = {
 
 ReactDOM.render(
   <React.StrictMode>
-    <SpeechStreamComponent
+    <SpeechBuilderComponent
       voiceId={voiceSettingsId}
       text={sampleText}
       apiKey={apiAccessKey}
@@ -345,25 +345,150 @@ ReactDOM.render(
 );
 ```
 
-Please note that the above `SpeechStreamComponent` is the same as `AudioStream` component. We have just renamed it for the sake of providing more options for naming your component.
+Please note that the above `SpeechBuilderComponent` is the same as `AudioBuilder` component. We have just renamed it for the sake of providing more options for naming your component.
 
-Once incorporated, the component will render an audio element with a "Convert and Stream" button. Just click this button to activate the text-to-speech conversion — your generated audio should play immediately.
+Once incorporated, the component will render an audio element with a "Convert and Play" button. Just click this button to activate the text-to-speech conversion — your generated audio should play immediately.
 
-You can also extend this reusable `AudioStream` component to add more features to it. Here are a few ideas to get you started:
+You can also extend this reusable `AudioBuilder` component to add more features to it. Here are a few ideas to get you started:
 
 - Add a loading indicator to the button.
 - Use React Query to streamline the API call.
 - Add a dropdown to select the voiceIds.
 - Add a dropdown to select the voiceSettings.
 - Using Tailwind CSS or any other UI component library to style the component.
 
-These are just a few of the many ways you can customize the `AudioStream` component to suit your needs. The possibilities are endless!
+These are just a few of the many ways you can customize the `AudioBuilder` component to suit your needs. The possibilities are endless!
+
+## Leveraging ElevenLabs' AudioStream React Component
+
+While the above `AudioBuilder` components leverages our `text-to-speech` API, you can also use the `text-to-speech` stream API to stream the audio data directly to the browser.
+
+This component requires the same props as that of the `AudioBuilder` component, with the only additional prop being `optimize_streaming_latency` which is an `integer` value that defaults to `0`. You can read more about this API in our [official documentation](https://elevenlabs.io/docs/api-reference/text-to-speech-stream).
+
+### Using AudioStream React Component
+
+- Follow the steps mentioned in the `AudioBuilder` section to setup your React project and install the `axios` package.
+- Create a component in your `src` directory called `AudioStream.tsx` and copy the following code into it, this is our implementation of the `AudioStream` component in it's most basic form:
+
+```tsx
+import React from 'react';
+import axios from 'axios';
+
+interface VoiceSettings {
+  stability: number;
+  similarity_boost: number;
+}
+
+interface AudioStreamProps {
+  voiceId: string;
+  text: string;
+  apiKey: string;
+  voiceSettings?: VoiceSettings;
+  optimize_streaming_latency?: 0 | 1 | 2 | 3 | 4;
+}
+
+const AudioStream: React.FC<AudioStreamProps> = ({
+  voiceId,
+  text,
+  apiKey,
+  voiceSettings,
+  optimize_streaming_latency = 0,
+}) => {
+  const [loading, setLoading] = React.useState(false);
+  const [error, setError] = React.useState('');
+
+  // Asynchronous function to fetch audio data and update state variables
+  const convertAndStream = async () => {
+    setLoading(true);
+    setError('');
+
+    const baseUrl = 'https://api.elevenlabs.io/v1/text-to-speech';
+    const headers = {
+      'Content-Type': 'application/json',
+      'xi-api-key': apiKey,
+    };
+
+    const body = {
+      text,
+      voice_settings: voiceSettings,
+    };
+
+    try {
+      const response = await axios.post(
+        `${baseUrl}/${voiceId}/stream?
+        optimize_streaming_latency=${optimize_streaming_latency}
+      `,
+        body,
+        {
+          headers,
+          responseType: 'blob',
+        }
+      );
+
+      if (response.status === 200) {
+        /**
+         * The response.data is a Blob object which looks like this:
+         * Blob {size: 123456, type: "audio/mpeg"}
+         */
+
+        const audioUrl = URL.createObjectURL(response.data);
+        const audio = new Audio(audioUrl);
+        audio.play();
+      } else {
+        setError('Something went wrong. Please try again.');
+      }
+    } catch (error) {
+      setError('Something went wrong. Please try again.');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div>
+      <button type='button' onClick={convertAndStream} disabled={loading}>
+        Convert and Stream
+      </button>
+      {error && <p>{error}</p>}
+    </div>
+  );
+};
+
+export default AudioStream;
+```
+
+Once implemented you can use the `AudioStream` component in your `App.tsx` file like so:
+
+```tsx
+import React from 'react';
+import AudioStream from './AudioStream';
+
+const voiceSettings = {
+  stability: 0,
+  similarity_boost: 0,
+};
+
+const App = () => {
+  return (
+    <div>
+      <AudioStream
+        voiceId='304fx0Tcm4TlvDq8ikWAM'
+        text='The following is an example text to test the AudioStream component.'
+        apiKey='your-api-key'
+        voiceSettings={voiceSettings}
+      />
+    </div>
+  );
+};
+```
+
+You can also play with the `text-to-speech` stream API on the [ElevenLabs API Playground](https://api.elevenlabs.io/docs).
 
 ## Wrapping Up
 
 At ElevenLabs, we offer an unprecedented opportunity to integrate highly natural and customizable speech synthesis into your React applications.
 
-Whether for creating authentic voiceovers, multilingual customer service, or interactive educational modules, the ElevenLabs API and our accompanying AudioStream React component offer a robust solution to meet your text-to-speech needs.
+Whether for creating authentic voiceovers, multilingual customer service, or interactive educational modules, the ElevenLabs API and our accompanying AudioBuilder React component offer a robust solution to meet your text-to-speech needs.
 
 Take the first step by signing up today and explore the authentic, real human speech capabilities that await. The possibilities are bounded only by the limits of your imagination!