From Prompt to Personalized Voice AI Demo in Minutes with Gemini 3
In a groundbreaking demonstration of AI’s power, it’s now possible to create a complete, fully functional Voice AI demo website from a single line of text. This revolutionary process, leveraging Gemini 3, transforms a simple idea into an interactive, ready-to-use web application that you can actually talk to, all without needing any technical expertise or writing a single line of code.
[00:01.696] [Gemini 3 AI Builder creating a Voice AI website] This process is a significant leap forward, making advanced Voice AI technology accessible to everyone. Previously, building such a demo would require extensive development resources, but now, it’s as simple as describing what you want. This is poised to be a game-changer for anyone looking to enter the Voice AI space and demonstrate its powerful capabilities to clients.
[00:11.756] [Live Agent Demo website for Plumbit Voice AI with two agent personas] The AI generates a complete website layout, including a live demo section with different agent personas, such as a friendly front desk assistant and an urgent emergency dispatcher. These agents are not just mockups; they are fully functional out of the box without requiring any external voice AI orchestration layers.
This is the first time in history that we witness something like this, and the best part is you don’t need to have any technical knowledge… You can get this out of the box incredibly quickly.
Following the initial showcase, many viewers had questions about the underlying process, costs, and technical implementation. This guide provides a complete, step-by-step walkthrough to answer those questions and show you how to create your own hyper-personalized Voice AI demos for any potential client.
[00:47.386] [“Step-by-step Walkthrough” title card] We will cover the entire workflow, from initial client research to hyper-personalizing the demo with specific brand information, giving it a “wow” factor that makes it seem like hours were spent on its creation. Best of all, all the prompts and app templates used are available for free in the description below.
[00:59.956] [Code editor showing how to personalize agent details] Let’s dive in and build a personalized demo for a specific lead, showcasing how you can replicate this process for your own clients.
Step 1: Researching Your Target Client
The first step is to identify a potential client. For this example, we’ll stick with the plumbing industry, as it provides clear use cases for Voice AI, such as scheduling and emergency dispatch.
[01:37.076] [Google search results for “plumbers in boston”] A simple Google search for “plumbers in Boston” provides a list of potential leads. The goal is to find a business with an existing website from which we can extract branding information. After browsing the results, Boston Budget Plumbing stands out as a good candidate because its website has a distinct brand identity with specific colors and a logo, which are perfect for our AI-powered recreation.
[02:03.956] [Homepage of the Boston Budget Plumbing website] With our target selected, the next step is to gather all the necessary information to personalize the demo.
Step 2: Extracting Brand Information with AI
To avoid manually copying text and identifying design elements, we can use an AI assistant like ChatGPT to do the heavy lifting. By providing the client’s website URL, we can instruct the AI to extract key details.
[03:04.186] [ChatGPT prompt to extract website information] Here is the simple yet powerful prompt used to gather the necessary data. This prompt asks the AI to act as a research assistant, pulling all relevant business information into a structured format.
Take the following website URL and extract the brand name, including the services they offer and any kind of contact information. So anything that's relevant to the business, including their color profile and layout and style. So I can recreate the branding. Later down the line, make sure it's concise and not too long and return it in markdown code:
https://bostonbudgetplumbing.com/
[03:11.236] [Markdown output from ChatGPT with extracted brand information] The AI quickly returns a comprehensive summary, including the brand name, services offered, contact details, and a visual profile. However, sometimes the AI might make a small mistake, like misidentifying an accent color. In this case, a quick follow-up prompt with a screenshot of the website helps correct the information, ensuring our demo will be perfectly on-brand.
[03:48.876] [Follow-up ChatGPT prompt with a screenshot to correct color information] With this corrected, hyper-personalized information in hand, we are ready to generate the demo.
Step 3: Building the Voice AI App with Gemini
Now, we move to Google AI Studio to bring our personalized demo to life. Using the information extracted by ChatGPT, we’ll craft a prompt for Gemini to build our one-page web application.
[04:25.266] [Google AI Studio homepage to start building with Gemini] The prompt specifies the creation of a one-page app for a plumber, using the provided brand information. It also explicitly requests two distinct Voice AI agents: a front desk agent for general inquiries and an emergency dispatcher.
Create a one-pager App for a plumber based on the given brand information below. Also, make sure to include two VoiceAI agents, one as a front desk and one as an emergency dispatcher, and make sure they're available in the above the fold section.
brand information:
... [Paste the markdown code from ChatGPT here] ...
[05:26.156] [Gemini AI builder interface generating the application] After inputting the prompt and clicking “Build,” Gemini gets to work. It plans the application’s structure, generates the necessary code files, and populates them based on our instructions. The entire process, from planning to a fully rendered preview, happens automatically in just a few minutes.
[08:09.306] [Final preview of the generated personalized Voice AI website] The result is a stunning, professional-looking website branded for Boston Budget Plumbing, complete with interactive Voice AI agents ready for a demonstration. You can even fine-tune details like the agents’ voices directly in the code editor or by chatting with the AI.
[09:08.576]
[Code editor showing the constants.ts file for agent configuration]
This code view shows where you can manually adjust agent properties like the voiceName to switch between different male and female voices, or change the systemInstruction to refine their behavior.
Step 4: Deployment and Sharing Your Demo
Once the app is built, sharing it with your client is just a click away.
API Key Security: A Quick Note
A common concern is whether the Gemini API key is exposed.
- When deploying on Google Cloud (recommended): No. Google uses a secure proxy system. Your API key remains safe on the backend and is never exposed to the frontend user.
- When downloading the code to host elsewhere: Yes. The API key would be bundled in the frontend code, making it vulnerable. This method requires building a separate backend to secure your key.
For quick, secure, and hassle-free demos, using the integrated Google Cloud deployment is the best option.
[11:15.356] [“Deploy app on Google Cloud” modal] Clicking the Deploy button in Google AI Studio allows you to deploy the app directly to Google Cloud Run. This generates a public URL that you can immediately share with your client.
For an even more professional touch, you can map a custom domain. This involves adding a simple CNAME record to your DNS provider (like Cloudflare), pointing a subdomain (e.g., bostonbudgetplumbing.yourdomain.com) to the Google Cloud service.
[11:27.916] [Google Cloud Run domain mapping configuration] This final step completes the process. In just minutes, you’ve gone from a simple idea to a live, hyper-personalized, and interactive Voice AI demo on a custom URL, ready to impress any potential client and showcase the incredible value of modern AI solutions.
[11:37.386] [Outreach email template for sharing the Voice AI demo] To help you get started, an email template for reaching out to leads with your new demo is also included in the resources. This streamlined process is truly a massive time-saver and opens up a new world of possibilities for creating value-driven, personalized client presentations.