Prototype · Preview: every server in the official registry, synced every 30 minutes. Reviews and accounts come in a later step.
PopNx MCPMCP servers for people who use AI · explained in plain words
Beginner mode On
ColoursSystemLightDark
LanguageไทยEnglish中文日本語한국어EspañolDeutsch
☰ MenuSettings
Beginner mode On
ColoursSystemLightDark
LanguageไทยEnglish中文日本語한국어EspañolDeutsch

UISandbox

by Ideelabversion 0.5.3i★ –iRuns on your computer
Registry nameio.github.Ideelab/uisandbox

Install

Overview

Description from the maker (original English)

Play with your app's design in the browser: load a build, turn the knobs, export the code.

PopNx MCP’s three pillars

These three are never merged into one score: opinions, measurements and popularity are different things.

What you can do with it

We have not written a plain-language summary for this one yet. Below are the facts we read from the registry.

  • Connection: Runs on your computer
  • Transport: stdio
  • Category: Design, images & audio

Install

Pick the AI app you use, then copy the settings.

Before you install

  • Basic checks: 1 of 1 passed
  • Runs on your computer with your user’s permissions (files, network, apps).
  • You fill in yourself: UISANDBOX_URL

You need

  • npmNode.js installed (for the npx command)

Which app do you use?

Pick your app above. We remember it, so next time the button says “Install in …”.

Open Claude Desktop → Settings → Developer → Edit Config, and paste this into claude_desktop_config.json

{
  "mcpServers": {
    "uisandbox": {
      "command": "npx",
      "args": [
        "-y",
        "uisandbox-mcp"
      ],
      "env": {
        "UISANDBOX_URL": "your-value"
      }
    }
  }
}

Run this in your terminal

claude mcp add uisandbox --env UISANDBOX_URL=your-value -- npx -y uisandbox-mcp

Fill in the empty values before running it.

Open in Cursor

Or copy the settings yourself

Paste into .cursor/mcp.json in your project, or ~/.cursor/mcp.json

{
  "mcpServers": {
    "uisandbox": {
      "command": "npx",
      "args": [
        "-y",
        "uisandbox-mcp"
      ],
      "env": {
        "UISANDBOX_URL": "your-value"
      }
    }
  }
}

Your browser asks to open the app, then the app shows the settings and asks you to confirm. Key values are left empty for you to fill in.

Open in VS Code

Or copy the settings yourself

Paste into .vscode/mcp.json in your project

{
  "servers": {
    "uisandbox": {
      "type": "stdio",
      "command": "npx",
      "args": [
        "-y",
        "uisandbox-mcp"
      ],
      "env": {
        "UISANDBOX_URL": "your-value"
      }
    }
  }
}

Your browser asks to open the app, then the app shows the settings and asks you to confirm. Key values are left empty for you to fill in.

This one runs on your computer, and ChatGPT can only connect to servers on the internet. Pick another app.

Your choice stays on this device in a cookie; no account needed.

Values you fill in

  • UISANDBOX_URL env
    The app the render tools drive (verify, screenshot). Default https://uisandbox.org

These settings are generated from the maker’s registry entry. If the README says otherwise, follow the README.

What it can do

Runs on your computer; the tool list appears in your AI app after you install it.

Basic checksi

We check information anyone can see; we have not read the code. Checks that do not apply are left out of the count. · Checked Nov 7, 2026

  • ✓ Pass

    Maker matches the repo

    The registry name was verified with the GitHub account Ideelab, which owns the repo

  • … Not checked yet

    Still maintained

    We have not read this repo from GitHub yet

  • … Not checked yet

    Has a licence

    We have not read this repo from GitHub yet

  • – Not applicable

    Endpoint responds

    This one runs on your computer; there is no internet endpoint

  • – Not applicable

    Sign-in with OAuth

    Runs on your computer and uses local settings instead

  • … Not checked yet

    No hidden instructions in tool descriptions

    Runs on your computer; we can only read tool lists from internet endpoints

Compared with others in Design, images & audioi

  • More stars than 0% of the other 2187 servers in this category
  • Published to the registry more recently than 66% of the other 2187 servers in this category
  • Basic checks equal to or better than 100% of the other 2187 servers in this category

Compared with every active server in this category in the registry. Stars count only when the publisher owns the repo.

Common questions

Is UISandbox safe?

It passed 1 of 1 applicable basic checks. We have not read the code. Before adding a key or token, see what access the server asks for and use a key with only the permissions you need.

What keys or codes does it need?

The registry does not list a required key, though some servers ask you to sign in on first use.

Does it run on my computer or in the cloud?

It runs on your computer. Your AI app starts it when needed, and data does not pass through the maker’s servers (unless it calls an online service itself).

Is it still maintained?

The GitHub repo last changed –, and the latest version (0.5.3) reached the registry 16 days ago.

Which apps can use it?

Apps that support MCP, such as Claude Desktop, Claude Code, Cursor and VS Code. You also need Node.js on your computer.

What can I use instead?

In the same category: Figma Context MCP, Claude Real Video, Figma MCP Server

Alternatives

Servers in the same category from other makers, sorted by stars.

Reading a card:★ GitHub starsiThree pillars: reviews · checks · usageiUpdated = latest version published to the registryi

Give your coding agent access to your Figma data. Implement designs in any framework in one-shot.

Runs on your computer★ 16,165MITUpdated 5 months ago
Install

Claude Real Video

by HUANGCHIHHUNGLeo

Let any LLM watch a video locally — and search everything it has ever watched.

Runs on your computer★ 2,284MITUpdated 2 months ago
Install

Figma’s official server gives AI your design data so it can turn designs into code or describe them accurately. Connects to Figma’s cloud.

Runs in the cloud★ 2,152Updated 13 months ago
Install

README from the maker

Open the README

Copied from the maker’s repo as written. PopNx MCP has not reviewed or endorsed it. HTML, images and scripts are removed. Links lead off this site.

UISandbox

Play with your app's design. Right in the browser.

Bring your app, pick a look, tune it, take it home.

Your own app runs 1:1 in the tab, nothing is sent to a server, and closing the tab undoes all of it.

uisandbox.org · npm: uisandbox-mcp · MCP registry · Discussions · MIT

Your app looks like every other app an AI helped build, and you cannot say why. UISandbox opens it next to the knobs that decide that: colour, type, shape and space. Turn one and every place that value is used follows, on the real app and not a mock-up of it. Keep what you see as a design system your agent can apply.

Open [uisandbox.org](https://uisandbox.org). It starts on a UI kit, so there is something to turn before you bring anything.

The four steps

  1. Bring your app. The editor opens on shadcn/ui as it ships, six ways, with seven more kits one pick away (Tailwind CSS, daisyUI, Bootstrap, Material 3, Radix Themes, Mantine, Ant Design), each dressed as the same seven-screen invoicing app. Then *Try it on your own app*: run npx uisandbox-mcp open http://localhost:3000 next to your dev server, or tell your agent to open it, and your running app opens live, every screen, hot reload included. No terminal? Drag *Take this screen along* to your bookmarks bar and click it on any screen your browser shows (staging, behind a login, a Lovable or v0 preview), or bring a zip, a folder or a public repo. What you turned on the kit comes along if you want it to.
  2. Pick a look. *6* over the screen shows it six ways, side by side: Classic, Compact, Soft, Sharp, Airy and Bold. They differ in corners, spacing, depth and type and never in colour, so you compare the style and not the paint. Open one full size, then *Pick this one*. The same six are the Preset list.
  3. Tune it. Colour, Type, Shape and Space first; text size, line height, letter spacing, weight, border width, elevation, motion, grey tint and the rest under More. Every dial has ×1 = as in your code at its centre. Your own dark mode is switched on your own hooks. Hold Space to see your original.
  4. Take it home. *Copy for your AI* puts the design system and how to apply it in one paste, for Claude Code, Cursor, Codex, Lovable or v0. On a kit, the zip keeps a DESIGN.md, a theme.css and a SKILL.md in your repo, written in that kit's own variable names. On your own app you get your files patched in place, or tokens for CSS, Tailwind, shadcn, Swift and Android. With the MCP server running, *Send to your agent* hands it straight back.

It also says which tells of the generic AI look are on the screen (Inter or Geist everywhere, an indigo brand, gradients as decoration), measured from the page, and which of them a knob fixes.

Open one by link

uisandbox.org/?load= followed by a public GitHub or GitLab repository URL, or a direct link to a .zip that allows CORS, opens straight into the sandbox:

https://uisandbox.org/?load=https://github.com/edwardtufte/tufte-css

https://uisandbox.org/?load=https://example.com/dist.zip

A repository URL goes through this site's repo route (GitHub and GitLab do not send CORS on archives); a .zip URL is fetched by the browser itself. Either way the archive is read in the tab, exactly as a dropped one is.

It is your app, not a preview of it

Every colour, radius, font, size, spacing, line-height, letter-spacing, weight, border-width, duration, gradient angle and shadow literal in your CSS becomes a variable holding the very same value, so the page renders exactly as it was. Runtime styles too: style="" set by JavaScript, the your framework appends, insertRule and replaceSync from styled-components, Emotion, Lit and Ant's cssinjs, CDN stylesheets through a same-origin proxy, and nested same-origin frames such as Storybook's.

How to check it yourself

  • Check 1:1 loads the untouched and the tokenised page side by side and diffs the computed styles of every element, shadow roots and nested frames included. Zero differences, or it names what differs.
  • The reach meter in the stage foot says how much of what you see the knobs touch, and what lies outside: images, canvas, video.
  • It says so when it can't help. iOS and Android projects, WordPress themes and source without a build get a clear message at the door.
  • A hostile archive cannot navigate the tool away, register its own service worker or unregister ours, or smuggle a zip-slip path out of an export. What it can do, reach the tool's DOM because the frames are same-origin by design, reaches nothing worth having: no server, no credentials, no state. Read notes/security.md, and deploy on an origin of its own.

Your files never leave your browser

There is no server behind the sandbox, no account, no cookies and no analytics. Your files are read in the tab and served to the frame by a service worker on the same origin; exports are made there too. The one exception is a public repo URL, which goes through uisandbox.org to fetch its zip. Nothing is stored.

From your terminal, or from your agent

npx uisandbox-mcp open                       # inside your project: finds the build, opens the sandbox

npx uisandbox-mcp open http://localhost:3000 # your running dev server, live, hot reload included

The same engine runs as an MCP server (mcp/README.md): load a build, a zip or a running dev server, open the real sandbox in the user's browser, wait_for_send for what they turned, set knobs, export any format, verify the 1:1 check and take a screenshot. Add it to any MCP client with npx -y uisandbox-mcp.

Claude Code plugin (skill and server in one): /plugin marketplace add Ideelab/uisandbox, then /plugin install uisandbox@uisandbox, and say *"open this app in UISandbox"*. The skill alone is skills/uisandbox/SKILL.md.

Run it

pnpm install

pnpm dev # http://localhost:5190 pnpm test # vitest, node:test for the audit and the kit engine pnpm build # dist/: static; public/_headers rides along pnpm holdouts # every fixture zip through the real app in headless Chromium (below)

http://localhost:5190/?load= loads a zip by URL (same-origin or CORS).

Test it against real builds

pnpm holdouts runs every archive in fixtures/ (real builds from public repos, gitignored; notes/decisions.md says where each came from) through the app: load, Check 1:1, reach, and a host check. Verdicts are held against scripts/holdouts.expect.json; a fixture expected ok that is not fails the run. --only , --record, --base .

pnpm kits:build builds the eight kit doors from each kit's own package, pnpm kits:gates checks their detection, their export and the live bridge.

How it works

src/

sandbox/ rewrite.ts their CSS and HTML: literals replaced by var(--us-vN), byte-preserving table.ts the substitution sheet: one entry per (kind, value), with its sites mapping.ts knob to their values, RELATIVE to the baseline (identity at rest) baseline.ts the knobs on the stand of THEIR code directions.ts the six looks of Pick a look and Preset tells.ts the AI tells, measured on the screen verify.ts the 1:1 check: raw against identity, computed styles per element coverage.ts the reach meter live.ts runtime style="" and get the same rewrite scheme.ts their dark mode: the hooks in their CSS, switched kits/engine/ the kit doors and the design system + skill export, per kit public/sw.js serves a sandbox document's URLs from the page; /__ext/ proxies CDN CSS app/ panel/ tokens/ export/ state/ audit/ notes/ decisions (numbered), traps, lessons, security, roadmap

Deploy

One origin, one Cloudflare Worker (worker/index.mjs, wrangler.jsonc): static assets from dist/, the SPA fallback for ?load=, http to https and www to apex, and the /__repo/ route that fetches a public repo's zip (nothing stored, same-origin callers only, rate-limited). public/_headers keeps sw.js uncached and sets the security headers. A deploy is pnpm build && npx wrangler deploy. Put nothing else on the origin: the sandboxed frames are same-origin by design.

Contributing

The most useful thing you can send is a build that does not work. See CONTRIBUTING.md for the 1:1 gate a change to the rewriter is held to, and how to run it against the real builds.

Who made this

I'm Alexander Kaan, and I build open-source tooling for user interfaces. UISandbox came out of the design system generator I made before it: I could hand somebody a finished kit, but I could not show them what their own app would look like in it. This does that other half.

Every decision, and every trap I fell into on the way, is in notes/decisions.md, including the ones I had to undo. Issues and pull requests are welcome.

Made by Alexander Kaan at Ideelab · MIT

Ask PopNx