Phonebook — MCP-сервер для Claude Code: галерея превью SwiftUI и Compose
Собирает @Preview и #Preview из вашего Android или iOS репозитория в статичный HTML-каталог компонентов с карточками «component / state». Пригодится, чтобы показать дизайнеру интерфейс без сборки проекта на его машине.
claude mcp add phonebook -- npx -y @stag-build/phonebookЧто делает Phonebook
Phonebook переиспользует превью, которые уже лежат в коде. Агент через MCP-сервер проверяет настройку, ищет компоненты без превью или без тёмного варианта, затем запускает рендер и сборку сайта. Готовый бандл — это manifest.json плюс папка images/, а phonebook build кладёт рядом index.html. Каталог открывается прямо с file:// или с любого статического хостинга.
Под капотом на Android работают Roborazzi и ComposablePreviewScanner на JVM, эмулятор не нужен. На iOS рендерит SnapshotPreviews через xcodebuild test на симуляторе, поэтому сборка требует macOS.
Один репозиторий даёт один сайт: v1 одноплатформенная, смешивать Android и iOS в одном бандле нельзя. Android Studio в режиме Gemini Agent не подойдёт, потому что тот подключает только удалённые MCP-серверы по httpUrl, а Phonebook поднимает локальный stdio-процесс — запускайте его из Claude или Codex CLI.
Какие задачи решает
- собрать галерею компонентов из готовых превью без нового тестового кода
- показать дизайнеру экраны в разных состояниях без запуска приложения
- найти компоненты без
@Previewили без тёмного варианта - проверить совместимость версий Roborazzi с версией Kotlin до сборки
- собрать статический сайт, который открывается без установки чего-либо
Примеры запросов агенту
- Подключи phonebook MCP и сделай каталог экранов для дизайнера
- Проверь через phonebook, у каких компонентов нет превью, и допиши недостающие
- Сгенерируй бандл и собери из него статический сайт в отдельную папку
Как установить Phonebook
Командой платформы
claude mcp add phonebook -- npx -y @stag-build/phonebookКомандой платформы
codex mcp add phonebook -- npx -y @stag-build/phonebookФайл настроек
{
"mcpServers": {
"phonebook": {
"command": "npx",
"args": [
"-y",
"@stag-build/phonebook"
]
}
}
}Файл настроек
{
"servers": {
"phonebook": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"@stag-build/phonebook"
]
}
}
}Командой платформы
gemini mcp add phonebook npx -y @stag-build/phonebookПо шагам, с командами для каждой платформы: Как подключить MCP-сервер: Claude Code, Codex, Cursor, VS Code, Gemini CLI и другие
Вопросы о Phonebook
Как установить Phonebook в Claude Code?
Одной командой: claude mcp add phonebook -- npx -y @stag-build/phonebook. Отдельная установка не нужна, сервер запускается через npx.
Что делает Phonebook?
Превращает существующие превью SwiftUI и Jetpack Compose в статичный HTML-каталог с группировкой по компонентам и состояниям. Плюс даёт агенту инструменты для диагностики настройки, анализа покрытия превью и сборки сайта.
Нужен ли эмулятор или Mac для сборки?
Для Android эмулятор не требуется: рендер идёт на JVM. Для iOS сборка проходит на симуляторе через xcodebuild test, поэтому нужен macOS.
