Главная/React и Next.js/Блупринты/Next.js & Fullstack/Стриминговый чат-интерфейс с ИИ-ассистентом на Vercel AI SDK и Markdown рендерингом
К карточкам раздела «Next.js & Fullstack»Next.js & Fullstack(ТЗ 10 из 10)
ТЗ: Стриминговый чат-интерфейс с ИИ-ассистентом на Vercel AI SDK и Markdown рендерингомТрудозатраты~10 рабочих часов
Фриланс вилка~$450 – $750 (€400 – €700)
Оценка веб-студии~$950 – $1,600 (€900 – €1500)
ТЗ заказчика (исходный бриф):
Никаких пауз на размышления по 10 секунд. Стриминг должен начинаться моментально, блоки кода должны аккуратно форматироваться, а кнопка "Остановить" должна мгновенно прерывать сетевой сокет.
Ключевые требования:
- •Потоковая передача чанков текста через нативный ReadableStream
- •Управление отменой генерации через AbortController
- •Рендеринг блоков кода с копированием в буфер обмена
- •Защита от hydration mismatch при рендеринге динамического контента
Ограничения проекта:
- •Не использовать тяжелые сторонние рантайм-парсеры, весящие более 100 КБ
- •Стриминг должен работать в Edge и Serverless средах
Критерии приёмки (KPI):
- Time to First Token (TTFT) < 600ms
- Smooth 60 FPS рендеринг текста во время стрима
Пошаговое практическое руководство по ТЗ
Подробный разбор архитектуры, код реализации и советы эксперта по каждому этапу: