Sketch2Cloud

Inspiration

What it does

Upload a UI sketch (or pick a template) and describe the app you want. A team of six Google ADK agents then runs an end-to-end workflow:

1. vision – parses pages, components, layout, colour and typography from the image
2. planner – proposes the file structure, data models and API routes
3. ui – writes a Next.js + Tailwind frontend to disk
4. backend – writes a FastAPI + SQLite backend mounted under /api
5. testing – runs npm ci + next build, reads the failures, patches the files and re-runs — a self-heal loop, capped at 4 attempts
6. deployment – after a human approval gate, deploys to Google Cloud Run

Deployment runs under your own Google Cloud account via OAuth 2.0 — never the server's own credentials. The required GCP APIs are enabled automatically at deploy time, so the only manual setup is creating an OAuth client. With no account connected it falls back to a simulated deploy, so the whole flow is demoable with zero cloud spend.

Every run is a persisted, resumable job. A Projects list lets you reopen any app you've generated and refine it in place from a chat box — a dedicated edit agent applies just the requested change and redeploys to the same URL, instead of rebuilding from scratch.

Live example output: https://sketch2cloud-gen-647675745295.us-central1.run.app — a Kanban board generated end-to-end by the pipeline, one Cloud Run service serving both the Next.js UI and a working FastAPI /api/tasks.

How we built it

• Environment: developed in Google Antigravity.
• Orchestration: the Agent Development Kit (google-adk) as a SequentialAgent of six Gemini agents, each with file-write / shell / file-read tools scoped to a per-job workspace directory.
• Backend: FastAPI, SQLite for the job store + append-only event log + OAuth sessions, and Server-Sent Events with Last-Event-ID resume so a dropped tab or a refresh replays exactly where it left off. Jobs run as background asyncio tasks, not one long HTTP request.
• Deploy: after a verified build the pipeline writes a deterministic scaffold (Dockerfile, start.sh, .gcloudignore, and an /api proxy next.config.mjs when there's a FastAPI backend), then runs gcloud run deploy --source . with a per-invocation --access-token-file minted from the connecting user's OAuth consent. The LLM never hand-rolls container config.
• Frontend: Next.js 16 / React 19 — pipeline timeline, live agent logs, a code explorer over the generated files, and an iframe of the deployed app.

Challenges we ran into

• The approval gate was fake. The original "approve deployment" modal was cosmetic — its buttons didn't stop anything. Making it real (a server-side awaiting_approval state the deploy phase blocks on) immediately surfaced a worse problem: gating on the host machine's ambient gcloud credentials meant a routine test could silently deploy to an unrelated GCP project. That drove the move to per-user OAuth with a delegated token passed explicitly per deploy.
• Silent workspace bug. ADK session state set after create_session() doesn't propagate to tools, so the agents were writing to a shared fallback directory and the per-job workspace was empty — the first real deploy shipped nothing. Fixed by seeding state at session creation.
• Unattended gcloud. A cold source deploy prompts to create an Artifact Registry repo and, on Windows, hits the Store Python stub. Fixed with --quiet, a closed stdin, and a pinned CLOUDSDK_PYTHON.

What we learned

Persisting the agent event log beats streaming it — it's a small change (a SQLite table + SSE resume by id) with an outsized effect on how "background" the pipeline feels under dropped connections. A human gate is only real if it's a server-side state machine. And least privilege for a deploy agent means a delegated token, never an ambient session.

What's next

Move job execution to a real queue (Cloud Tasks) so runs survive a restart; least-privilege OAuth scopes instead of broad cloud-platform; multi-file refinements; and per-run cost/token budgets.

Built With

• artifact-registry
• asyncio
• cloud-build
• fastapi
• gemini
• google-adk
• google-antigravity
• google-cloud-run
• google-genai
• google-oauth2
• next.js
• python
• react
• server-sent-events
• sqlite
• tailwind-css
• typescript