Генератор презентаций на ИИ и React Streaming: что сработало у автора PitchShow
В материале на dev.to описан опыт сборки генератора презентаций с ИИ на связке React Server Components, стриминга и Framer Motion: от ожидания порядка 30 секунд к генерации слайдов, которую автор описывает как близкую к реальному времени. Ниже — сжатый разбор архитектурных решений и инструментов, которые он выделяет как рабочие. Пост опубликован 5 апреля 2026 (UTC); по данным API dev.to у той же записи указано девять минут примерного времени чтения, один комментарий и две суммарные реакции, счётчик просмотров страницы в открытых полях не заполнен — на инженерный разбор это не мешает.
Почему для ИИ-продукта важна скорость первого слайда
Автор исходит из контраста: пользователь привык ждать «пакетный» ответ модели, а интерфейс презентаций страдает, если долго нет ни одного готового слайда. Вводная мысль поста — перейти от ожидания порядка 30 секунд к генерации слайдов почти в реальном времени за счёт React Server Components, Framer Motion и паттернов streaming UI.
Для генеративных интерфейсов «время до первого полезного кадра» часто важнее полного времени пайплайна: человек остаётся в контексте задачи, а не смотрит на пустой экран.
Такой угол напрямую связывает выдачу языковой модели с UX: речь не только о том, какой API вызвать, а о том, как по мере прихода данных собирать осмысленные куски UI.
Поток от модели к браузеру: OpenAI, stream: true и SSE
В статье в качестве примера приводится вызов OpenAI Chat Completions с stream: true и моделью gpt-4-turbo. Транспорт от ИИ-пайплайна к клиенту описан как Server-Sent Events (SSE).
Тяжёлая работа уходит на сервер: в примере страница app/generate/[id]/page.tsx асинхронно получает поток и отдаёт компонент PresentationStream. Инструмент генерации (модель) отделён от механизма доставки (SSE) и от серверного рендера (RSC).
Семантические события, а не только сырой текст токенов
Автор подчёркивает, что поток интерпретируется не только как непрерывная лента токенов. По ходу парсинга эмитятся семантические события с полем type (в тексте встречаются типы вроде слайда, чарта и оглавления — перечень следует из примеров в посте).
Граница слайдов в приведённом коде детектируется по маркеру ---SLIDE_BREAK--- в потоке содержимого. Это проектное решение поверх ответа LLM: модель остаётся источником текста, а приложение задаёт контракт событий, по которому клиент понимает, что показывать.
Клиент: вложенный Suspense и анимация Framer Motion
На клиенте для поэтапного показа используются границы Suspense; в примере — вложенные fallback для оглавления и отдельных слайдов. Framer Motion задействован для анимации появления слайда (в фрагменте — motion.div с initial, animate, transition).
Связка генеративного бэкенда и микроанимации здесь служит одной цели: снизить ощущение «подвисания», пока модель и сервер ещё обрабатывают запрос.
MCP как слой интеграций с Notion, Supabase и GitHub
В посте описано использование Model Context Protocol (MCP) для интеграций через MCP-серверы; среди примеров в тексте фигурируют связки с Notion, Supabase, GitHub и Context7. Автор указывает, что стандарт изначально от Anthropic, а далее управляется Linux Foundation.
В том же разделе приведены заявления автора об экосистеме на апрель 2026 (включая формулировки про десятки миллионов загрузок SDK, поддержку со стороны крупных вендоров, число MCP-серверов на GitHub и т.п.). Эти цифры есть только в оригинальном посте; здесь они пересказаны с оговоркой, что сторонней проверкой не подтверждались.
Таблица batch против streaming: условия теста и оговорка
Автор публикует таблицу сравнения режимов Batch и Streaming при тестах на AWS us-east-1, GPT-4-turbo, 10-slide decks with charts, 100 пользователей, генерирующих 10-слайдовые презентации. В посте указаны, в частности:
| Показатель (как у автора) | Batch | Streaming | Улучшение (как у автора) |
|---|---|---|---|
| Time to First Slide | 28.3s | 1.2s | 23.6× быстрее |
| Total Generation Time | 32.1s | 31.8s | примерно то же |
| Perceived Wait Time | 28.3s | 8.4s | 3.4× быстрее |
| User Engagement During Gen | 12% | 78% | 6.5× выше |
Полное время генерации почти не меняется, зато воспринимаемое ожидание и вовлечённость во время генерации — по таблице автора — сильно сдвигаются в пользу стриминга. Читателю разумно помнить, что это внутренние бенчмарки из статьи, а не независимый аудит.
Вёрстка без DOM: Pretext и открытые пакеты PitchShow
Для оценки размеров текста без обращения к DOM упоминается библиотека Pretext (в посте указана связь с Cheng Lou и репозиторий https://github.com/chenglou/pretext).
В материале анонсируются открытые пакеты вроде @pitchshow/react-pptx, @pitchshow/motion-export и примеры MCP-серверов; даётся ссылка на организацию https://github.com/pitchshow. Продукт назван PitchShow, сайт — https://pitchshow.ai/. В конце статьи указана подпись Mochi Perez, Product Manager, PitchShow.
В разделе roadmap автор описывает намерения: среди упомянутого — Yjs + MCP, Whisper (через MCP), Remotion, ElevenLabs и другие пункты. Это планы, а не зафиксированные релизы.
Источники
- Jiade (dev.to) — «I Built an AI Presentation Generator Using React Streaming — Here's What Actually Works», URL: https://dev.to/jiade/i-built-an-ai-presentation-generator-using-react-streaming-heres-what-actually-works-1ha4 — дата доступа: 2026-04-07 (UTC); дата публикации на dev.to: 2026-04-05, 22:03 UTC.
- Pretext (репозиторий) — https://github.com/chenglou/pretext — упомянуто в том же посте на dev.to; дата доступа к посту: 2026-04-07 (UTC).
- PitchShow (организация на GitHub) — https://github.com/pitchshow — упомянуто в том же посте; дата доступа к посту: 2026-04-07 (UTC).
- PitchShow (сайт) — https://pitchshow.ai/ — упомянуто в том же посте; дата доступа к посту: 2026-04-07 (UTC).