Дата публикации: .
В этой статье рассмотрим, как установить MCP-сервер в Cursor, и узнаем, как можно использовать эту программу для создания пользовательской документации.
Cursor — это современная среда разработки (IDE), внешне похожая на привычный VS Code. Его главное отличие заключается в мощном искусственном интеллекте, который встроен в ядро редактора. С его помощью Cursor становится полноценным ИИ-агентом, который понимает контекст всего вашего проекта, может писать код по описанию, объяснять непонятные строки и выявлять ошибки прямо из чата.
Однако у любой языковой модели (LLM) есть фундаментальное ограничение: по умолчанию, это "мозг", запертый в текстовом окне. Он может читать ваш код и генерировать текст, но он не видит интерфейс, не может заглянуть внутрь запущенных программ и не может нарисовать графическую блок-схему — только написать ее код. Чтобы обойти эти ограничения, ИИ требуются помощники.
Что такое MCP-сервер?
Именно здесь на сцену выходит MCP (Model Context Protocol). Это открытый стандарт, разработанный Anthropic в конце 2024 года, который быстро стал индустриальным стандартом (его уже поддерживают Cursor, ChatGPT, Claude, а для VS Code доступны расширения). Если представить Cursor как "мозг", то MCP — это его "руки и глаза".
Но вместо физических устройств к этому порту подключаются вспомогательные программы, которые называются MCP-серверами. Вы просто добавляете их в настройки редактора. Например, одна такая программа может уметь делать скриншоты экрана, а другая — строить схемы. Когда вы просите ИИ: "Проанализируй этот скриншот" или "Нарисуй блок-схему", он не пытается угадать ответ, а отправляет запрос нужной программе-помощнику. Та выполняет задачу на вашем компьютере и возвращает результат.
Рассмотрим два таких MCP-сервера, которые расширяют возможности Cursor и могут помочь техническому писателю в разработке пользовательской документации:
- vision-bridge — позволяет нейросети видеть и анализировать скриншоты, интерфейсы и изображения.
- mermaid-diagrams — позволяет нейросети превращать запутанные текстовые инструкции в наглядные графические блок-схемы.
Для vision-bridge потребуется API-ключ из Google AI Studio. Создать его можно бесплатно на aistudio.google.com. Работать будем в Windows.
Внимание: ответы, сгенерированные ИИ, требуют проверки перед публикацией!
Обратите внимание: в Cursor действуют лимиты на количество запросов к AI-моделям, особенно на бесплатном тарифе. Если вы используете бесплатный план и исчерпаете месячный лимит, вы увидите сообщение You've hit your usage limit. Чтобы отслеживать текущий расход и оставшиеся запросы, зайдите на страницу cursor.com/dashboard/spending. Это поможет вам планировать работу и избежать неожиданных ограничений.
MCP-сервер vision-bridge
Итак, у вас уже установлен Cursor:
Добавим в него MCP-сервер vision-bridge. В левом меню программы щелкните поле Search (или откройте командную палитру горячими клавишами Ctrl+Shift+P):
Появится окно:
Введите "mcp", в блоке Actions появится ссылка "Open MCPs":
Щелкните ее, откроется окно, в котором нужно нажать кнопку "New MCP Server":
В появившейся панели справа добавьте код:
"vision-bridge": { "command": "npx", "args": [ "-y", "mcp-vision-bridge", "--gemini-key", "..........ваш_ключ.........." ] }
В код вставьте ключ, который вы создали на странице aistudio.google.com.
Результат:
Также файл mcp.json можно отредактировать, открыв его по пути Users - Work - .cursor - mcp.json.
Перезапустите Cursor. Если снова открыть ссылку "Open MCPs", мы увидим готовый к работе сервер vision-bridge:
Проверим его в деле. В левом меню выберите "New Chat" (Ctrl+N), в поле чата закиньте скриншот какого-нибудь интерфейса (перетаскиванием или с помощью иконки "+"). Мы воспользуемся фрагментом интерфейса Dr.Explain:
Впишите в поле запроса текст, мы выбрали такую формулировку:
Используй инструмент vision-bridge. Внимательно изучи этот скриншот интерфейса программы. Составь по нему подробный раздел для "Руководства пользователя". Мне нужны два блока:1. Таблица всех элементов интерфейса (Название поля/кнопки, его тип, и краткое назначение для пользователя).2. Пошаговый логичный алгоритм действий пользователя для успешного заполнения и отправки этой формы. Пиши в официальном стиле документации
Отправьте запрос.
В результате мы получим ответ:
Можно скопировать его в формате Markdown:
Так он выглядит в редакторе кода:
Или скоприровать обычным выделением и вставить в MS Word:
Помните: результаты работы AI-инструментов — это отправная точка, а не финальный ответ. Всегда перепроверяйте код, формулы и фактические данные, особенно если они влияют на принятие решений. В данном случае третий элемент в таблице (Изображение со ссылкой) используется для создания перекрестных ссылок в документе. То же самое и с описанием кнопки "Видео" — встраивает только видео. Таким образом, в сгенерированном описании имеются неточности.
MCP-сервер mermaid
Установим MCP-сервер mermaid.
В меню слева щелкнем Search. В появившемся окне нажмем ссылку "Open MCPs". Если нужная ссылка не отображается в результатах поиска, наберите в поле поиска "mcp".
Нажмите кнопку "New MCP Server":
В открывшейся справа панели отредактируйте код, вставив в него фрагмент:
"mermaid-diagrams": { "command": "npx", "args": [ "-y", "@peng-shawn/mermaid-mcp-server" ], "env": { "CONTENT_IMAGE_SUPPORTED": "false" } }
После этого код должен выглядеть так:
Обратите внимание: в примере выше используется пакет @peng-shawn/mermaid-mcp-server с переменной CONTENT_IMAGE_SUPPORTED: "false". Это рабочий вариант, однако если по какой-то причине он не запускается (например, вы видите ошибку при старте), вы можете использовать альтернативный пакет — mcp-server-mermaid. Он не требует дополнительных переменных окружения и работает аналогичным образом:
"mermaid-diagrams": { "command": "npx", "args": [ "-y", "mcp-server-mermaid" ] }
— после замены перезапустите Cursor, чтобы изменения вступили в силу.
Как и ранее, файл mcp.json можно отредактировать, открыв его по пути Users — Work — .cursor — mcp.json.
Перезапустите Cursor. Если снова открыть ссылку "Open MCPs", мы увидим готовый к работе сервер mermaid:
Проверим его работу. В левом меню выберите "New Chat" (Ctrl+N). В поле чата впишите, например, такой запрос:
Используй инструмент mermaid-diagrams. На основе этого процесса пошагово построй визуальную блок-схему для руководства пользователя. Используй блоки принятия решений (ромбы "Да/Нет")
Также вставьте текст какой-либо инструкции. В качестве примера возьмем текст с ветвлениями:
Процесс настройки интернет-магазина начинается с выбора тарифного плана. Если выбран бесплатный тариф, то доступны только базовые функции, и процесс переходит к настройке товаров. Если выбран платный тариф, то сначала необходимо ввести платёжные данные: если данные корректны, то активируется пробный период на 14 дней, после чего переходим к настройке товаров; если данные неверны, система запрашивает их повторно до трёх попыток, после чего предлагает выбрать другой тариф или завершить настройку. Далее, при настройке товаров, если количество товаров меньше 10, можно добавить их вручную, и процесс завершается; если больше 10, предлагается импорт из CSV-файла. При импорте, если файл имеет правильный формат, товары загружаются и процесс завершается; если формат неверный, выводится сообщение об ошибке и предлагается либо исправить файл, либо вернуться к ручному добавлению. В конце настройки предлагается включить уведомления о заказах: если пользователь соглашается, то запрашивается email для уведомлений, после чего настройка считается завершённой; если не соглашается, настройка завершается сразу.
Отправьте запрос.
Результат:
Чтобы получить изображение, перейдите на сайт mermaid.live. Вставьте в него код, сгенерированный Cursor, предварительно удалив лишние пояснения:
Код, вставленый в поле сервиса mermaid.live:
В панели Actions можно выбрать формат экспорта:
Если что-то не работает, возможно, дело в коде файла mcp.json. Попробуйте такой вариант:
{ "mcpServers": { "vision-bridge": { "command": "npx", "args": [ "-y", "mcp-vision-bridge", "--gemini-key", "YOUR_GEMINI_API_KEY_HERE" // - ваш настоящий API-ключ ] }, "mermaid-diagrams": { "command": "npx", "args": [ "-y", "mcp-server-mermaid" ] } } }
Не забудьте в нем заменить YOUR_GEMINI_API_KEY_HERE на ваш настоящий API-ключ, полученный в Google AI Studio.
Напомним, что в Dr.Explain появился ИИ-ассистент, который поможет вам в работе над базой знаний. Подробнее об этом можно узнать на странице истории версий.
Сегодня мы показали, как использовать MCP-сервер для разработки пользовательской документации. Эти инструменты расширяют возможности Cursor, позволяя делегировать рутинные операции ИИ. Фокусируйтесь на содержании, а не на форматировании или поиске информации. Надеемся, что материал был полезен.