Open MCP Client: веб-клиент MCP для быстрого подключения к любой службе MCP.

Общее введение

Открыть MCP Client - это инструмент с открытым исходным кодом, изюминкой которого является то, что он предоставляет веб-клиент MCP (Model Context Protocol), позволяющий пользователям подключаться к любому MCP-серверу для общения в чате без необходимости его установки. Он также поддерживает встраивание функций чата в ваши собственные приложения. Разработанный командой CopilotKit, он сочетает в себе LangChain's LangGraph Технология, проект развернут на платформе Vercel, код размещен на GitHub, а последнее обновление было произведено 10 марта 2025 года. Будь то быстрый тестовый сервер или разработка пользовательских AI-взаимодействий, этот инструмент прост и полезен, особенно для пользователей и разработчиков, которым нравится удобный опыт.

Список функций

• Предоставляет веб-клиент MCP для прямого подключения к любому серверу MCP и общения в режиме реального времени.
• Установка не требуется, а веб-версия функции может быть использована через браузер.
• Поддержка интеграции функции чата в собственное приложение пользователя.
• Используйте технологию LangGraph для создания интеллектуальных агентов, подключаемых к серверным инструментам.
• Открытый исходный код размещен на GitHub и поддерживает просмотр и модификацию.
• Фронт-энд основан на CopilotKit, что обеспечивает синхронизацию интерфейса и состояния.

Использование помощи

Как начать работу с Open MCP Client

Open MCP Client можно использовать двумя способами: либо в качестве быстрого опыта с помощью веб-клиента MCP Client, либо локально развернуть и интегрировать в приложение. Ниже приведены подробные шаги, которые помогут вам начать работу.

1. Использование веб-клиента MCP

Веб-версия является основной функцией Open MCP Client и подходит для быстрого подключения к MCP-серверам без какой-либо установки.

• Шаг 1: Посетите веб-версию
  Откройте браузер и введите адрес:open-mcp-client.vercel.app. Это официальная веб-версия клиента MCP, развернутая командой CopilotKit на Vercel, готовая к работе.
• Шаг 2: Получите URL-адрес сервера MCP
  Вам потребуется действительный URL-адрес сервера MCP. его можно получить через Composio и другие платформы, чтобы получить его. Войдите на сайт Composio, создайте или выберите MCP-сервер и скопируйте его URL (обычно в формате https://example.com/mcp).
• Шаг 3: Подключение к серверу
  В веб-версии интерфейса найдите поле ввода URL (обычно оно находится на видном месте страницы) и вставьте скопированный вами URL сервера MCP; нажмите кнопку "Подключиться", и система попытается установить соединение. После успешного подключения экран чата загрузится в течение нескольких секунд.
• Шаг 4: Начните общаться
  После подключения введите в поле ввода сообщение, например "Какая сегодня погода?" или "Помогите мне написать код", и отправьте его. или "Напишите код для меня", а затем отправьте его. Сервер вернет ответ в режиме реального времени, а интерфейс отобразит содержание диалога, управление простое и интуитивно понятное.

2. Локальное развертывание и интеграция

Если вам нужно запустить его локально или интегрировать функциональность в свой проект, вы можете выполнить следующие шаги по разработке.

• Шаг 1: Клонируйте репозиторий GitHub
  Выполните следующую команду в терминале, чтобы загрузить проект локально:

git clone https://github.com/CopilotKit/open-mcp-client.git

Затем перейдите в каталог проекта:

cd open-mcp-client

• Шаг 2: Настройте переменные окружения корневого каталога
  В корневом каталоге проекта создайте файл .env Документация:

touch .env

Откройте файл и добавьте следующее (заменив его на ваш реальный ключ API):

LANGSMITH_API_KEY=lsv2_...

Этот ключ используется для подключения к сервису LangSmith и может быть получен при регистрации на сайте LangSmith.

• Шаг 3: Настройка переменных среды агента
  входить agent Папка:

cd agent
touch .env

существовать agent/.env добавляется файл:

OPENAI_API_KEY=sk-...
LANGSMITH_API_KEY=lsv2_...

OPENAI_API_KEY берется с сайта OpenAI и используется для поддержки функции агента LangGraph.

• Шаг 4: Установка зависимостей
  Вернитесь в корневой каталог и запустите:

npm install

или используйте pnpm (рекомендуется):

pnpm install

Установите такие зависимости, как CopilotKit и LangGraph. Убедитесь, что Node.js установлен локально (рекомендуется версия 18 или выше).

• Шаг 5: Активируйте режим разработки
  Проект разделен на фронт-энд (/app) и агентов (/agent) из двух частей, рекомендуется подключать их к двум отдельным клеммам:
• Клемма 1 (передняя часть):

  pnpm run dev-frontend
  

• Терминал 2 (агент):

  pnpm run dev-agent
  

или запустить оба с помощью одной команды:

pnpm run dev

После запуска зайдите в http://localhost:3000Вы можете увидеть локальный интерфейс.

• Шаг 6: Проверка соединения и чата
  Введите URL-адрес сервера MCP в локальном интерфейсе (так же, как и в веб-версии) и нажмите Connect. После успешного подключения можно вводить сообщения для проверки функции чата.
• Шаг 7: Интеграция в ваше приложение
  Внешний код находится в /app папку, используя интерфейс управления CopilotKit и синхронизацию состояния. Код агента находится в папке /agent для подключения к серверу на основе LangGraph. Вы можете использовать этот код или обратиться к README.md на GitHub, чтобы изменить интеграцию.

Подробное управление основными функциями

• Веб-клиент MCP
  Веб-версия - это лучшая функция, просто введите URL для подключения. Если соединение не удается, проверьте, правильно ли введен URL или работает ли сервер. Интерфейс управляется CopilotKit для плавной работы.
• Живой чат
  Интерфейс чата поддерживает ввод и отображение ответов в реальном времени, как в веб-версии, так и в локальной. После отправки сообщения агент LangGraph обрабатывает запрос и вызывает серверный инструмент, а результаты отображаются автоматически.
• Отладка и настройка
  Локальная среда выполнения, доступны инструменты разработчика браузера (F12) для просмотра журналов и сетевых запросов. Код с открытым исходным кодом, может быть изменен /app в стиле внешнего интерфейса, или настройте /agent Логика прокси в

предостережение

• Веб-версия зависит от Интернета, поэтому скорость отклика сервера может зависеть от Интернета.
• Для локального развертывания необходимо правильно настроить ключ API, иначе агент не будет работать.
• Проект часто обновляется, поэтому рекомендуется регулярно использовать git pull Получите последнюю версию.

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