UI Studio — Gemini Powered v0 Clone
This is a submission for the Google AI Studio Multimodal Challenge
What I Built
UI Studio is a browser-based interactive development environment that lets users write, edit, and preview React components in real time, assisted by AI collaboration.
The app integrates a virtual file system explorer, a code editor, a Gemini-powered chat panel, and a live preview powered by esbuild-wasm.
The goal is to provide an experience similar to modern prototyping tools like v0.dev, but with full control over file editing and the ability to generate new components from text or images.
Demo
🔗 Live Demo: UI Studio (Deploy)
How I Used Google AI Studio
- I used Gemini 2.5 Flash through the official
@google/genailibrary. - The AI transforms user prompts (text + images) into modifications of a Virtual File System (VFS).
- The model’s response is always a JSON object mapping file paths → file contents, enabling direct integration into the editor.
- The chat panel maintains history with checkpoints, allowing the user to restore the file system to any previous state.
Multimodal Features
- Text + image input: users can upload a design (e.g., screenshot) alongside a text prompt.
- Gemini interprets both modalities to generate or modify React/Tailwind components replicating the design.
- Real-time preview with esbuild: users immediately see results and can further adjust the code.
- Multimodal checkpoints: every interaction saves the VFS state together with the text/image that created it.
Tech Stack
- Frontend: React + Tailwind CSS
-
AI: Google Gemini 2.5 Flash (via
@google/genai) - Bundling: esbuild-wasm (WebAssembly in the browser)
- Infrastructure: Deployed on Cloud Run
Why This Project
With UI Studio, I wanted to showcase how Gemini can be integrated directly into the frontend development workflow — not just as a text assistant, but as a multimodal copilot capable of generating complete interfaces from natural specifications.
Top comments (1)
Nice work!