Skip to main content
ClaudeWave
mlolahq avatar
mlolahq

mlola-ui

View on GitHub
MCP ServersOfficial Registry0 stars0 forks● TypeScriptMITUpdated today
ClaudeWave Trust Score
77/100
✓ Trusted
Passed
  • ✓Open-source license (MIT)
  • ✓Actively maintained (<30d)
  • ✓Documented (README)
Flags
  • !No description
Last scanned: 9/28/2026
Install in Claude Code / Claude Desktop
Method: NPX · mlola-ui
Claude Code CLI
claude mcp add mlola-ui -- npx -y mlola-ui
claude_desktop_config.json (Claude Desktop)
{
  "mcpServers": {
    "mlola-ui": {
      "command": "npx",
      "args": ["-y", "mlola-ui"]
    }
  }
}
1. Run the command above in your terminal (Claude Code), or paste the JSON config into claude_desktop_config.json (Claude Desktop).
2. Replace any <placeholder> values with your API keys or paths.
3. Restart Claude. The MCP server and its tools appear automatically.
Use cases
Creative Dev Tools Design
About

MCP Servers overview

# Mlola UI

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`](packages/engine/generated/contract.json) lists every class and
the `data-*` / `aria-*` attributes the CSS reacts to, and
[`agents.md`](packages/engine/generated/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. Agents that
cannot run a command, such as a chat app, use the same server at
`https://ui.mlola.com/mcp`. It is listed in the MCP Registry as
`io.github.mlolahq/mlola-ui`. See
[Coding agents](https://ui.mlola.com/docs/agents).

## Mlola Theme

A theme is a coherent transformation across eight expression channels:

```text
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
<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](docs/architecture.md),
[the theme methodology](docs/methodology/theme.md), and
[the quality contract](docs/quality.md).

## 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](https://ui.mlola.com/pricing).

Every item is source-owned through the CLI. See
[component anatomy](docs/component-anatomy.md).

## 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

```bash
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](https://ui.mlola.com/account), then:

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

## Development

```bash
npm install
npm test
```

The public repository, [mlolahq/mlola-ui](https://github.com/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](CONTRIBUTING.md), the [changelog](CHANGELOG.md), and the
[0.3 to 1.0 migration guide](docs/migration/v0.3-to-v1.md).
Frequently asked

What people ask about mlola-ui

What is mlolahq/mlola-ui?

+

mlolahq/mlola-ui is mcp servers for the Claude AI ecosystem with 0 GitHub stars.

How do I install mlola-ui?

+

You can install mlola-ui by cloning the repository (https://github.com/mlolahq/mlola-ui) or following the README instructions on GitHub. ClaudeWave also provides quick install blocks on this page.

Is mlolahq/mlola-ui safe to use?

+

Our security agent has analyzed mlolahq/mlola-ui and assigned a Trust Score of 77/100 (tier: Trusted). See the full breakdown of passed checks and flags on this page.

Who maintains mlolahq/mlola-ui?

+

mlolahq/mlola-ui is maintained by mlolahq. The last recorded GitHub activity is dated 2026-09-28, with 0 open issues.

Are there alternatives to mlola-ui?

+

Yes. On ClaudeWave you can browse similar mcp servers at /categories/mcp, sorted by popularity or recent activity.

1-click deploy

Deploy mlola-ui to your cloud

Ship this repo to production in minutes. Each platform spins up its own environment with editable env vars.

VercelRailwayRender
Embeddable badge

Maintain this repo? Add a badge to your README

Drop the badge into your GitHub README to show it's tracked on ClaudeWave. Each badge links back to this page and reflects the live Trust Score.

Featured on ClaudeWave: mlolahq/mlola-ui
[![Featured on ClaudeWave](https://claudewave.com/api/badge/mlolahq-mlola-ui)](https://claudewave.com/repo/mlolahq-mlola-ui)
<a href="https://claudewave.com/repo/mlolahq-mlola-ui"><img src="https://claudewave.com/api/badge/mlolahq-mlola-ui" alt="Featured on ClaudeWave: mlolahq/mlola-ui" width="320" height="64" /></a>
Related

More MCP Servers

mlola-ui alternatives
n8n-io
n8n
today

Fair-code workflow automation platform with native AI capabilities. Combine visual building with custom code, self-host or cloud, 400+ integrations.

206.1k60.9kTypeScript
MCP ServersaiapisInstall
open-webui
open-webui
today

User-friendly AI Interface (Supports Ollama, OpenAI API, ...)

153.4k22.4kPython
MCP ServersaillmInstall
google-gemini
gemini-cli
today

An open-source AI agent that brings the power of Gemini directly into your terminal.

107.2k14.6kTypeScript
MCP Serversaiai-agentsInstall
koala73
worldmonitor
today

Real-time global intelligence dashboard. AI-powered news aggregation, geopolitical monitoring, and infrastructure tracking in a unified situational awareness interface

87.5k13.3kTypeScript
MCP ServersagentaiInstall
D4Vinci
Scrapling
today

🕷️ An adaptive Web Scraping framework that handles everything from a single request to a full-scale crawl! Don't be shy, join here: https://discord.gg/EMgGbDceNQ and follow here for daily tips and tricks: https://x.com/Scrapling_dev

84.1k8.6kPython
MCP Serversaiai-scrapingInstall
netdata
netdata
today

The fastest path to AI-powered full stack observability, even for lean teams.

80.7k6.6kGo
MCP ServersaialertingInstall