# Memi > Shadcn-native Design CI for Tailwind apps: export registries that work with shadcn, v0, AI editors, and npm. - **Type:** MCP server - **Install:** `agentstack add mcp-sarveshsea-memi` - **Verified:** Pending review - **Seller:** [sarveshsea](https://agentstack.voostack.com/s/sarveshsea) - **Installs:** 0 - **Category:** [Developer Tools](https://agentstack.voostack.com/c/developer-tools) - **Latest version:** 0.1.0 - **License:** MIT - **Upstream author:** [sarveshsea](https://github.com/sarveshsea) - **Source:** https://github.com/sarveshsea/memi - **Website:** https://memoire.cv ## Install ```sh agentstack add mcp-sarveshsea-memi ``` Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent. ## About memi Design-system memory for coding agents. Give Claude Code, Cursor, and Codex memory of your tokens, components, and Figma — so they edit your app without breaking the design. ## Install ```bash npm i -g @memi-design/cli # npm pnpm add -g @memi-design/cli # pnpm yarn global add @memi-design/cli # yarn ``` ## 30-second example ```bash memi diagnose # audit your current Tailwind app memi ux audit --json # score UX tenets and trap risks memi tokens --from ./src --report # extract design tokens memi shadcn export --out public/r # publish a shadcn-native registry ``` > **Looking for the macOS app?** memi Studio (Tauri shell, signed DMG) lives at **[github.com/sarveshsea/memi-studio](https://github.com/sarveshsea/memi-studio)**. Homepage: **[memoire.cv](https://memoire.cv)**. [Full quickstart →](docs/AGENT_RECIPES.md) · [llms.txt](./llms.txt) · Compatibility: [shadcn registry](https://ui.shadcn.com/docs/registry/getting-started) · [v0 design systems](https://v0.app/docs/design-systems) --- ### Install memi into your AI agent memi ships native agent kits and the first native-runtime trust patch inside the npm package. Install memi once, initialize the workspace suite manifest, warm the shared daemon, then give Hermes agents, OpenClaw bots, Claude Code, Cursor, Codex, and OpenCode the same design-system memory, Figma bridge context, Atomic Design rules, UX Tenets and Traps, shadcn/ui codegen, Tailwind diagnostics, and research-backed UI audit flow. ```bash npm i -g @memi-design/cli memi suite init --project . memi daemon start --project . --port auto memi daemon status --json memi simulate plan --hypothesis "New onboarding lowers activation risk" --json memi agent install hermes memi agent install openclaw --project . memi agent install claude-code --project . memi agent install cursor --project . memi agent install codex memi agent install codex-plugin memi agent install opencode --project . # install every supported kit, or inspect first memi agent install --project . memi agent install --dry-run --json ``` Hermes and OpenClaw receive `memoire-design-tooling` `SKILL.md` packages. Claude Code and Cursor receive MCP config for `memi mcp start --no-figma`. Codex can receive either the skill-only kit with `memi agent install codex` or the full Codex plugin with `memi agent install codex-plugin`, which installs a home-local plugin and marketplace entry. OpenCode receives a workspace skill-style context pack. Agent kit installs also plan or write `memoire.agent.yaml`, the YAML suite manifest agents use for memory sources, harnesses, skills, and recipes. Mirror-ready community skill files live in `agent-kits/mirror` for `sarveshsea/memoire-agent-skills`. MCP registries and crawlers can inspect the Figma-independent server with `memi mcp start --no-figma`. | Agent | Native install target | What it unlocks | |-------|-----------------------|-----------------| | Hermes | `~/.hermes/skills/memoire/memoire-design-tooling/SKILL.md` | Hermes loads memi as a design-system skill for UI, Figma, specs, and research runs. | | OpenClaw | `/skills/memoire/memoire-design-tooling/SKILL.md` | OpenClaw picks up a workspace skill with `memi` install metadata for ClawHub-style agent use. | | Claude Code | `.mcp.json` | Project MCP config for `memi mcp start --no-figma`; Claude Code asks to approve project MCP servers from `.mcp.json`. | | Cursor | `.cursor/mcp.json` | Cursor MCP config for memi design-system tools. | | Codex skill | `~/.codex/skills/memoire/memoire-design-tooling/SKILL.md` | Skill-only instructions for design audits, Figma context, specs, and Tailwind/shadcn workflows. | | Codex plugin | `~/plugins/memoire` + `~/.agents/plugins/marketplace.json` | Full Codex plugin with the memi skill and MCP server wiring. | | OpenCode | workspace skill pack | Agent-native instructions for design audits, Figma context, specs, and Tailwind/shadcn workflows. | #### Public Codex plugin marketplace memi also ships as a Git-backed Codex marketplace so users can install it from `/plugins` without waiting for the official Codex Plugin Directory: ```bash codex plugin marketplace add sarveshsea/memi --ref main --sparse .agents/plugins --sparse plugins/memoire ``` Then open `/plugins` in Codex and install memi from the marketplace list. The same plugin is available through npm for users who already have `memi`: ```bash npm i -g @memi-design/cli memi agent install codex-plugin ``` See [`docs/CODEX_PLUGIN.md`](./docs/CODEX_PLUGIN.md) and the public plugin page at `https://www.memoire.cv/codex-plugin`. ### memi Studio for macOS The macOS app now lives in its own repo: [github.com/sarveshsea/memi-studio](https://github.com/sarveshsea/memi-studio). This npm package owns the engine/runtime it embeds: harness metadata, project memory, the Figma bridge, Agent Kits, and the local Studio web/TUI surfaces. The desktop app stays minimalist; the engine stays powerful and scriptable. ```bash # engine-backed web/TUI workflows from npm memi studio web --port 1422 memi studio tui memi studio logs --follow memi studio run --harness codex --action design-doc --prompt "Audit this UI and generate a design spec" memi video create "Launch story" --adapter remotion --prompt "Product motion system" ``` Download the signed macOS app from [memi-studio releases](https://github.com/sarveshsea/memi-studio/releases/latest), or install it with Homebrew: ```bash brew install --cask sarveshsea/memi/memi-studio ``` ### Product Scenario Lab memi includes a clean-room product simulation layer for research-backed spec work. `memi simulate` maps `research/store.v2.json` into personas, variables, graph edges, model-swarm transcripts, interviews, reports, and spec-impact artifacts. Studio exposes the same flow through the `simulate` action and Scenario Lab so Codex, Claude Code, Hermes, OpenCode, Ollama, OpenAI-compatible providers, and deterministic fallback can operate from the macOS workbench. ```bash memi research synthesize memi simulate models --json memi simulate generate-agents --adapter model-swarm --count 24 --json memi simulate plan --hypothesis "Evidence-linked acceptance criteria reduce launch risk" --json memi simulate run --adapter local --json memi simulate run --adapter model-swarm --max-agents 24 --rounds 3 --json memi simulate run-matrix --adapter model-swarm --hypothesis "Faster setup reduces churn" --hypothesis "Evidence links reduce churn" --json memi simulate transcript --json memi simulate costs --json memi simulate compare --json memi simulate interview --agent --prompt "What should change in the spec?" --json memi simulate report --json memi simulate export-spec --json ``` Live model calls are opt-in; `model-swarm` falls back deterministically when Codex, Claude Code, Ollama, or provider credentials are unavailable. Studio and MCP expose: `simulation.models`, `simulation.generate_agents`, `simulation.plan`, `simulation.run`, `simulation.run_matrix`, `simulation.stream`, `simulation.transcript`, `simulation.compare`, `simulation.costs`, `simulation.interview`, `simulation.report`, and `simulation.export_spec`. The npm package does not vendor third-party fork source. The optional `--adapter mirofish --url ` compatibility path talks to a separately licensed simulation bridge over `/api/memoire/capabilities`, `/api/memoire/import`, `/api/memoire/runs/:id/events`, `/api/memoire/runs/:id/interview`, and `/api/memoire/runs/:id/export`. ### Research Vibe Design + FigJam Export Product agents can now turn `research/store.v2.json` and optional Scenario Lab reports into full Atomic Design specs plus Mermaid Jam-ready FigJam source. The first delivery path is source + open: memi writes Mermaid/markdown artifacts under `.memoire/mermaid-jam//` and opens Mermaid Jam when requested; it does not automate clipboard or direct paste. ```bash memi research synthesize memi research design --intent "Design an evidence-backed planning board" --hypothesis "Evidence links improve product confidence" --json memi research design --write-specs --mermaid-jam --json memi research design --run-id --write-specs --mermaid-jam --open --json memi mermaid-jam export --from research --json memi mermaid-jam export --from --open --json ``` Studio exposes the same flow through `research.design_package`, `research.generate_specs`, and `mermaid_jam.export`. Scenario Lab includes an Export to FigJam action that generates the research design package, writes Mermaid Jam source, and opens the local manifest when ready or the Figma Community route otherwise. ### Install the output anywhere ```bash # shadcn-compatible registry item npx shadcn@latest add https://your-site.com/r/button.json # v0 / AI-editor context memi shadcn serve --port 4014 # memi install path with aliases, npm packages, URLs, GitHub, or local paths memi registry install Button --from @you/ds memi add Button --from ./public/r ``` ## No Figma required Most developer teams do not start in Figma. memi reads the codebase directly: Tailwind classes, shadcn usage, CSS variables, routes, markup, repeated literals, dark-mode coverage, token aliases, component targets, and registry shape. ```bash # Diagnose an existing app from code memi diagnose # Diagnose a running local route / public URL memi diagnose http://localhost:3000 # Focus the critique on tenet coverage, trap risks, and next tweaks memi ux audit --json memi ux audit --screenshot .memoire/studio/artifacts/screen.png --json # Extract the token system from the app and write audit reports memi tokens --from ./src --output generated/tokens --report # Export shadcn-compatible registry.json and /r/*.json items memi shadcn export --out public/r # Save extracted tokens into .memoire/design-system.json for publish/codegen flows memi tokens --from ./src --save ``` Reports are written to `.memoire/app-quality/diagnosis.{json,md}` with a `ux` field for tenet coverage, trap risks, findings, and recommended tweaks. Focused UX reports are written to `.memoire/app-quality/ux-audit.{json,md}`. Token extraction emits CSS, Tailwind, JSON, Style Dictionary, semantic coverage, scale-health notes, alias graph validation, duplicate-value groups, recommendations, and inferred token candidates. Shadcn export emits `registry.json` plus installable item JSON files under `/r`. ## Trust defaults The public npm package does not run install-time lifecycle scripts. Figma plugin installation is explicit with `memi setup plugin`, and repairs are explicit with `memi doctor --repair-plugin`. The default packaged Figma plugin disables raw JavaScript execution; agents should use typed memi Figma tools, MCP tools, suite recipes, and local commands that the user can inspect. ## Registry workflow After diagnosis, the registry loop is simple: publish the improved design system, mirror shadcn-native registry files, install real components anywhere, then keep the registry updated as the source changes. ### Existing app/CSS -> tokens -> shadcn registry ```bash npm i -g @memi-design/cli memi tokens --from ./src --report memi shadcn doctor memi shadcn export --out public/r memi publish --name @you/ds memi add Button --from @you/ds ``` Point memi at `src/`, `app/globals.css`, a built CSS file, `http://localhost:3000`, or a public URL. ### Published registry -> shadcn/v0/AI editors ```bash # Install through shadcn directly npx shadcn@latest add https://cdn.example.com/r/button.json # Use the same registry as AI design-system context memi shadcn serve --from @you/ds # Install through memi when you want alias/package/URL/GitHub resolution memi registry install Button --from @you/ds ``` ### Figma -> npm -> shadcn app ```bash npm i -g @memi-design/cli # Publish your Figma file to npm npx @memi-design/cli publish --name @you/ds --figma https://figma.com/design/xxx --push # From any project, drop working code in npx @memi-design/cli add Button --from @you/ds # → src/components/memoire/Button.tsx (real working code, not a spec) ``` ### tweakcn -> npm -> shadcn app ```bash npm i -g @memi-design/cli memi theme import ./tweakcn-export.css --name "Acme Theme" memi theme publish "Acme Theme" --package @you/theme memi add Button --from @you/theme ``` A registry bundles tokens (W3C DTCG JSON + Tailwind v4 `@theme` CSS), component specs, and **real generated code** for React / Vue / Svelte. Publishable to npm, GitHub, or any static host. ## Featured registries - `@memoire-examples/starter-saas` — neutral SaaS starter. Install with `memi add Button --from @memoire-examples/starter-saas`. Source: [`examples/presets/starter-saas`](./examples/presets/starter-saas) - `@memoire-examples/docs-blog` — editorial docs/blog kit. Install with `memi add Button --from @memoire-examples/docs-blog`. Source: [`examples/presets/docs-blog`](./examples/presets/docs-blog) - `@memoire-examples/dashboard` — high-contrast analytics dashboard. Install with `memi add Button --from @memoire-examples/dashboard`. Source: [`examples/presets/dashboard`](./examples/presets/dashboard) More examples and the featured fallback catalog live in [`examples/`](./examples/README.md). ### Designed in tweakcn? Publish with memi. [tweakcn](https://tweakcn.com) is the visual theme editor for shadcn/ui. memi now treats tweakcn as a full workflow, not just a publish flag: ```bash # Import from a tweakcn CSS export or share URL memi theme import ./tweakcn-export.css --name "Acme Theme" memi theme import https://tweakcn.com/r/themes/xxx --name "Acme Theme" # Validate, preview, diff, and generate packaged variants memi theme validate "Acme Theme" memi theme preview "Acme Theme" memi theme variants "Acme Theme" # Apply it into the current workspace or publish it to npm memi theme apply "Acme Theme" memi theme publish "Acme Theme" --package @you/theme ``` Theme import handles both Tailwind v3 (`:root { --primary: ... }`) and v4 (`@theme { --color-primary: ... }`) exports, including `:root` + `.dark` multi-mode themes. If you want the one-shot path, `memi publish --theme ` still works. Demo scripts for recording and reuse live in [`docs/DEMOS.md`](./docs/DEMOS.md). No-Figma proof examples live in [`docs/PROOF.md`](./docs/PROOF.md). --- ## Why teams keep memi in the stack Claude Design, Figma Make, Lovable, Bolt, Replit Agent, and v0 are useful for fast first passes. memi is for the part after that first pass, when the output has to survive beyond a single prompt or canvas session. - App builders: strong for creating the first version. memi diagnoses the design debt that shows up once the app is real. - Claude Design and Figma Make: strong for visual exploration. memi keeps the reusable system portable across code, registries, and AI tools. - v0: strong for generating screens and using registries. memi helps infer, improve, and publish the registry from the app you already have. If your team needs better visual quality, versioned tokens, installable components, tweakcn theme packaging, and cross-tool design system context, that is the memi wedge. --- ## Studio interface references and adapted components memi Studio is a desktop-first agent workbench for design runs. Its interface uses Hermes WebUI and Hermes Agent as MIT-licensed references for the transcript-first console, three-pane workbench, event normalization, and supervised local sessions. Studio runs Claude Code, Codex, Hermes, Ollama, OpenCode, Gemini, and memi Native through a shared harness manifest. External coding agents receive a memi design/research envelope before execution, so their runs start from project memory, specs, references, Figma state, accessibility, and Atomic Design rather than a generic coding prompt. The macOS app also has an Agent Kits panel for dry-run planning, installation, and force-refresh of Hermes, OpenClaw, Claude Code, Cursor, Codex, and OpenCode kit targets. `memi studio tui` and `memi studio logs` expose the s … ## Source & license This open-source MCP server is cataloged on AgentStack and links to its original source — we do not rehost the code. - **Author:** [sarveshsea](https://github.com/sarveshsea) - **Source:** [sarveshsea/memi](https://github.com/sarveshsea/memi) - **License:** MIT - **Homepage:** https://memoire.cv Install and usage instructions live in the source repository linked above. ## Pricing - **Free** — Free ## Security capabilities Automated source analysis of v0.1.0 — what this tool can access: - **Network access:** yes - **Filesystem access:** no - **Shell / process execution:** no - **Environment & secrets:** no - **Dynamic code execution:** no *"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.* ## Versions - **0.1.0** — security scan: flagged — Imported from the upstream source. ## Links - Listing page: https://agentstack.voostack.com/l/mcp-sarveshsea-memi - Seller: https://agentstack.voostack.com/s/sarveshsea - Browse the marketplace: https://agentstack.voostack.com/browse --- Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.