A
licenseA
qualityD
maintenanceTurns text prompts into premium iOS UI mockups (PNG + HTML). Powered by Claude + a Playwright headless renderer. Two
backends: local claude CLI (uses your Claude Code subscription) or the Anthropic API.
4
5
MIT
gambaran-mcp
by syahrulx
Click on "Deploy Server".
Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.
In the chat, type
@followed by the MCP server name and your instructions, e.g., "@gambaran-mcpCreate a device mockup of my app screen in a Pixel 8 frame"
That's it! The server will respond to your query, and you can continue using it as needed.
Here is a step-by-step guide with screenshots.
gambaran-mcp — source
The MCP server published to npm as gambaran-mcp,
together with the rendering engine it is built on.
claude mcp add gambaran -- npx -y gambaran-mcpPath | What it is |
| The MCP server. Tool reference and examples in its own README. |
| The mockup engine — device catalog, layout geometry, motion, and the imperative Skia renderer. Shared with the Gambaran app. |
| The 26 device frames. |
| The generator that produces those frames, and their provenance |
Build
npm install
npm run buildRequires Node 20 or newer. The build writes packages/mcp/dist, which is what
the npm package ships.
Related MCP server: screenmocks-mcp
Where development happens
This repository is exported from the Gambaran monorepo, which also holds the app itself. The paths above are preserved exactly as they sit upstream, so the sources here are byte-identical to the ones the published package is built from. Issues and pull requests are welcome here.
Licence
MIT © Aizz Tech Solutions. The device frames are original work generated by
tools/frame-renderer; see tools/frame-renderer/NOTICE for how they are
produced and why they are redistributable.
This server cannot be deployed
Maintenance
ActivityMaintained
ResponsivenessNo issues
Related MCP Connectors
Create app-store screenshots, social graphics, promo videos, and animated device mockups.
Generate designed, localized App Store screenshot sets from your raw app captures.
Drive real devices from your AI Coding tool. Embed a client SDK (Unity, Godot, Flutter, iOS/macOS, Android, React Native, Web) in your app, then capture screenshots, traverse the UI tree, inject taps and key events, and run automated test tasks on the physical device over a secure relay.
Control real Android and iOS devices with LLM agents — tap, swipe, type, automate flows.
Related MCP Servers
- AlicenseNot gradedqualityCmaintenancestdio bridge to the hosted ScreenMocks MCP server: design and export localized App Store / Play Store screenshots — device frames, 3D mockups, text, per-locale overrides across 48 locales, and a measured layout report the agent can verify its design against.MIT
- AlicenseNot gradedqualityCmaintenanceEnables searching thousands of device and print mockups and rendering screenshots or uploaded images into them via the Mockuuups Studio API.MIT
- AlicenseAqualityAmaintenanceEnables driving an iOS Simulator from a model: taking screenshots, reading the UI tree, tapping, swiping, typing, managing app lifecycle and device state such as appearance, permissions, location, and notifications, without code signing or a physical device.21337 npmMIT