# karyaboyraz/mockit-mcp [Health: Active]

**Category:** 📐 Architecture & Design  
**Repository:** https://github.com/karyaboyraz/mockit-mcp  
**GitHub Stars:** 4  
**Views:** 3  
**Installs:** 0  
**Upvotes:** 0  
**Directory Page:** https://allmcps.com/mcp/karyaboyraz-mockit-mcp

## Description
Generate premium iOS mobile UI mockups (PNG + HTML) from a single text prompt. Pairs Claude (Opus 4.7 by default) with a Playwright headless renderer. Two backends — claude CLI (uses your Claude Code subscription) or Anthropic API. Stdio + HTTP transports, MIT.

## Tools
Capabilities this server exposes over MCP:

- **generate_screen** — Text brief → PNG + HTML. Optional `design_system` and `project` fields.
- **iterate_screen** — Take a previous `screen_id` + `feedback` string, produce a new version.
- **list_screens** — List screens, optionally filtered by project.
- **get_screen** — Fetch metadata (or full HTML) for a specific screen.

## Claude Desktop Quick Installation
Heuristic fallback — verify the package name and runner against the repository README before running it. Uses `npx` (confidence: low):

```json
"mcpServers": {
  "mockit-mcp": {
    "command": "npx",
    "args": ["-y","karyaboyraz-mockit-mcp"]
  }
}
```

## Documentation

## 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.

_Full upstream README: https://allmcps.com/mcp/karyaboyraz-mockit-mcp/readme_