Nuxie/Docs
Studio

AI Generation

Generate and refine screens using natural language chat

AI Generation

Describe the screen you want in plain language and Nuxie generates it live. Iterate by chatting -- refine copy, adjust layout, or generate entirely new variations.

Chat workflow

The Chat tab in the left sidebar is your primary interface for AI generation. It is scoped to the current flow, so the AI has full context about your existing screens, view models, and theme.

  1. Type a prompt -- Describe what you want. Be as specific or as broad as you like.
  2. Watch it stream -- Components appear on the canvas in real time as the AI writes them. You can see the screen take shape before the generation finishes.
  3. Review and iterate -- Once the screen is complete, inspect the result. Send a follow-up message to refine copy, change layout, swap colors, or add new sections.

You can start multiple chat sessions within the same flow. Each session maintains its own conversation history.

Flow start wizard

When you open an empty flow, a wizard appears on the canvas with options to get started:

  • Send an initial prompt to the AI
  • Add a blank screen
  • Open the screen library

Once you send your first message, the chat session begins and the wizard disappears.

Streaming and live preview

As the AI generates a screen, components are parsed and rendered incrementally. The Studio parses JSX on safe boundaries during streaming, so you see layout and content materialize progressively rather than waiting for the entire response.

When generation completes, the editor:

  1. Parses the final component tree
  2. Resolves any view model bindings against your flow's data
  3. Persists the components to the flow
  4. Generates a thumbnail for the screen

If the generation encounters an error, the screen displays an error state. You can retry by sending a new prompt.

Iterating on screens

After a screen is generated, you can refine it in two ways:

  • Chat refinement -- Send a follow-up message like "make the headline bigger" or "change the background to a gradient." The AI regenerates the screen while preserving the parts you did not mention.
  • Selection-based prompts -- Select components on the canvas and use the floating toolbar options like Explore to automatically send a context-aware prompt to the AI. The toolbar injects component references so the AI knows exactly what to modify.

Explore

Select a component and click Explore in the floating toolbar to ask the AI for style, layout, or color variations. This sends a pre-built prompt referencing your selection.

Auto-snapshot

Every AI-generated screen is automatically saved to your screen library. This happens in the background after the generation is persisted. You do not need to manually save screens -- they are available for reuse in future flows as soon as generation completes.

Tips for effective prompts

Write better prompts to get better results:

  • Be specific about content -- "A paywall with a title, three subscription tiers in a horizontal carousel, and a restore purchases link at the bottom" generates more useful output than "make a paywall."
  • Reference your data -- If you have view models defined, mention the property names: "Bind the title to vm.headline and show vm.products in a list."
  • Describe the visual style -- "Dark background, large bold headline, rounded cards with subtle shadows" gives the AI concrete design direction.
  • Iterate incrementally -- Start broad, then refine. "Add a badge that says 'Best Value' to the annual plan" is easier for the AI to handle than rebuilding the entire screen.
  • Use screen names -- When your flow has multiple screens, reference them by name so the AI knows which one to modify.

Recovery

If component data is missing after reopening a flow (for example, due to a connectivity issue during save), the Studio automatically recovers by scanning your chat history for the most recent generated versions. This recovery happens transparently during flow load.

Next steps