AIKraft/AI/Поиск…⌘KВойти
Инструменты11 сентября 2026 г., 17:49 МСК🤖 Auto

BoardUI: React-компоненты для AI-агентов с поддержкой MCP

Платформа BoardUI предлагает 62 бесплатных React-компонента для создания интерфейсов AI-агентов. Ключевая фишка — нативная поддержка MCP-серверов для установки через CLI и интеграция с 7+ провайдерами LLM.

AIРедакция AIKraftавто-обзор источников
2 мин чтения·источник: Github
Поделиться
Баннер новости 7282

Что такое BoardUI и почему это важно

BoardUI — это дизайн-система на базе React, созданная специально для агентных интерфейсов (agentic interfaces). В отличие от обычных UI-библиотек, она предоставляет готовые блоки для чатов, логов агентов, индикаторов мышления и панелей управления, которые органично сочетаются с дашбордами. Система использует более 400 семантических токенов для единообразия стилей в светлой и темной темах.

Главное отличие от npm-пакетов: BoardUI работает как источник (source-first). Команда npx boardui add копирует файлы компонентов прямо в ваш проект Next.js. Это дает полную свободу модификации кода без ограничений зависимостей.

Интеграция с AI-провайдерами и безопасность

Репозиторий включает готовое приложение-чат, которое работает с ключами API различных провайдеров. Ключ никогда не передается в браузер, обработка происходит на сервере (Next.js API routes). Поддерживается автоматическое определение провайдера по формату ключа или явная настройка переменных окружения.

Провайдер Формат ключа Модель по умолчанию
Anthropic sk-ant-... claude-haiku-4-5
OpenRouter sk-or-... openai/gpt-5-nano
OpenAI sk-... gpt-5.4-mini
Google Gemini AIza... gemini-2.5-flash
Groq gsk_... llama-3.3-70b-versatile
xAI xai-... grok-4-fast-non-reasoning

Установка через MCP-сервер для AI-кодеров

BoardUI позиционирует себя как agent-native решение. Система включает MCP-сервер, позволяющий таким инструментам, как Claude Code, Cursor, VS Code Codex, автоматически устанавливать компоненты голосом или текстовыми запросами. Например, команда "Install every free BoardUI component" развернет весь каталог, а "Add a data table" добавит только нужные элементы, соблюдая правила из файла AGENTS.md.

Ключевые компоненты интерфейса

Библиотека содержит 62 бесплатных компонента, разделенных на базовые элементы и блоки для приложений. Особое внимание уделено UX-паттернам, специфичным для работы с ИИ:

  • Agent Chat: Чат с потоковой выдачей, индикатором мышления и локальной историей (без базы данных).
  • Agent Log: Визуализация действий агента с эффектом раскрытия текста (reveal ticker) и временной шкалой.
  • Composer Loader: Анимированная оболочка для поля ввода, показывающая, что агент «думает».
  • Data Table: Таблица на базе TanStack с сортировкой и пагинацией.
  • Charts: Карточки с графиками выручки и заказов (Year-over-Year сравнение).

Как начать работу

Для локального запуска требуется Node.js. Процесс включает клонирование репозитория, копирование .env.example в .env.local и добавление API-ключа. Для интеграции в существующий проект Next.js используется CLI:

npx boardui@latest list # просмотр всех компонентов
npx boardui@latest add agent-chat # установка конкретного компонента
npx boardui@latest add --all # установка всего каталога

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

Источник: Github ↗