Looba MCP Server

Сервер MCP, который предоставляет ИИ-ассистентам доступ только для чтения к Looba — платформе сообщества для UI-сниппетов и вдохновения в дизайне.

Не требуется API-ключ. Не нужны учетные данные базы данных. Сервер обращается к публичному API Looba через HTTPS.

More info

Дополнительную документацию по MCP, примеры использования и обновления смотрите на looba.dev/mcp.

Related MCP server: shadcndashboard-mcp

Install

npx (no install needed)

npx looba-mcp

npm

npm install -g looba-mcp

pip

pip install looba-mcp

git

git clone https://github.com/looba-snippet/looba-mcp.git
cd looba-mcp
npm install

Все методы требуют установки Node.js 18+ на вашей машине.

Tools

detect_frontend_context

Когда Looba MCP активен, ИИ автоматически вызывает detect_frontend_context в начале сессии. Он ищет сигналы фронтенда:

• Зависимости — React, Vue, Svelte, Next.js, Angular, Astro, Remix, SolidJS, Gatsby, Lit, Preact…

• Конфигурационные файлы — vite.config.ts, tailwind.config.js, next.config.js, angular.json, astro.config.mjs…

• Расширения файлов — .jsx, .tsx, .vue, .svelte, .astro в src/, app/, pages/, components/

Если обнаружен фронтенд-проект, ИИ по умолчанию использует Looba для любого запроса UI-компонента — вместо написания кода с нуля.

Local vs remote servers

Инструмент принимает два необязательных входа:

Это важно, потому что Looba MCP также размещается удалённо на mcp.looba.dev. У удалённого сервера нет доступа к вашей файловой системе, поэтому один только directory ничего ему не говорит.

Когда инструмент не может проверить проект, он сообщает ? UNKNOWN и просит вызывающую сторону повторить попытку с packageJson — он никогда не сообщает уверенно «не фронтенд-проект», потому что ложноотрицательный результат незаметно отключил бы Looba.

propose_snippets

Когда пользователь просит UI-элемент, ИИ вызывает propose_snippets вместо немедленного написания кода. Он ищет в Looba и возвращает 3 варианта со ссылками на looba.dev. Пользователь выбирает один (1, 2 или 3), и ИИ интегрирует его через integrate_post.

Пример процесса:

Пользователь: «Добавь анимированный индикатор загрузки в моё React-приложение» → ИИ вызывает propose_snippets с query="loading spinner" и snippet_type="react" → Показывает 3 варианта со ссылками на looba.dev → Пользователь выбирает вариант 2 → ИИ вызывает integrate_post с выбранным slug и контекстом проекта

integrate_post

Инструмент integrate_post предназначен для случаев, когда вы хотите добавить сниппет Looba прямо в свою кодовую базу. Он получает полный код и возвращает его с подробным чек-листом адаптации, чтобы ИИ-ассистент мог:

• Переименовать CSS-классы в соответствии с вашим соглашением об именовании (BEM, camelCase, CSS-модули...)

• Заменить захардкоженные цвета/отступы на ваши CSS-переменные или дизайн-токены

• Конвертировать между фреймворками (ванильный HTML в React JSX, CSS в Tailwind-утилиты...)

• Ограничить область видимости стилей, чтобы избежать конфликтов с вашим глобальным CSS

• Добавить правильные импорты и следовать вашим паттернам компонентов

Пример запроса:

«Используй integrate_post, чтобы добавить сниппет animated-circle-loaders-html-css-10 в мой проект Next.js, который использует Tailwind и CSS-переменные»

ИИ получит сниппет, прочитает контекст вашего проекта и подготовит адаптированный код, готовый к вставке.

Supported snippet types

Setup

Remote MCP URL

Если ваш клиент поддерживает MCP-серверы на основе URL, используйте:

• URL: https://mcp.looba.dev

• Bearer token: не требуется

• Пользовательские заголовки: не требуются

Используйте корневую конечную точку (https://mcp.looba.dev), если ваш прокси явно не сопоставляет другой путь.

Claude Code

Добавьте в .mcp.json вашего проекта или ~/.claude/settings.json:

{
  "mcpServers": {
    "looba": {
      "command": "npx",
      "args": ["-y", "looba-mcp"]
    }
  }
}

Cursor

Перейдите в Настройки > MCP-серверы > Добавить сервер:

• Имя: looba

• Команда: npx -y looba-mcp

Windsurf

Добавьте в ~/.windsurf/mcp.json:

{
  "mcpServers": {
    "looba": {
      "command": "npx",
      "args": ["-y", "looba-mcp"]
    }
  }
}

Using pip or git install

Если вы установили через pip или git clone, используйте looba-mcp или node напрямую:

{
  "mcpServers": {
    "looba": {
      "command": "looba-mcp"
    }
  }
}

Или с git clone:

{
  "mcpServers": {
    "looba": {
      "command": "node",
      "args": ["/path/to/looba-mcp/index.js"]
    }
  }
}

Examples

После подключения вы можете попросить вашего ИИ-ассистента, например:

• «Добавь glassmorphism-карточку в мой проект Next.js» (ИИ предлагает 3 варианта Looba)

• «Мне нужна навбар с анимациями для моего сайта на Tailwind» (ИИ предлагает 3 варианта Looba)

• «Покажи самые популярные CSS-сниппеты на Looba»

• «Найди посты Looba с тегом animation»

• «Получи код поста animated-circle-loaders-html-css-10»

• «Перечисли все посты автора @Frontend-snippet-Bot»

• «Интегрируй сниппет focus-trapped-navigation-controller в мой React-проект с использованием CSS-модулей»

Каждый ответ включает исходный URL, автора и лицензию, чтобы ИИ-ассистенты всегда корректно указывали источник.

Deploying to Cloudflare Workers

mcp.looba.dev работает как Cloudflare Worker. Он предоставляет те же семь инструментов через Streamable HTTP, без сохранения состояния, без Durable Object — инструменты привязаны к сети, поэтому это соответствует бесплатному плану Workers. Ранее он работал как systemd-сервис за nginx на VPS; этот стек был удалён.

Его обеспечивают два файла: worker.js (точка входа fetch) и wrangler.jsonc. index.js используется обоими транспортами и не требует форка.

1. Set the secret — do this first

npx wrangler secret put LOOBA_MCP_TOKEN_SECRET

Это не опционально. propose_snippets создаёт токен, подписанный HMAC, который проверяет integrate_post. Без явного секрета index.js возвращается к randomBytes(32) для каждого процесса — а в stateless-воркере каждый изолят получает свой, поэтому два вызова не могут согласоваться, когда попадают на разные изоляты. Сбой происходит время от времени и сообщает о поддельной «неверной подписи токена».

Подойдёт любая длинная случайная строка, например openssl rand -hex 32.

2a. Deploy from Git (Workers Builds)

Подключите этот репозиторий в панели управления Cloudflare, затем укажите:

После этого каждый push в main вызывает повторное развёртывание.

2b. Or deploy from your machine

npm install
npm run deploy

3. Attach the domain

Добавьте mcp.looba.dev как пользовательский домен на Worker. looba.dev уже находится на nameserver'ах Cloudflare, поэтому изменение DNS не требуется.

Worker отвечает на корневом пути (route: "/" в worker.js), совпадая с существующей конечной точкой. createMcpHandler по умолчанию использует /mcp, поэтому этот параметр нельзя удалять, иначе все существующие клиенты перестанут работать.

4. Verify before switching traffic

npm run dev:worker   # local, needs .dev.vars — see .dev.vars.example

Помимо initialize и tools/list, проверьте пару, которая зависит от общего секрета — создайте токен с помощью propose_snippets, перезапустите Worker, затем используйте его с integrate_post. Если токен по-прежнему проходит проверку после перезапуска, значит, секрет читается из конфигурации, а не генерируется заново для каждого процесса.

License

MIT