llms.txt

AiTool

@cloud-ru/ds-ai-tool — набор презентационных элементов для отображения вызова инструмента (tool call) в AI-сценариях стриминга. Из них собираются составные компоненты Tool (VibeOps) и Tool Simple (Гига-помощник): тип инструмента, статус выполнения, текст, дерево аргументов и результата, бейджи ресурсов.

Все элементы — тонкие presentational-компоненты: состояние (раскрытие узлов, секрет) живёт в родителе, данные передаются через слоты ReactNode. Компоненты ничего не запоминают сами.

Когда использовать

  • Рендер аргументов и результата вызова инструмента в чате AI-ассистента.
  • Пошаговое отображение статуса инструмента (pending → loading → success / error).
  • Сворачиваемое дерево JSON-подобных данных (объекты, массивы, ключ-значение).

Когда не нужен

  • Готовый высокоуровневый компонент вызова инструмента:
    • используйте Tool / Tool Simple (собраны из этих элементов).
  • Обычный контент-блок без семантики инструмента:
    • используйте @cloud-ru/ds-card или типографику @cloud-ru/ds-typography.

Установка

pnpm add @cloud-ru/ds-ai-tool
import { AiToolIcon, AiToolObject, AiToolStatus } from '@cloud-ru/ds-ai-tool'

Компоненты

Composites — готовые компоненты

  • AiTool — полный инструмент (VibeOps): статус, иконка, имя, длительность и раскрываемые блоки запроса и ответа.
  • AiToolSimple — компактный инструмент (Гига-помощник): иконка, имя, описание и бейджи ресурсов.

Content — наполнение контентом

  • AiToolText — текстовый блок (mono / error).
  • AiToolKeyValue — пара «ключ — значение».
  • AiToolObject — узел дерева (complex / string).
  • AiToolArray — сворачиваемый список со счётчиком.

Atoms — каркасные элементы

Figma

Открыть в Figma →