Skip to Content
БлогAnt Design Chat: UI-компоненты для чат-ботов и AI-агентов

Ant Design Chat: UI-компоненты для чат-ботов и AI-агентов

Ant Design Chat UI - интерфейс чата с AI-агентом

Официальный сайт: https://x.ant.design/ 

Что такое Ant Design X?

Ant Design X — это библиотека UI-компонентов для React, построенная на базе системы Ant Design и специально разработанная для создания интерфейсов, управляемых искусственным интеллектом. Библиотека предоставляет готовые компоненты для интеллектуальных диалогов и упрощает интеграцию с AI-API, что позволяет быстро собирать современные интерфейсы для AI-приложений.

Основные возможности

Лучшие практики из корпоративных AI-продуктов. Библиотека основана на парадигме взаимодействия RICH, которая обеспечивает качественный пользовательский опыт при работе с AI-системами. Это не просто набор компонентов, а проверенные решения из реальных продуктов.

Гибкие атомарные компоненты. Ant Design X покрывает большинство сценариев диалога с AI, позволяя быстро собирать персонализированные страницы взаимодействия. Каждый компонент можно использовать независимо или комбинировать для создания сложных интерфейсов.

Интеграция моделей из коробки. Подключение LLM-моделей и сервисов агентов происходит легко благодаря встроенному X SDK. Не нужно писать обёртки для API — всё уже готово к использованию.

Богатая коллекция шаблонов. Для быстрого старта разработки LUI-приложений (Language User Interface) предоставляется множество готовых шаблонов, которые можно использовать как основу или вдохновение.

Полная поддержка TypeScript. Библиотека полностью написана на TypeScript и предоставляет детальные определения типов, что улучшает опыт разработки и надёжность кода.

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

Компоненты

Основанные на парадигме взаимодействия RICH, компоненты Ant Design X организованы по этапам взаимодействия и помогают гибко строить AI-приложения для диалогов.

Общие компоненты

  • Bubble — пузырь сообщения
  • Conversations — управление беседами
  • Notification — системные уведомления

Пробуждение (Wake-up)

  • Welcome — приветственный экран
  • Prompts — набор промптов

Выражение (Expression)

  • Sender — поле ввода
  • Attachment — вложения в поле ввода
  • Suggestion — быстрые команды

Подтверждение (Confirmation)

  • Think — процесс размышления
  • ThoughtChain — цепочка рассуждений

Обратная связь (Feedback)

  • Actions — список действий
  • FileCard — карточка файла
  • Sources — цитирование источников
  • CodeHighlighter — подсветка кода
  • Mermaid — инструмент для диаграмм

Прочее

  • XProvider — глобальная конфигурация (тема, локализация и т.д.)

Компонент Prompts

Компонент Prompts отображает предопределённый набор вопросов или предложений, помогая пользователям быстрее начать взаимодействие с AI-агентом. Это важный элемент для улучшения пользовательского опыта, особенно на этапе “пробуждения” (wake-up) диалога.

Prompts решают проблему “пустого экрана” — когда пользователь не знает, с чего начать разговор с агентом. Вместо того чтобы гадать, что можно спросить, пользователь видит список готовых вопросов или предложений, которые помогают понять возможности системы и быстро получить нужный результат.

Компонент особенно полезен для:

  • Быстрого старта диалога с новыми пользователями
  • Демонстрации возможностей агента
  • Предложения популярных или релевантных запросов
  • Улучшения конверсии и вовлечённости пользователей

Prompts компонент - предопределённый набор вопросов для начала диалога

Документация: https://x.ant.design/components/prompts 

Компонент Sender

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

Sender предоставляет удобный интерфейс для ввода сообщений с поддержкой различных функций:

  • Многострочный ввод текста
  • Отправка сообщений (клавиша Enter или кнопка)
  • Интеграция с компонентом Attachment для вложений
  • Поддержка быстрых команд и предложений
  • Адаптивный дизайн для различных устройств

Компонент является центральным элементом интерфейса чата и обеспечивает плавное взаимодействие пользователя с AI-агентом. Он спроектирован с учётом лучших практик UX для диалоговых интерфейсов.

Sender компонент - поле ввода для чата с AI-агентом

Документация: https://x.ant.design/components/sender 

Компонент Conversations

Компонент Conversations используется для переключения между несколькими агентами, обновления хода беседы и управления историей диалогов. Это ключевой элемент для создания мульти-агентных интерфейсов.

Conversations компонент - управление беседами и переключение между агентами

Документация: https://x.ant.design/components/conversations 

Компонент Think

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

Вместо пустого экрана ожидания или простого индикатора загрузки, Think показывает детали процесса рассуждений агента, что значительно улучшает пользовательский опыт и доверие к системе.

Think компонент - отображение процесса размышления AI-агента

Документация: https://x.ant.design/components/think 

Компонент ThoughtChain

Компонент ThoughtChain используется для визуализации и отслеживания цепочки вызовов агента к действиям (Actions) и инструментам (Tools). Это мощный инструмент для отладки и понимания работы сложных AI-агентов.

С помощью ThoughtChain можно увидеть полный путь выполнения задачи: какие инструменты были вызваны, в каком порядке, какие данные передавались между компонентами. Это особенно полезно для:

  • Отладки поведения агентов
  • Объяснения пользователю, как была решена задача
  • Оптимизации производительности системы
  • Обеспечения прозрачности и подотчётности

ThoughtChain компонент - визуализация цепочки вызовов агента к действиям и инструментам

Документация: https://x.ant.design/components/thought-chain 

Компонент CodeHighlighter

Компонент CodeHighlighter предназначен для отображения фрагментов кода с подсветкой синтаксиса. Это незаменимый инструмент для AI-приложений, которые генерируют или отображают код в ответах пользователям.

CodeHighlighter предоставляет:

  • Подсветку синтаксиса для различных языков программирования
  • Функцию копирования кода одним кликом
  • Информацию о языке в заголовке блока кода
  • Интерактивные возможности для работы с кодом

Компонент особенно полезен в сценариях, когда AI-агент генерирует код, объясняет технические решения или предоставляет примеры реализации. При использовании в комбинации с XMarkdown, CodeHighlighter может рендерить блоки кода внутри Markdown-контента, улучшая отображение и интерактивность.

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

CodeHighlighter компонент - подсветка синтаксиса кода с функцией копирования

Документация: https://x.ant.design/components/code-highlighter 

Читай также

Last updated on
Mastra: TypeScript-фреймворк для AI-агентовНормализация 100 млн аудиотреков: Многоэтапный пайплайн с LLM