mcp-ui: чистый интерфейс чата AI, основанный на протоколе MCP

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

mcp-ui - это проект с открытым исходным кодом, созданный разработчиком machaojin1917939763, построенный на протоколе Model Context Protocol (MCP), представляет собой интеллектуальное чат-приложение, поддерживающее как веб-среду, так и настольные системы. mcp - это Антропология mcp-ui - это открытый протокол, позволяющий моделям ИИ вызывать внешние инструменты и сервисы. mcp-ui объединяет API от OpenAI и Anthropic и предоставляет чистый и современный интерфейс чата. Пользователи могут использовать его для диалога с ИИ и вызова таких функций, как браузер и работа с файлами. Созданный на Vue.js и Electron, проект поддерживает кроссплатформенное развертывание и подходит для разработчиков и энтузиастов ИИ.

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

• Предоставляет чистый и современный интерфейс чата с поддержкой Markdown и подсветки кода.
• адъювант MCP протоколы, ИИ может вызывать внешние инструменты, такие как автоматизация браузера и работа с файлами.
• Совместим с API OpenAI и Anthropic, с возможностью выбора моделей пользователем.
• Позволяет настраивать пользовательские конфигурации, включая ключи API, базовые URL и параметры модели.
• Поддержка добавления пользовательских инструментов для расширения функциональности.
• Доступна версия приложения для настольных компьютеров, совместимая с Windows, Mac и Linux.
• Интеграция внутренних услуг MCP для поддержки работы на местах.

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

mcp-ui - это чат-инструмент с открытым исходным кодом, который пользователи должны развернуть с помощью исходного кода. Ниже приведено подробное руководство по установке и использованию, которое поможет вам быстро начать работу.

Процесс установки

1. Подготовка среды
   Прежде чем приступить к работе, убедитесь, что ваш компьютер соответствует следующим требованиям:
   • Node.js(версия 16.0.0 или выше).
   • npm(версия 8.0.0 или выше).
   • Git (для загрузки кода).
   • Современные браузеры (например, Chrome, Firefox, Safari, Edge последних версий).
   • Поддерживаемые системы для настольных компьютеров: Windows 10+, macOS 10.15+ или Ubuntu 20.04+.
     Убедитесь, что среда готова к работе:

   node -v
   npm -v
   git --version

2. Загрузить исходный код
   Клонируйте код локально, введя в терминале следующую команду:

   git clone https://github.com/machaojin1917939763/mcp-ui.git
   

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

   cd mcp-ui
   

3. Установка зависимостей
   Запустите в каталоге проекта:

   npm install
   

   Это позволит установить необходимые компоненты, такие как Vue.js, Electron и т. д. Процесс может занять несколько минут.

4. Настройка переменных среды
   Скопируйте файл конфигурации примера и отредактируйте его:

   cp .env.example .env
   

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

   VITE_API_KEY=your_api_key_here        # 你的 OpenAI 或 Anthropic API 密钥
   VITE_MODEL_PROVIDER=openai            # 或 anthropic
   MCP_SERVER_PORT=3001                  # MCP 服务端口，默认 3001
   

   Сохраните и закройте файл.

5. запустить приложение
   • Веб-версия::
     Запустите фронт-энд в терминале:

     npm run dev
     

     Запустите бэкэнд MCP на другом терминале:

     npm run mcp:server
     

     Откройте http://localhost:5173 в браузере (порты могут отличаться, см. подсказки терминала).

   • настольная версия::
     Выполните следующую команду, чтобы запустить режим разработки Electron:

     npm run electron:dev
     

     Окно настольного приложения появится автоматически.

6. Создайте производственную версию (необязательно)
   • Веб-версия:

     npm run build
     

     Созданные файлы находятся в папке dist папку, которая может быть развернута на статическом сервере.

   • Настольная версия:

     npm run electron:build          # 构建所有平台
     npm run electron:buildwin       # Windows
     npm run electron:buildmac       # macOS
     npm run electron:buildlinux     # Linux
     

     Результаты сборки доступны в dist_electron Папка.

Основные функции

модель конфигурации

• Откройте приложение и нажмите на значок настроек в правом верхнем углу (⚙️).
• Выберите на панели настроек:
  • Поставщики моделей (OpenAI или Anthropic).
  • Введите ключ API (получите его на официальном сайте OpenAI или Anthropic).
  • Установите базовый URL API (необязательно, по умолчанию подходит).
  • Выберите конкретную модель (например, GPT-4 или Claude).
• Нажмите кнопку Сохранить, чтобы конфигурация вступила в силу.

Использование функции чата

• Введите вопрос или команду в поле ввода внизу.
• Нажмите Enter или нажмите кнопку "Отправить", и ИИ ответит вам.
• Поддерживается форматирование в формате Markdown и выделение кода.
• Пример: введите "Помогите мне узнать погоду в Пекине на сегодня", ИИ вызовет погодный инструмент, чтобы вернуть результат.

Вызов инструмента MCP

• В mcp-ui встроены следующие инструменты:
  • Автоматизация браузера: введите "открыть поиск Google xAI", и ИИ будет управлять выполнением браузера.
  • Погода: введите вопрос "Какая погода в Шанхае" и получите данные в режиме реального времени.
  • Поиск новостей: введите "последние новости технологий", чтобы получить последние материалы.
  • Операции с файлами (настольная версия): введите "read desktop/test.txt", и ИИ выдаст содержимое файла.
• Никаких дополнительных действий не требуется, просто сделайте запрос прямо в чате.

Функциональное управление

Опыт работы с настольными компьютерами

• Настольная версия реализована через Electron и после установки может работать без браузера.
• В настольной версии работа с файлами упрощается благодаря прямому доступу к локальной файловой системе.
• Метод работы такой же, как и в веб-версии, а интерфейс загружается автоматически после запуска.

Инструменты настройки

• компилятор mcp_server.js, добавляя новые инструменты.
• Пример: добавьте инструмент вычисления:

  const tools = [
  {
  name: "calculator",
  description: "简单计算器",
  parameters: {
  type: "object",
  properties: {
  expression: { type: "string", description: "计算表达式，如 2+3" }
  },
  required: ["expression"]
  }
  }
  ];
  

• Перезапустите службу MCP (npm run mcp:server), можно использовать в чате.

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

• Ключи API необходимо хранить должным образом, чтобы избежать утечки.
• Если запуск не удался, проверьте, не заняты ли порты (по умолчанию 5173 и 3001).
• Сборки для настольных компьютеров могут потребовать больше места на диске, чтобы обеспечить достаточное количество системных ресурсов.

Выполнив эти шаги, вы сможете легко развернуть и использовать mcp-ui для взаимодействия с искусственным интеллектом и вызова внешних инструментов.

сценарий применения

1. Персональный ассистент
   Используйте mcp-ui для проверки погоды, поиска новостей или управления файлами, чтобы повысить эффективность повседневной работы.
2. Тестирование разработчиков
   Разработчики могут использовать его для тестирования протоколов MCP и моделей искусственного интеллекта и быстрой проверки эффективности вызовов инструментов.
3. Образовательное обучение
   Студенты или исследователи изучают взаимодействие ИИ с внешними службами с помощью mcp-ui с интуитивным и понятным интерфейсом.

QA

1. Какие модели поддерживает mcp-ui?
   Поддерживаются все API-совместимые модели от OpenAI и Anthropic, а пользователи могут выбрать конкретные модели в настройках.
2. В чем разница между настольной и веб-версией?
   Настольная версия не требует браузера и поддерживает локальные операции с файлами; веб-версия легче и подходит для использования в Интернете.
3. Как добавить новый инструмент?
   модификации mcp_server.jsЗадайте имя и параметры инструмента и перезапустите службу, чтобы она вступила в силу.