# romcp UI-to-code preview

`studio_export_ui` captures a live UI subtree and generates `react-luau` (default) or `luau` in one MCP call. Supply a stable `target`, optional `maxNodes` (up to 1000; default 500), and `maxDepth` (up to 50; default 30). It returns source, warnings, omitted-count diagnostics, and the captured node count. It does not write or execute the generated code.

The new v3 plugin captures typed values independently of the older snapshot format. It reads `GetStyled` where available, falls back with a warning, and checks property assignment on disposable unparented instances. Supported classes include ScreenGui, common 2D controls, layout components, constraints, gradients, strokes and folders. Unsupported subtrees are explicitly omitted. Capture limits also produce warnings.

React Luau output is a ModuleScript factory: `local Component = require(ExportedModule)(React)`. Pass your installed React module, then render `React.createElement(Component)` with your existing ReactRoblox root. No package location is assumed. Plain Luau output is a factory: `local root = require(ExportedModule)(parent)`. Review the code and diagnostics before mounting either output.

The SDK exports the pure `convertUiSnapshot(snapshot, format)` function for the same versioned typed snapshot. It performs no network calls or filesystem writes. Live snapshot capture through HTTP, roblox-ts/browser React targets, component extraction, event wiring and bindings remain unfinished.

This exports static appearance, not working application behavior. Scripts, events, attributes, tags, style rules, pseudo instances, runtime state transitions, and instance-reference properties are not reconstructed. Styled values are baked into properties and cannot preserve future theme/state changes. Nonserialized properties are excluded to avoid deprecated aliases overwriting canonical properties; transient nonserialized state is therefore not exported. A zero omitted count does not establish visual equivalence. Native visual rendering and the full installed-plugin route still require live Studio verification.

Plain Luau factories track created instances and attempt to destroy them if construction or parenting fails, then rethrow the failure. Successful creation transfers ownership to the caller. Node storage uses a table so large exports do not exceed Luau's per-function local-register limit.

## Live Studio evidence

In Studio `0.737.0.7371584`, the production Reflection, ValueCodec and UIExport modules were executed against an isolated, unparented synthetic ScreenGui/TextLabel/UICorner fixture through the existing Luau execution tool. The capture was converted locally and its generated plain Luau executed back in Studio. Eight property assertions passed: label class, background/text transparency, size, position, text color, enum alignment, and corner radius. Both capture and rebuilt fixtures were destroyed. This did not replace the installed plugin or modify existing game instances.

The synthetic capture is checked in as `tests/fixtures/ui-studio-737.json`. It reports three unsupported SecurityCapabilities properties. The experiment also revealed and fixed reflection type descriptors appearing as table addresses: the decoder now handles ScriptType, EngineType and EnumType. This is property-level evidence on a small fixture, not screenshot equivalence, stylesheet/pseudo-instance coverage, or a real React renderer test.

Validation: TypeScript tests cover typed constructors, duplicate sibling names, escaping, unsupported values and bounded input. `tsx tests/plugin/generate-ui-fixtures.ts` followed by `lune run tests/plugin/ui-export.luau` executes the generated plain Luau using Lune's Roblox datatypes, the React factory using a createElement stub, and the production capture module using simulated services. These checks do not substitute for the real React renderer or live Studio reflection.

Primary references: [Roblox React Luau example](https://github.com/Roblox/react-luau/blob/main/README.md), [GetStyled semantics](https://create.roblox.com/docs/reference/engine/classes/Instance/UniqueId), and [UI styling](https://create.roblox.com/docs/ui/styling).