AI Web Weaver

Inspiration

Our inspiration was sparked by the central theme of the Google Cloud Run Hackathon: "From idea to global scale in minutes." We were captivated by the "AI Studio Category" and its concept of "vibe-coding"—the almost magical ability to translate a feeling or a concept into functional code. We wanted to build a tool that truly embodied this spirit, a bridge to carry a fleeting thought across the gap to a live, interactive webpage without the friction of boilerplate and setup.

What it does

AI Web Weaver is a streamlined, serverless application that acts as your personal AI front-end developer. It allows anyone, regardless of their coding expertise, to generate a complete webpage by simply describing it.

The process is simple:

1. Describe: A user types a prompt, such as, "Create a sleek, minimalist landing page for a new mobile app called 'Starlight' with a download button."
2. Weave: The application sends this prompt to Google's Gemini Flash model, which has been instructed to act as an expert in HTML and Tailwind CSS.
3. Visualize: Within seconds, the AI returns a complete, single-file HTML document. The application renders a live, interactive preview of the webpage and simultaneously displays the clean, formatted source code, ready to be copied, customized, or deployed.

It transforms the creative process from a multi-hour task of wireframing and coding into a seconds-long conversation with an AI.

How we built it

We built AI Web Weaver on a modern, scalable, and fully serverless stack, leveraging the power and integration of the Google Cloud ecosystem.

• Frontend: The client is a responsive single-page application built with React 18 and TypeScript, using Vite for a blazing-fast development experience.

• AI Engine: The core intelligence is provided by the Google Gemini Flash model, accessed directly from the client via the @google/genai SDK.

• Infrastructure & Deployment: The entire project is containerized with Docker and deployed on Google Cloud Run. The backbone of our project is a fully automated CI/CD pipeline orchestrated by Google Cloud Build via a cloudbuild.yaml file. This pipeline performs several critical steps:

  1. It securely ingests our Gemini API key as a build-time argument, preventing secrets from ever being stored in our source code.
  2. It executes a multi-stage Docker build. The first stage uses a node:20-alpine image to compile our TypeScript and build the static React assets. The second, final stage copies these assets into a lightweight, production-hardened nginx:stable-alpine image.
  3. The final, optimized container is pushed to Google Artifact Registry.
  4. Finally, Cloud Build automatically deploys this new container version to our Cloud Run service, making it live to the world.

Challenges we ran into

Our journey from a local development server to a production deployment on Cloud Run was where we faced our most significant—and educational—challenges.

1. The Environment Variable Maze: Our first major roadblock was a series of build failures. We discovered a fundamental difference between our local Vite environment and the Cloud Build container. Vite uses import.meta.env.VITE_... to expose environment variables, while we were initially attempting to use a different method. This led us to refactor our code and reconfigure our Dockerfile and cloudbuild.yaml to securely pass the API key with the correct naming convention.

2. The TypeScript Gauntlet: With the environment variables fixed, we ran into a wall of TypeScript errors reported by Cloud Build. The logs were our guide, leading us to two separate issues:

   • Our tsconfig.json was misconfigured and trying to compile its own output files. We fixed this by adding a specific "include" directive.
   • TypeScript didn't recognize Vite's import.meta.env object, which we solved by adding "vite/client" to our compiler types.

3. The Final Boss: The Port Mismatch: After solving all code and Docker build issues, our container was deployed but would immediately crash. The Cloud Run logs showed it was failing its health check. We realized Cloud Run was sending traffic to the default port 8080, but our Nginx container was listening on port 80. The solution was a single, satisfying line in our cloudbuild.yaml: adding the --port=80 flag to the gcloud run deploy command.

Accomplishments that we're proud of

• We are immensely proud of successfully building a fully automated, production-grade CI/CD pipeline that takes code from a git push to a live, globally-available URL in minutes.
• We successfully navigated and debugged a series of complex, interdependent issues across TypeScript, Docker, and Google Cloud configurations—a true microcosm of the modern development experience.
• The final product works! It's a fast, fun, and useful tool that perfectly demonstrates the power of "vibe-coding" with generative AI.

What we learned

This project was a masterclass in the realities of deploying a modern web application. We learned:

• The critical importance of reading and understanding CI/CD logs. They are not just for errors, but for telling the story of what is happening inside the build environment.
• Best practices for securely managing secrets in a serverless pipeline using build-time substitutions.
• The power of multi-stage Docker builds to create small, fast, and secure production containers.
• The subtle yet crucial difference between how various tools and platforms (Vite, Docker, Cloud Run) handle fundamental concepts like environment variables and network ports.

What's next for AI Web Weaver

This is just the beginning. We envision a future where AI Web Weaver becomes an even more powerful co-pilot for developers.

• Iterative Refinement: Allow users to give follow-up prompts to edit the generated code ("Now make the background dark," or "Add a testimonial section").
• Component-Level Generation: Instead of full pages, users could generate specific components in different frameworks ("A responsive React navbar with a search input").
• User Accounts & Project History: Allow users to save, fork, and share their creations, building a community around AI-generated design.

Built With

• docker
• google-artifact-registry
• google-cloud-build
• google-cloud-run
• google-gemini-api
• react
• tailwind-css
• typescript
• vite