UISandbox

What UISandbox does

The UISandbox MCP server brings a built web application into a sandbox and lets an MCP client inspect or modify its visual design. Inputs can be a ZIP file path, a ZIP URL, or a public GitHub or GitLab repository URL. The input must contain a usable built web app; source-only projects are reported as unsupported.

The server exposes the same design workflow as the browser application. An agent can load a project, change visual controls, export the resulting values or patched files, check whether the transformed page still matches its baseline, and take a screenshot. The workflow is intended for checking and adjusting real rendered output rather than editing a framework source tree directly.

How it works

The server runs over stdio and uses the UISandbox engine with headless Chromium. During loading, the engine reads the supplied archive, serves the app in a controlled sandbox, and converts CSS literals into variables while preserving their original values as the baseline. Runtime styles, including inline styles and styles added by JavaScript, are also handled by the engine.

Controls cover values found in the loaded application, including colors, font properties, spacing, radii, borders, shadows, motion, and gradient angles. Global hue, saturation, and contrast adjustments can affect colors across the page. The engine also supports detected dark-mode hooks and nested same-origin frames such as Storybook content.

The verification operation compares the untouched and tokenized versions side by side. It checks computed styles for each element, including shadow roots and nested frames, and reports differences instead of assuming that the rewrite preserved the page.

Setup and configuration

Run the server with:

npx -y uisandbox-mcp

A cloned repository can run the equivalent MCP command through its package scripts with pnpm mcp. The README describes the process as a standard stdio MCP server and points to client configuration for Claude and Cursor. Claude Code also has a plugin that installs the skill and server together:

/plugin marketplace add Ideelab/uisandbox
/plugin install uisandbox@uisandbox

No required environment variables or service credentials are documented. The browser application itself can also open a public repository or CORS-enabled ZIP through a ?load= URL, but the MCP interface accepts a ZIP by URL or local path through its load operation.

Tools and capabilities

The documented MCP operations are:

• load: open a ZIP from a path or URL and prepare the build.
• set: change the available design controls.
• export: produce an output in a selected format.
• verify: run the 1:1 comparison against the original rendering.
• screenshot: capture the loaded app in headless Chromium.

Exports can include CSS, JSON, a patch list, patched files, web --k-* tokens, Swift constants and an iOS asset catalog, or Android colors.xml and Kotlin output. The available controls and exports depend on what the loaded build contains. A reach meter identifies which visible areas are affected by the controls and which areas, such as images, canvas, or video, are outside their coverage.

The UISandbox MCP server is useful for automated design checks, agent-assisted restyling experiments, and producing platform-specific token output from a rendered web build. It does not require the agent to rebuild the application for each adjustment.

Limitations and notes

The input needs to include built output such as dist/, build/, or out/, or a repository containing that output. iOS and Android projects, WordPress themes, and source without a build are identified as unsupported at the door. External CDN stylesheets are handled through a same-origin proxy in the browser engine, while repository loading uses a route for public GitHub and GitLab archives.

The project documentation states that dropped files normally remain in the browser, with the public repository fetch as the exception. It also recommends deploying the sandbox on an origin of its own because loaded frames are same-origin by design. An archive can reach the tool DOM, although the documented safeguards prevent navigation away, service-worker replacement, and zip-slip paths during export.