← Блог AIkrut
🎨
Artifacts в AIkrut: живое превью кода и диаграмм в боковой панели
02.06.2026 · 4 мин чтения
Откройте для себя Artifacts в AIkrut — удобное превью кода, SVG, HTML и диаграмм рядом с чатом. Быстро копируй, скачивай и проверяй результат в реальном времени.
Как в пятницу вечером превратить код в наглядный результат за пару кликов
Вот, скажем, в пятницу вечером ты решил сделать небольшой проект: хочешь нарисовать mermaid-диаграмму, собрать SVG-логотип или написать простую HTML-страницу с градиентом. Раньше надо было копировать огромный кусок кода в отдельный редактор или браузер, чтобы посмотреть, что получилось. А теперь в AIkrut появилась фича, которая берет эти большие блоки кода и визуальных данных — и показывает их прямо рядом с чатом, живьем и без лишних телодвижений.
Что такое Artifacts и зачем они нужны?
Artifacts — это механизм, который позволяет удобно работать с большими кусками кода и визуальными блоками, которые выдает AI в чате. Если AI возвращает какую-то HTML-страницу, SVG-графику, диаграмму Mermaid, Markdown-документ или большой JSON, то рядом с таким фрагментом отображается кнопка «↗ в панель». При нажатии справа выезжает отдельная панель с двумя вкладками: «Превью» — показывает живой рендер результата, и «Код» — исходный текст или код.
Это значит, что можно не только быстро проверить, как выглядит твой код, но и скачать файл с нужным расширением (.html, .svg, .mmd, .md, .json) или сразу скопировать нужный фрагмент. Чтобы закрыть панель, достаточно нажать крестик или просто Esc.
Как это помогает в реальной работе с AI в AIkrut? Реальный кейс
Представь: ты попросил AI «нарисуй mermaid-диаграмму процесса заказа». В ответ получил большой кусок кода, который обычно неудобно визуализировать сразу в чате. С новым Artifacts ты видишь кнопку «↗ в панель» рядом с кодом диаграммы — нажимаешь, и справа открывается живое превью диаграммы, где можно проверить, как все красиво соединено.
Или ты дашь команду «сделай SVG-логотип с кругом и треугольником». Вместо того чтобы копировать весь SVG, сохранять и открывать в отдельном редакторе, ты сразу можешь посмотреть результат в боковой панели, скачать файл или скопировать код. Это экономит кучу времени и нервов.
Пошаговая инструкция: как пользоваться Artifacts в AIkrut
- Заходишь в чат AIkrut и задаешь команду, например: «напиши HTML-страницу с CSS-градиентом» или «создай mermaid-диаграмму процесса».
- Обрати внимание на кодоблок: рядом с кнопкой копирования появится новая кнопка «↗ в панель».
- Кликни по этой кнопке — справа справа откроется боковая панель, шириной около 560px на десктопе, а на мобильных займет весь экран.
- Вкладка «Превью» отрендерит код живьем — HTML будет в iframe, SVG и Mermaid визуализируются сразу, Markdown отобразится с таблицами, JSON — красиво форматирован.
- Если нужен код — переключайся на вкладку «Код», где доступен исходник.
- Чтобы скачать файл — нажми на иконку ⬇, она автоматически определит нужное расширение и сохранит файл на устройство.
- Для закрытия панели используй крестик или просто нажми Esc.
Что даёт использование Artifacts? Отличная экономия времени и удобство работы
С Artifacts исчезает необходимость в постоянном копировании-клеивании кода в отдельные редакторы или браузеры для проверки результата. Тут всё прямо под рукой, с живым превью и возможностью скачать готовый файл. Это ускоряет тестирование и корректировку кода, особенно когда нужно быстро увидеть, как работает именно твой SVG или диаграмма.
Кроме того, весь процесс происходит внутри AIkrut — никакого переключения контекстов, сайтов или программ. Это здорово помогает сосредоточиться на работе и сразу понять, что AI тебе сгенерировал, без лишнего геморроя. Если ты уже пробовал похожие решения в других чатах, например, в Claude или ChatGPT Canvas — у AIkrut фича работает не хуже, а в некоторых моментах удобнее доступна.
Если хочешь больше продвинутых возможностей, рекомендую взглянуть на тарифы AIkrut — там объяснено, какие функции и лимиты доступны по подписке.
Где попробовать эту фишку?
Попробовать Artifacts можно прямо в чате AIkrut. Задавай запросы с кодом HTML, SVG, Mermaid, JSON и смотри, как фича оживляет твой ввод.
Artifacts — небольшой, но очень заметный помощник, если работаешь с визуальными данными и кодом от AI в одном окне. Заходи, тестируй и работа станет быстрее и удобнее.
Попробуй Artifacts в AIkrut и убедись сам!
Попробовать AIkrut бесплатно