feat: implement live React/JSX rendering in AI Assist Canvas

- Enhanced LiveCanvas with Babel Standalone and React/ReactDOM CDNs
- Implemented automatic import resolution and root mounting for React components
- Updated parseStreamingContent to identify React code as renderable 'app' artifacts
- Updated UI to automatically switch to Preview mode for React artifacts
- Updated all AI provider prompts to officially support and encourage React rendering
This commit is contained in:
Gemini AI
2025-12-29 02:35:35 +04:00
Unverified
parent 654dce29e8
commit e8904c6b6c
4 changed files with 66 additions and 10 deletions

View File

@@ -824,8 +824,8 @@ AGENTS & CAPABILITIES:
- pm: Project Manager. Create PRDs, timelines, and action plans.
- code: Software Architect. Provide logic, algorithms, and backend snippets.
- design: UI/UX Designer. Create high-fidelity mockups and components.
- web: Frontend Developer. Build responsive sites using HTML/Tailwind.
- app: Mobile App Developer. Create mobile-first interfaces and dashboards.
- web: Frontend Developer. Build responsive sites using HTML/Tailwind or React. Use [PREVIEW:web:html] or [PREVIEW:web:javascript].
- app: Mobile App Developer. Create mobile-first interfaces and dashboards. React components are supported and rendered live. Use [PREVIEW:app:javascript].
ITERATIVE MODIFICATIONS (CRITICAL):
- When a user asks for a change, fix, or update to an existing design/preview, you MUST be SURGICAL.