Skip to content

Feature/uiux conversational editor - #1

Open
DhairyaOG wants to merge 3 commits into
Ishrat-Bhullar:mainfrom
DhairyaOG:feature/uiux-conversational-editor
Open

Feature/uiux conversational editor#1
DhairyaOG wants to merge 3 commits into
Ishrat-Bhullar:mainfrom
DhairyaOG:feature/uiux-conversational-editor

Conversation

@DhairyaOG

Copy link
Copy Markdown

Pull Request Description

Title

feat: integrate Gemini 2.5 Flash conversational UI/UX editor with React Flow canvas

Overview

This PR completely overhauls the UI/UX Agent generation pipeline by ripping out the legacy static array responses and replacing them with a highly dynamic, interactive Conversational Editor powered by Gemini 2.5 Flash and React Flow.

Key Architectural Changes:

Visual React Flow Engine:

  • Built a recursive React DOM rendering engine (UIRenderer.tsx) that translates Gemini's complex JSON component_tree layout directly into an interactive canvas using @xyflow/react.
  • Injected a robust CSS Sanitizer to automatically catch and camelCase vendor-prefixed styles (like -webkit-background-clip) to prevent React crashes on premium designs.

Conversational Chat Proxy (POST /api/generate):

  • Wired the floating ChatSidebar directly into a new FastAPI backend route to act as a secure proxy.
  • Solved LLM "Amnesia" by continuously feeding the current_spec context directly back into Gemini's prompt, forcing it to modify the existing design rather than hallucinate a new one.

Data Persistence & Orchestration:

  • Conversational edits are now actively written back to PostgreSQL via _save_artifact so that data is not lost on page refresh.
  • Tightened the downstream SQL queries in Node (agentOrchestrator.js) with an explicit ORDER BY created_at ASC rule. Downstream agents (Security, Compliance) are now guaranteed to inherit the latest conversational UI/UX edit as their core context payload.

Resiliency:

  • Completely rewrote the DEMO_MODE fallback in uiux_agent.py so that it returns a valid, visual React Flow error screen rather than crashing the canvas if an API key is missing.
  • Confirmed GEMINI_API_KEY is securely injected via os.getenv() with absolutely zero hardcoded secrets.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant