Yellow Studio

Yellow Studio is a chat-driven AI website builder that lets creators generate, preview, and publish websites instantly from simple prompts. Each AI generation is billed through gas-free Yellow state-channel sessions, enabling true pay-per-use AI without subscriptions or transaction fees. The platform combines real-time visual editing with Web3 micro-payments to deliver a seamless, creator-friendly building experience.

DEMO URL: https://youtu.be/bQ9x8hGnAVI

Yellow Studio is built as a full-stack AI web application using Next.js (App Router, TypeScript) and Tailwind CSS for a fast, responsive split-screen builder experience combining chat-driven generation with a live visual preview canvas. We use an LLM API to convert natural-language prompts into structured website code, which is rendered instantly in the preview pane and versioned in a Supabase PostgreSQL database for persistence and project history.

To enable true pay-per-generation AI, we integrated the Yellow SDK and Nitrolite state-channel infrastructure. When a user starts a session, a Yellow off-chain channel is opened; each AI generation deducts a small USDC amount instantly without gas, and final balances are securely settled on-chain when the session ends. This architecture delivers Web2-level speed with Web3-level trust, making micro-billing for AI creation economically viable.

For the hackathon MVP, we intentionally kept smart-contract complexity minimal by leveraging Yellow’s deployed settlement contracts via the SDK, allowing us to focus on UX, real-time preview rendering, and seamless session-based payments.