Mlola UI
Mlola UI components, tokens and design rules for coding agents, with a markup checker
Connect it
Settings → Connectors → Add custom connector
URL: https://ui.mlola.com/mcpSettings → Apps & Connectors → Advanced → Developer mode
Create connector with URL: https://ui.mlola.com/mcp{
"mcpServers": {
"mlola-ui": {
"url": "https://ui.mlola.com/mcp"
}
}
}claude mcp add --transport http mlola-ui https://ui.mlola.com/mcp{
"servers": {
"mlola-ui": {
"type": "http",
"url": "https://ui.mlola.com/mcp"
}
}
}{
"mcpServers": {
"mlola-ui": {
"command": "npx",
"args": [
"-y",
"mlola-ui@1.14.1"
]
}
}
}claude mcp add mlola-ui -- npx -y mlola-ui@1.14.19 tools, verified live
get_design_rulesread-onlyThe rules for building UI with Mlola: compose first, color by role, measure with the scales, shared state words, touch and focus. Read once before writing UI.
search_componentsread-onlyFind components, blocks, pages and templates by what they do (for example 'date range', 'chat input', 'pricing'). Returns name, tier (free or Mlola Pro) and a one-line description.
get_componentread-onlyEverything needed to use one item: import, every prop with fixed values (variant, tone, size, side…) and its default, the classes it styles and the data-* values each reacts to, dependencies and the install command. Set include_source to read a free component's source.
get_tokensread-onlyThe --ml-* tokens grouped by purpose (planes and ink, color roles, spacing, type, density, shape, depth, motion, layers…). Filter with a group name or part of a token name.
check_markupread-onlyChecks HTML or JSX: classes that do not exist, variant classes, data-* values a class does not react to, utility classes, misuse of data-theme or data-mode, and in style attributes, <style> blocks and utility classes (bg-[#fafafa]) hand-written colors, spacing written by hand instead of the --ml-space-* scale, overridden theme tokens and text faded with opacity. Each issue names its line. Run it o
get_render_catalogread-onlyThe components an agent may compose at runtime with Mlola Render, as A2UI v0.9 messages: each component's props and allowed values, how surfaces, data binding and actions work, and complete examples. Read once before composing a surface. format "schema" returns the A2UI catalog (JSON Schema) instead.
check_renderread-onlyChecks A2UI messages (createSurface, updateComponents, updateDataModel, deleteSurface) against the Mlola Render catalog before they render: components and props that do not exist, values a component does not offer, colors or styles set by hand, fields and controls without a name, a missing root, children that do not exist or form a loop, headings that skip a level, values outside a range. Each err
render_uiread-onlyShows an interface in the conversation: a form, a status card, a table of results. Pass A2UI messages composed from the Mlola Render catalog (read get_render_catalog first); they are checked, and drawn with Mlola components where the host shows MCP Apps. When the person presses a button, their next message carries the A2UI action with what they entered. Where the host shows no apps, this answers w
get_install_commandread-onlyHow to set Mlola up: the commands to run in a project to add components, blocks, pages or templates (with the license step for Mlola Pro items), and the stylesheet link and script for a page with no build step. Leave names out for the setup alone.
Change history
Alternatives in Developer Tools
Compare →DMDocs MCPA
Remote MCP server for Tandem docs, install guides, SDKs, workflows, and agent setup help.
SHShipSwiftA
40+ production-ready SwiftUI recipes for building full-stack iOS apps via MCP.
Limitguard Lead VerificationA
Lead validation over MCP: KVK/KBO register, EU VAT, sanctions and email checks with sources.
Tailwind ShadesA
Tailwind CSS palettes (50-950) from any color, the closest Tailwind color, and Tailwind's defaults
three.ws for GrokA
Free text/image to 3D for Grok Bot, plus your three.ws agents once signed in. Never spends.
MGMCP GrafanaA
An MCP server giving access to Grafana dashboards, data and more.