UISandbox — Claude Code MCP server: what it does, how to install
Launches your web project inside a browser tab to tweak styling controls directly. It passes the resulting visual tokens straight back to your coding agent.
claude mcp add --env UISANDBOX_URL=<UISANDBOX_URL> --transport stdio uisandbox -- npx -y uisandbox-mcpWhat UISandbox does
The server connects your coding assistant to an in-browser styling environment. It loads a local web project, converting computed styles into interactive sliders for typography and spacing. The agent uses tools like load, open, set, and screenshot to control the view. It inspects real pages instead of static mockups.
All rendering stays inside the browser tab through a local service worker, so project code never reaches an external backend. The tool requires a compiled web build, rejecting native mobile applications or raw WordPress themes. When styling is finished, updated design values return to the workspace as design tokens or patch updates.
What it helps with
- adjust typography and palettes directly in the browser
- fix generic AI styling patterns across web interfaces
- export tuned theme tokens back to the repository
- verify computed styles against original layouts with the verify tool
Example prompts for the agent
- Open the current web application in UISandbox to adjust its theme.
- Start UISandbox and inspect computed style changes on the active view.
- Apply the exported design tokens from UISandbox to the codebase.
How to install UISandbox
Platform CLI
claude mcp add --env UISANDBOX_URL=<UISANDBOX_URL> --transport stdio uisandbox -- npx -y uisandbox-mcpReplace <…> with your own values
Platform CLI
codex mcp add uisandbox --env UISANDBOX_URL=<UISANDBOX_URL> -- npx -y uisandbox-mcpReplace <…> with your own values
Config file
{
"mcpServers": {
"uisandbox": {
"command": "npx",
"args": [
"-y",
"uisandbox-mcp"
],
"env": {
"UISANDBOX_URL": "<UISANDBOX_URL>"
}
}
}
}Replace <…> with your own values
Config file
{
"servers": {
"uisandbox": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"uisandbox-mcp"
],
"env": {
"UISANDBOX_URL": "<UISANDBOX_URL>"
}
}
}
}Replace <…> with your own values
Platform CLI
gemini mcp add -e UISANDBOX_URL=<UISANDBOX_URL> uisandbox npx -y uisandbox-mcpReplace <…> with your own values
Step by step, with commands for each platform: How to add an MCP server to Claude Code, Codex, Cursor, VS Code, Gemini CLI and more
Questions about UISandbox
How do I install UISandbox in Claude Code?
Run claude mcp add uisandbox -- npx -y uisandbox-mcp in your terminal. This registers the MCP server with the agent environment.
What does UISandbox do?
It opens your web application in a browser tab alongside design controls for spacing, colors, and typography. The assistant can launch the editor, modify values, and retrieve updated design tokens.
What types of projects are supported?
The tool requires a compiled web build or a live development server. It rejects native mobile code for iOS or Android, as well as unbuilt WordPress themes.
