How we built voice search for Recipe Finder

On Recipe Finder you can now tap a microphone in any recipe search bar and say something like "um, something with chicken and garlic for dinner, maybe Italian" . A moment later the search box says chicken garlic , the meal type is set to dinner , the cuisine to Italian , and the results are loading.

This post walks through how that works: capturing speech in every browser, turning messy speech into a clean search with Gemini, the two little sounds that tell you the microphone is on or off, and the colourful Google-style effects that show the app is listening and thinking.

Try it first: open recipe-finder.org , tap the microphone in the search bar and say what you feel like eating.

The stack

Frontend: Vue 3 + TypeScript, Vuetify 3, Tailwind 4, Pinia

Backend: Node/Express

Speech: the browser's Web Speech API, with a MediaRecorder fallback

Understanding: Google Gemini, called from the server with a strict JSON schema

Sound: the Web Audio API, with no audio…