agent-ui

Зачем делать компоненты самому

Готовых библиотек много: shadcn, Magic UI, Aceternity. Они сделаны для человека, который смотрит демо и копирует код. Сейчас компонент всё чаще ставит агент. И тут начинается то, что я и так ловлю своими инструментами. ds-lint находит хардкод цвета в скопированном коде. ds-coverage находит локальные копии рядом с системой. ds-eval показывает, что агент чаще рисует свою кнопку, чем берёт готовую.

Это можно чинить после, как делает ui-repair. Но дешевле сделать компоненты, которые не придётся чинить. Для этого компоненту нужны три вещи, которых у обычной библиотеки нет:

• описание, когда его брать и когда нет, словами задачи, а не списком пропсов;
• только токены темы: ни hex, ни bg-zinc-900, чтобы в коде нечего было скопировать неправильно;
• место, где агент найдёт всё это ещё до установки.

Вторая причина в самих AI-интерфейсах. Вызов инструмента, запрос разрешения, рассуждения модели, окно контекста: в обычных библиотеках таких компонентов нет, и каждый продукт рисует их заново. Я делаю их один раз и так, как хотел бы видеть в своих интерфейсах.

Что внутри

На странице компонентов вверху открыта живая интерактивная сцена: агент чинит захардкоженные цвета и останавливается, чтобы спросить разрешения на команду. Её можно разрешить, запретить или остановить прямо в браузере, а также переключить акцентный токен темы.

• Prompt InputПоле промпта: растёт по высоте, Enter отправляет, во время ответа кнопка становится Stop. Вложения и слот под выбор модели.
• MessageРеплика пользователя или ассистента, пульсирующий курсор при стриминге, действия по наведению.
• ThinkingПереливающееся «Thinking», которое сворачивается в «Thought for 4s» с текстом рассуждений.
• Tool CallКарточка одного вызова инструмента: статус, аргументы, результат, ошибка.
• ApprovalАгент просит разрешения на конкретную команду. После решения карточка схлопывается в одну строку.
• Context MeterКольцо заполнения контекстного окна с порогом предупреждения.
• SuggestionsСтартовые промпты и вопросы после ответа.
• Agent DockПлавающая плашка статуса фонового агента. При наведении раскрывается в список шагов.
• PlanШаги, которые ассистент предлагает до или во время задачи.
• ChoiceВопрос с вариантами от двух до пяти. Выбрать можно только один.
• Data TableТаблица сравнения или результата инструмента внутри ответа.
• Answer ChartОдин ряд столбцов или линия, до восьми точек, цветом основного токена.
• Code BlockКод или diff в ответе, с именем файла и копированием.
• SourcesИсточники под ответом: название, адрес, короткая выдержка.
• ArtifactКарточка файла в треде. По клику содержимое открывается в боковой панели.

Правило рядом с кодом

Каждая установка кладёт два файла: компонент и правило .mdc. В описании правила написана задача, а не имя компонента («агент просит разрешения перед рискованным действием»). Поэтому Cursor подгружает его только тогда, когда оно нужно.

В каждом правиле есть раздел «не использовать для» с подсказкой, какой компонент проекта взять вместо него. Именно здесь агенты обычно ошибаются: ставят Approval вместо обычного диалога подтверждения или Thinking вместо скелетона загрузки.

components/agent-ui/approval.tsx
.cursor/rules/agent-ui-approval.mdc

> Спроси разрешения, прежде чем агент удалит папку build

  агент подгружает agent-ui-approval.mdc
  <Approval title="Run a shell command"
            command="rm -rf ./build"
            onApprove={...} onDeny={...} />

Как разные агенты читают правила библиотеки:

Установка

Реестр совместим с shadcn. Нужны Tailwind v4 и тема shadcn в CSS-переменных.

npx shadcn@latest add https://antoshkin.tech/agent-ui/r/approval.json
npx shadcn@latest add https://antoshkin.tech/agent-ui/r/all.json

Сборка реестра падает, если в компоненте появится hex, класс палитры вроде text-neutral-500 или произвольное значение вроде text-[14px]. Поменяй токены темы, и все компоненты поменяются вместе с ними: на странице компонентов это можно проверить переключателем акцента.

Пределы

Я ещё не измерял через ds-eval, насколько правила повышают долю правильных вставок. Пока это гипотеза. Следующий шаг — проверить набор задач с правилами и без них.

Правила написаны в формате Cursor. Другие агенты получают тот же текст через llms-full.txt, но сами его не подгружают. Компоненты читают var(--muted-foreground) напрямую, поэтому старая тема shadcn на HSL-каналах не подойдёт.