Mlola UI
Mlola UI components, tokens and design rules for coding agents, with a markup checker
Should I use this
Quality & Safety
Based on automated analysis of tool definitions and protocol compliance.
Context Cost
This is the approximate number of tokens consumed each time the server's tools are loaded into a model's context. Higher counts reduce the attention available for other tasks.
Install
One-Click Install
Add this to your `claude_desktop_config.json` file:
{
"mcpServers": {
"mlola-ui": {
"command": "npx",
"args": [
"mlola-ui"
]
}
}
}Runnable packages
1.1.9stdioRemote endpoints
https://ui.mlola.com/mcpstreamable-httpWhat it can do
Tool inventory
Tools (6)
🟢get_design_rules
The 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.
Input Schema
{
"type": "object",
"properties": {},
"additionalProperties": false
}🟢search_components(query, kind, tier)
Find 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.
Input Schema
{
"type": "object",
"properties": {
"query": {
"type": "string",
"description": "Words describing what you need. Empty lists everything."
},
"kind": {
"type": "string",
"enum": [
"component",
"block",
"page",
"template"
]
},
"tier": {
"type": "string",
"enum": [
"free",
"pro"
]
}
},
"additionalProperties": false
}🟢get_component(name, include_source)
Everything 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.
Input Schema
{
"type": "object",
"properties": {
"name": {
"type": "string"
},
"include_source": {
"type": "boolean",
"default": false
}
},
"required": [
"name"
],
"additionalProperties": false
}🟢get_tokens(group)
The --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.
Input Schema
{
"type": "object",
"properties": {
"group": {
"type": "string",
"description": "For example 'spacing', 'color', 'shadow', 'radius'."
}
},
"additionalProperties": false
}🟢check_markup(markup)
Checks 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 and <style> blocks hand-written colors, overridden theme tokens and text faded with opacity. Run it on markup you wrote before finishing.
Input Schema
{
"type": "object",
"properties": {
"markup": {
"type": "string"
}
},
"required": [
"markup"
],
"additionalProperties": false
}🟢get_install_command(names)
How 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.
Input Schema
{
"type": "object",
"properties": {
"names": {
"type": "array",
"items": {
"type": "string"
},
"description": "Item names from search_components, for example [\"button\", \"date-picker\"]."
}
},
"additionalProperties": false
}Community
Evidence