AIKraft/AI/Войти
AIKraft/Skills/Чат UI

Чат UI

Chat UI building blocks for React/Next.js from ui.inference.sh. Components: container, messages, input, typing indicators, avatars. Capabilities: chat interfaces, message lists, input handling, streaming. Use for: building custom chat UIs, messaging interfaces, AI assistants. Triggers: chat ui, chat component, message list, chat input, shadcn chat, react chat, chat interface, messaging ui, conver

inference-sh official Дизайн

Что делает навык

Набор строительных блоков Chat UI для React/Next.js от ui.inference.sh, включающий компоненты контейнера, сообщений, ввода и индикаторов набора текста. Предназначен для создания кастомных интерфейсов обмена сообщениями и ИИ-ассистентов с поддержкой стриминга.

Когда применять

  • Создание пользовательских интерфейсов чата для веб-приложений
  • Разработка интерфейсов обмена сообщениями с использованием shadcn/ui
  • Интеграция ИИ-ассистентов с визуализацией ответов и индикаторами набора
  • Реализация списков сообщений с разными ролями (user, assistant, system)

Как работает

  1. Установить компоненты, выполнив команду npx shadcn@latest add https://ui.inference.sh/r/chat.json
  2. Импортировать необходимые компоненты (ChatContainer, ChatMessage, ChatInput, TypingIndicator) из @/registry/blocks/chat
  3. Использовать ChatContainer как обертку для элементов чата
  4. Отображать сообщения с помощью ChatMessage, указывая role (user, assistant, system) и content
  5. Добавлять поле ввода через ChatInput с обработкой onSubmit и состоянием disabled
  6. Показывать индикатор набора текста с помощью компонента TypingIndicator при загрузке

Примеры запросов агенту

Создай интерфейс чата на React с использованием компонентов из ui.inference.sh
Реализуй компонент сообщения для ИИ-ассистента с выравниванием слева
Добавь поле ввода и индикатор набора текста в существующий чат-интерфейс

Что понадобится

  • React/Next.js окружение
  • Tailwind CSS
  • shadcn/ui

Описание составлено по SKILL.md навыка, сверено 06.10.2026.

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

1Скачать навык
# возьмите папку навыка «chat-ui» из репозитория: # https://github.com/inference-sh/skills
2Положить папку с SKILL.md к навыкам ассистента
# положите папку навыка туда, где ассистент ищет skills: cp -r chat-ui/ ~/.claude/skills/chat-ui/

Навык — папка с файлом SKILL.md (описание + инструкции) и опциональными скриптами. Ассистент (Claude, Claude Code и совместимые) подхватывает его по описанию и следует шагам.