The vibe coding loop
This is how you will work throughout this tutorial: Describe. Preview. Refine. Repeat until you love it — then render.Generate your voiceover audio
Before building the video, let’s create the voiceover. You will tell your AI assistant to call the ElevenLabs API and generate an audio file from your script.Your AI assistant will write a small Node.js script, run it, and save the voiceover audio as
- Personal Brand Intro
- Event Invitation
- Portfolio Showcase
- Gemini CLI (Free)
- Claude Code (Paid)
In your Gemini CLI terminal, say or type this prompt:
Say this or copy this prompt
public/voiceover.mp3.What just happened?
What just happened?
Your AI assistant wrote a small Node.js script that:
- Sent your voiceover text to ElevenLabs’ text-to-speech API
- Received audio data back from ElevenLabs’ servers
- Saved it as an MP3 file in your project’s
public/folder
I want to use a different voice
I want to use a different voice
The free tier includes these built-in voices. Replace the voice ID in your prompt:
Want more options? Browse all voices at elevenlabs.io/voice-library to hear previews. The built-in voices above work on the free API tier.
| Voice | ID | Style |
|---|---|---|
| Rachel | 21m00Tcm4TlvDq8ikWAM | Calm, professional (default) |
| Bella | EXAVITQu4vr4xnSDxMaL | Warm, friendly |
| Antoni | ErXwobaYiN019PkySvjV | Conversational, male |
| Elli | MF3mGyEYCl7XYWbV9V6O | Young, energetic |
| Josh | TxGEqnHWrfWFTfGW9XjX | Deep, authoritative |
| Adam | pNInz6obpgDQGcFmaJgB | Clear, neutral, male |
| Sam | yoZ06aMxZJJ28mfd3POQ | Warm, narrative |
| Domi | AZnzlk1XvdvUeBnXmlld | Confident, bold |
ElevenLabs API returns an error
ElevenLabs API returns an error
Common causes:
- Invalid API key: Double-check that you copied the full key with no extra spaces.
- Free tier limit reached: Check your usage at elevenlabs.io under Profile. The free tier is 10,000 characters per month.
- Network error: Make sure you have an internet connection. Try again in a few seconds.
Generate a sound effect
Now let’s create a sound effect to use in your video transitions.
You can generate multiple sound effects and use different ones at different points in your video.
- Gemini CLI (Free)
- Claude Code (Paid)
Say this or copy this prompt
ElevenLabs can create any sound from a text description. Try “gentle bell chime,” “keyboard typing sounds,” “crowd applause,” or “ocean waves.” Experiment with different descriptions — the more specific you are, the better the result.
Sound effect ideas for different video types
Sound effect ideas for different video types
| Video Type | Sound Effect Prompt |
|---|---|
| Personal brand | ”subtle whoosh transition, professional” |
| Event invitation | ”gentle bell chime notification” |
| Portfolio showcase | ”soft keyboard typing sounds” |
| Social media tip | ”upbeat pop notification sound” |
| Freelance pitch | ”confident drum hit accent” |
| Thank-you video | ”warm, soft chime” |
Create your video composition
Now for the main event — describe your video and let AI build it. This is where everything comes together.
- Gemini CLI (Free)
- Claude Code (Paid)
Say this or copy this prompt
What did the AI just create?
What did the AI just create?
Your AI assistant created several files in the
src/ folder:- A React component (
.tsxfile) that defines the video’s visual layout — text, colours, animations - Uses Remotion’s
<Audio>component to include your voiceover and sound effects - Uses Remotion’s animation utilities (
useCurrentFrame,interpolate,spring) for smooth transitions - Registered the new composition in
src/Root.tsxso Remotion knows about it
Review and refine
Watch the preview in your browser. It probably will not be perfect on the first try — that is expected and part of the process. Here are some refinement prompts to try:Adjust sizing and layout:Change the colour scheme:Fix audio timing:Add visual flair:
Say this or copy this prompt
Say this or copy this prompt
Say this or copy this prompt
Say this or copy this prompt
Be specific in your feedback. Instead of “make it look better,” try “make the name text larger, change the background to dark blue, and slow down the fade-in animation.” The more specific you are, the better the AI can help.
Render your final video
Happy with the preview? Let’s render the final MP4 file.
- Gemini CLI (Free)
- Claude Code (Paid)
Say this or copy this prompt
Rendering takes 1 to 3 minutes depending on your computer and the video length. You will see a progress bar in the terminal. The final MP4 file will be saved in the
out/ folder inside your project.Watch your video
Open the rendered video and see the final result:You should see your finished promotional video — with animated text, professional voiceover, and sound effects.
- Windows
- macOS
Open File Explorer and navigate to your project’s
out/ folder, then double-click my-promo-video.mp4. Or run:Copy this command
What just happened?
Let’s recap what you did:- Generated a voiceover — AI called the ElevenLabs API to turn your script into professional audio
- Created a sound effect — AI generated a custom swoosh transition from a text description
- Built a video composition — AI created animated text, backgrounds, and integrated your audio files
- Refined the design — You described changes and AI updated the video in real time
- Rendered to MP4 — AI ran the render command and produced a video file you can share anywhere
Troubleshooting
The preview is blank or shows an error
The preview is blank or shows an error
The AI may have created a file with a syntax error. Ask your AI assistant:You can also try refreshing the browser. If the issue persists, check that Terminal 1 (the preview server) is still running.
Audio is not playing in the preview
Audio is not playing in the preview
Remotion’s preview may not autoplay audio. Try clicking the play button in the Remotion preview controls. Also verify that the audio files exist:
ElevenLabs API returns an error
ElevenLabs API returns an error
Common causes:
- Invalid API key: Double-check your key — no extra spaces or missing characters.
- Free tier limit: You may have used your monthly quota. Check usage at elevenlabs.io.
- Rate limit: Wait a few seconds and try again.
Render fails or produces a broken video
Render fails or produces a broken video
Ask your AI assistant:Common causes: missing audio files, composition not registered in Root.tsx, or a code error. The AI will usually identify and fix the issue.
The video is too long or too short
The video is too long or too short
Tell your AI assistant the exact duration you want:
My voice input has errors
My voice input has errors
Wispr Flow may occasionally mishear technical terms. You can review and correct the text before pressing Enter. If voice input is causing too many errors, switch to copying and pasting the prompts instead.
Congratulations — you created a real promotional video using only natural language! Head to Keep going for more video ideas, advanced techniques, and ready-to-use prompts.