Главное Авторские колонки Вакансии Вопросы
Выбор редакции:
😼
Выбор
редакции
Макс Олимпов Макс Олимпов 435 0 В избр. Сохранено
Авторизуйтесь
Вход с паролем

MCP-агент: Забудьте всё, что вы знали об LLM. Это — новый уровень

Перед вами MCP протокол — умный инструмент, который может рассуждать, создавать тексты и решать интеллектуальные задачи. Но что, если дать ему возможность «видеть» веб-страницы, рисовать дизайны или анализировать ваши файлы?
Мнение автора может не совпадать с мнением редакции

Введение: Что такое MCP и зачем он нужен?

MCP (Model Context Protocol) — это открытый протокол, разработанный компанией Anthropic, который позволяет языковым моделям, таким как Claude, подключаться к внешним инструментам и источникам данных. Представьте, что у вашего искусственного интеллекта появились «руки и ноги», которыми он может дотянуться до других программ и сервисов.


Простыми словами, MCP — это своеобразный «мост» между AI-ассистентом и внешним миром. Этот мост дает Claude возможность:

  1. Искать актуальную информацию в интернете
  2. Анализировать документы на вашем компьютере
  3. Создавать дизайны в программах вроде Figma
  4. Взаимодействовать с базами данных
  5. Автоматизировать действия в браузере
  6. И многое другое!

Если раньше Claude был похож на очень умного, но изолированного собеседника в закрытой комнате, то с MCP он получает «окна и двери» во внешний мир. Он может видеть то, что происходит сейчас, и активно взаимодействовать с другими инструментами.

Проблемы, решаемые MCP:

AI-модели, при всей их впечатляющей мощи, страдают от нескольких ограничений, которые MCP помогает преодолеть:

1. Устаревание информации

Claude знает только то, на чем его обучили до определенной даты. Но мир не стоит на месте! С MCP он может получить доступ к актуальным данным через поисковые системы и веб-скрапинг.

2. Отсутствие доступа к личным данным

Без MCP Claude не видит ваши файлы и не может работать с ними. С MCP он может (с вашего разрешения) читать документы, анализировать код и даже редактировать файлы на вашем компьютере.

3. Изоляция от других программ

Обычно AI-ассистенты работают в изоляции от других инструментов. MCP позволяет Claude «протянуть руку» и взаимодействовать с другими программами — от Figma до PostgreSQL.

4. Ограниченные возможности действия

Без MCP Claude может только генерировать текст. С MCP он может совершать реальные действия — создавать дизайны, скрапить сайты, автоматизировать браузер и многое другое.

Как работает MCP?

MCP устроен по принципу клиент-серверной архитектуры. Представьте, что Claude — это клиент, который может подключаться к разным специализированным «серверам навыков».

Схематично это работает так:

  1. Вы устанавливаете MCP-сервер (например, для веб-скрапинга или работы с Figma)
  2. Claude подключается к этому серверу через специальный протокол
  3. Вы просите Claude выполнить задачу, требующую внешнего инструмента
  4. Claude отправляет запрос соответствующему MCP-серверу
  5. Сервер выполняет действие (например, скрапинг веб-страницы)
  6. Результаты возвращаются Claude, который использует их для формирования ответа


Важный момент: MCP-серверы контролируют доступ к своим ресурсам и поддерживают четкие системные границы для безопасности. Вы всегда должны разрешить использование MCP для конкретного чата, что дает вам полный контроль над тем, к чему имеет доступ A.

Практическое применение MCP в Claude

Благодаря MCP-серверам, Claude превращается из простого текстового помощника в универсальный инструмент. Давайте рассмотрим, что он может делать с их помощью:

1. Работа с файловой системой

С помощью Filesystem MCP, Claude может:

  1. Читать содержимое файлов на вашем компьютере
  2. Анализировать код и документы
  3. Находить файлы по заданным критериям
  4. Создавать новые файлы и папки

Это превращает Claude в помощника для работы с документами и кодом.

2. Веб-скрапинг и анализ сайтов

С Firecrawl MCP, Claude может:

  1. Анализировать содержимое любых веб-страниц
  2. Извлекать данные из сайтов, даже если они используют JavaScript
  3. Сравнивать информацию с разных ресурсов
  4. Клонировать дизайн и структуру сайтов

Это делает Claude мощным инструментом для исследования интернета и сбора информации.

3. Дизайн в Figma

С Figma MCP, Claude превращается в помощника дизайнера:

  1. Создает интерфейсы по текстовому описанию
  2. Редактирует существующие дизайны
  3. Анализирует файлы Figma и комментирует их
  4. Экспортирует изображения из Figma

Достаточно описать словами, что вы хотите увидеть, и Claude воплотит это в визуальный дизайн.

4. Работа с базами данных

Claude может подключаться к базам данных PostgreSQL:

  1. Изучать структуру базы данных
  2. Выполнять запросы только для чтения
  3. Анализировать данные и строить отчеты
  4. Помогать с оптимизацией запросов

Это превращает его в помощника для аналитиков и разработчиков баз данных.

5. Поиск в интернете

С Brave Search MCP, Claude получает доступ к актуальной информации в интернете:

  1. Ищет свежие новости и данные
  2. Находит информацию по конкретным вопросам
  3. Проверяет факты и утверждения
  4. Исследует темы, выходящие за рамки его базовых знаний

Это делает ответы Claude более точными и актуальными.

6. Автоматизация браузера

Через Puppeteer MCP, Claude может:

  1. Автоматизировать действия в браузере
  2. Заполнять формы и нажимать кнопки
  3. Делать скриншоты веб-страниц
  4. Тестировать веб-приложения

Это превращает его в инструмент автоматизации и тестирования.

Как подключить MCP к Claude

Подключение MCP-серверов различается в зависимости от того, каким интерфейсом Claude вы пользуетесь. Рассмотрим основные варианты:

Подключение в Claude Desktop


  1. Найдите или создайте файл конфигурации claude_desktop_config.json. На MacOS он обычно находится по пути ~/Library/Application Support/Claude/claude_desktop_config.json.
  2. Добавьте в него настройки MCP-сервера в следующем формате:


  1. Сохраните файл и перезапустите Claude Desktop.
  2. При первом использовании MCP в чате, Claude попросит вашего разрешения на использование сервера.

Например, для подключения сервера файловой системы конфигурация будет выглядеть так:


Давайте проверим работоспособность, сделав 1 пример.

Теперь вы можете взаимодействовать с файлами на вашем компьютере с помощью Claude. Примеры команд:

  1. Создание файла: «Создай файл ’Заметки.txt’ в папке ’Документы’ с текстом ’Мои заметки’.»


  1. Поиск файлов: «Найди все файлы с расширением ’.docx’ в папке ’Работа’.»


  1. Чтение содержимого файла: «Покажи содержимое файла ’Список дел.txt’ с рабочего стола.»


При выполнении таких команд Claude будет взаимодействовать с MCP-сервером, который, в свою очередь, обращается к вашей файловой системе для выполнения запрошенных операций.

Подключение в Claude Code

Claude Code предлагает более удобный интерфейс командной строки для управления MCP-серверами:

Откройте терминал и используйте команду claude mcp add:


Например, для подключения доступа к файловой системе:


Вы можете указать область видимости сервера с помощью флага -s

Чтобы увидеть список всех установленных серверов, используйте команду:


Подключение в Cursor

Cursor предлагает графический интерфейс для настройки MCP-серверов:

  1. Откройте настройки Cursor (Settings).
  2. Перейдите в раздел MCP Servers.
  3. Нажмите «Add New MCP Server».


  1. Введите необходимые данные для сервера (название, команду и аргументы).


  1. Сохраните настройки.

Кейс-разбор 1 — используем Firecrawl

Firecrawl — это мощный MCP-сервер для веб-скрапинга, который позволяет Claude анализировать веб-страницы и извлекать из них информацию. В отличие от простых инструментов скрапинга, Firecrawl может работать с сайтами, использующими JavaScript для отображения контента.

Установка Firecrawl MCP

Шаг 1: Получение API-ключа Firecrawl

  1. Зарегистрируйтесь на сайте Firecrawl (https://www.firecrawl.dev/)
  2. После регистрации перейдите в дашборд, где вы найдете свой API-ключ.
  3. Скопируйте этот ключ, он начинается с «fc-».

Шаг 2: Установка Firecrawl MCP

Для Claude Code

Откройте терминал и выполните следующую команду:


Замените fc-YOUR_API_KEY на ваш настоящий API-ключ Firecrawl.

Если вы используете Windows и сталкиваетесь с проблемами, попробуйте:


Для Claude Desktop, добавьте следующий блок в ваш файл


Шаг 3: Проверка установки

Чтобы убедиться, что сервер успешно установлен, выполните:


Вы должны увидеть «firecrawl» в списке доступных серверов.

Для Cursor процесс установки еще проще:

  1. Откройте Cursor
  2. Перейдите в Settings → MCP Servers
  3. Нажмите «Add New MCP Server»
  4. Введите имя (например, «firecrawl-mcp»)
  5. В поле Command введите: env FIRECRAWL_API_KEY=fc-YOUR_API_KEY npx -y firecrawl-mcp
  6. Сохраните настройки

Использование Firecrawl с Cursor

Теперь, когда Firecrawl установлен, вы можете использовать его для различных задач. Вот несколько практических примеров:

Пример 1: Анализ новостного сайта

Попробуйте попросить Cursor:

«Используя Firecrawl, проанализируй главную страницу сайта ria.ru и расскажи, какие основные новости сегодня в топе.»


Cursor подключится к Firecrawl MCP, который загрузит страницу, проанализирует ее содержимое и вернет список главных новостей. При этом Claude сможет извлечь заголовки, краткое содержание и, возможно, изображения.

Пример 2: Сравнение цен на товары

Попросите Cursor:

«С помощью Firecrawl, найди цены на MacBook Pro M2 1TB. Составь таблицу с ценами и доступностью»


Cursor использует Firecrawl для посещения каждого сайта, извлечения информации о ценах и доступности, а затем представит результаты в виде удобной таблицы.

Пример 3: Клонирование структуры веб-сайта

Более сложный пример — клонирование веб-сайта:

«Используя Firecrawl, проанализируй структуру и дизайн лендинг-страницы сайта yandex.ru/pogoda и создай HTML/CSS код для подобной страницы с прогнозом погоды.»


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

Технические особенности Firecrawl

Firecrawl обладает рядом преимуществ по сравнению с обычными скраперами:

  1. JavaScript-рендеринг: может работать с сайтами, которые генерируют содержимое через JavaScript
  2. Автоматические повторные попытки: если сайт временно недоступен, Firecrawl автоматически повторит запрос
  3. Экспоненциальный механизм отката: увеличивает время между повторными попытками для избегания блокировок
  4. Пакетная обработка: может обрабатывать несколько URL одновременно
  5. Мониторинг использования кредитов: отслеживает использование API для предотвращения перерасхода
  6. Фильтрация содержимого: позволяет указать, какие теги HTML включать или исключать

Кейс-разбор 2 — используем Figma

Figma MCP — это сервер, который позволяет Claude взаимодействовать с популярной платформой для дизайна Figma. С его помощью AI может создавать и редактировать дизайны, просматривать существующие файлы Figma и даже экспортировать изображения

Установка Figma MCP

Существует два подхода к использованию Figma MCP.

  1. Плагинный подход: позволяет Claude создавать дизайны с нуля через плагин Figma
  2. API-подход: позволяет работать с существующими файлами Figma без открытия самого приложения

Шаг 1: Получение API-ключа Figma (для API-подхода)

  1. Войдите в свой аккаунт Figma.
  2. Нажмите на свое имя в левом верхнем углу и выберите «Settings» (Настройки).
  3. Перейдите на вкладку «Security» (Безопасность).
  4. Создайте новый личный токен доступа с разрешениями для «File content» и «Comments».
  5. Скопируйте этот токен — он будет нужен для настройки MCP-сервера.

Шаг 2: Установка Figma MCP в Claude Code

Для установки сервера с помощью npx выполните следующую команду:


Если вы хотите использовать API-подход, добавьте ваш API-ключ:


Для Claude Desktop добавьте следующий блок в ваш файл claude_desktop_config.json


Для API-подхода конфигурация будет выглядеть так:


Шаг 3: Настройка плагина Figma (только для плагинного подхода)

  1. Откройте Figma и перейдите в меню → Plugins → Development → Import plugin from manifest...
  2. Выберите файл figma-plugin/manifest.json из репозитория claude-figma-mcp.
  3. Теперь плагин должен быть доступен в меню плагинов Figma.

Использование cursor-talk-to-figma-mcp с Cursor

После настройки Figma MCP вы можете использовать его с Cursor для различных задач дизайна. Вот несколько интересных примеров:

Пример 1: Создание прототипа страницы входа в Instagram на телефоне

Попросите Cursor:

«Используя cursor-talk-to-figma-mcp, создай прототип страницы входа в Instagram на телефоне. Прототип должен быть современным, минималистичным и интуитивно понятным. Включи в дизайн элементы: поля для ввода логина и пароля, кнопку входа, а также дополнительные ссылки для восстановления пароля и регистрации.»



Cursor подключится к cursor-talk-to-figma-mcp и создаст прототип согласно вашим указаниям. Вы увидите, как он постепенно добавляет и настраивает элементы пользовательского интерфейса в Figma.

Пример 2: Создание экрана приложения

Попросите Cursor:

«С помощью Figma MCP, создай экран входа для мобильного приложения. Экран должен содержать логотип вверху, поля для ввода email и пароля, кнопку ’Войти’ и опцию ’Забыли пароль’.»


Cursor создаст дизайн экрана входа в соответствии с вашими инструкциями

Возможности cursor-talk-to-figma-mcp

Cursor-talk-to-figma-mcp предоставляет следующие инструменты:

GitHub репозиторий

Документ и выбор

  1. get_document_info — Получить информацию о текущем документе Figma.
  2. get_selection — Получить информацию о текущем выборе.
  3. get_node_info — Получить подробную информацию о конкретном узле.
  4. get_nodes_info — Получить подробную информацию о нескольких узлах, указав массив идентификаторов узлов.

Создание элементов

  1. create_rectangle — Создать новый прямоугольник с указанием положения, размера и необязательного имени.
  2. create_frame — Создать новый фрейм с указанием положения, размера и необязательного имени.
  3. create_text — Создать новый текстовый узел с настраиваемыми свойствами шрифта.

Изменение текстового содержимого

  1. set_text_content — Установить текстовое содержимое существующего текстового узла.

Стайлинг

  1. set_fill_color — Установить цвет заливки узла (RGBA).
  2. set_stroke_color — Установить цвет и толщину обводки узла.
  3. set_corner_radius — Установить радиус угла узла с возможностью управления каждым углом.

Макет и организация

  1. move_node — Переместить узел на новое место.
  2. resize_node — Изменить размер узла с новыми размерами.
  3. delete_node — Удалить узел.
  4. clone_node — Создать копию существующего узла с необязательным смещением позиции.

Компоненты и стили

  1. get_styles — Получить информацию о локальных стилях.
  2. get_local_components — Получить информацию о локальных компонентах.
  3. get_team_components — Получить информацию о компонентах команды.
  4. create_component_instance — Создать экземпляр компонента.

Экспорт и расширенные возможности

  1. export_node_as_image — Экспортировать узел как изображение (PNG, JPG, SVG или PDF).
  2. execute_figma_code — Выполнить произвольный код JavaScript в Figma (использовать с осторожностью).

Управление подключением

  1. join_channel — Присоединиться к определённому каналу для общения с Figma.

Где искать MCP-сервера

Экосистема MCP постоянно расширяется, появляются новые серверы с различными возможностями. Вот основные места, где можно найти MCP-серверы:

1. MCP.so

MCP.so — это специализированная платформа, которая собирает и организует сторонние MCP-серверы. Этот сайт служит центральным каталогом, где пользователи могут находить, делиться и узнавать о различных доступных MCP-серверах для AI-приложений.

На сайте представлены серверы с подробным описанием функциональности, инструкциями по установке и примерами использования.

2. GitHub

Многие MCP-серверы распространяются через GitHub. Вы можете найти их, выполнив поиск по ключевым словам «mcp server claude» или «model context protocol». Некоторые популярные репозитории включают:

  1. claude-figma-mcp: MCP-сервер для работы с Figma
  2. deepseek-claude-MCP-server: сервер для улучшения рассуждений Claude
  3. mcp-server-firecrawl: сервер для веб-скрапинга
  4. figma-mcp: альтернативная реализация для работы с Figma

3. Smithery

Smithery — это инструмент, который упрощает установку MCP-серверов. Он автоматизирует процесс настройки, что особенно полезно для начинающих пользователей. Пример команды для установки сервера с помощью Smithery:


Заключение

MCP-серверы — это революционная технология, которая значительно расширяет возможности Claude и других языковых моделей. Они превращают AI из пассивного собеседника в активного помощника, способного взаимодействовать с внешним миром и использовать различные инструменты.

Благодаря протоколу MCP, Claude, Claude Code и Cursor может:

  1. Искать актуальную информацию в интернете
  2. Анализировать веб-страницы и извлекать данные
  3. Создавать дизайны в Figma
  4. Работать с файлами на вашем компьютере
  5. Взаимодействовать с базами данных
  6. Автоматизировать действия в браузере

Хотя настройка MCP-серверов может показаться сложной для неопытных пользователей, результаты определенно стоят затраченных усилий. С каждым новым MCP-сервером, который вы подключаете, возможности Claude расширяются, открывая новые сценарии использования.

Важно помнить о безопасности при использовании MCP — всегда проверяйте источники серверов, которые устанавливаете, и внимательно следите за разрешениями, которые вы предоставляете AI-ассистенту. MCP предоставляет Claude доступ к внешним ресурсам, поэтому контроль доступа критически важен.

В ближайшем будущем мы, вероятно, увидим еще больше инноваций в этой области — новые MCP-серверы, более простые способы их настройки и более тесную интеграцию между AI и различными инструментами и сервисами. Экосистема MCP только начинает формироваться, и у нее огромный потенциал для трансформации того, как мы взаимодействуем с искусственным интеллектом.

Если вы хотите разобраться, как работать и с другими инструментами ИИ для создания крутого контента, советую курс «Нейросети: быстрый старт». Не бойтесь экспериментировать! Подключите несколько MCP-серверов к вашему Claude и посмотрите, как расширяются его возможности. Возможно, вы найдете совершенно новые способы применения AI в своей работе или повседневной жизни.

0
В избр. Сохранено
Авторизуйтесь
Вход с паролем
Комментарии
Выбрать файл
Блог проекта
Расскажите историю о создании или развитии проекта, поиске команды, проблемах и решениях
Написать
Личный блог
Продвигайте свои услуги или личный бренд через интересные кейсы и статьи
Написать
О проекте Проекты Реклама Связаться с редакцией
Редакция team@spark.ruТехническая поддержка help@spark.ruПродвижение adv@spark.ruТелефон +7 495 137-07-07
Учредитель сетевого издания Барабанова.Ю.Б., ИНН 500111143150
Редакционные материалы ООО «Редакция Спарк Ру»
Сообщения и материалы сетевого издания Spark (за исключением авторских колонок) (зарегистрировано Федеральной службой по надзору в сфере связи, информационных технологий и массовых коммуникаций (Роскомнадзор) 27 января 2025 года за номером ЭЛ №ФС77-89031 сопровождаются пометкой «Spark_news» или «Редакция Spark.ru», или «Spark».
Правовая информация Правила пользования сайтом Политика обработки персональных данных Правила рекомендательных технологий

Spark использует cookie-файлы. С их помощью мы улучшаем работу нашего сайта и ваше взаимодействие с ним.