Transcription
Я собрал 30 самых полезных MCP-серверов для вайп-кодинга и хочу ими с тобой поделиться. Я взял не просто готовый список лучших MCP, это вручную отобранная подборка инструментов, в которую я добавил как самые упоминаемые и невероятно полезные MCP, так и те, что только начинают набирать свою популярность. Я разделил их на категории: MCP для дизайна, для разработки, для работы с базами данных, для деплоя фронтенда, бэкэнда и так далее. Это первая часть видео. Вторая будет доступна на моём бусте по ссылке в описании. Меня зовут Станислав Быстрицкий. Я синир фронтенд-разработчик из МТС. Предлагаю начинать.
И первая категория у нас — MCP для проектного менеджмента. Существует множество самых разных MCP, которые позволяют интегрироваться с Jira, с различными трекерами задач. Но я хочу показать тебе чуть более простой, чем GRA, но всё ещё очень эффективный вариант. И называется он LIA. Это сервис, в котором ты можешь вести свои проекты, отслеживать выполнение задач, расставлять приоритеты и так далее. Сейчас покажу, как это выглядит. Вот примерно так. А кто-то его использует даже вместо Roadmap, то есть списка задач, которые нейросеть выполняет по порядку.
Я сейчас создаю расширение для VS Code Cursor, которое позволяет в удобном интерфейсе, как в Figma, управлять окнами браузера и открывать твои проекты, а не прыгая из Cursor в браузер и обратно. Выложу я его абсолютно бесплатно на своём бусте, а скорее всего, про него будет моё следующее видео, поэтому подписывайся на канал и жми на колокольчик, чтобы не пропустить.
Итак, в файлике TODO у нас располагаются доработки, которые я обнаружил в процессе тестирования и дебагинга. Давай попросим оценить приоритет этих задач и добавить их в LIA. И вот, пожалуйста, все наши задачи добавлены в LIA. У каждой есть свой идентификатор, у каждой есть свой, а, приоритет, название, описание, алгоритм решения. Алгоритм достаточно простенький. Возможно, стоило попросить нейросеть записать это в качестве там условных бакрепортов, а, типа ожидаемый результат, фактический результат. Ну и теперь, допустим, когда мы с тобой захотим вот исправить кнопку reset zoom, мы видим, что у неё есть идентификатор VIB7. Можем просто теперь в нейросети написать: "Выполни задачу VIB7 из LIA". Нейронка пойдёт искать данную задачу по её идентификатору, поймёт, что у нас задача с кнопкой reset zoom и пойдёт, а, решать поставленную проблему. В общем и целом, это отличный инструмент для управления задачами внутри проекта, потому что этих задач могут быть сотни. Отлично, продолжим.
Следующая группа — MCP для тех, кто любит симпатичный дизайн. Существует сайт 21st DE, который содержит огромное количество классных компонентов и даже целых блоков, которые ты можешь использовать у себя на сайте. Конечно, ты можешь открыть понравившийся компонент и взять код отсюда напрямую и вручную внедрить его на свой сайт. Но, согласись, намного проще будет просто попросить это сделать нейросеть. И для этого нам понадобится Magic MCP, который позволяет не только устанавливать уже готовые компоненты в свой проект с сайта First Dev, но и создавать полностью новые компоненты на их основе, используя уже существующие решения как референсы.
Ты наверняка знаешь, что дизайн нейросети создают достаточно посредственный, и поэтому в вайп-кодинге очень резко стали популярны библиотеки готовых компонентов. Но в чём проблема? Библиотек много, и каждую нужно подключать по отдельности. Это очень неудобно. Но существует незаменимый инструмент, который объединяет большое количество таких библиотек и позволяет их использовать, не отходя от кассы. Я говорю про SHCN MCP. У меня был ролик про него на этом канале. Если интересно, обязательно потом ознакомься по подсказке или ссылке в описании. С этим MCP тебе только необходимо указать, какой UI-компонент ты хочешь использовать, какую библиотеку ты хочешь использовать. А, и нейросеть всё сделает за тебя. Я люблю даже заставлять нейросеть самостоятельно выбирать подходящие готовые компоненты и блоки из одной или нескольких библиотек в зависимости от моей задачи. И в итоге получается так, что нейросеть верстает твой сайт не с нуля, а уже используя готовые, разработанные и, самое главное, протестированные другими людьми элементы. И это классно.
А если ты хочешь разрабатывать не обычные сайты, а прямо дизайнерские или даже полноценные приложения, чтобы они были удобные, чтобы они решали проблемы твоей целевой аудитории и при этом, чтобы за них не было стыдно, как бы ты, возможно, не хотел, но тебе придётся использовать Figma и работать по дизайн-макетам. Ты можешь продумать и нарисовать дизайн самостоятельно, либо заказать его у специалиста, либо сгенерировать с помощью нейросетей прямо в Figma Make или в Loward. По нему у меня тоже было видео. Всё, что тебе нужно сделать, чтобы сверстать сайт по готовому дизайну — это установить Figma MCP. А, но для установки официального Figma MCP тебе потребуется профессиональный тариф. Поэтому в описании будет ссылка на аналог Fimlin Figma MCP, который работает абсолютно бесплатно. После установки, нажимая правой кнопкой мыши на нужный блок, а, copy link to selection, вот здесь у тебя в буфер обмена падает, а, ссылка конкретно на данный блок или элемент. Вставляй его, а, в чат своего IA-агента и проси сверстать. Figma MCP позволяет нейросети подключаться к твоему макету и разрабатывать сайт практически один в один идентично нарисованному дизайну. Могут быть сложности, если макет нарисовал какой-нибудь стажёр или джуниор и не использовал Auto Layouts, а просто накидывал элементы на холст. Но тут уже кому как повезёт. Вёрстка по макетам — это единственный правильный подход при разработке сложных сайтов и сервисов.
На моём самом полном курсе по вайп-кодингу я учу всем способам вёрстки, но упор делается именно на правильные процессы, которые я внедрил в своей команде и которые позволяют создавать действительно крутые продукты. Курс подойдёт даже новичку, потому что мы идём от простого к сложному. Мы сначала изучаем базу вайп-кодинга и верстаем несложный лендинг. Затем я даю и прямо разжёвываю самую необходимую теорию по бэкенду, проектированию API и фронтенду. В итоге мы с тобой шаг за шагом разработаем полноценный сервис по подписке, который можно будет продавать с админкой, рекурентными платежами и всем функционалом, который может понадобиться в современном веб-приложении. Ты изучишь всё, начиная с того, как генерировать красивый дизайн, заканчивая безопасностью и деплоем на сервер. При желании ты можешь под руководством куратора создать собственный проект вместо курсовой работы. Переходи на лендинг по ссылке в описании, изучай программу. Там же висят отзывы учеников из приватного чата студентов. И я знаю, что ты любишь выгодные предложения. Поэтому в качестве благодарности за то, что ты досмотрел до этого момента, я сгенерировал специальный промокод Boost. Переходи по ссылке в описании, вводи его при оплате и получай скидку в целых 40%. Его действие ограничено, успеют только первые 15 человек.
Итак, с дизайном мы закончили. Переходим к разработке. Начнём с MCP, который позволяет воровать компоненты с любого чужого сайта. Называется он Web to MCP. Сейчас передо мной инструкция по установке. Ссылку на неё я оставлю в описании. В принципе, а, ссылки на все MCP и все сервисы, которые я сегодня показываю, будут в описании под этим видеороликом. Поэтому спускайся, не стесняйся и переходи.
Итак, первым делом тебе необходимо будет установить их браузерное расширение и добавить MCP с помощью специального конфига, который при нажатии на кнопку копируется к тебе в буфер обмена. Вот мы его вставляем, как обычно, в mcp.json, и у нас начинает работать, да, Web to MCP. После этого, находясь на любом сайте, ты можешь нажать на расширение, и у тебя появится возможность выбрать любой элемент на сайте, чтобы его, э, сохранить. Давай выберем какую-нибудь кнопку, допустим, вот эту. Install extension. Можно выбрать не только элемент, но и целый какой-нибудь блок. Готово. Элемент сохранился к нам в профиль, о чём нам сообщает вот это окошко об успехе. И у нас здесь есть идентификатор элемента, скажем так, и инструкция для агента. Скопирую инструкцию для агента. Просто вставлю эту инструкцию в чат своего Cursor и напишу: "Сверстай в файле HTML". Ну что ж, вот таким вот образом у нас теперь выглядит наша кнопка Install Extension. А, давай посмотрим на оригинал. В оригинале у нас зелёный фон, тёмная иконка и тёмный текст. Да. И, по-моему, эффект наведения точно такой же. Да, немного не смотрится, что оно у нас на светлом фоне. Попрошу сделать на тёмном. Давай подождём. Так, вижу, что у нас всё, все изменения применились. И да, теперь кнопка выглядит более приятно, потому что изначально, да, она у нас создавалась под тёмный интерфейс. Отлично. Давай двигаться дальше.
Следующий MCP является одним из самых популярных и часто упоминаемых, но многие о нём почему-то до сих пор не знают. Это Context Set. И ещё я расскажу про его аналог, поэтому не переключайся. А чаще всего нейросети обладают устаревшими знаниями о библиотеках и их документациях. Нейронка может пытаться использовать функции, которые уже являются legacy, небезопасными, либо их вовсе убрали в актуальных версиях библиотек. В базе данных Context Set почти 50.000 тысяч различных документаций, инструментов, которые очень часто обновляются, благодаря чему твоя LLM всегда будет в курсе актуальных изменений, нововведений в используемых библиотеках и, как следствие, будет писать более правильный код.
Но если о Context Set знают почти все, то следующий MCP расхайплен не настолько сильно, но тем не менее очень полезен. Называется он MCP. И если Context Set получает очень много информации, которая не обязательно будет полезна в моменте и тем самым захломляет контекст и съедает драгоценные токены, то MCP получает документацию более элегантно и, по их словам, сокращает расход токенов на 80% благодаря тому, что ищет именно те строки документации, которые нужны твоему IA-агенту. В его базе тоже тысячи фреймворков, инструментов. И поэтому, если ты искал что-то на замену Context Set, обязательно попробуй.
Я уверен, ты в курсе, что без надлежащего контекста большие языковые модели с трудом понимают архитектуру твоего проекта, видя только отдельные файлы, а не общую картину. И благодаря следующему NXMCP твой IA-агент получает карту всего твоего проекта и может переключаться между различными уровнями абстракции от высокоуровневой архитектуры до конкретных деталей реализации. Он позволяет найти и построить взаимосвязи между различными модулями твоей программы. И благодаря этому нейросеть будет гораздо лучше понимать, как разрабатывать тот или иной функционал. Ты можешь спросить у NXMCP, как лучше всего реализовать нужную фичу, чтобы она органично смотрелась в проекте с его архитектурой. Либо ты можешь заставить нейросеть сначала использовать MCP, чтобы получить нужную информацию о проекте, и только после этого приступать к работе. Применений очень много, и давай покажу, как его установить. Установка максимально простая, особенно в Cursor. Ссылка на инструкцию будет опять же в описании. Но в Cursor или в VS Code тебе нужно всего лишь перейти во вкладку со всеми расширениями, ввести NX Console и установить данное расширение. После его установки у тебя в Cursor настройках в разделе с MCP автоматически добавится Extension NX MCP. Всё, больше тебе ничего делать не нужно. Вот, к примеру, я попросил NXMCP проанализировать архитектуру моего проекта. И вот такой результат я получил.
Ещё один способ эффективно управлять контекстом модели — это перейти на разработку на основе спецификаций и использовать соответствующие MCP, а именно OpenS или GitHub Spec Kit. Про последний я недавно записал гайд, в котором подробно рассказал, как его установить и пользоваться, а также разобрал проблемы, с которыми ты можешь столкнуться. Если ты впервые слышишь про спецификации, то, если коротко, суть в том, что ты простым человеческим языком описываешь то, что тебе необходимо реализовать. А нейросеть формирует из этого описания чёткий структурированный технический документ, разбивает задачу на части, анализирует твоё ТЗ на логические дыры и другие несостыковки и при необходимости запрашивает у тебя дополнительную информацию, если ты был недостаточно корректен в своём задании, и после этого приступает непосредственно к реализации, параллельно записывает, что она делает, и сохраняет важную информацию, которая может понадобиться в дальнейшем. И благодаря этим записям, благодаря тому, что важная информация всегда в контексте, LLM проще писать правильный код. Опять же, если заинтересовался, смотри предыдущий ролик, там подробный гайд.
Ещё проще писать правильный код становится нейросети, когда проиндексирована кодовая база. И для поиска нужной строки кода в твоём проекте ей нужно искать не по словам, а использовать семантический поиск и, грубо говоря, находить информацию по смыслу. В Cursor это реализовано нативно из коробки, но если ты используешь VS Code или Codium, и у тебя нет такой привилегии, к сожалению, но ситуацию исправляет Cloud Context MCP. Он позволяет использовать семантический поиск, чтобы находить нужный код среди миллионов строк кода. И несмотря на то, что в названии присутствует Cloud, использовать этот MCP ты можешь с любым другим инструментом, с Codium, Codium, Gemini и так далее. Cloud Context MCP, по словам разработчиков, позволяет сократить количество используемых токенов примерно на 40%. Ну, по крайней мере, так говорят их собственные тесты.
Следующий очень популярный MCP называется Sequential Thinking. И он добавляет любой недумающей модели возможность использовать цепочку рассуждений. На практике это очень помогает в решении каких-то сложных задач, где требуются напрячь нейромозги. В последнее время я пользуюсь им не так часто, потому что использую в работе рассуждающие модели. Но для тех LLM, которые думать не умеют, данный MCP — это просто must have, обязателен к установке. Чтобы запустить процесс размышлений, ты можешь прямо в чате написать: "Сделай мне то-то, то-то, используй sequential thinking" или последовательное мышление. Но чаще всего этого делать не приходится, потому что нейросеть вызывает его самостоятельно, когда сталкивается с тяжёлой задачей. Вот, обрати внимание, у нас пошли мысли. Пользователь просит помочь с задачей. Давай получим задачу. Следующая мысль. Да, он действительно получил задание. Необходимо реализовать сохранение состояния холста. Он понимает у нас структуру проекта. И вот он начинает думать об оптимальном решении, конкретно подходящем под архитектуру этого проекта.
Ну и давай переходить к самому вкусному. Следующие инструменты не вошли в какую-то определённую категорию, но сами по себе являются невероятно полезными. Во-первых, я хочу рассказать тебе про Composio. Это платформа, которая позволит тебе бесплатно интегрироваться с более чем 800 другими сервисами и подключить их в качестве MCP. У этих 800 сервисов доступно более 10.000 инструментов. И давай зарегистрируемся и посмотрим, что там внутри. А вот все эти сервисы, их уже почти 900. И, к примеру, ты в пару кликов можешь подключиться к Google документам и таблицам, отправлять имейлы, отправлять SMS, подключиться к Jira или другому трекеру задач и управлять своими тасками, заводить баги, обнаруженные в процессе вайп-кодинга и помечать исправленное. Меня, к примеру, раздражает, что Codium от OpenAI работает слишком долго и за ним приходится следить, когда он закончит. Поэтому я заставил его слать мне уведомления в Telegram, когда агент завершает работу.
Чтобы установить какой-то инструмент, тебе нужно перейти в раздел MCP configs, а, и нажать на кнопку Create MCP config. Я надеюсь, ты уже выбрал из этого огромного списка инструментов тот, который ты хочешь подключить. Допустим, выберем Telegram. Да, тебе предложат авторизоваться, создать новый конфиг, выбрать возможности, которые ты дашь этому инструменту и нажать на кнопку Create MCP. Почти к каждому инструменту тебе необходимо будет подключать свой аккаунт, подключать свой API-токен. Ну, в принципе, настройка везде одинаковая. Да, жмём Connect. Вставляем в данном случае токен от моего бота, которого я подключу. И, в принципе, после этого у меня всё будет готово. И я должен буду только нажать на название своего MCP. А вот здесь вот иконочка у нас установки, скачивания. Нажимаем на неё, выбираем, а, свой инструмент для разработки, которым мы пользуемся. Копируем ссылку, точнее команду, которую, э, нам выдаёт сервис, и вставляем её в свой терминал. У нас автоматически устанавливается соответствующий MCP-сервер. Вот он у меня установился, но у него достаточно странное название, которое сгенерировалось автоматически. И сейчас я просто изменю его на Telegram MCP. Я только что написал своему Telegram-боту слово "привет" и прошу его найти меня, выдать всю информацию по моему аккаунту, а после этого отправить сообщение "Hello World" с помощью Telegram MCP. Вот он нашёл сообщение "Привет". И вот информация о моём аккаунте: Станислав Быстрицкий, мой никнейм, наличие Telegram Premium, текст сообщения, дата и всё, что нужно.
Если ты заинтересовался и уже пошёл разбираться, то немного погоди, потому что следующий инструмент — это RUOP MCP, который был создан для того, чтобы ты мог без особых проблем, просто попросив об этом в чате, подключаться к любому инструменту в Composio. После добавления MCP нас с тобой попросят в нём авторизоваться. Давай нажму на кнопку Connect. Теперь я, допустим, хочу, чтобы при разработке сайта мой агент искал и использовал бесплатные фотографии с фотостоков. И в одном из предыдущих видео я показывал, как создать собственный MCP для этих целей, и использовал фотосток Pexels. И он, оказывается, уже есть в Composio. Поэтому давай просто попросим в чате подключить Pexels с помощью RUOP MCP. И я здесь же укажу API-токен от данного сервиса, от данного фотостока. Так, подключение к Pexels инициировано. Теперь необходимо авторизоваться. И у нас вываливается даже ссылка на авторизацию. Давай перейдём по ней. Сюда вставился мой API-ключ, который я указывал, кстати, в чате. Давай нажмём Connect account. Так, успешно подключено. Я на самом деле это делаю впервые. Мне было непонятно, что делать после авторизации, как добавить данный MCP в Cursor. И выяснилось, что его добавлять в Cursor не нужно, потому что он уже доступен через данный RUOP MCP. Это ещё сильнее упрощает нашу задачу. И давай попросим что-нибудь сверстать. "Создай страницу test.html на HTML, CSS, JavaScript по продаже музыкальных инструментов, изображение на ID с помощью Pexels". Так, ну и давай посмотрим, что у нас получилось. Так, я вижу, что нейронка нашла нам изображение: акустическая гитара, пианино, барабанная установка, бас-гитара, саксофон. В общем, в принципе, всё то, о чём мы её просили. Интеграция, в принципе, работает достаточно успешно. Если у тебя вдруг возникнут какие-то проблемы, то переходи по ссылке в описании непосредственно в приложение RUOP. И здесь у тебя будут твои интеграции, твои приложения, которые ты используешь. И здесь же ты можешь что-то настроить, поменять ключ API и так далее.
Ну что ж, это была первая половина самых полезных MCP. Во второй части ты познакомишься с MCP для работы с памятью моделей, для упрощения работы с базами данных, для автоматического тестирования твоих сайтов и приложений, автоматического деплоя, как фронтенда, так и бэкэнда. Я знаю, что для многих выложить свой проект — это сильная головная боль, которую, на самом деле, можно вылечить буквально двумя кликами. В общем, вкуснятина. Вторая часть уже доступна на моём бусте по ссылке в описании. Помимо еженедельных эксклюзивных видеороликов, которых ты не увидишь на YouTube, а на бусте тебя будут ждать более продвинутые гайды, чем то, что я тебе даю на YouTube, советы по разработке, фрилансу, а также о том, как продать свой труд. Ну и самое главное — это окружение таких же амбициозных людей. Это деловые знакомства и возможность замутить собственный проект. Совсем скоро я выпущу посты и видео на тему поиска рабочей идеи для твоего стартапа. Отвечу на ваши вопросы, как я 3 года работаю вайп-кодером в MTS Digital. Да, те самые, у которых было яйцо в логотипе. А как только наберётся 100 подписчиков, я увольняюсь из МТС. И после этого, друг мой, будь готов к ещё более интересным материалам. Подписывайся на первый месяц скидка. Буду ждать.