@userface/engine

The part that keeps AI from lying about UI.

The workbench is visual. The engine is the boundary that turns component rules into validated output instead of hopeful JSX.

Local engine

npx userface connect
npx userface-engine mcp-serve

ui@1 composition

{
  "pattern": "dashboard",
  "root": {
    "type": "Page",
    "children": [
      { "type": "Card", "props": { "title": "Current plan" } },
      { "type": "Table", "props": { "columns": ["invoice", "amount", "status"] } }
    ]
  }
}

FaceUI React components

with adjacent contracts

validation rule ids

contracts, structure, ARIA, drift

built-in UI patterns

dashboard, form, CRUD, settings, list-detail

MCP tools

contracts, tokens, patterns, validation

Rules before code. Confidence before merge.

Use the engine when AI needs a machine-readable UI surface instead of component docs, screenshots, and vibes.

Contracts

face.json turns component rules into something an agent can actually obey.

Validation

23 rule ids catch unknown props, broken composition, ARIA issues, and drift.

Materialization

ui@1 can become React, Vue, or HTML after the structured screen is checked.

MCP

15 tools expose contracts, patterns, tokens, validation, and materialization to agents.

Technical flow

Make the agent produce a UI document before it writes UI code.

Userface validates structured composition first, then materializes to app code. Preview and patch review stay tied to the same output.

MCP server config

{
  "mcpServers": {
    "userface-engine": {
      "command": "npx",
      "args": ["userface-engine", "mcp-serve"]
    }
  }
}

Give the model rules it cannot improvise away.

If generated UI keeps violating your design system, this is the layer that makes the promise enforceable.