uHamkorДокументация
Руководство пользователя

Первый виджет

Семь шагов: от создания виджета до подключения к агенту и проверки в песочнице.

🚀 Первый виджет

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

1️⃣ Откройте страницу «Виджеты»

Выберите проект и перейдите в Конструктор → Виджеты. На странице две вкладки:

  • Мои виджеты — сохранённые виджеты.
  • Создать виджет — галерея шаблонов.
Страница «Виджеты»
Конструктор → Виджеты: вкладки «Мои виджеты» и «Создать виджет», сверху кнопки «Импорт» и «Свой виджет».

2️⃣ Начните с шаблона

На вкладке Создать виджет нажмите карточку шаблона — откроется диалог с живым виджетом и описанием, затем нажмите Использовать шаблон. Чтобы начать с пустой карточки, используйте кнопку Свой виджет вверху страницы.

Шаблоны: Hotel booking, Order list, Lifecycle, Lead form, Analytics.

Диалог шаблона
При клике по карточке шаблона показывается живой виджет, описание и кнопка «Использовать шаблон».

3️⃣ Опишите разметку (Code)

На вкладке Code пишется JSX. Предпросмотр справа обновляется по мере ввода:

<Card gap={3}>
  <Row align="center" gap={2}>
    <Title value={order.title} size="lg" />
    <Spacer />
    <Badge label={order.status} color="info" />
  </Row>
  <Text value={order.eta} color="secondary" size="sm" />
  <Button label="Отследить" onClickAction={{ functionName: 'track' }} block />
</Card>
Редактор
Слева код JSX и панель схемы, справа живой предпросмотр.

4️⃣ Задайте схему (Schema)

На вкладке Schema нижней панели опишите поля, которые заполняет агент:

{
  "type": "object",
  "properties": {
    "order": {
      "type": "object",
      "properties": {
        "title":  { "type": "string" },
        "status": { "type": "string" },
        "eta":    { "type": "string" }
      },
      "required": ["title", "status"]
    }
  },
  "required": ["order"]
}

Можно сначала ввести данные и нажать Infer from data — схема построится автоматически.

5️⃣ Добавьте пример данных (Default)

Вкладка Default нужна только для предпросмотра в редакторе:

{
  "order": {
    "title": "Заказ #10241",
    "status": "В пути",
    "eta": "Доставка 12 августа"
  }
}

Кнопка + сохраняет текущие данные как Example 1 — удобно для проверки разных состояний.

6️⃣ Добавьте функцию

На вкладке Functions создайте функцию track. Самый простой тип — send_message: по нажатию кнопки в диалог отправляется сообщение. Для обращения к вашему бэкенду выберите call_api.

7️⃣ Сохраните и подключите к агенту

  • Введите имя в шапке редактора и нажмите Сохранить.
  • Перейдите в Конструктор → Функции и добавьте функцию.
  • В поле Действие выберите Показать виджет и укажите ваш виджет.
  • Заполните имя и описание функции — именно по описанию агент решает её вызвать.
  • Привяжите функцию к агенту.
Действие функции
Поле «Действие» в форме функции: вызов API, показать виджет, вызов API + виджет.

✅ Проверка

Откройте Песочницу и задайте вопрос по описанию функции (например «Где мой заказ?»). Агент вызовет функцию, и виджет отрисуется в диалоге. Нажмите кнопку, чтобы проверить и функцию виджета.

➡️ Дальше