# memi

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.

- MCP server · `type=mcp` · Claude Code, Codex, Cursor, GitHub Copilot, Windsurf (Devin Desktop), Cline, Zed, Gemini CLI · ★ 48
- Author: memi-design
- License: MIT · policy=link-only · description only; the file stays with the author
- Source: https://github.com/memi-design/memi
- Updated: 2026-10-21
- HTML: https://affpapa.org/en/nevibecode/mcp/memi

## What it 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`.

## Requirements
- Needs: Node.js (commands run via npx)

## Install

### Claude Code (native platform)

**Platform CLI**
```bash
claude mcp add memi -- npx -y @memi-design/cli
```

### Codex

**Platform CLI**
```bash
codex mcp add memi -- npx -y @memi-design/cli
```

### Cursor

**Config file**
File `.cursor/mcp.json`:
```json
{
    "mcpServers": {
        "memi": {
            "command": "npx",
            "args": [
                "-y",
                "@memi-design/cli"
            ]
        }
    }
}
```

### GitHub Copilot

**Config file**
File `.vscode/mcp.json`:
```json
{
    "servers": {
        "memi": {
            "type": "stdio",
            "command": "npx",
            "args": [
                "-y",
                "@memi-design/cli"
            ]
        }
    }
}
```

### Gemini CLI

**Platform CLI**
```bash
gemini mcp add memi npx -y @memi-design/cli
```

## When to use it
- 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
- 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 . --frontend` and list the component-reuse conflicts.
- Run a diagnosis and walk the highest-confidence findings without writing to the project.

## Similar
- [Front-End Checklist](https://affpapa.org/en/nevibecode/mcp/front-end-checklist.md) — MCP server · ★ 74559
- [tldraw](https://affpapa.org/en/nevibecode/mcp/tldraw.md) — MCP server · ★ 51091
- [Figma-Context-MCP](https://affpapa.org/en/nevibecode/mcp/figma-context-mcp.md) — MCP server · ★ 16062
- [mcp-server-chart](https://affpapa.org/en/nevibecode/mcp/mcp-server-chart.md) — MCP server · ★ 4402
- [Dembrandt](https://affpapa.org/en/nevibecode/mcp/dembrandt.md) — MCP server · ★ 3821
- [RevoGrid DataGrid MCP Pro](https://affpapa.org/en/nevibecode/mcp/revogrid-datagrid-mcp-pro.md) — MCP server · ★ 3450

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md