Introduction

NexusUI is an AI-powered visual development platform. We transform your UI mockups, screenshots, and wireframes directly into production-ready React code, complete with Tailwind CSS styling and automated component architecture.

Instant Feedback Loop

Unlike raw LLMs, NexusUI provides a live, interactive preview of your generated code instantly via Sandpack.

Component Architecture

Our specialized agent pipeline perfectly structures your code for modern frameworks like Next.js, splitting components automatically.

Installation

To get started with the NexusUI platform locally, ensure you have Node.js 18+ installed and a valid Gemini API Key.

Terminal

# Clone the repository
git clone https://github.com/KOUSTAV2409/NexusUI.git
cd NexusUI
npm install

# Setup Environment Variables
cp .env.local.example .env.local

# Start the development server
npm run dev

Creating your first UI

Once the server is running, navigate to http://localhost:3000. Simply drag and drop a screenshot into the upload zone. Our Multi-Agent Pipeline will analyze the design and begin generation immediately.

Terminal

npm run dev

→ Next.js ready at localhost:3000
→ Upload → Generate → Open /preview with stored code

✓ API routes use your GEMINI_API_KEY server-side only.

Basic Usage

After generation, use Preview for Monaco + Sandpack, device frames, and copy — or export and drop the code into your own repo.

Flow

Home → Upload → Generate → /preview?sid=…

→ Edit TSX in the browser
→ Resize preview · mobile / tablet / desktop

Developer note

Tune prompts and models in the API route if you need stricter layout or longer output. See Contributing for how to help.

Configuration

Set GEMINI_API_KEY in .env.local. Optional: NEXT_PUBLIC_BASE_URL for production URLs.

Troubleshooting

If generation fails, check API quotas and that your key is valid. Empty preview usually means the session was cleared — regenerate from the home page in the same tab.

NexusUI