Inspo — MCP-сервер с реальными примерами дизайна для AI-агентов

Inspo — это MCP-сервер, который предоставляет coding-агентам доступ к каталогу реальных веб-сайтов с подробным анализом дизайна. Идея проста: агенты умеют писать код, но не умеют делать хороший UI. Inspo решает эту проблему, давая агентам возможность изучать существующие сайты перед тем, как генерировать собственную разметку.

Проект создан командой Together AI и доступен как hosted-сервер на inspomcp.dev, так и для self-hosted развёртывания.

Что внутри

Каталог Inspo содержит:

• 2320 страниц с 832 реальных сайтов, каждая снимается на desktop и mobile. Для каждой страницы извлекается палитра, шрифты, технологический стек и fold-by-fold разбор.
• 68 канонических компонентов — heroes, pricing-блоки, футеры, навигации и другие макроструктуры с готовым JSX-кодом.
• DESIGN.md для каждого сайта — семантические роли палитры, типографическая шкала, spacing scale, CSS-переменные, ширина контейнеров.

Все это доступно через 15 инструментов MCP. Ключевой инструмент — recommend(brief), который автоматически подбирает подходящие примеры под описание проекта.

MCP-инструменты

Сервер предоставляет инструменты для:

• recommend(brief) — рекомендует дизайны на основе описания проекта. Композирует несколько других инструментов в один вызов.
• find_similar — семантический поиск по базе сайтов с использованием Together AI embeddings.
• get_design_system(live) — извлекает дизайн-систему из живого URL с SSRF- защитой (публичные хосты, порты 80/443, лимит тела).
• Инструменты для поиска компонентов, просмотра палитр, шрифтов и других параметров.

Tech stack

• TypeScript MCP-сервер с двумя транспортами: stdio через npm и Streamable HTTP через Vercel. База данных не используется — каталог поставляется как статический seed.
• Next.js 16 + Tailwind v4 — галерея для просмотра архива и панель куратора.
• Playwright — capture-воркер для скриншотов desktop/mobile, извлечения палитры, типографики и CSS-переменных. Тегирование и анализ проходят через Together AI.
• Together AI embeddings — семантический поиск и find_similar.

Установка и запуск

Самый простой способ — одна команда для любого клиента:

npx -y inspo-mcp install

Скрипт автоматически определяет клиента (Claude Code, Cursor, Codex, VS Code, Windsurf, Zed, Claude Desktop) и записывает конфигурацию. Флаг --dry-run показывает план без внесения изменений.

Альтернативы:

• Подключение к hosted-серверу: claude mcp add --transport http inspo https://inspomcp.dev/api/mcp
• Self-hosted: клонирование репозитория и pnpm install
• Галерея: pnpm dev и открытие localhost:3000
• Тестирование: pnpm --filter @inspo/mcp test

Пер-client инструкции для Cursor, Windsurf, Zed и Claude Desktop доступны на странице MCP. Инструкция по self-hosted развёртыванию — в DEPLOY.md.

Безопасность

Все инструменты работают в режиме read-only. Единственный путь, обращаемый во внешний мир — get_design_system(live: true) — проходит через SSRF-защиту: только публичные хосты, порты 80 и 443, лимит размера тела, без выполнения JavaScript. Hosted-эндпоинт логирует имя инструмента, успешность и длительность вызова, но не IP-адреса и не текст запросов.

Лицензия и вклад

MIT-лицензия, copyright Together AI and contributors. Скриншоты остаются работой дизайнеров соответствующих сайтов — каждый экран с указанием авторства и ссылкой на источник.

Хотите добавить сайт в архив? Добавьте его URL в apps/worker/src/seed-urls.ts и откройте PR.