# Phonebook

Harvests the @Preview and #Preview declarations already in your Android or iOS repo and builds a static HTML gallery of screens. Useful when a designer needs to see the UI without building the app.

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

## What it does

Phonebook does not ask you for new test code. It reuses the previews you wrote and renders them into cards grouped as component and state, with the grouping inferred from the preview names. The MCP server is the entry point: an agent can diagnose the setup, list components that lack a preview or a dark variant, run the render, and build the site.

Rendering differs per platform. On Android, Roborazzi and ComposablePreviewScanner run on the JVM, so a Linux CI job works without an emulator. On iOS, SnapshotPreviews goes through `xcodebuild test` on a simulator, which means macOS.

Output is a bundle holding `manifest.json` and an `images/` folder. By default `phonebook build` writes `index.html` into that same folder, reusing the images in place; passing `-o` copies everything into a separate site directory instead.

A repo maps to a single site. v1 handles one platform at a time, so an Android bundle and an iOS bundle stay apart. Android Studio's Gemini Agent Mode cannot host it: that integration only takes remote servers over `httpUrl`, while Phonebook runs as a local stdio process. Drive it from Claude or Codex CLI inside the Android repo.

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

## Install

### Claude Code (native platform)

**Platform CLI**
```bash
claude mcp add phonebook -- npx -y @stag-build/phonebook
```

### Codex

**Platform CLI**
```bash
codex mcp add phonebook -- npx -y @stag-build/phonebook
```

### Cursor

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

### GitHub Copilot

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

### Gemini CLI

**Platform CLI**
```bash
gemini mcp add phonebook npx -y @stag-build/phonebook
```

## When to use it
- turn existing previews into a browsable component gallery
- give designers a link to every screen state without an app build
- spot components that never got a preview or a dark variant
- catch Kotlin and Roborazzi metadata mismatches before compilation fails
- produce a static site that opens from a local folder

## Example prompts
- Use the phonebook MCP and create a catalog for my designer
- Check with phonebook which components are missing previews and add them
- Generate a bundle, then build a standalone site directory from it

## Similar
- [mobile-mcp](https://affpapa.org/en/nevibecode/mcp/mobile-mcp.md) — MCP server · ★ 9946
- [mobilerun](https://affpapa.org/en/nevibecode/mcp/mobilerun.md) — MCP server · ★ 9751
- [e2e](https://affpapa.org/en/nevibecode/mcp/e2e.md) — MCP server · ★ 11912
- [XcodeBuildMCP](https://affpapa.org/en/nevibecode/mcp/xcodebuildmcp.md) — MCP server · ★ 6505
- [ShipSwift](https://affpapa.org/en/nevibecode/mcp/shipswift.md) — MCP server · ★ 3244
- [agent-device](https://affpapa.org/en/nevibecode/mcp/agent-device.md) — MCP server · ★ 5149

---
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