GEN UI - ADK | Devpost

Architecture
Generated Army theme
Generated Batman theme
Generated Superman theme

Inspiration

Generative UI (GenUI) is about moving from one-size-fits-all interfaces to highly personalized experiences letting AI dynamically craft user experiences based on individual needs and context.GENUI‑ADK was born from this vision: enabling real-time UI personalization via Google’s Agent Development Kit (ADK).

What it does

Dynamically generates personalized UI for any website at runtime using a generative model Connects a React frontend with ADK agents through a modular API gateway Delivers seamless end-to-end integration: React UI ←→ ADK backend ←→ image-generation tools

How we built it

Frontend: React SPA under client/, served at http://localhost:3000 Backend: Runs on Python using Google ADK, in server/ Token gateway (ApiGateway) with Cloud Run containerization

Deploys agents via Vertex AI

Architecture: client/ ↔ server/ApiGateway ↔ Vertex AI Agent Engine Tech stack: Python 3.9+, Node.js/npm, Docker, GCP (Artifact Registry, Cloud Run, Vertex AI)

Challenges we ran into

Real-time generation: Ensuring low latency while dynamically constructing UIs was tough **Infrastructure complexity: Orchestrating Docker, Cloud Run, APIs, and agent deployments added friction Credentials & secrets: Securing API keys (Google, Azure, Cloudinary) across multiple deployment environments Debugging layers: Tracing issues through gateway, agents, and the React frontend required advanced logging

Accomplishments we’re proud of

Achieved seamless runtime personalization across the stack Modular, extensible ApiGateway that handles auth and image/data calls End-to-end prototype: React UI powered by live ADK agents deployed on Vertex AI Demonstration-ready proof-of-concept with interactive demo GIF and architecture diagrams

What we learned

Real-time GenUI demands fast coordination of frontend, gateway, and agent layers Cloud-native deployments (Cloud Run + Vertex AI) simplify scaling but require careful secrets management Clear environment configuration and standardized .env files are essential for reproducibility Intelligent agent orchestration benefits greatly from explicit separation of concerns in code and infrastructure