Logic UI/UX Builder

Logic is an AI-powered UI/UX builder that transforms natural language prompts into fully interactive multi-screen interfaces with runnable React/Tailwind code. It features a three-stage generation pipeline with model fallback, an infinite canvas workspace for design iteration, and integrated feedback collection. Built with Next.js, Vercel AI SDK, and Ollama, Logic aims to democratize UI design and development by making it accessible to everyone.

Tech Stack

Next.js React TypeScript Tailwind CSS Prisma ORM PostgreSQL Supabase Clerk Vercel AI SDK Ollama Sandpack TanStack Query Zustand Zod Upstash Redis Upstash QStash Nodemailer

frontend

→Next.js 16 App Router
→React 19
→TypeScript
→Tailwind CSS v4
→shadcn/ui and Radix
→Motion
→D3 Zoom/Selection
→Sandpack React
→TanStack Query
→Zustand

backend

→Next.js API Route Handlers
→Clerk authentication and webhooks
→Vercel AI SDK
→Ollama provider integration
→Upstash QStash background jobs
→Nodemailer

database

→PostgreSQL (Supabase)
→Prisma ORM

storage

→Supabase Storage (S3-compatible API)

deployment

→Vercel
→Supabase
→Upstash
→Ollama model endpoint

Performance

lighthouse

1.0s

first Contentful Paint

1.5s

time To Interactive

200KB

bundle Size

Key Features

#1Prompt-to-project workflow with automatic metadata generation

#2Three-stage AI generation pipeline with spec extraction and code synthesis

#3Model fallback and server-sent event streaming for resilient generation

#4Infinite canvas workspace with zoom, pan, drag, resize, and fit-to-view

#5Frame-level regeneration for targeted iteration

#6Sandpack-powered live rendering of generated TSX in isolated iframes

#7Persistent project/generation/canvas state with thumbnail management

#8Integrated feedback flow with attachment support and secure processing