How to Integrate Lovable with ElevenLabs

Before connecting ElevenLabs to Lovable, you need your ElevenLabs API key. Open a new browser tab and go to elevenlabs.io. Sign in to your account, or create a free account if you do not have one. Once logged in, click your profile icon in the bottom-left corner of the ElevenLabs dashboard, then select 'Profile + API key' from the menu. On the profile page, scroll down to find the 'API Key' section. Click the copy icon next to your key to copy it to your clipboard. Keep this tab open — you will paste this key into Lovable in the next step. A few things to note about your ElevenLabs API key. The free plan gives you 10,000 characters of text-to-speech per month. The key shown here is your personal key — treat it like a password. Do not paste it into Lovable's chat window. Do not share it in screenshots. You will add it through a secure form in the next step, which encrypts it immediately and prevents it from appearing in your project's code or commit history.

Switch back to your Lovable project. In the top-right corner of the Lovable editor, click the settings gear icon to open your workspace settings. In the left-hand navigation of the settings panel, find and click 'Connectors'. This opens the Connectors page, which shows two sections: 'Shared connectors' and 'Personal connectors'. You want the 'Shared connectors' section. Scroll through the list of 17 shared connectors until you see ElevenLabs. It will show the ElevenLabs logo and a brief description. Click the ElevenLabs card to expand it or click 'Connect'. A form will appear asking for your ElevenLabs API key. Paste the key you copied in the previous step into the API key field. Click 'Save' or 'Connect'. Lovable will validate the key by making a test call to the ElevenLabs API. If the key is valid, the connector status will change to a green 'Connected' indicator. If you see an error, double-check that you copied the full key without any extra spaces. Once connected, this integration is available to all projects in your workspace. You do not need to reconnect ElevenLabs for each project — the shared connector persists at the workspace level.

With ElevenLabs connected, you can now ask Lovable's AI to build voice features in natural language. Open the chat panel in the bottom-left of the Lovable editor and describe the feature you want. Lovable will generate the complete implementation — an Edge Function that calls the ElevenLabs API server-side, stores the API key securely in Cloud → Secrets, and creates a React component in the frontend that fetches and plays the audio. For text-to-speech, the AI will create an Edge Function at supabase/functions/elevenlabs-tts/index.ts that accepts a text string and voice ID, calls the ElevenLabs text-to-speech endpoint, and returns the audio as a binary stream. The frontend component will include a play button, optional voice selector, and audio element for playback. You can customize the voice by specifying a voice name in your prompt — ElevenLabs has hundreds of pre-built voices, and your connector gives the AI access to query which ones are available on your plan. If you want to use a specific voice (for example, a consistent narrator voice across your app), include the voice name or description in your prompt. Lovable will look up the matching ElevenLabs voice ID and hardcode it appropriately in the generated code.

ElevenLabs offers more than text-to-speech. Through the same shared connector, you can add speech-to-text transcription and voice cloning to your Lovable app using natural language prompts. For speech-to-text, you can ask Lovable to add a microphone recording feature that sends the recorded audio to ElevenLabs' transcription API and returns the text. This is useful for voice note apps, dictation tools, or any feature where users speak instead of type. Lovable will generate a frontend component with a microphone button using the browser's MediaRecorder API, an Edge Function to forward the audio blob to ElevenLabs, and a results area to display the transcribed text. For voice cloning, note that this is available on ElevenLabs' paid plans (Starter and above). Voice cloning lets you create a custom voice from a short audio sample — as little as one minute of clear speech. In your Lovable app, this might mean letting users record their own voice to use as a narrator, or building an app where content is always read in a consistent branded voice. Ask Lovable to 'add a voice cloning feature that lets users upload an audio file and create a custom ElevenLabs voice from it'. The AI will scaffold the upload UI, an Edge Function to call the ElevenLabs voice cloning API, and a way to store and retrieve the custom voice ID for future use. For complex voice cloning workflows involving database storage of custom voice IDs per user, RapidDev's team can help architect the full data model and Edge Function logic.

After Lovable generates your voice features, test them in the live preview panel on the right side of the editor. Click the preview to focus it, then interact with the voice components you just added. For text-to-speech, type a short message in the text field and click the speak button. You should hear audio playing within 1-3 seconds. If the preview is silent, check that your browser tab is not muted — look for a speaker icon in the browser tab or in the preview toolbar. Some browsers also require a user gesture (a click) before playing audio for the first time on a page, which is handled by the button interaction. If you see an error message in the UI or the audio does not play, open Cloud → Logs (click the '+' icon next to the preview panel, then select 'Logs') to view real-time Edge Function execution logs. A common cause of failure is the ElevenLabs API key not yet being populated in Cloud → Secrets — Lovable normally handles this automatically when you connected the integration, but if you see a 'Secret not found' error in the logs, go to Cloud → Secrets and verify the ELEVENLABS_API_KEY entry is present and matches what you added in Settings → Connectors. Once the feature works in preview, click the Publish icon in the top-right corner of the Lovable editor to push the changes live. Voice features work identically in production — the Edge Functions are globally distributed and typically respond in under two seconds for text-to-speech requests.