mcp-super-app
A local stdio MCP server for Claude Code that automates project scaffolding, skill/guard installation, website creation, image generation/optimization, icon lookup, and self-updates.
Bootstrap projects: one-call skeleton with .gitignore, .editorconfig, .claude settings/hooks/CLAUDE.md/HANDOFF, docs by S/M/L profile, auto-memory; idempotent and also installs a global destructive-command guard if missing.
Install skills: bundles skills into .claude/skills/ (frontend-design, fullstack-architect, humanizer-ru, image) or runs proxied CLIs (ui-ux-pro-max, emil-design-skills); adds gitignore rules and slash commands.
Create websites: build a landing from the bundled 21-section Astro generator with token contract, theme picker, lead-capture templates, validator; or set up a multipage redesign playbook for an existing donor site; both with task tracker and skills.
Install guard: PreToolUse hook that blocks destructive commands (rm, force push, hard resets) globally or per project via safe settings.json merge.
Generate and edit images through OpenRouter: 5 models with measured pricing, aspect-ratio/resolution guidance, reference images for consistency; requires the image skill and saves files locally.
Optimize images with sharp: downscale to max width, convert to webp/jpeg/avif, EXIF rotation, optional srcset widths; returns final dimensions.
Search/fetch icons: lucide and simple-icons, returning exact IDs and raw SVG with optional size/color.
Update the server itself: git pull --ff-only, npm install/build, startup self-checks (outdated build, new version, missing .env keys), and auto-installs its global menu skill.
Click on "Deploy Server".
Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.
In the chat, type
@followed by the MCP server name and your instructions, e.g., "@mcp-super-app Scaffold a new landing page project"
That's it! The server will respond to your query, and you can continue using it as needed.
Here is a step-by-step guide with screenshots.
mcp-super-app
MCP-сервер для Claude Code: собирает рутинные setup-действия (каркас проекта, скиллы, среда сборки лендинга, guard-хук, картинки, иконки) в одну точку входа. Подключил сервер → все инструменты доступны из любого чата обычными tool-вызовами.
Стек: TypeScript + @modelcontextprotocol/sdk, транспорт stdio (локальный сервер,
никуда ничего не отправляет, кроме OpenRouter при генерации картинок).
Установка
Пошаговая инструкция — в INSTALL.md. Она из двух частей: сначала три шага для человека (открыть новый чат в Claude Code — папку выбирать не нужно — и включить режим «Bypass Permissions»), потом готовый текст, который копируется в чат целиком. Дальше агент делает всё сам — определяет систему (macOS или Windows), выбирает папку под сервер, проверяет окружение, скачивает и собирает сервер, подключает его к Claude Code и чинит ошибки по дороге. Разбираться в коде не нужно.
Если сервер уже стоял и нужно просто переустановить — можно короче, одной фразой:
Установи MCP-сервер по инструкции: https://github.com/AndreyTsibin/mcp-super-app-public/blob/main/INSTALL.mdЧто делать, если что-то пошло не так, — там же, раздел «Что делать, если не заработало».
Что умеет сервер целиком — девять инструментов, каталог скиллов, цены на генерацию картинок и типовые маршруты работы — в карте инструментов.
Related MCP server: claudecode-mcp
Требования
Node.js ≥ 20.
Ключ OpenRouter — только для
create_image. Остальные инструменты работают без ключа. Ключ у каждого свой: https://openrouter.ai/keys.
Инструменты
Инструмент | Что делает |
| Разворачивает каркас нового проекта одним вызовом: |
| Ставит скилл в проект: bundled → копия в |
| Единая точка входа для сайтов, режим выбирается параметром |
| Ставит PreToolUse-хук защиты от деструктивных команд ( |
| Единая точка входа для картинок: генерация и редактирование через OpenRouter. Возвращает картинку в чат + сохраняет файл в проект ( |
| Готовит картинки к продакшену (sharp): ресайз до |
| Ищет иконку по английскому слову/концепту в двух наборах: lucide (~2000 generic UI-иконок — wrench, shield, clock…) и simple-icons (~3400 лого брендов — GitHub, HP, Telegram…). Возвращает точные |
| Отдаёт сырой SVG иконки по точному |
| Обновляет сам сервер: |
Меню точек входа живёт в глобальном скилле mcp-super-app — сервер ставит и обновляет
его сам, при каждом старте и после update_server. Вписывать правило в личный CLAUDE.md
не нужно: скилл едет вместе с сервером и одинаков у всех. MCP instructions при этом ужаты
до указателя на скилл плюс короткий фолбэк на случай, когда клиент скилл ещё не подхватил.
Туда же при старте попадают самопроверки: сборка устарела (src/ новее запущенного
dist/ — правки не применились), доступно обновление (в репозитории вышла версия свежее
установленной; проверка через git ls-remote, кэш на сутки, при отсутствии сети молча
пропускается) и не хватает обязательных ключей в .env. Когда обновление есть, оно
становится дополнительным пунктом того же меню точек входа.
Ключ OpenRouter
Нужен, только если будешь генерировать картинки.
cp .env.example .env
# впиши свой ключ: OPENROUTER_API_KEY=sk-or-v1-....env игнорируется git (см. .gitignore). Ключ берётся из .env в корне пакета —
сервер грузит его сам при старте, передавать через конфиг не нужно.
Подключение к Claude Code вручную
Если по какой-то причине не сработал автоматический путь из INSTALL.md.
Сервер подключается глобально, для всех проектов сразу. Регистрация на одну папку — самая частая причина «инструменты были и пропали».
1. CLI (-s user = во всех проектах):
claude mcp add mcp-super-app -s user -- node /абсолютный/путь/к/mcp-super-app/dist/index.js2. Нет команды claude? Так бывает, когда стоит десктопное приложение: оно не кладёт
CLI в PATH. Тогда добавь сервер в корневой ключ mcpServers файла .claude.json в
домашней папке. Этот файл хранит состояние клиента — не перезаписывай его целиком, сними
копию и допиши:
{
"mcpServers": {
"mcp-super-app": {
"command": "node",
"args": ["/абсолютный/путь/к/mcp-super-app/dist/index.js"]
}
}
}Путь обязательно абсолютный — ~ и относительные не разворачиваются, конфиг
глобальный. На Windows это C:\\Users\\Имя\\mcp-super-app\\dist\\index.js
(в JSON обратные слэши экранируются, как здесь).
Домашнюю папку узнавай командой node -e "console.log(require('os').homedir())", а не по
~: на Windows с рабочим или доменным профилем домашняя папка часто лежит на сетевом
диске, и конфиг, записанный по ~, ложится мимо приложения. Ту же запись внутри ключа
projects клиент применит только к одной папке — как и файл .mcp.json в корне проекта.
Проверить, что получилось: claude mcp list — сервер должен быть в списке и подключён.
Обновления — через агента, в консоль лезть не нужно. Сервер при старте сам смотрит,
не ушла ли ветка в origin вперёд, и если ушла — говорит об этом в начале сессии. Дальше
достаточно сказать Claude Code «обнови сервер»: тул update_server сделает git pull,
при необходимости переустановит зависимости, пересоберёт и попросит перезапустить
приложение. Руками то же самое: git pull && npm install && npm run build в папке
репозитория + перезапуск.
Что сервер проверяет при старте. Три вещи, и о каждой он молчит, пока всё в порядке:
вышло ли обновление — сравнивает твою копию с origin по свежему тегу версии;
собран ли он из текущих исходников — если обновиться руками (
git pull) и забытьnpm run build, сервер продолжит работать по старому коду, а правки будут выглядеть как «не применились»;заданы ли в
.envобязательные ключи — обновление может добавить новый ключ, и без этой проверки ты бы упёрся в ошибку инструмента, которая выглядит как его поломка. Какие ключи обязательны, написано в.env.example: обязателен каждый, у которого нет пометки# optional.
Проверки безопасны и результат обновления кэшируется на сутки: нет сети, git или файлов —
сервер просто стартует молча. update_server отказывается работать, если в папке сервера
есть незакоммиченные правки — чужую работу он не трогает.
После подключения перезапусти Claude Code.
Разработка
npm install
npm run build # компиляция TS → dist/
npm run dev # tsx watch — запуск из src/ без сборки
npm run typecheck # tsc --noEmit
npx @modelcontextprotocol/inspector node dist/index.js # ручная проверка туловТочка запуска сервера — dist/index.js (stdio).
Структура
src/
├── index.ts # точка входа: регистрация tools + stdio transport, загрузка .env
├── lib/ # общая инфра: openrouter, scaffold, project-slug, errors, settings-merge, …
└── tools/ # по модулю на инструмент
assets/ # статические шаблоны: skills/, bootstrap/, landing/, guard/
docs/ # спеки и стандарты (архитектура, API)Договорённости и рабочий метод — в .claude/CLAUDE.md.
Правки и баг-репорты
Этот репозиторий — зеркало. Разработка идёт в приватной копии, а сюда src/, assets/
и docs/ приезжают побайтово при каждом релизе, вместе с удалением лишнего. Поэтому
любая правка, сделанная здесь напрямую — коммитом в main или мержем pull request, —
живёт до следующего релиза и затем молча исчезает.
Что это значит на практике:
Нашёл баг — заведи issue. Это рабочий канал, читается.
Pull request тоже можно — он полезен как баг-репорт с готовым патчем, и разбирать его так и будут. Но смержен он не будет: правка переносится в приватную копию, выходит релизом, а PR закрывается со ссылкой на версию, в которой она приехала. Это не отказ, просто иначе она не выживет.
Ставить сервер форком не нужно — обновления приходят через
update_server, ему нужен обычный клон.
Available Tools
8 toolsbootstrap_projectBootstrap projectA
Materialize a new project skeleton in one call: .gitignore, .editorconfig, .claude/ (settings, hook, CLAUDE.md, HANDOFF), docs/ by profile (S/M/L), and Auto-memory (work-protocol, product-vision, docs-protocol, MEMORY.md). On M/L profiles also installs the fullstack-architect skill (idea → PRD/ARCHITECTURE/PLANNING/TASKS); S skips it and goes straight to code. The report's next_steps then hands you the remaining skill catalog (frontend-design, humanizer-ru, image, ui-ux-pro-max, emil-design-skills) with a one-line description each — judge from the brief's stack/vision which ones this project actually needs, and offer that pick via AskUserQuestion (mark your recommendations) rather than installing the whole catalog by default. Also checks for the global destructive-command guard (~/.claude, same as install_guard target=user) and installs it only if missing — idempotent, never calls install_guard again once it's there. Idempotent: existing files are never overwritten. Collect the brief (name/stack/profile/vision) in chat first, then call. Note: .claude/ settings/hooks and installed skills load only at session start — if working inside the new project right away, ask the user to restart the session.
Inputs: name (required), stack (required), vision (required), profile (required), +1 more. Returns: guard, created, skipped, memory_dir, +3 more
create_imageCreate imageA
Generate or edit image(s) via OpenRouter and save them into the project, returning the image inline in chat plus the saved paths and the measured cost. MANDATORY FIRST STEP: the prompt must be written with the bundled 'image' skill — each model needs its own prompt syntax, and Seedream in particular treats comma-separated tags as an anti-pattern. The tool refuses to generate when the skill is missing from the project (it installs it and tells you to read .claude/skills/image/SKILL.md from disk, then call again) or when prompt_source is empty. Default model is Seedream 4.5: $0.04 flat, up to 7.5MP, best prompt adherence — control framing with aspect_ratio and do NOT pass size (that only lowers the resolution for the same price). Seedream covers essentially every task; read the model description before picking anything else, it carries a measured decision table. EDITING: pass the source image via reference_images (local paths or URLs) plus an instruction in the prompt ('remove the sign', 'make the background lighter'); every image model here accepts image input. Name what must stay unchanged explicitly ('keeping its pose unchanged') — that is the vendor-documented way to avoid drift. Mask-based inpainting is NOT supported by this endpoint. Sizing is model-specific: Seedream takes aspect_ratio alone; Gemini needs aspect_ratio + resolution:'2K'. Files land in save_dir (default ./generated, relative to the project). AFTER GENERATING: raw output here is full-resolution and the wrong format for production — run optimize_images on save_dir before shipping (resize/webp/srcset). In a landing build (create_website kind='landing') this is the mandatory last step of the image stage: generate the whole series first (hero → reference_images for the rest, same 'photoshoot'), then one optimize_images call on assets/img at the end — never optimize between individual generations. Requires OPENROUTER_API_KEY in the server .env.
Inputs: prompt (required), prompt_source (required), n, seed, +9 more. Returns: cost, count, model, paths, +1 more
create_websiteCreate websiteA
Set up a website project and hand back a task tracker. One entry point, two flows — pick with kind:
• kind='landing' — build from the bundled generator: an Astro project with a 21-section library (Hero, Problems, Steps, Benefits, Cases, Prices, Reviews, FAQ, Contacts… each with layout variants), a token contract (styles/tokens.css) split from project values (styles/theme.css), a theme picker (/themes) and a section playground (/kit), niche-free page skeletons whose copy is [[…]] markers telling the agent what to write, a privacy page, lead-capture templates (public/send.php + public/assets/lead-form.js), docs/ standards and a machine validator (.claude/check-landing.mjs). Runs npm install. Use for a new site with no reference — one page or several.
• kind='multipage' — rebuild an existing third-party site (donor) as an original project: ships the redesign playbook (donor research, single-source-of-truth data, design tokens, the mandatory redesign delta that keeps the result out of duplicate-content filters, routing, acceptance), battle-tested lead-capture code (send.php + lead-form.js, honeypot, consent, server-side IP, rate limit) plus a tracker seeded with the two research sessions. Deliberately ships NO Astro skeleton and NO template: the donor's structure and stack are unknown until session 1 has looked at it, so the skeleton is raised in session 3. Use when the user points at a site to copy/redo.
Both flows install the same five skills the design work leans on (ui-ux-pro-max, frontend-design, humanizer-ru, image, emil-design-skills), write docs/_dev/tracker.md and append a one-task-per-session protocol to the project's .claude/CLAUDE.md. Skill installs are best-effort — a proxied installer with no network lands in skills_failed while the scaffold still succeeds, so read that field: when it is non-empty, next_steps opens with a fix-it-first step and you install those by hand before starting task 1. Idempotent: existing files are never overwritten; the CLAUDE.md block is appended once.
IMPORTANT — kind is the user's decision. If they only said «сделай сайт» without naming a reference site, ask via AskUserQuestion («лендинг с нуля» / «переделать существующий сайт») before calling.
IMPORTANT — after the call, STOP. Installed skills load only at session start: ask the user to restart the Claude Code app/session, and start work from tracker task 1 in the new session. Do not begin building the site in the same session, and do not run the tracker end to end — one task per session is the point.
Inputs: kind (required), project_path (required), name, install_deps. Returns: flow, kind, created, skipped, +8 more
get_iconGet iconA
Fetch one icon's raw SVG markup by exact name from lucide (generic UI icons) or simple-icons (brand logos). Use search_icons first if the exact name/set isn't already known.
Inputs: set (required), name (required), size, color. Returns: hex, set, svg, name, +1 more
install_guardInstall guardA
Install the destructive-command guard (a PreToolUse/Bash hook) globally into ~/.claude (target=user, default) or into a project's .claude (target=project). Copies destructive-guard.sh into .claude/hooks/ and merges the hook into settings.json WITHOUT clobbering existing keys or hooks (idempotent — safe to re-run). The guard blocks irreversible commands (rm, find -delete, truncate/shred, git reset --hard / clean -f / push --force) while allowing safe variants (git rm, --force-with-lease). Requires jq. Restart the Claude Code session to activate. Note: bootstrap_project already checks for the global (target=user) guard and installs it if missing — you normally only need this tool directly for target='project' or to re-check after a manual jq install.
Inputs: target, project_path. Returns: target, protects, warnings, hook_status, +3 more
install_skillInstall skillA
Install a personal skill into a project. Bundled skills are copied into .claude/skills// (idempotent, existing files kept); proxied skills are installed by running their official CLI in the project. IMPORTANT: skills load only at session start — after installing, STOP and ask the user to restart the Claude Code app/session before invoking the skill. Note: .claude/skills/ is gitignored by bootstrap_project — skills are tooling, not project code. manual_only applies to bundled skills only.
Inputs: skill (required), project_path (required), manual_only. Returns: type, skill, invoke, output, +6 more
optimize_imagesOptimize imagesA
Resize and re-encode images for production web use via sharp: downscale to max_width (default 1920, never upscales), convert to webp (default; jpeg/avif available), auto-apply EXIF rotation, optionally emit extra srcset variants (widths → name-.webp). By default the source file is replaced by the optimized output so heavy originals don't leak into production; keep_originals: true preserves them. Accepts files or directories. Returns final dimensions (use them for width/height) and sizes before/after. Typical landing use: generate images into assets/img, then optimize the whole directory in one call.
Inputs: paths (required), format, widths, quality, +2 more. Returns: files, skipped, total_kb_after, total_kb_before
search_iconsSearch iconsA
Search two local icon sets by English keyword/concept: lucide (~2000 generic UI icons — wrench, shield, clock, printer…) and simple-icons (~3400 brand/company logos — GitHub, HP, Telegram…). Use this before get_icon to find the exact name/set to fetch — exact slugs aren't always guessable.
Inputs: query (required), set, limit. Returns: results
Tool Schema Changelog
Recent tool additions, removals, and schema changes observed during successful MCP inspections.
Loading tool schema changelog…
TDQS
Scored across 8 tools
Most tools target distinct resources/actions: project scaffolding, skill/guard installation, image generation/optimization, and icon search/fetch. The only notable overlap is between bootstrap_project and create_website, but their detailed descriptions and specific use cases (generic skeleton vs. landing/multipage website) make them distinguishable.
All tool names follow a consistent verb_noun snake_case pattern: create_image, bootstrap_project, install_skill, create_website, install_guard, optimize_images, search_icons, get_icon. No mixed conventions or stylistic deviations.
With 8 tools, the server is well-scoped. Each tool covers a distinct part of the web development workflow—project setup, skill/guard installation, image creation/optimization, and icon management—without redundancy or bloat.
Core workflows are well covered: project scaffolding (generic and website-specific), skill/guard installation, image generation/editing plus optimization, and icon search/retrieval. Minor gaps include no uninstall/update tools for skills, guard, or projects, but these can be worked around via direct file edits.
Maintenance
Related MCP Connectors
Augments MCP Server - A comprehensive framework documentation provider for Claude Code
MCP server unifying ERPs, CRMs, APIs and knowledge base for Claude, ChatGPT and Gemini.
Hosted MCP server for live public-data APIs and Skills for AI agents.
MCP server that lets your AI assistant build and deploy apps, hosting each one at a live URL.
Related MCP Servers
- AlicenseNot gradedqualityNot gradedmaintenanceAn MCP server that transforms Claude-style skills and resources into callable tools for any MCP-compatible agent or client. It automatically discovers, exposes, and executes scripts from skills organized in local directories or packaged archives.MIT
- AlicenseAqualityBmaintenanceLocal MCP server that wraps the headless Claude Code CLI as MCP tools, providing stateless access to Claude's coding capabilities through prompt-based interactions. It enables users to execute Claude Code commands with various prompt formats and structured outputs directly from MCP clients.3MIT
- AlicenseNot gradedqualityDmaintenanceCreates, manages, and registers custom MCP servers for Claude Desktop. Enables users to generate and configure new MCP servers through natural language.11MIT
- AlicenseAqualityFmaintenanceAn MCP server for coordinating multiple Claude Code sessions across related projects.11MIT