Мастер Claude · Блок 8. Артефакты

Урок 68 из 93 · ~12 мин чтения

Живые артефакты — страница, которая сама берёт свежие данные

Урок пока закрыт

Курс проходится последовательно.

К текущему уроку

Почему это важно именно вам

Обычный артефакт — снимок. Вы собрали сводку в понедельник, отправили ссылку, а в среду цифры устарели, и коллега смотрит на прошлое, думая, что видит настоящее. Устаревший отчёт хуже отсутствующего: на его основании принимают решения.

Живой артефакт снимает эту проблему. Страница обращается к вашим подключённым инструментам в момент, когда её открывают, и показывает актуальные данные. Один раз собрали — дальше она сама.

Для директора это ближе всего к «доске статуса»: отправил ссылку команде и не отвечаешь на вопрос «а какие сейчас цифры».

Что это такое

Опубликованная страница может вызывать MCP-коннекторы — те самые внешние подключения из блока 6, но привязанные к аккаунту claude.ai, а не к локальной настройке. Живые вызовы требуют Claude Code 2.1.209 или новее: на более старой версии Claude без предупреждения опубликует обычный снимок данных — страница будет выглядеть так же, но обновляться не будет.

Работает это так:

  1. При публикации Claude объявляет, к каким коннекторам страница имеет право обращаться. Выйти за пределы объявленного она не может.
  2. Когда кто-то открывает страницу, вызовы идут через аккаунт того, кто смотрит, а не через ваш.
  3. Перед первым вызовом claude.ai спрашивает у зрителя разрешение.
  4. Ответы кэшируются в браузере зрителя: при повторном открытии страница сразу рисуется из кэша, потом обновляется свежими данными.

Из пункта 2 следует важное свойство: два человека, открывшие одну и ту же страницу, могут увидеть разные данные — каждый видит то, к чему у его аккаунта есть доступ. Это не баг, а модель безопасности: страница никогда не получает ничьи учётные данные.

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

Локальные MCP-серверы так не работают

Серверы, настроенные у вас в Claude Code (.mcp.json), могут дать данные в момент сборки страницы, но опубликованная страница обращаться к ним не может. Живые вызовы — только через коннекторы аккаунта claude.ai.

Как работает на практике

Попросить живую страницу

Назовите коннектор и данные прямо в запросе:

Сделай артефакт-доску: открытые задачи по нашему проекту, которые страница
подтягивает через мой коннектор при загрузке. Обновление — раз в пять минут
и кнопкой «обновить».

Claude объявит нужные коннекторы при публикации — и вас об этом спросят отдельно, даже если обычные публикации вы уже разрешили.

Предусмотреть тех, у кого коннектора нет

Обязательный пункт брифа:

В каждом живом блоке добавь запасное сообщение: если у зрителя нет нужного
подключения — покажи, какой коннектор надо подключить, а не пустой блок.

Иначе человек откроет страницу, увидит пустоту и решит, что «ничего не работает».

Помнить про ограничение шеринга

Страница, которая обращается к коннекторам, не может быть опубликована по публичной ссылке. На Team и Enterprise её можно оставить приватной или расшарить внутри организации. На Pro и Max, где публичная ссылка — единственный способ поделиться, живая страница остаётся приватной, то есть только для вас.

Это ограничение стоит знать до того, как вы построите доску для команды на личном тарифе.

Что делать, если у зрителя пусто

Три причины, по убыванию частоты:

  1. У зрителя нет этого коннектора. Подключения — на уровне аккаунта. Каждому нужно своё, в настройках claude.ai.
  2. Зритель отказал в разрешении. Отказ действует до перезагрузки страницы.
  3. Администратор организации выключил вызовы коннекторов из артефактов. Тогда никакие живые блоки не работают ни у кого.

Границы формата

Стоит держать в голове, чего страница не умеет — это экономит часы попыток:

Ограничение Что это значит
Нет бэкенда Форма не сохранит ввод, авторизации своей нет
Одна страница Ссылки на «другие разделы» не работают, только якоря внутри
Внешние запросы урезаны Разрешены шрифты Google Fonts и библиотеки с четырёх CDN (cdnjs, jsDelivr, Tailwind, jQuery). Внешние картинки и прочие внешние файлы блокируются — их встраивают внутрь страницы. Обращаться к чужим API страница не может
Размер Не больше 16 МиБ в отрендеренном виде
Типы файлов Публикуется .html, .htm или .md

Отдельно про деньги: страница с интерактивом и встроенными картинками тратит заметно больше выходных токенов, чем тот же результат текстом. Диаграммы просите рисовать как SVG, а большие наборы данных — сворачивать в сводку.

Частые ошибки

Строить на живой странице «внутренний портал». Это по-прежнему одна страница без сервера. Если нужна авторизация, хранение и разделы — нужен обычный веб-сервис.

Забывать про разные права зрителей. Вы видите полную картину, потому что у вас доступ ко всему. Коллега открывает — и половина пустая. Проверяйте страницу глазами человека с меньшими правами.

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

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

Показывать живые данные без отметки времени. Всегда просите вывести «данные на такое-то время» — иначе непонятно, свежие цифры или из кэша браузера.

Когда нужно / когда нет

Живая страница уместна:

Не уместна:

Связь с другими уроками

День 51–58 — MCP. Живые артефакты — продолжение той же темы: те же коннекторы, но вызываемые со стороны зрителя.

День 67 — первый артефакт. Сначала научитесь делать статичную страницу с проверенными цифрами, потом добавляйте живость.

День 78 — routines. Если нужна не «живая», а «регулярно пересобираемая» страница — это работа для облачных задач по расписанию.

Задание на сегодня

  1. Проверьте, какие коннекторы подключены к вашему аккаунту claude.ai.
  2. Постройте живую страницу по одному источнику: задачи, письма, календарь — что подключено.
  3. Обязательно добавьте в бриф запасное сообщение для зрителей без коннектора и отметку времени данных.
  4. Откройте страницу, отзовите разрешение и перезагрузите — посмотрите, что видит человек, который отказал.
  5. Проверьте на своём тарифе, можете ли вы вообще поделиться живой страницей.

Критерий «выполнено»: у вас есть страница, которая при открытии показывает свежие данные, и вы знаете, что увидит коллега без нужного подключения.

Резюме

Следующий урок откроется после отметки.