106.9K+Скачать
Перейти к руководству
AI Elementsавтор vercel

AI Elements Навык.

Создавайте интерфейсы ИИ-чата из редактируемых React-компонентов.

  • ИИ-интерфейсы
  • React
Скачать OpenDesignОткрыть руководство по использованию
Обзор исходных материалов · ai-elementsSKILL.md
Задача Создавайте интерфейсы ИИ-чата из редактируемых React-компонентов. Результаты Исходные файлы выбранных компонентов, добавленные в настроенный каталог компонентов проекта. Перед началом В документированные требования входят Node.js 18+, Next.js, AI SDK и shadcn/ui.
Редакционное описание · исходные материалы проверены 2026-11-02 · не сгенерированный пример

01 Возможности

Создавайте интерфейсы ИИ-чата из редактируемых React-компонентов.

Создавайте сообщения чата, отображение инструментов и ввод промптов с навыком AI Elements от Vercel и редактируемыми React-компонентами на базе shadcn.

Процесс на основе источникаНе тест выполнения

Принцип работы

AI Elements помогает агенту добавлять специализированные компоненты чата в существующее приложение Next.js. Он охватывает представления беседы, содержимое сообщений, отображение инструментов и ввод промптов. Компоненты находятся в вашем репозитории, поэтому интерфейс можно адаптировать к собственным требованиям продукта по стилю и взаимодействию.

Исходные материалы связывают эти компоненты с AI SDK и подходами shadcn/ui. Примеры собирают базовые компоненты сообщений вокруг текстовых частей, а не рассматривают ответ ассистента как единый непрозрачный виджет. Поэтому навык полезен, когда интеграция с моделью уже есть, а следующая задача — предоставить пользователям цельный интерфейс для чтения и ответа.

Ожидаемые результаты

  • Исходные файлы выбранных компонентов, добавленные в настроенный каталог компонентов проекта.
  • Представление беседы на React, собранное из базовых компонентов сообщений и ответов.
  • Стилизация под проект и объяснение оставшихся нерешённых вопросов интеграции.
Смотреть пример задания

От задания до проверки

  1. 01
    Проверьте существующее приложение

    Изучите инструмент запуска пакетов, настройку Next.js, зависимости AI SDK и конфигурацию shadcn. Перед добавлением компонентов проверьте алиасы импорта и глобальные стили.

  2. 02
    Добавьте нужные элементы интерфейса

    Используйте инструмент запуска пакетов проекта с поддерживаемым установщиком компонентов. Выберите элементы, необходимые для беседы, и проверьте добавленные в репозиторий файлы.

  3. 03
    Подключите и настройте

    Передайте роль каждого сообщения в Message, вложите MessageContent и отобразите текстовые части через MessageResponse, как в примере из исходных материалов. Для результатов инструментов нужно отдельное поддерживаемое представление: нельзя считать, что их отобразит пример только для текста. Настройте локальные классы Tailwind и проверьте получившиеся состояния беседы.

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

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

В документированные требования входят Node.js 18+, Next.js, AI SDK и shadcn/ui.

Хорошо подходит

  • Редактируемый интерфейс чатаЧатботу на Next.js нужны редактируемые компоненты сообщений и ввода.
  • Существующие подходы shadcnКоманда хочет настраивать код ИИ-интерфейса в рамках уже принятых подходов shadcn.

Ограничения

  • Требования к приложениюВ документированные требования входят Node.js 18+, Next.js, AI SDK и shadcn/ui.
  • Интеграция с серверной частьюДобавление UI-компонентов не означает, что настроены учётные данные для модели, потоковые эндпоинты или выполнение инструментов.

Что подготовить

  • Настройка проектаКонфигурация пакетов приложения и алиасы компонентов.
  • Формат сообщенийСтруктуры сообщений и результатов инструментов, которые предоставляет интеграция с AI SDK.
  • Направление интерфейсаНужная компоновка беседы, тема и набор компонентов.

03 Важные решения

Важные решения

  1. Контроль над локальным исходным кодом

    Код компонентов остаётся доступным для изучения и редактирования в репозитории продукта.

  2. Составные ответы

    Комбинация базовых компонентов сообщений позволяет отдельно представить те части ответа, которым это необходимо.

  3. Существующие правила стилизации

    Принятые подходы Tailwind и shadcn дают конкретную отправную точку для интеграции.

04 Пример задания

Попробуйте конкретное задание

Приведённое ниже задание не тестировалось. Перед использованием проверьте настройку навыка.

Изучите исходные инструкции и настройку

Конфигурация пакетов приложения и алиасы компонентов.

Исходный файл в репозитории
https://github.com/vercel/ai-elements/blob/ca8be600bfd01b3131f9bf6134b51602a71f4374/skills/ai-elements/SKILL.md

Ссылка ниже открывает инструкции автора. Перед использованием изучите требования к настройке в репозитории; это не команда установки.

Начните с одного результата

Перед запуском навыка адаптируйте объём, исходные материалы и ограничения в этом задании.

Пример задания
Используй ai-elements, чтобы создать экран беседы в этом существующем приложении Next.js. Сначала изучи наш инструмент запуска пакетов, конфигурацию shadcn, алиасы и структуру сообщений AI SDK. Добавь только компоненты сообщений, ответов и ввода промптов, необходимые этому экрану. Отображай текстовые части по документированному шаблону композиции и сохрани текущую тему. Для первого предпросмотра используй подготовленные тестовые сообщения. Объясни, какие исходные файлы добавлены, как интерфейс подключается к нашему существующему хуку чата и какие зависимости среды выполнения ещё нужно проверить.

Проверьте результат

Сверьте фактический результат с этими наблюдаемыми критериями.

  • Импорты разрешаются по реальному расположению компонентов и настроенному алиасу.
  • Роли сообщений и текстовые части отображаются в нужной теме.
  • Агент отличает работающий предпросмотр интерфейса от проверенной беседы с подключённой моделью.

OpenDesign предоставляет локальное дизайн-пространство для кодинг-агентов. Этот список не означает, что навык входит в комплект или что его внешние инструменты, учётные данные и программные зависимости включены.

Скачать OpenDesignЧитать краткое руководство

05 Источник и лицензия

Исходные материалы и лицензия

На этой странице описана зафиксированная версия источника по ссылке ниже. Поведение и требования апстрима могут измениться.

Владелец источника
vercel
Репозиторий
vercel/ai-elements
Файл навыка
SKILL.md
Лицензия
Apache-2.0
Проверенный снимок
2026-11-02 · ca8be600bfd0
Редакционное резюме источника
Создавайте интерфейсы ИИ-чата из редактируемых React-компонентов.

Оригинальное резюме от OpenDesign на основе указанного источника. Звёзды репозитория — датированный показатель популярности, а не использование навыка или оценка качества.

06 Вопросы перед началом

Вопросы перед началом

Можно ли редактировать установленные компоненты?

Да. Установщик добавляет код компонентов в проект, где можно менять классы и поведение.

Обязателен ли AI Gateway?

Исходные материалы рекомендуют его для доступа к моделям; в списке требований приложение, AI SDK и настройка shadcn рассматриваются отдельно.

Почему компоненты могут отображаться без стилей?

Прежде чем менять разметку компонентов, проверьте глобальные стили Tailwind и shadcn в проекте.

OpenDesign

Храните задание и работу над дизайном вместе.

Храните задание, исходные материалы и дизайн-работу вместе в локальном рабочем пространстве. Перед добавлением навыка в рабочий процесс проверьте его собственную настройку.

Скачать OpenDesignПросмотреть дизайн-навыки
Исходный файл в репозитории
https://github.com/vercel/ai-elements/blob/ca8be600bfd01b3131f9bf6134b51602a71f4374/skills/ai-elements/SKILL.md