Подключить WikiVibe MCP

Добавьте адрес сервера в настройки MCP или передайте этот промпт вашему AI-агенту.

URL

https://wikivibe.dev/mcp/

Промпт для агента

Подключи MCP-сервер WikiVibe.

URL: https://wikivibe.dev/mcp/
Transport: streamable-http

После подключения выполни tools/list и покажи доступные инструменты.

КомпонентыБесплатно

Rstree

Open-source шаблон из GitHub для набора UI-компонентов, которые можно использовать как основу для интерфейса или собственной библиотеки. Обложка показывает реальный визуальный результат, а исходники доступны в репозитории fireangle/rstree. Основа проекта: A Morden React Tree component library with virtualization, search, and Tailwind CSS support.

ReactTailwind CSSTypeScript

GitHub Открыть страницу

Превью Rstree

Rstree

Открыть демо GitHub

05.07.2026

React Bits

ReactTypeScriptCSSFramer Motion

05.07.2026

SyntaxUI

Next.jsReactTailwind CSSFramer Motion

05.07.2026

UI-компоненты: Ui

Next.jsReactTailwind CSSTypeScriptshadcn/ui

05.07.2026

UI-компоненты: Headlessui

ReactVueTailwind CSSTypeScript

05.07.2026

UI-компоненты: Ui

TypeScriptshadcn/ui

05.07.2026

UI-компоненты: Tweakcn

Tailwind CSSTypeScriptshadcn/ui

05.07.2026

UI-компоненты: React Native Reusables

ReactTypeScriptshadcn/ui

05.07.2026

UI-компоненты: Tablecn

Next.jsTypeScriptshadcn/ui

05.07.2026

UI-компоненты: Konsta

ReactVueTailwind CSSJavaScript

05.07.2026

UI-компоненты: Shadcn Multi Select Component

Next.jsReactTypeScriptshadcn/ui

05.07.2026

UI-компоненты: Chanhdai.com

Next.jsReactTailwind CSSTypeScriptshadcn/ui

05.07.2026

UI-компоненты: Diceui

ReactTailwind CSSTypeScriptshadcn/ui

Подключить WikiVibe MCP

Скопируйте промпт и отправьте его в Codex, Cursor, Claude или другой AI-агент, чтобы подключить WikiVibe MCP и проверить доступные инструменты.

Адрес MCP: https://wikivibe.dev/mcp/Транспорт: streamable-http

prompt.md

Настрой подключение Wikivibe MCP в моём AI-агенте.

Endpoint: https://wikivibe.dev/mcp/
Transport: streamable-http

После подключения проверь доступность инструментов:
- search_design_templates
- get_design_template

Используй каталог готовых макетов Wikivibe как read-only источник для подбора шаблонов, демо, исходников и файлов.

Добавить макет в Manather

Сохраните макет ссылкой на страницу WikiVibe через Add web link. Подключите каталог отдельно через Add MCP server.

1. Сохранить макет

Manather → кнопка «+» → Add web link

URL

https://wikivibe.dev/ru/vibe-design/makety/fireangle-rstree/

Вставьте URL и нажмите Add URL. Manather загрузит название и превью страницы.

Не добавляйте JSON как code snippet: макет сохраняется ссылкой.

2. Подключить каталог как MCP

Manather → кнопка «+» → Add MCP server

Name

WikiVibe Templates MCP

Launch Command

Оставьте пустым

Config JSON

{
  "mcpServers": {
    "wikivibe": {
      "type": "http",
      "url": "https://wikivibe.dev/mcp/",
      "transport": "streamable-http"
    }
  }
}

Notes

Read-only MCP endpoint Wikivibe для поиска готовых UI-шаблонов и карточек шаблонов.
Основные tools: search_design_templates, get_design_template.
Launch Command в Manather оставь пустым: это remote HTTP MCP, весь конфиг лежит в Config JSON.

Заполните поля и сохраните MCP server.

Добавить через AI-агента

В Manather откройте Settings → MCP Server → Enable MCP server. Локальный MCP записывает данные в вашу библиотеку; WikiVibe MCP предоставляет каталог макетов только для чтения.

Manather покажет локальный адрес http://127.0.0.1:4319/mcp и токен.

agent-prompt.md

У меня установлен Manather. Добавь шаблон Wikivibe в мою библиотеку через Manather MCP.

Если Manather MCP недоступен, не выдумывай импорт: попроси меня открыть Manather, включить Settings → MCP Server и дать агенту команду подключения с токеном.

Когда MCP доступен:
1. Создай или найди collection "Wikivibe Templates".
2. Вызови add_web_link:
   - url: https://wikivibe.dev/ru/vibe-design/makety/fireangle-rstree/
   - title: Wikivibe Template: Компоненты: Rstree
   - collection: Wikivibe Templates
   - notes: "Категория: Компоненты.\nOpen-source шаблон из GitHub для набора UI-компонентов, которые можно использовать как основу для интерфейса или собственной библиотеки. Обложка показывает реальный визуальный результат, а исходники доступны в репозитории fireangle/rstree. Основа проекта: A Morden React Tree component library with virtualization, search, and Tailwind CSS support.\nИсточник: https://github.com/fireangle/rstree.\nДемо: https://rstree.pages.dev.\nОбложка: https://cms.wikivibe.dev/assets/683a0db3-d6cd-42bf-8491-12f072a791d0.\nСтек: React, Tailwind CSS, TypeScript.\nТеги: Компоненты, open-source, GitHub, ai, beautiful, fast, react, tailwindcss.\nИспользовать как reference asset: сначала открыть страницу Wikivibe, затем проверить GitHub/source и лицензию."
   - tags: ["wikivibe","vibedesign","template","Компоненты","open-source","GitHub","ai","beautiful","fast","react","tailwindcss"]
3. Вызови set_prompt для добавленного asset:
   "Используй этот шаблон как визуальный UI-референс для Компоненты. Сначала изучи страницу Wikivibe (https://wikivibe.dev/ru/vibe-design/makety/fireangle-rstree/), затем открой исходники (https://github.com/fireangle/rstree) и демо (https://rstree.pages.dev). Не копируй вслепую: адаптируй сетку, состояния, типографику и стек под текущий проект."
4. Если Wikivibe MCP ещё не сохранён, вызови add_mcp_server:
   - name: WikiVibe Templates MCP
   - command: пустая строка
   - configJson: "{\n  \"mcpServers\": {\n    \"wikivibe\": {\n      \"type\": \"http\",\n      \"url\": \"https://wikivibe.dev/mcp/\",\n      \"transport\": \"streamable-http\"\n    }\n  }\n}"
   - notes: "Read-only MCP endpoint Wikivibe для поиска готовых UI-шаблонов и карточек шаблонов.\nОсновные tools: search_design_templates, get_design_template.\nLaunch Command в Manather оставь пустым: это remote HTTP MCP, весь конфиг лежит в Config JSON."
   - collection: Wikivibe Templates
5. Кратко напиши, что добавлено и какие ссылки открыть перед использованием.