Mockit MCP

What karyaboyraz/mockit-mcp MCP server does

karyaboyraz/mockit-mcp MCP server generates iOS-style mobile screen concepts from text descriptions. A request can describe the layout, content, visual style, and interaction elements for a screen. The result includes a PNG render and the HTML used to produce it, making the output useful for visual review and later implementation work.

The default render is an iPhone-class viewport measuring 390 by 844 CSS pixels at a device scale of 2. Generated files are persisted to disk as HTML, PNG, and JSON metadata. Projects can be used to organize screens, and each generated screen receives an identifier for later retrieval or iteration.

How it works

The MCP client calls generate_screen with a text brief and may also provide design_system and project values. Claude produces the screen markup, and Playwright launches headless Chromium to render that markup into a PNG. The generated HTML remains available alongside the image.

Two Claude backends are supported. The default cli backend invokes a locally installed and authenticated claude command, using an existing Claude Code subscription. The api backend calls the Anthropic SDK and requires an API key. ANTHROPIC_MODEL controls the model for the API backend; the documented default is claude-opus-4-7.

For refinement, iterate_screen accepts an earlier screen ID and a feedback string, such as a layout change. The new version tracks its relationship to the previous screen. list_screens can return the stored library, optionally filtered by project, while get_screen retrieves screen metadata or the complete HTML.

Setup and configuration

karyaboyraz/mockit-mcp MCP server requires Node.js 20 or newer and a one-time Playwright Chromium installation. A local setup installs the project dependencies, downloads Chromium, builds the TypeScript source, and starts dist/server.js through an MCP client.

The normal local transport is stdio. Set MCP_TRANSPORT=http to run the HTTP transport instead. HTTP uses port 7821 and binds to 127.0.0.1 by default. If the host is changed to a non-loopback interface, MCP_HTTP_TOKEN is required and clients must send it as a bearer token. The repository also documents Docker Compose deployment for shared or containerized use.

DESIGNS_DIR changes the output directory. VIEWPORT_WIDTH, VIEWPORT_HEIGHT, and DEVICE_SCALE adjust rendering dimensions. CLAUDE_CLI_PATH and CLAUDE_CLI_TIMEOUT_MS configure the CLI backend. PLAYWRIGHT_NO_SANDBOX controls Chromium sandbox behavior; disabling it reduces isolation and is intended only for containerized environments.

Tools and capabilities

• generate_screen: Create a PNG and HTML screen from a text brief, with optional design-system and project fields.
• iterate_screen: Generate a revised version from a screen ID and written feedback.
• list_screens: List saved screens, optionally limited to a project.
• get_screen: Retrieve metadata or full HTML for a particular screen.
• Save generated HTML, PNG, and JSON metadata to a disk-backed library.
• Serve MCP over stdio or HTTP.

Limitations and notes

The CLI backend depends on a logged-in local claude command. The API backend instead needs an Anthropic API key and incurs provider usage charges. Generation cost varies with model and screen complexity; the README estimates roughly 3K input tokens and 6–12K output tokens per generation, with output tokens making up most of the Opus cost.

Playwright requires a Chromium download of approximately 170 MB. HTTP deployments should not be exposed publicly without a strong MCP_HTTP_TOKEN, because generation requests use the configured Claude backend and may consume the associated subscription or API access. The output is HTML and PNG mockup material; the provided documentation does not claim to generate SwiftUI code.