Mlola UI
Server Details
Mlola UI components, tokens and design rules for coding agents, with a markup checker
- Status
- Healthy
- Last Tested
- Transport
- Streamable HTTP · MCP 2025-11-25
- URL
- Repository
- mlolahq/mlola-ui
- GitHub Stars
- 0
TDQS
Scored across 6 tools
Each tool has a clearly distinct purpose: search_components discovers, get_component retrieves detail, check_markup validates, and the rule/token/install tools each address a separate resource. The discovery-vs-detail boundary between search_components and get_component is intuitive and well-described.
All names follow a consistent verb_noun snake_case pattern (check_markup, get_*, search_components). The small variety of verbs (get/check/search) maps cleanly to genuinely different operations, so consistency is preserved.
Six tools is well-scoped for a UI component library server, with each tool earning its place across discovery, inspection, setup, and validation. No redundancy or filler tools.
The surface covers the core lifecycle well: discover, inspect (props/source), install, reference rules and tokens, and validate markup. Minor gaps exist (e.g., no version/changelog or theme-configuration tool), but these are workable around.
Available Tools
6 toolscheck_markupCheck markup against the Mlola contractARead-onlyInspect
Checks HTML or JSX: classes that do not exist, variant classes, data-* values a class does not react to, utility classes, hand-written colors, and misuse of data-theme or data-mode. Run it on markup you wrote before finishing.
| Name | Required | Description | Default |
|---|---|---|---|
| markup | Yes |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
readOnlyHint=true already establishes this is a non-mutating check, so the safety bar is met by annotations. The description adds the useful scope of what gets flagged, but never says what the tool returns (a list of violations? a pass/fail?) despite no output schema existing.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
Two sentences, front-loaded with the purpose and closing with the usage trigger; the defect list is dense but every item is meaningful. No filler or repetition of the tool name.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
For a single-parameter read-only validator this is close to adequate, but with no output schema the agent cannot predict the response shape, and the description never states it. The absence of any detail on returned violations is the remaining gap.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema description coverage is 0% and the single 'markup' parameter has no schema-level documentation, so the description must compensate. It does partially, by clarifying the accepted input is HTML or JSX, but adds no format, size, or path-vs-inline guidance.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description names a specific verb (checks) and resource (HTML or JSX markup) and enumerates concrete defect categories: nonexistent classes, variant classes, data-* values a class does not react to, hand-written colors, and data-theme/data-mode misuse. It is trivially separable from the all-get_* siblings.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
It gives an explicit timing directive – 'Run it on markup you wrote before finishing' – which tells the agent this is a pre-completion validation step. There is no statement of when not to use it or a named alternative, but none of the siblings offer overlapping validation.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
get_componentHow to use a Mlola componentARead-onlyInspect
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.
| Name | Required | Description | Default |
|---|---|---|---|
| name | Yes | ||
| include_source | No |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
readOnlyHint=true already declares this a safe read, so the low bar applies. The description adds genuinely useful context beyond annotations: it discloses the return payload and imposes a real constraint ('free component's source'), telling the agent include_source may not yield source for paid components. It does not mention error/not-found behavior, but the availability caveat is meaningful added value.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
Front-loaded with the payoff ('Everything needed to use one item') followed by a dense enumeration of the returned fields and one short conditional sentence. No filler, though the long list is packed into a single sentence.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
With no output schema, the description assumes full responsibility for return-value disclosure and does so thoroughly (import, props, defaults, classes, data-* values, dependencies, install command). For a 2-parameter read tool this is nearly complete; only not-found/error handling is unaddressed.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema description coverage is 0%, so the description must carry the parameter burden. It explains include_source well ('read a free component's source'), including its scope limit, but says nothing about 'name' beyond implying it identifies one item. Half the parameters are effectively undocumented, matching the minimum-viable 3.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description states a specific resource ('one item' = a component) and enumerates exactly what the response contains: import statement, every prop with fixed values and defaults, styled classes, data-* values, dependencies, install command. An agent can tell this is a single-component detail lookup rather than a search. It does not explicitly contrast itself with search_components or get_install_command, so sibling differentiation is only implicit.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
Usage is implied (look up one component's full usage contract) and one condition is given: 'Set include_source to read a free component's source.' But there is no explicit when-to-use vs search_components (discovery) or get_install_command (which overlaps with the install command this tool also returns), leaving the agent to infer the routing.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
get_design_rulesMlola design rulesARead-onlyInspect
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.
| Name | Required | Description | Default |
|---|---|---|---|
No parameters | |||
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
The readOnlyHint annotation already establishes this is a safe read. The description adds that the content is a static reference read once before writing UI, implying idempotent, cacheable content, which is a small but real behavioral signal. It says nothing about format or length of the returned rules, so value beyond annotations is modest.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
Two compact sentences, front-loaded with what the tool is, then usage timing. The category list is terse to the point that phrases like 'shared state words' and 'touch and focus' are slightly cryptic, keeping it short of a 5.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
For a zero-parameter, no-output-schema reference tool, the description is sufficient to decide when to call it and what kind of content to expect. Minor gaps remain about the volume/applicability of the rules, but nothing essential is missing.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
The tool takes zero parameters, so the schema has nothing to document and the description bears no parameter burden. Baseline 4 applies.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
States a clear verb+resource ('the rules for building UI with Mlola') and enumerates the rule categories (compose, color, scales, state words, touch/focus), so an agent knows it returns design guidance rather than concrete artifacts. It is implicitly distinct from siblings like get_tokens and get_component, but it never explicitly contrasts with them.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
'Read once before writing UI' gives clear when-to-use timing. There is no negative guidance (e.g. 'not needed for one-off tweaks') and no named alternatives, but the context for invoking it is explicit.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
get_install_commandHow to install Mlola componentsBRead-onlyInspect
The commands to run in the project to set Mlola up and add components, blocks, pages or templates, including the license step for Mlola Pro items.
| Name | Required | Description | Default |
|---|---|---|---|
| names | Yes |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
readOnlyHint=true already tells the agent this is a safe read, so the description carries a lower burden. It adds one useful behavioral detail beyond annotations: the output includes the license step for Mlola Pro items. However, it says nothing about what the returned commands look like or how they should be applied.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
A single efficient sentence that front-loads the action (commands to run in the project) and appends the Pro-license caveat. No filler, though the sentence is dense with enumerated item types.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
For a one-parameter, read-only tool with no output schema, the description covers the basic purpose but omits the shape/ordering of the returned commands and the semantics of the 'names' input. Nothing is misleading, but an agent still has to guess at the response and input format.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema description coverage is 0% with a single required 'names' array whose format is never specified. The description hints that names correspond to components, blocks, pages or templates to add, but does not say whether names are slugs, IDs, or versioned identifiers, nor how multiple names affect the output. The 0% coverage gap is only partially compensated.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description states a concrete purpose: returning the CLI commands to set up Mlola and add components, blocks, pages or templates. This is a distinct resource from the siblings (search_components, get_component, get_tokens, get_design_rules, check_markup), but the description never explicitly distinguishes itself from them. Clear verb+resource, no sibling routing.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
Usage is only implied: an agent infers this is called when it needs the shell commands for project setup or adding items. There is no explicit when-to-use statement, no when-not, and no alternative tool named. Adequate but leaves the trigger condition to inference.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
get_tokensMlola design tokensARead-onlyInspect
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.
| Name | Required | Description | Default |
|---|---|---|---|
| group | No | For example 'spacing', 'color', 'shadow', 'radius'. |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
readOnlyHint=true already tells the agent this is a safe, non-mutating read, so the description's burden is lower. It does add useful behavioral detail: results are pre-grouped by purpose and the filter accepts partial token names, not just exact group labels. It stops short of describing pagination, output shape, or error behavior for unknown filters.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
Two sentences, both front-loaded: the first establishes what the tool returns, the second establishes how to narrow it. No filler, no redundancy with the title. Appropriate for a simple single-parameter read tool.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
For a read-only, one-optional-parameter tool with no output schema, the description covers the resource, its grouping, and the filter semantics well. It could say a bit more about the shape of an individual token or what happens when the filter matches nothing, but nothing essential to invoking it correctly is missing.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema coverage is 100% and the schema already gives example values for 'group'. The description goes beyond the schema by clarifying that the filter also matches 'part of a token name', a substring-matching semantic the schema does not state. That is genuine added meaning over the structured field.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description names the concrete resource ('--ml-* tokens') and enumerates the purposes they are grouped by (spacing, color, type, depth, motion, etc.), so an agent knows exactly what comes back. It does not explicitly contrast itself with siblings like search_components or get_design_rules, but a read of the resource name makes the distinction obvious.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The second sentence ('Filter with a group name or part of a token name') gives clear guidance on how to narrow results, which is real usage direction. However, there is no statement of when to prefer this tool over siblings such as search_components or get_design_rules, and no exclusions. Usage is implied rather than specified.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
search_componentsSearch Mlola componentsARead-onlyInspect
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.
| Name | Required | Description | Default |
|---|---|---|---|
| kind | No | ||
| tier | No | ||
| query | No | Words describing what you need. Empty lists everything. |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
Annotations already declare readOnlyHint=true, so safety is covered. The description usefully discloses the return shape (name, tier, one-line description), but says nothing about result limits, ordering, or pagination behavior — relevant for a search endpoint that can list everything.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
Two tight sentences: the first front-loads what is searchable and how, the second covers the return payload. Every clause earns its place with no filler.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
With no output schema, the description compensates by enumerating returned fields (name, tier, one-line description), which is genuinely needed. It falls slightly short on result-volume behavior and kind-filter semantics, but is adequate for a simple read-only search.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema coverage is only 33%: query is documented but kind and tier are not. The description partially compensates by naming the tier values (free or Mlola Pro) and restating the query semantics, but never explains what kind='block' vs 'page' vs 'template' filters, leaving the enum undocumented in prose.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
States a specific verb (Find) plus the exact resources (components, blocks, pages, templates) and the search key (what they do), with concrete example queries. This distinguishes it from the sibling get_component, which is clearly a name-based lookup rather than a discovery search.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The phrase "by what they do" implies the agent should use this when it knows a capability but not a name, and the schema's note that an empty query lists everything hints at the browse case. However, no alternative (check_markup, get_component, get_design_rules) is named and no when-not-to-use guidance is given.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
Tool Schema Changelog
Recent tool additions, removals, and schema changes observed during successful MCP inspections.
6 tool updates
- First observed
check_markup - First observed
get_component - First observed
get_design_rules - First observed
get_install_command - First observed
get_tokens - First observed
search_components
Related MCP Connectors
UI design from prompts, screenshots, and URLs for AI coding agents and theme tokens.
Live React design-system APIs, patterns, and code validation so AI agents build real UI, not slop.
Give your agent a real design system: tokens, measured WCAG contrast, and rules to follow.
Design intelligence for coding agents: audits, design systems, and a taste profile agents consult.
Related MCP Servers
- AlicenseNot gradedqualityBmaintenanceEnables coding agents to query a workspace's design system before writing UI and validate generated code against the same system afterward, using configurable token and component sources.9 npmMIT
- AlicenseNot gradedqualityAmaintenanceEnables AI agents to create and manage consistent multi-screen UI designs through a token-efficient MCP interface, with design system tokens, components, flows, and visual review.336 npm1AGPL 3.0
- AlicenseNot gradedqualityCmaintenanceMCP server for design decisions during a build, providing live UI/animation library docs (via llms.txt) and a curated knowledge base of UX laws and UI conventions. It enables agents to look up real component APIs and apply design best practices, running locally via stdio or hosted on Vercel.8 npmMIT
- AlicenseNot gradedqualityAmaintenanceEnables coding agents to plan, reference, and gate UI work through preflight briefs, design-intent dispatch, and a static review checklist.43MIT
Glama MCP Gateway
Add one secure layer between your agents and this server.