Mlola UI

Name: Mlola UI
Author: mlolahq

by mlolahqversion 1.14.3i★ –iComputer or cloud

Registry nameio.github.mlolahq/mlola-ui

Install

Overview

Description from the maker (original English)

Mlola UI components, tokens and design rules for coding agents, with a markup checker

PopNx MCP’s three pillars

These three are never merged into one score: opinions, measurements and popularity are different things.

User voiceiNo reviews yetReviews open together with accounts in a later step
Our basic checksi3 of 3 passedChecked from public information; code not scanned yet
UsageiNot measured yet★ –

What you can do with it

We have not written a plain-language summary for this one yet. Below are the facts we read from the registry.

Connection: Computer or cloud
Transport: stdio, Streamable HTTP
Category: Developer tools

Install

Pick the AI app you use, then copy the settings.

Before you install

Basic checks: 3 of 3 passed
Runs on the maker’s server: what you ask it goes through their server.
Can do 9 things (tools) get_design_rules, search_components, get_component, get_tokens …
The registry lists no key to fill in.

You need

Runs in the cloudNothing to install; it connects over the internet
npmNode.js installed (for the npx command)

Which app do you use?

ClaudeClaude CodeCursorVS CodeChatGPT

Pick your app above. We remember it, so next time the button says “Install in …”.

Works in Claude on the web, desktop and mobile:

Open Settings → Connectors
Press Add custom connector
Paste the address below and press Add
If it asks you to sign in, sign in with the maker

https://ui.mlola.com/mcp

Or run it on your computer

Open Claude Desktop → Settings → Developer → Edit Config, and paste this into claude_desktop_config.json

{
  "mcpServers": {
    "mlola-ui": {
      "command": "npx",
      "args": [
        "-y",
        "mlola-ui",
        "mcp"
      ]
    }
  }
}

Run this in your terminal

claude mcp add --transport http mlola-ui https://ui.mlola.com/mcp

Or run it on your computer

claude mcp add mlola-ui -- npx -y mlola-ui mcp

Open in Cursor

Or copy the settings yourself

Paste into .cursor/mcp.json in your project, or ~/.cursor/mcp.json

{
  "mcpServers": {
    "mlola-ui": {
      "url": "https://ui.mlola.com/mcp"
    }
  }
}

Or run it on your computer

Open in Cursor

Or copy the settings yourself

Paste into .cursor/mcp.json in your project, or ~/.cursor/mcp.json

{
  "mcpServers": {
    "mlola-ui": {
      "command": "npx",
      "args": [
        "-y",
        "mlola-ui",
        "mcp"
      ]
    }
  }
}

Your browser asks to open the app, then the app shows the settings and asks you to confirm. Key values are left empty for you to fill in.

Open in VS Code

Or copy the settings yourself

Paste into .vscode/mcp.json in your project

{
  "servers": {
    "mlola-ui": {
      "type": "http",
      "url": "https://ui.mlola.com/mcp"
    }
  }
}

Or run it on your computer

Open in VS Code

Or copy the settings yourself

Paste into .vscode/mcp.json in your project

{
  "servers": {
    "mlola-ui": {
      "type": "stdio",
      "command": "npx",
      "args": [
        "-y",
        "mlola-ui",
        "mcp"
      ]
    }
  }
}

Your browser asks to open the app, then the app shows the settings and asks you to confirm. Key values are left empty for you to fill in.

ChatGPT connects only to servers on the internet:

Open ChatGPT on the web → Settings → Connectors (Apps)
Press Create or Add (some plans need Developer mode under Advanced first)
Paste the address below, give it a name and save
If it asks you to sign in, sign in with the maker

https://ui.mlola.com/mcp

Menu names can differ slightly by plan and over time.

Your choice stays on this device in a cookie; no account needed.

These settings are generated from the maker’s registry entry. If the README says otherwise, follow the README.

What it can do

Tool names and descriptions exactly as the server reported them on Nov 7, 2026. The maker wrote them, not us; we show them as plain text.

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.
search_components
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.
get_component
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.
get_tokens
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.
check_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, blocks and utility classes (bg-[#fafafa]) hand-written colors, spacing written by hand instead of
get_render_catalog
The 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 (
check_render
Checks 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,
render_ui
Shows 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
get_install_command
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.

Basic checksi

We check information anyone can see; we have not read the code. Checks that do not apply are left out of the count. · Checked Nov 8, 2026

✓ Pass
Maker matches the repo
The registry name was verified with the GitHub account mlolahq, which owns the repo
… Not checked yet
Still maintained
We have not read this repo from GitHub yet
… Not checked yet
Has a licence
We have not read this repo from GitHub yet
✓ Pass
Endpoint responds
Responded in 1495 ms (HTTP 200)
– Not applicable
Sign-in with OAuth
No sign-in needed
✓ Pass
No hidden instructions in tool descriptions
Read 9 tool descriptions and found no hidden instructions to the AI

Compared with others in Developer toolsi

More stars than 0% of the other 4923 servers in this category
Published to the registry more recently than 70% of the other 4923 servers in this category
Basic checks equal to or better than 100% of the other 4923 servers in this category

Compared with every active server in this category in the registry. Stars count only when the publisher owns the repo.

Common questions

Is Mlola UI safe?

It passed 3 of 3 applicable basic checks. We have not read the code. Before adding a key or token, see what access the server asks for and use a key with only the permissions you need.

What keys or codes does it need?

The registry does not list a required key, though some servers ask you to sign in on first use.

Does it run on my computer or in the cloud?

Either way works: install it on your computer or connect to the cloud version.

Is it still maintained?

The GitHub repo last changed –, and the latest version (1.14.3) reached the registry 17 days ago.

Which apps can use it?

Apps that support MCP, such as Claude Desktop, Claude Code, Cursor and VS Code. It connects by URL, so apps that accept remote MCP servers work too, such as ChatGPT in developer mode.

What can I use instead?

In the same category: GitHub, Desktop Commander, Cloudflare MCP

Alternatives

Servers in the same category from other makers, sorted by stars.

Reading a card:★ GitHub starsiThree pillars: reviews · checks · usageiUpdated = latest version published to the registryi

GitHub

by github

GitHub’s official server lets AI read and manage code, issues and pull requests in your account. Use GitHub’s hosted version or run it locally with Docker.

Computer or cloud★ 34,245MITUpdated 5 days ago

Install

Desktop Commander

by wonderwhy-er

MCP server for terminal commands, file operations, and process management

Runs on your computer★ 10,225MITUpdated 17 days ago

Install

Cloudflare MCP

by cloudflare

Cloudflare MCP servers

Runs in the cloud★ 4,446Apache-2.0Updated 14 months ago

Install

README from the maker

Open the README

Copied from the maker’s repo as written. PopNx MCP has not reviewed or endorsed it. HTML, images and scripts are removed. Links lead off this site.

mlola-ui

The Mlola UI source-copy CLI. It writes components, blocks, pages, and templates into your project, rewrites their imports to fit it, and installs the Mlola packages they import with your package manager. Framework-free: the copied markup works in any language that can emit HTML, and React sources use only React.

The library's contract is generated from its own stylesheet, so a model reading it cannot invent a class or attribute that does not exist.

Install

npx mlola-ui init

npx mlola-ui add button sheet hero-split landing npx mlola-ui doctor

init writes mlola.config.json, the engine stylesheet, and the instructions your coding agents read (see below), and installs @mlola-ui/engine. It fits the project it finds: files go where the @/ alias in tsconfig.json points, or into src/ when there is one. Without an alias, as in a new Vite app, it sets "imports": "relative" and the copied files import each other by relative path, so nothing needs setting up first.

add resolves the dependency graph (a page pulls its blocks, a block pulls its components), copies only what you asked for, and installs the packages the copied code imports that package.json does not declare yet. Pass --no-install to only print the command. doctor checks the project against the registry: packages the installed items import, the engine import, the theme attribute, and files changed since they were added.

Tailwind can stay in the project. The engine places Mlola's layers above Tailwind's preflight in either import order.

Commands

Command	What it does
`init [--no-agents] [--no-install]`	create `mlola.config.json`, the stylesheet entry and the agent instructions, and install the engine
`agents`	write or refresh the agent instructions in an existing project
`mcp`	run the Mlola MCP server over stdio, for coding agents
`add [--no-install]`	copy items and their dependencies into the project, and install the packages they import
`list [--json]`	print every installable item
`doctor`	report project and registry problems
`check [path…] [--json] [--strict] [--all]`	check every file's markup and CSS against the contract, and count the colors and spacing typed by hand
`migrate [path…] [--write] [--json]`	move a shadcn/ui project's props, toasts and icons to Mlola, and list what needs a person
`render check [--json]`	check A2UI messages an agent composed against the Mlola Render catalog; exits 1 on an error
`render catalog [--schema]`	print the Mlola Render catalog as the guide an agent reads, or as the A2UI catalog
`render prompt [--tool] [--page-theme]`	print the system prompt for a model you call yourself: every answer a surface, or (`--tool`) a tool the model calls when one helps; `--page-theme` leaves themes to the page
`login`	save a Mlola Pro token (from /account) for this user
`logout`	forget the saved token

Checking a project

check runs the same check as the MCP server's check_markup over every HTML, JSX, TSX, Vue, Svelte, Astro and CSS file in the project (or the paths you name), and reports each issue with its line and fix:

npx mlola-ui check            # the whole project

npx mlola-ui check src --json # one folder, every issue as data

It ends with the drift: how many different colors and spacing values were typed by hand instead of read from the tokens, and which ones most. It works in any project, so it can measure one before it uses Mlola. In a Mlola project it leaves out what the CLI installed (--all takes the copied markup in; Mlola's own stylesheets, the built theme among them, are held by the library's gates and never checked); where Tailwind, UnoCSS or Windi is installed it leaves utility classes alone and counts only the values typed into them (bg-[#fafafa], p-[13px]).

It exits 1 when it finds an error (with --strict, a warning too), and on GitHub Actions each issue is also an annotation on the pull request:

# .github/workflows/ui.yml

name: UI on: pull_request jobs: mlola: runs-on: ubuntu-latest steps:

uses: actions/checkout@v4
run: npx -y mlola-ui@latest check src

Moving from shadcn/ui

migrate makes the changes a machine can make without guessing, and lists the rest with the line and what to do. Mlola installs a component at the same file shadcn/ui did (components/ui/button.tsx), so imports stay as they are. It reads by default; --write makes the changes.

npx mlola-ui migrate            # what would change, and what needs a person

npx mlola-ui migrate --write # make the changes npx mlola-ui add button badge toast --overwrite # the command it prints

It rewrites props written out as literals (variant="destructive" becomes variant="danger", a Badge's variant becomes its tone), moves sonner and the older use-toast to Mlola's toast (toast.error becomes toast.danger), switch to toggle, and the lucide-react glyphs Mlola has to @mlola-ui/icons, in the file's own import style. It leaves a value computed at runtime, a cva() helper and a component whose API differs (Dialog, Select, Dropdown Menu…) to you, naming the attributes or the component that replace each one.

Coding agents

init (or agents, in an existing project) tells the project's coding agents that its UI is Mlola:

mlola.agents.md: the design guide, with every class, data-* value and token, and the rules for new UI;
AGENTS.md: a short section between markers pointing at the guide (merged, never overwritten), and CLAUDE.md importing it for Claude Code;
.mcp.json (and .cursor/ or .vscode/ when the project uses them): the Mlola MCP server.

npx mlola-ui mcp is that server. It answers from the registry bundled with this CLI, offline: get_design_rules, search_components, get_component, get_tokens, check_markup (invented classes, wrong data-* values, utility classes, and hand-written colors, spacing off the --ml-space-* scale or faded text in style attributes, blocks and utility classes, each with its line), get_render_catalog, check_render and render_ui (Mlola Render, below), add_components and init_project. For Claude Code without init:

claude mcp add mlola --scope project -- npx -y mlola-ui mcp

It is started by your agent and talks over stdio, so run by hand it prints one line and waits. The same tools, minus the two that write, answer at https://ui.mlola.com/mcp for agents that cannot run a command (with get_install_command, which also gives the CDN link and script for a page with no build step), and the server is listed in the MCP Registry as io.github.mlolahq/mlola-ui. See https://ui.mlola.com/docs/agents for Cursor, VS Code, Codex and chat apps.

Mlola Render

When an agent should show interface instead of writing code for it (a form in a chat, a status card in an agent's app), it composes A2UI v0.9 messages from the Mlola Render catalog: free components and named values, never a color or a class. The check holds them to the catalog and to what makes a surface usable (a name on every field, one root, no loops, headings in order, values in range) and answers in A2UI's VALIDATION_FAILED shape, so the agent fixes its own messages:

npx mlola-ui render catalog          # what an agent may compose

npx mlola-ui render check ui.json # an array, one message, or JSON Lines

import { validateRender } from "mlola-ui/render";

import rules from "mlola-ui/render/rules" with { type: "json" };

const { valid, errors } = validateRender(messages, rules);

The MCP tools are get_render_catalog, check_render and render_ui. In a chat that shows MCP Apps, render_ui draws the surface in the conversation (its view is the resource ui://mlola/render), and what the person presses comes back to the agent as their next message, with A2UI's action. The A2UI catalog is mlola-ui/render/catalog and https://ui.mlola.com/a2ui/catalog/v1.

With a model you call yourself, mlola-ui/render/ai is what goes around the call: the system prompt, a reader for what the model answers (as it streams, and however it wrapped the JSON), and the loop that hands a refused reply back with its errors. Mlola never calls a model and holds no key:

import { composeRender } from "mlola-ui/render/ai";

const { valid, messages, turns } = await composeRender({ rules, request: "A form to book a table for tonight", generate: ({ system, messages }) => callYourModel(system, messages), // answers with the model's text });

renderSystemPrompt, renderTool, createRenderReader, readRenderReply, checkRenderReply and renderRepairPrompt are the parts, for a stream, a tool call or a loop of your own. npx mlola-ui render prompt prints the prompt for a server in another language.

To draw surfaces yourself: npx mlola-ui add render-surface in React, or @mlola-ui/behavior/render on a page without a framework. See https://ui.mlola.com/docs/render.

Mlola Pro

Pro components, blocks, pages and templates are not in this package. With a license, create a token at https://ui.mlola.com/account, then:

npx mlola-ui login mlp_…

npx mlola-ui add conversation bot

add fetches Pro items and their Pro dependencies from the service, checks every file against its integrity hash, and writes them like any other item. Free dependencies still come from this package. Pro stylesheets land in styles/mlola-pro/, gathered by styles/mlola-pro.css: import it once, after the engine stylesheet. mlola-pro.agents.md at the project root lists every Pro class and attribute for coding agents; point your AGENTS.md at it. In CI, set MLOLA_PRO_TOKEN instead of logging in. The token is stored in ~/.config/mlola-ui/credentials.json, readable by you only.

Configuration

Aliases and targets live in mlola.config.json:

"aliases": { "components": "@/components/ui", "blocks": "@/components/blocks", "pages": "@/app/pages", "templates": "@/app/templates" } }

The CLI works from an npm tarball with no repository checkout; the packed installation is tested in CI.

MIT licensed. Part of Mlola UI.

Mlola UI

Overview

PopNx MCP’s three pillars

What you can do with it

Install

Before you install

Or run it on your computer

Or run it on your computer

Or run it on your computer

Or run it on your computer

What it can do

Basic checksi

Maker matches the repo

Still maintained

Has a licence

Endpoint responds

Sign-in with OAuth

No hidden instructions in tool descriptions

Compared with others in Developer toolsi

Common questions

Alternatives

GitHub

Desktop Commander

Cloudflare MCP

README from the maker

mlola-ui

Install

Commands

Checking a project

Moving from shadcn/ui

Coding agents

Mlola Render

Mlola Pro

Configuration