Part 4: The Build – Pair Programming with an AI
With our Google Cloud infrastructure ready and our Product Requirements Document (PRD) in hand, it’s time to start building. This is where the power of AI-assisted development truly shines. Using our detailed PRD as the “master prompt,” we can now ask the AI to generate the initial code for both our backend and frontend.
Generating the Backend
The first prompt was straightforward: “Using the PRD, generate the Python Flask code for the backend (main.py) and the dependencies file (requirements.txt).” Because our PRD was so specific about the technology and features, the AI was able to produce a highly relevant and nearly complete starting point.
Pillow
google-cloud-storage
Flask
Our First Deployment
With the initial code files in our Cloud Shell Editor, we were ready for our first deployment. The goal of serverless is simplicity, and this is reflected in the deployment command. This single line tells Google Cloud to take the source code in the current directory, package it, and deploy it as a public web service.
gcloud run deploy ai-processor-service --source . --region us-central1 --allow-unauthenticated --memory=1Gi
After a few minutes, the command finished and provided us with a crucial piece of information: the Service URL. This is the public address of our newly deployed backend.
Generating and Connecting the Frontend
Next, we prompted the AI to generate the index.html file, again using the PRD’s UI/UX guidelines. The AI produced a self-contained file with HTML, Tailwind CSS, and JavaScript.
The final step was to connect the two pieces. We opened the index.html file and updated the BACKEND_URL constant with the Service URL from our deployment.
// Paste the Service URL from your Cloud Run deployment here.
const BACKEND_URL = "[https://ai-processor-service-....run.app/process](https://ai-processor-service-....run.app/process)";
With the frontend configured, we opened the file locally in a browser. The UI loaded, we tried to process our first image, and… it failed.
We used Opera (or any browser) and used Inspect Element, then clicked on the Network tab to see what went wrong.
This failure wasn’t a setback; it was the beginning of the most valuable part of the project. In the next post, we’ll dive deep into the debugging process, tackling a series of real-world errors and learning how to diagnose and solve them with the help of several AI partners as Gemini was facing a loop in suggesting a solution that didn’t work. Claude to the rescue!
0 Comments