Nexus UI uses a multi-agent orchestration model to transform natural language prompts into production-ready React components. The system integrates LLM generation, JSON sanitization, validation, and sandbox rendering to create a secure generative UI environment.
The core of Nexus UI is a sequential pipeline of specialized agents:
graph TD
User([User Intent]) --> Gemini[Gemini 2.5-flash-lite]
Gemini --> Architect[AI Architect: Component Schema]
Architect --> Coder[AI Coder: React + Tailwind 4]
Coder --> Tester[AI Tester: Vitest Suite]
Tester --> Sanitizer[Logic Sanitizer: repairJson]
Sanitizer --> Validator[Vitest Validator: 100% Coverage]
Validator --> Sandbox[Sandbox Render: Glassmorphism UI]
Nexus UI implemented a sophisticated state machine to handle external API volatility:
- Cooling Mode: Automatically triggered upon detection of
429 Too Many Requests. - Reactive UI: The "Forge" interface disables input and provides a visual cooldown timer during API resets.
- Graceful Recovery: System state persists locally, ensuring no loss of intent during cooling phases.
- Debounced Generation Pipeline: Uses a
useDebouncewrapper on factory triggers to prevent rapid-fire API calls. - React Concurrent Rendering: Leverages React 19's transition APIs for fluid status updates during heavy LLM streams.
- Memoized Zustand Selectors: High-performance state slicing to prevent unnecessary re-renders of the Sidebar and Console.
- Shallow Equality Comparison: Prevents maximum update depth loops during complex state hydrates.
The useNexusStore (Zustand) implements a clean action-state separation:
- Middleware: Custom logic tracks the
FactoryStatusfromPLANNINGtoREADY. - Validation: Strict TypeScript interfaces for
BuildVersionensure historical parity across component iterations.
Nexus UI achieves 100% test coverage using the Vitest v8 provider:
- Coverage Strategy: Every logic branch in the multi-agent orchestrator is validated.
- Mocking: Comprehensive mocks for the Google Generative AI SDK ensure consistent test results without external dependencies.
- Glassmorphism: High-translucency surfaces with blurred backdrop filters.
- Zen-Minimalist Cyberpunk: A curated palette of deep obsidian and neon primaries.
- Lucide Icons: Consistent iconography for system status and registry navigation.
npm install
npm run devnpm run test
npm run coverageAll generated code passes through a multi-stage sanitization filter to prevent script injection and ensure React 19 compatibility.
MIT © 2026 Nexus Factory.