memi — Claude Code MCP server: frontend audit before edits
Maps the UI already in your repo and reports accessibility and design-system problems down to the line. Useful before touching frontend code and at review time.
claude mcp add memi -- npx -y @memi-design/cliWhat memi does
The server inspects a frontend repository and returns findings: accessibility breaks, components built outside the existing design system. Each one points at a file and line, so your agent edits a named spot instead of guessing. Local diagnosis runs on fixed rules — no model call, no API key.
Your coding agent also gets an interface brief: actual exports, props, tokens, component stories. The --frontend mode packs that into a compact JSON response. With --agent-context you hand over a bounded file index rather than the whole repository. The --files flag narrows which findings get reported, though the tree is still walked for aggregate numbers.
Stick to stable 2.7.9 for predictable output. 2.8.0-beta.2 is a beta, not a stable release: managed security scanning and several receipts are still pending, and the 2.8 contract does not apply back to 2.7.9. The first run needs nothing beyond npx.
What it helps with
- locate accessibility issues in an existing UI with file and line evidence
- check whether a new component reuses design-system tokens
- hand the agent a compact frontend brief before an edit
- rerun the same interface check before merge
- catch components that duplicate what the registry already has
Example prompts for the agent
- Audit this frontend before editing. Pick the five changes users will notice most, reuse what the system already has, and confirm the result after the patch.
- Run
agent brief . --frontendand list the component-reuse conflicts. - Run a diagnosis and walk the highest-confidence findings without writing to the project.
How to install memi
Platform CLI
claude mcp add memi -- npx -y @memi-design/cliPlatform CLI
codex mcp add memi -- npx -y @memi-design/cliConfig file
{
"mcpServers": {
"memi": {
"command": "npx",
"args": [
"-y",
"@memi-design/cli"
]
}
}
}Config file
{
"servers": {
"memi": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"@memi-design/cli"
]
}
}
}Platform CLI
gemini mcp add memi npx -y @memi-design/cliStep by step, with commands for each platform: How to add an MCP server to Claude Code, Codex, Cursor, VS Code, Gemini CLI and more
Questions about memi
How do I install memi in Claude Code?
Run claude mcp add memi -- npx -y @memi-design/cli.
What does memi do?
It scans a frontend repository for accessibility risks and design-system drift, returning findings anchored to a file and line. It also builds an interface brief your agent can work from while editing.
Do I need an API key or account?
Not for local diagnosis — the rules are deterministic and no model is called. Network access is only needed to pull the package from npm.
