ahel
Start free

Mlola UI

MCP serverMedia

Gives your coding agent Mlola's UI components, design tokens, style rules, and a way to check its markup.

Available today. Use it from your connected AI after setup.

Add ahel to your AI once: Claude, ChatGPT, Cursor, Claude Code or Codex. Then ask it to use this.

Then ask your AI: use Mlola UI to get design rules

About this server

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

Install Mlola UI

The server’s own address, for the clients that take one directly. Or connect ahel onceand every client you use reads it from one address, with the account kept on ahel rather than in each client’s config.

  • Claude Code

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

    Run it once in your project, then open /mcp to approve any sign-in the server asks for.

  • Claude Desktop

    https://ui.mlola.com/mcp

    Add a custom connector in Settings, paste this address, and approve the sign-in.

  • Cursor

    cursor://anysphere.cursor-deeplink/mcp/install?name=mlola-ui&config=eyJ1cmwiOiJodHRwczovL3VpLm1sb2xhLmNvbS9tY3AifQ==

    Open the link and Cursor adds the server at that address.

  • ChatGPT

    https://ui.mlola.com/mcp

    In Settings, enable Developer mode, create an MCP app, and paste this address. Your plan and workspace must allow custom apps.

  • Codex

    codex mcp add mlola-ui --url 'https://ui.mlola.com/mcp'

    Run it once, then sign in with codex mcp login mlola-ui if the server asks for an account.

From the project's README

As published by mlolahq/mlola-ui in README.md.

A framework-free design system with a machine-readable contract.

The engine emits plain CSS and DTCG JSON with no runtime dependency, interaction behavior ships as a standard DOM module, and React is one supported consumption path — source-copied components — rather than a requirement. Mlola does not ship a utility framework or outsource its identity to a styling, animation, primitive, or icon runtime.

The contract is generated from the stylesheet and audited, so a model cannot invent a class or attribute that does not exist. contract.json lists every class and the data-* / aria-* attributes the CSS reacts to, and agents.md is generated from the same source. Both are checked in CI, so the guide can never describe a library that is not there.

Your coding agent knows it too. npx mlola-ui init writes the guide and an AGENTS.md section into the project, and npx mlola-ui mcp is an MCP server that Claude Code, Cursor, Codex and VS Code can ask: which component fits, which token to read, whether the markup it just wrote is right. See Coding agents.

Mlola Theme

A theme is a coherent transformation across eight expression channels:

type · geometry · density · depth · motion · texture · rhythm · icon

Component anatomy, semantics, keyboard behavior, accessible names, and state contracts remain invariant. Accessibility and user preferences always take precedence over expression.

Canonical themes:

  • Graphite (graphite, default) — neutral, crisp, quiet, and product-first
  • Atelier Umami (atelier) — editorial, warm, tactile, and measured
  • Machined Titanium (machined) — compact, angular, exact, and damped
  • Aerogel Glass (aerogel) — light, luminous, elastic, and translucent
  • Nordic Earth (nordic) — organic, airy, earthy, and gently rounded

Activate a theme with native attributes:

<html data-theme="graphite" data-mode="light">

Theme methodology

  • Theme states the intended character as one normalized vector.
  • Anatomy fixes semantics and interaction contracts.
  • Synthesis derives tokens, recipes, spring motion curves, and icon parameters from the vector and a deliberately sparse set of couplings.
  • Tuning maps those derived foundations into intent-oriented component recipes.
  • Evaluation enforces accessibility, perceptual distance, browser behavior, and performance.

Accessibility is a projection applied at every stage, not a channel the vector can trade away. See the architecture, the theme methodology, and the quality contract.

Layers

Source is four ordered layers, each built from the one below:

  • Components — a single primitive with one job (Button, Card, Tabs).
  • Blocks — one section of a page (Hero, Navbar, Pricing tiers).
  • Pages — one complete route assembled from blocks (Landing, Pricing, Dashboard).
  • Templates — a multi-page flow with routes and cross-page state (the storefront: catalog → product → cart → checkout → confirmation).

The open-source core is MIT: the engine, tokens, behavior, motion, scene, icons, the free components and the CLI. Mlola Pro adds the AI, code, canvas, editor, workflow and chart components, plus blocks, pages and templates. Pro is a one-time commercial license and is not in this distribution; see ui.mlola.com/pricing.

Every item is source-owned through the CLI. See component anatomy.

Packages

  • @mlola-ui/engine — generated static CSS, spring easings, and theme metadata
  • @mlola-ui/behavior — framework-free interaction runtime and shared decision logic
  • @mlola-ui/motion — native kinetic primitives and the spring integrator
  • @mlola-ui/scene — optional lightweight spatial presentation
  • @mlola-ui/icons — Mlola Glyph DNA icon catalog
  • @mlola-ui/registry — validated source metadata and snapshot
  • mlola-ui — source-copy CLI

Components, blocks, and templates are source-owned through the CLI. React components vendor their own small runtime helpers and share pure decisions with the framework-free runtime through @mlola-ui/behavior/logic, so the two paths cannot drift.

Quick start

npx mlola-ui init
npx mlola-ui add button card input tabs sheet
npx mlola-ui doctor

Then import styles/mlola/index.css once and set data-theme="graphite" on the root element. init installs the engine and add the packages each component imports; files go where your @/ alias points, or into src/. Next.js and Vite both work as created, with or without Tailwind.

The CLI installs the open-source components. With a Mlola Pro license, create a token at ui.mlola.com/account, then:

npx mlola-ui login mlp_…
npx mlola-ui add conversation kanban

Development

npm install
npm test

The public repository, mlolahq/mlola-ui, is exported from the main repository, where code generation and the full audit suite run; its generated stylesheets, tokens and registry are their output. See MIRROR.md there.

The repository rejects shipped Tailwind, clsx, tailwind-merge, CVA, Lucide, Radix, transitions.dev, and external motion runtimes. Development-only verification tools are not shipped to consumers.

See CONTRIBUTING.md, the changelog, and the 0.3 to 1.0 migration guide.

Tools it offers (6)

What this server listed when ahel dialed its public endpoint in Sep 2026, with no key and no account of yours. The names are the server’s own.

  • get_design_rules
  • search_components
  • get_component
  • get_tokens
  • check_markup
  • get_install_command

Signals

Last commit
Sep 2026
Weekly downloads
4k
Advanced
Delivery
mlola-ui MCP server → your ahel connector (mcp.ahel.ai) → your AI.
Item type
mcp-server
Key
io-github-mlolahq-mlola-ui
Source
github.com/mlolahq/mlola-ui
Hosted endpoint
https://ui.mlola.com/mcp

github.com/mlolahq/mlola-ui

More in Media

semiotic
MCP server · nteractmcp-music-studio
MCP server · linxuleagent-native-design
MCP server · builderioopenshorts
MCP server · mutonbysapiens
MCP server · inhabitantsTokPortal
MCP server · tokportal