{
  "markdown": "# Marmo UI\n\n**The AI agentic designer.** Point the agent you already use — Claude Code, Codex, Cursor, Gemini CLI — at Marmo and it builds production dashboards and apps in minutes: real components, real props, your own style. No AI slop.\n\n**Platform, docs & pricing → [marmoui.com](https://www.marmoui.com)**\n\n```bash\nnpx marmoui init     # connect your agent (free, no account)\nnpm i @marmoui/ui    # the component library (MIT)\n```\n\nThen just ask your agent: *\"Build a billing dashboard with Marmo UI.\"*\n\n<!-- TODO: demo video goes here -->\n\n![The Marmo UI component library — data tables, charts, KPI cards, badges and more, rendered live at marmoui.com/components](.github/assets/component-gallery.png)\n\n## How it works\n\n- **[`@marmoui/ui`](packages/ui)** — an open-source React 19 design system (MIT, public npm). Tables, charts, forms, app shells — everything a product UI needs, light + dark from one token set.\n- **The Marmo MCP** — a hosted knowledge server your agent connects to. Instead of guessing from training data, the agent reads live component APIs, composition patterns, and generation rules, and validates its output (`review_generated_code`) before reporting done. Wrong imports and invented props get caught and fixed before you ever see them.\n- **[Claude Code plugin](tools/claude-plugin)** — `/plugin marketplace add mahmoudilyan/marmoui` → `/plugin install marmo-ui@marmoui-plugins`. Bundles the MCP plus the `marmo-ui` skill and `/marmo-ui:*` commands (`init`, `design-md`, `build`) that enforce the find → generate → validate workflow.\n\n<p align=\"center\">\n  <img src=\".github/assets/connect-agent.png\" alt=\"One command — npx marmoui init — wires Claude Code, Codex, Cursor and Gemini CLI to the Marmo MCP\" width=\"620\">\n</p>\n\n## Light and dark from one token set\n\nEvery component ships both themes off the same semantic tokens (`bg`, `panel`, `ink`, `primary-*`) — no parallel dark stylesheet, no hardcoded hex.\n\n| Light | Dark |\n| --- | --- |\n| <img src=\".github/assets/docs-light.png\" alt=\"Marmo UI docs, DataTable live preview in light theme\"> | <img src=\".github/assets/docs-dark.png\" alt=\"The same DataTable preview in dark theme\"> |\n\n## Free vs Pro\n\n| | Free | [Pro — $9.99/mo, 14-day free trial](https://www.marmoui.com/pricing) |\n| --- | --- | --- |\n| React components (`@marmoui/ui`, MIT) | ✓ | ✓ |\n| Core MCP — live props, validation, default Marmo styling | ✓ | ✓ |\n| Docs, Figma library | ✓ | ✓ |\n| **On-brand generation** — your [`DESIGN.md`](https://www.marmoui.com/docs/tools/design-md) (colors, type, tokens, component overrides) drives every screen any connected agent generates | | ✓ |\n| Composition patterns library (app shells, dashboards, forms) | | ✓ |\n| Pro blocks, generated straight into your repo | | ✓ |\n| Personal MCP token + hosted, brand-themed design-system page | | ✓ |\n\n**Pro mode in one sentence:** the free tier makes your agent *correct*; Pro makes it *yours* — run `/marmo-ui:init` (or write a `DESIGN.md` by hand), upload it at [marmoui.com/connect](https://www.marmoui.com/connect), and every agent on your account generates UI in your brand instead of the Marmo defaults. Generation always happens in **your** agent with **your** LLM tokens; the code lands in your repo and you own it fully.\n\n## Monorepo structure\n\n```\n├── apps/\n│   └── design-system-docs/    # marmoui.com — docs + marketing site\n├── packages/\n│   ├── ui/                    # @marmoui/ui — publishable component library\n│   └── cli/                   # marmoui — npx marmoui init\n└── tools/claude-plugin/       # Claude Code plugin + marketplace\n```\n\nThe hosted MCP server and platform services live in a private repository; this repo talks to them only through the hosted MCP at `mcp.marmoui.com`.\n\n## Using `@marmoui/ui` directly\n\nWorks as a regular component library too — no agent required:\n\n```tsx\nimport '@marmoui/ui/style.css'; // once, in your app entry\nimport { Button, DataTable } from '@marmoui/ui';\n```\n\nReact 19 + `react-dom` are peer dependencies. Component APIs and examples: [marmoui.com/docs](https://www.marmoui.com/docs/introduction/get-started).\n\n## Development\n\nNode 20+, pnpm 9.\n\n```bash\ngit clone git@github.com:mahmoudilyan/marmoui.git\ncd marmo-ui\npnpm install\npnpm dev            # UI package + docs site (localhost:3002)\n```\n\n| Command             | Description                    |\n| ------------------- | ------------------------------ |\n| `pnpm dev:ui`       | Develop the UI package only    |\n| `pnpm build`        | Build all packages and apps    |\n| `pnpm lint`         | Run ESLint across the monorepo |\n| `pnpm type-check`   | Run TypeScript type checking   |\n| `pnpm changeset`    | Add a semver changeset         |\n\n## Contributing\n\nSee [CONTRIBUTING.md](./CONTRIBUTING.md) — workflow, Conventional Commits (enforced by husky), and semver via [Changesets](https://github.com/changesets/changesets).\n\n## License\n\nMIT — see [LICENSE](./LICENSE). Components are free forever; a component that ships free never moves behind the paywall.\n",
  "bytes": 5006,
  "sha": "61cfc7a6a27cc2c623a1a741ee6269d0fad518364a4433383d2803f7b10142dd",
  "repo_slug": "mahmoudilyan/marmoui",
  "fonte": "repo",
  "truncated": false,
  "api": "https://agentalog.com/api/listings/mcp_io_github_mahmoudilyan_marmo_ui_2d4e7164/readme"
}