Vibe-coding with Voice

What's Vibe-coding? 🚀

A few weeks ago, I was casually browsing the web and stumbled upon Andrej Karpathy's tweet about vibe-coding.

It had some really interesting replies - I realized I'm not alone! 😄

There's a new kind of coding I call "vibe-coding", where you fully give in to the vibes, embrace exponentials, and forget that the code even exists. It's possible because LLMs (like Cursor Composer w/ Sonnet) are getting too good.

Some people define vibe-coding as a spectrum (I like this view as well). When I can (read: when company policies allow it), I'm vibing comfortably around 6–7 out of 10. Here's how:

• I rarely write code (just corrections).

• I talk (via voice) to AI (GitHub Copilot – Claude 3.7 Sonnet).

• I give precise details of what I want 0 classes, methods, APIs, etc.

• I manually select the context (specific files).

• I glance through the diff and apply it.

So, I don't fully embrace the exponentials, but it works really well for me. I prefer being a bit more in control, either applying diffs or selecting context.

Image

I'm pretty sure everyone feels comfortable somewhere on this spectrum - but it also depends on the task. For small, simple PoCs, you can go wild — 8–9 or even a full 10 (blindly accepting diffs and hoping for the best).

It's an oddly empowering feeling. For Drupal Forms or HTML, it feels like drawing UI. And the more precise your demands, the better your "drawing" gets. ✏️

But not everyone vibes with the code...

Not everyone vibes with the code though.
The Primeagen, for example, often brings up an example of non-developers hitting the limit of the context window of LLMs (Claude and others) – underlining that your app/website will be as big as the context window allows it.
(Claude and other LLMs have a limit when it comes to how much they can read and keep in their "memory").

But for Junior, Middle, or Senior devs, overcoming this is straightforward – just:
hand-pick files for context, provide precise instructions, and craft project-based (or even request-based) prompts.

And now there’s Claude Code – it can dynamically identify what context it should use and how.
But Claude Code consumes $ pretty fast 🔥 – so while it might be an affordable solution for some, I’d say a developer can achieve similar results (and sometimes even better and faster) with a simple $10/month GitHub Copilot subscription.

Tired of explaining everything to your AI companion? 🤯

You're not coding anymore; you're typing explanations, demands, yelling in CAPS LOCK 😂 - and you start wondering: "Wouldn't I be faster just writing this Drupal Form API element myself instead of explaining why it should (or shouldn't) use '#tree' => TRUE ?"

Continuing from my previous article, I decided to vibe-code a standalone version of the Whisper Recorder UI tool and publish it as a GitHub page.

Image

Now - just copy/paste your Groq credentials and use it from any device! It's simple static HTML that lets you speak (or yell?) at your AI, then transcribes, formats, and copies your message directly into the clipboard.

Image

Almost everything is configurable - including the prompt.

How the Whisper ASR Recorder works 🎙️

Here's how simple it is:

1. Press Record.

2. Explain clearly what needs to be done (tech terms, paths, etc.).

3. Press Stop.

4. Paste into VSCode (quickly verify there are no major issues).

5. Done! 🎉

Personally, I love using Groq. It's blazing fast - after a month of using it 10–12 hours daily, my costs are under $1! Especially awesome for coding open-source modules (it became my daily driver).

Check out more details in my original self-hosted version here.

Groq Setup Example (Recommended!) ⚡

Like I mentioned before - I like to use Groq. Here’s how to set it up:

1. Register/Login to Groq and create an API key.

2. Open my GitHub-hosted Whisper Tool.

3. Click the Gear ⚙️.

4. Paste your keys here:

   • Whisper API Key (if required).

   • API Key (if required).

5. Configure Groq as provider:

   • Whisper API Endpoint: https://api.groq.com/openai/v1/audio/transcriptions

   • Whisper API Format: OpenAI/Groq

   • Whisper Model: Whisper Turbo

   • API Format: OpenAI-compatible

   • LLM API Endpoint: https://api.groq.com/openai/v1/chat/completions

   • LLM Model: gemma2-9b-it

6. Save settings.

7. Allow microphone permissions.

8. Try it out - hope it works! ✌️

The tool remembers these settings unless your browser cache is cleared.

Customize the prompt if needed (append rules or specific formatting instructions).

My Vibe-coding Flow 🔥

My 6–7 out of 10 vibe-coding workflow looks like this:

1. Set up Whisper Recorder UI.

2. Configure VSCode prompts/rules (check out this VSCode Copilot instructions guide). For Drupal developers, see below 👇.

3. Speak to Whisper → Paste into Copilot Chat.

4. Select relevant files (4–6 recommended).

5. Wait for AI, apply the diff.

6. Review diff: Approve or Rollback.

7. Repeat as needed!

This loop helped me to really accelerate my development enormously. I can’t claim it’s 2x or 10x, but a Config form, would normally take me ~1h (you have to find good examples, remember what each FormAPI element can do, make sure you don’t have typos, make sure your configs are aligned with the form itself, etc) - now it’s 5-10 minutes. Even if AI screws up, I know it’s just a matter of another 5-10 minutes. Like I said, it feels like drawing 🎨 🙂

Sure, tools like Claude Code, Cursor Composer, and upcoming VSCode Agents (still in dev) exist - but this approach remains efficient, affordable, and very effective. I might try VSCode Agents or Cursor later, but right now this suits me great.

Here’s an example .github/copilot-instructions.md file:

—

Make sure your outputs are professional:

- Make sure that we have no Drupal::Service calls - we have to use proper dependency injections.
- Make sure we have proper comment blocks (according to the Drupal community) - all comments and with proper punctuation.
- Make sure that you have no ugly/redundant code/
- All best-practices of the community should be followed.
- If you don't have enough information - or you feel like there's missing a file in the context - ask the user to try again and explain which file you need to be included.
- Make sure proper type-hinting is used - don't slack! :)
- If you're confused - don't be a YES-BOT, feel free to talk-back, ask things, collaborate with the user.

--

OUTPUT FORMATTING SETTINGS:

1. Make sure you use 1 code-block with ALL the code-changes per 1 file.
2. Make sure you don't repeat unaltered code - use `// ... existing code ...` - to skip those lines. You have limited context so please use this clever trick to skip a bunch of lines and save context - DO NOT output full file, unless really necessary.
3. If there are 3 methods: a(), b(), c() - and you want to alter a() and c() - you have to use `// ... existing code ...` between the methods, because otherwise it will be assumed you on-purpose want to delete method b().
4. Don't use inline comments on the same line with the code itself.
5. Always assume that the code we're outputting should be the state-of-the-art contributed open-source code that will be scrutinized.
6. You don't need to deprecate methods, because we're writing the original version - feel free to delete or change existing methods.
7. Oh, and use proper vs-code hinting to which files you modified.
8. Before or After the full code-block you can explain why you did what you did, in a short bullet-point fashion.

—

Article written while flying over the Atlantic from DrupalCon Atlanta 2025 - "we live in the future" © my friend Artem Antonov.

Happy vibe-coding! If you've never tried, definitely experiment! 😉