Coding agents

Most UI is now written with a model at the keyboard. Left alone, it recalls the utility classes it was trained on. One command tells it this UI is Mlola, and an MCP server answers its questions from the same registry the CLI installs from, so what it writes is what exists.

One command

Initializing a project also writes the instructions its agents read. Every file is merged: anything already in AGENTS.md, CLAUDE.md or .mcp.json stays as it was, and the Mlola section sits between markers so a later run replaces only that. Pass --no-agents to init to skip them.

Terminal

npx mlola-ui init      # a new project: config, styles and agent instructions
npx mlola-ui agents    # an existing project: agent instructions only, refreshed

File	What it does
`mlola.agents.md`	The design guide: every class and data-* value, every token by purpose, and the rules for new UI. Generated from the stylesheet, refreshed by each run.
`AGENTS.md`	A short section between markers, read by Codex, Cursor and most agents: this UI is Mlola, read the guide, compose first, never write a color by hand.
`CLAUDE.md`	Imports AGENTS.md, so Claude Code reads the same section.
`.mcp.json`	Starts the Mlola MCP server for Claude Code and other agents that read it.
`.cursor/mcp.json and .cursor/rules/mlola.mdc`	When the project uses Cursor: the server and an always-on rule.
`.vscode/mcp.json`	When the project uses VS Code: the server.

The MCP server

npx mlola-ui mcp speaks the Model Context Protocol over stdio. It needs no key and no network: every answer comes from the registry bundled with the CLI, so it always matches what add installs. Start it from the project folder, since installing writes there.

Claude Code, when you did not run init:

Terminal

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

Cursor (.cursor/mcp.json), Claude Code (.mcp.json) and other agents that read the same shape:

JSON

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

VS Code (.vscode/mcp.json):

JSON

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

Codex:

Terminal

# ~/.codex/config.toml
[mcp_servers.mlola]
command = "npx"
args = ["-y", "mlola-ui", "mcp"]

The remote server

For an agent that cannot run a command in your project, such as a chat app or a hosted editor, the same server answers at https://ui.mlola.com/mcp over Streamable HTTP. It needs no account. It has the same search, component, token, rule and markup-check tools, and gives the install commands to run instead of installing, since it cannot write to your project. Mlola Pro items are described there; their source arrives with a license through npx mlola-ui add.

Terminal

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

JSON

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

What it answers

Tool	For
`get_design_rules`	How to build UI the Mlola way: compose first, color by role, measure with the scales, shared state words, touch and focus.
`search_components`	Components, blocks, pages and templates by what they do, free and Mlola Pro.
`get_component`	The import, every prop with fixed values and its default, the classes it styles and the data-* values each reacts to, and the install command. Optionally the source.
`get_tokens`	The --ml-* tokens grouped by purpose: planes, color roles, spacing, type, density, shape, depth, motion, layers.
`check_markup`	Invented or variant classes, values an element does not react to, utility classes, hand-written colors, a borrowed data-mode.
`add_components`	Installs components with the CLI, dependencies and styles included.
`init_project`	Sets the project up, agent instructions included.

It also serves the guide as the resource mlola://guide (and mlola://guide/pro once Pro items are installed), and a build_ui prompt that walks an agent through the rules, the components and the check.

Check before finishing

The instructions ask every agent to run check_markup on what it wrote. It reads classes, data-* values and inline styles against the contract generated from the stylesheet, and says how to fix each one:

HTML

<button className="ml-button ml-button-primary p-4" data-variant="huge">Save</button>

Terminal

error    "ml-button-primary" is not a Mlola class.
         Mlola has no variant classes: use "ml-button" with a data-* attribute.
warning  Utility classes (p-4) do nothing here: Mlola ships no utility framework.
error    data-variant="huge" is not a value ml-button reacts to.
         Allowed: danger, link, outline, primary, secondary, subtle.

The guide, without an agent

Everything the server knows is also plain Markdown, for any assistant or any person: mlola.agents.md in the project, @mlola-ui/engine/generated/agents.md in the package, and agents.json beside it with the same facts as data. Mlola Pro adds mlola-pro.agents.md with its own classes on the first Pro install.

The site answers in Markdown too: /llms.txt maps it, every component page is Markdown at its address plus .md (button.md), and /llms-full.txt holds the free contract and every free component in one file. Mlola Pro items appear there by what they do, never as source.