Skip to main content
ClaudeWave
mlolahq avatar
mlolahq

mlola-ui

Ver en GitHub
MCP ServersRegistry oficial0 estrellas0 forks● TypeScriptMITActualizado 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.
Casos de uso
Creative Dev Tools Design
Sobre el repo

Resumen de MCP Servers

# 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).
Preguntas frecuentes

Lo que la gente pregunta sobre mlola-ui

¿Qué es mlolahq/mlola-ui?

+

mlolahq/mlola-ui es mcp servers para el ecosistema de Claude AI con 0 estrellas en GitHub.

¿Cómo se instala mlola-ui?

+

Puedes instalar mlola-ui clonando el repositorio (https://github.com/mlolahq/mlola-ui) o siguiendo las instrucciones del README en GitHub. ClaudeWave también te ofrece bloques de instalación rápida en esta misma página.

¿Es seguro usar mlolahq/mlola-ui?

+

Nuestro agente de seguridad ha analizado mlolahq/mlola-ui y le ha asignado un Trust Score de 77/100 (tier: Trusted). Revisa el desglose completo de comprobaciones superadas y flags en esta página.

¿Quién mantiene mlolahq/mlola-ui?

+

mlolahq/mlola-ui es mantenido por mlolahq. La última actividad registrada en GitHub es del 2026-09-28, con 0 issues abiertos.

¿Hay alternativas a mlola-ui?

+

Sí. En ClaudeWave puedes explorar mcp servers similares en /categories/mcp, ordenados por popularidad o actividad reciente.

Deploy en 1 click

Despliega mlola-ui en tu cloud

Lleva este repo a producción en minutos. Cada plataforma genera su propio entorno con variables de entorno editables.

VercelRailwayRender
Badge embebible

¿Mantienes este repo? Añade un badge a tu README

Pega el badge en tu README de GitHub para mostrar que está auditado por ClaudeWave. Cada badge enlaza de vuelta a esta página y muestra el Trust Score actual.

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

Más MCP Servers

Alternativas a mlola-ui
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