ApexCognition: Deterministic UI Generation Engine ApexCognition is a hybrid generative system designed to bridge the gap between high-level user intent and production-ready React layouts. It utilizes a Deterministic Logic Layer to ensure reliability for common patterns and an AI-Driven Fallback Layer via Groq for creative, complex requests.
🏗️ Architecture Overview The system is built on a "Logic-First" architecture to maximize performance and predictability. Logic-First Routing: The system first attempts to match prompts against a deterministic engine. If a match is found, the UI is returned instantly with 0ms LLM latency and 100% component accuracy. Express Backend: A Node.js server serves as the orchestrator, handling environment variables, API routing, and the Vite development middleware. Vite-React Client: A modern frontend that consumes a custom useDeterministicGroq hook to manage UI state, history (undo/redo), and rendering. Hybrid State Management: History is managed via a stack-based approach, allowing users to iterate through previous versions of the generated UI.
🤖 Agent Design & Prompts Intent Analysis: Decomposes the prompt to find keywords (e.g., "auth", "dashboard", "charts"). Layout Selection: Chooses between centered, dashboard, split, or fullscreen based on detected complexity. Component Assembly: Deterministically pushes specific component objects into a hierarchy. AI Fallback: If no high-confidence match is found, it sends a structured system prompt to Groq.
System Prompt Strategy When invoking the AI, we use a strict JSON-mode system prompt: "You are a UI Architect. You must ONLY use the provided component library (Card, Button, Input, Chart, etc.). Return a JSON object matching the AgentPlan interface. Use Tailwind CSS for all styling via the 'className' prop."
Component System Design The system treats UI as a Serialized Tree. Each component is a standard object: TypeScript { type: "Card", props: { className: "p-6 shadow-md" }, children: [...] } Deterministic Rendering: Every time a user asks for a "Login Page," they receive the optimized structure, ensuring no "hallucinations" in critical paths. Library Integration: The system is pre-mapped to a robust library of ~40 components including InputOTP, Sidebar, Charts, and NavigationMenu.
Known Limitations Prop Pass-through: Currently, complex props (like functions or event handlers) are difficult to serialize through the AI layer. Layout Depth: Deeply nested layouts (more than 5 levels) can occasionally cause rendering performance dips in the DynamicRenderer. Tailwind Scope: The AI is limited to standard Tailwind classes; custom arbitrary values (e.g., h-[123px]) are sometimes generated incorrectly.