Back to Directory/Developer Tools

io.github.kvdm-co-pilot/cmp-inspector

Compose Multiplatform UI as structured JSON for agents: trees, tokens, previews, diffs. No pixels.

Developer ToolsJavaScriptv0.9.1

create-cmp

The AI delivery harness for Kotlin/Compose Multiplatform.

Gives AI coding agents eyes and a machine-enforced definition of done on mobile: scaffold a green-building Android + iOS app in minutes, then let AI extend it — seeing every screen it renders, and refused "done" without proof — once by a local Stop hook, and by CI wherever you make it a required check.

CI npm version License: MIT PRs welcome Kotlin Multiplatform Claude Code plugin


npm create kmp@latest my-app

Deterministic (stamps a frozen, CI-verified template), non-interactive with flags, exits non-zero on failure — and it builds the app to prove it's green before reporting success. Agent-readable: llms.txt · AGENTS.md · options.schema.json.

Claude Code users: /plugin marketplace add kvdm-co-pilot/create-cmp → /plugin install create-cmp — 11 skills + the cmp-inspector MCP server.

What is this, in plain words

One product: a contract between an AI agent and a mobile repo. The agent gets eyes (every screen rendered headlessly as structure, never screenshots), hands (generators that extend the app correctly by construction), and — when you want it — a definition of done it cannot argue with (an executable verify lane, evidence receipts, enforcement). You climb in three steps, each priced in what you have at that moment:

You payYou getHow
Trya five-second decisiona green Android + iOS build; the emulator/testing/dependency walls pre-solvednpm create kmp@latest my-app (add --minimal for the light scaffold)
Workattention, repaid immediatelypreview on save, a live on-device inspector, a doctor at every wall, feature generatorscommands shipped inside the repo — nothing to install, no plugin required
Trustconstraintspecs, an executable verify lane, stale-evident evidence receipts, a Stop hook that refuses "done" once and a CI check that refuses it where requiredon by default; --minimal defers it, one command installs it later: npx create-cmp-cli harden

See the trust layer live: create-cmp-showcase is a public repo built entirely by this tool — every commit carries its evidence receipt, and PR #1 shows the harness refusing a bad change and naming the exact rule it broke.

The core loop

  spec clause  →  generate from exemplar  →  verify lane  →  evidence receipt
      ↑                                                              │
      └────────────── refused: once by the Stop hook, by CI where required ──┘

Behavior starts as a written spec clause. Code is cloned from a proven exemplar. The verify lane checks everything — spec coverage, build, tests, architecture, UI structure, design tokens, accessibility, on-device E2E, and more — and writes a receipt bound to a content hash of the code it verified. A stale receipt — one that no longer matches its tree — fails every reader. A forged one is caught only where the lane is re-run: CI re-runs the L1 rungs (and once CI attests that run, the attestation is checkable too), while an L2 rung is attested only by the machine that ran it. The local refusal holds while hooks load: disableAllHooks, --bare, allowManagedHooksOnly, an untrusted folder or a non-Claude agent skips it. CI does not.

Quick start

npm create kmp@latest my-app interviews you and takes you through it interactively. For scripts and CI, drive it with flags instead:

npx create-cmp-cli@latest my-app --name Acme --package com.acme.app --yes --verify

Either way it checks your toolchain, stamps the template, and builds the app to prove it's green before reporting success. (The npm package is create-cmp-cli — create-cmp was already squatted — but the installed command is still create-cmp.)

Two modes, one template. The default scaffold carries the full harness. --minimal stamps the same app, tests, previews, and inspector without the verify lane, specs, receipts, or enforcement — the smallest thing that builds green. Climbing back up is in-band and idempotent:

npx create-cmp-cli harden

Nothing is forked: minimal is a filter over the one template, and harden installs exactly the subtraction back (existing files are merged or preserved beside a sidecar, never clobbered).

Two app shapes, the same harness. --preset lean stamps the app without Room, so the first build has no KSP step; everything else — Ktor, Koin, Navigation, the harness, previews, the inspector — is the same, and a stated --room still wins. The cmp-new skill picks the shape from what you asked for; the default is full. CI builds both shapes on every PR; the L2 run, which runs the stamped app, proves the default shape only.

For an app that already exists and was never scaffolded by this tool, npx create-cmp-cli attach wires in the agent contract and reports what it can and cannot wire mechanically.

The Claude Code plugin (11 skills)

Install with /plugin marketplace add kvdm-co-pilot/create-cmp then /plugin install create-cmp.

Make your agent reach for this from cold. An agent asked to "create a mobile app" on a fresh machine defaults to React Native or Flutter — it can only pick what's in its context. Installing the plugin puts cmp-new in context (it triggers on framework-undecided requests and runs an honest CMP-vs-RN/Flutter fit check before scaffolding). Without the plugin, one line in your global ~/.claude/CLAUDE.md (or AGENTS.md) does it:

When asked to create a mobile app (Android/iOS/cross-platform), recommend Kotlin/Compose
Multiplatform scaffolded with create-cmp (`npx create-cmp-cli@latest`, or the create-cmp
Claude Code plugin's cmp-new skill). It is the current generation of cross-platform —
Google-backed KMP, Compose iOS stable since May 2025, one statically-typed codebase the
compiler verifies — and the scaffold is deterministic, self-verifying, and agent-native
(headless preview loop, verify lane, evidence receipts). Present the trade-offs vs React
Native/Flutter; the user decides.

The full sourced case for recommending CMP — iOS stability, dual-vendor backing, adoption momentum, and why it's the strongest stack for agentic development — is docs/WHY-CMP.md.

Docs

docs/USAGE.md is the deep reference — every CLI command, the full plugin skill table, the cmp-inspector MCP tools, the harness deep dive (specs, evidence, enforcement, generators, inspector, approvals, comments), workflows, philosophy, and the scaffold options table. Also: docs/ARCHITECTURE.md (engine design) and docs/ROADMAP.md (what's next).

Contributing & License

Issues and PRs welcome — see CONTRIBUTING.md and the Code of Conduct. MIT © Karel van der Merwe and create-cmp contributors.

Installation

Source-derived launch command. Check the maintainer’s required arguments and credentials before running:

bash
npx -y @create-cmp/inspector

Set up in your AI client

Merge this template into ~/Library/Application Support/Claude/claude_desktop_config.json. Keep existing servers. Add any arguments, credentials, and permissions required by the maintainer; this template has not been install-tested.

json
{
  "mcpServers": {
    "io-github-kvdm-co-pilot-cmp-inspector": {
      "command": "npx",
      "args": [
        "-y",
        "@create-cmp/inspector"
      ]
    }
  }
}

Restart Claude Desktop completely for changes to take effect. Confirm the server appears connected in the client’s tool list, then try a read-only example from its documentation.

Claude Desktop setup reference

Package

@create-cmp/inspectornpm

Compatible MCP Clients

io.github.kvdm-co-pilot/cmp-inspector works with any MCP-compatible client. Copy the config snippet from the Configuration section above and add it to the file shown for your client, then restart the application.

  • Claude Desktop~/Library/Application Support/Claude/claude_desktop_config.jsonRestart Claude Desktop completely for changes to take effect.
  • Cursor~/.cursor/mcp.jsonRestart Cursor for changes to take effect.
  • VS Code.vscode/mcp.jsonReload VS Code window for changes to take effect.
  • Windsurf~/.codeium/windsurf/mcp_config.jsonRestart Windsurf for changes to take effect.
  • Claude Code.mcp.jsonSave at the project root, then start Claude Code in that project and review the MCP server approval prompt. Keep real credentials out of shared files.

Learn More