ИИ & Агенты(ТЗ 48 из 54)
ТЗ: Generative UI дашборд аналитики на Next.js 15 App Router
ИИ & Агенты5 шагов • +25 XP

ТЗ: Generative UI дашборд аналитики на Next.js 15 App Router

Создание инновационной платформы динамической аналитики: преобразование вопросов на естественном языке в интерактивные виджеты данных, стриминг React Server Components (RSC) через Vercel AI SDK, динамический подбор визуализаций (Recharts) и строгая валидация схем.

~12 ч работыУровень: SeniorNext.js 15+ App RouterReact 19 Server ComponentsVercel AI SDK 4.x (streamText, createDataStreamResponse)Recharts / Tremor UIZod Schema ValidationTailwind CSS v4PostgreSQL TimescaleDB
+5 XP за шаг
Выполнено 0 из 5 шагов (0%)
Трудозатраты~12 рабочих часов
Фриланс вилка~$540 – $900 (€480 – €840)
Оценка веб-студии~$1,140 – $1,920 (€1080 – €1800)

ТЗ заказчика (исходный бриф):

«Интерфейс должен быть живым. Графики не должны быть статичными картинками — пользователь должен иметь возможность навести курсор, переключить метрику или изменить группировку.»
Ключевые требования:
  • •Потоковый стриминг ответа с генерацией структурированных виджетов
  • •Поддержка 4 типов визуализаций: BarChart, LineTrend, MetricCard, DataTable
  • •Строгая Zod-схема для параметров визуализации данных
  • •Возможность интерактивного зума и фильтрации сгенерированных графиков
  • •Сохранение сессии диалога и избранных виджетов в локальном стейте / IndexedDB
Ограничения проекта:
  • •Время появления первого токена < 500 мс
  • •Корректный рендеринг на экранах от мобильных до 4K мониторов
Критерии приёмки (KPI):
  • 0 опасных вставок через innerHTML
  • 100% валидность сгенерированных данных перед рендером
  • Оценка юзабилити (SUS score) > 85 баллов

Пошаговое практическое руководство по ТЗ

Подробный разбор архитектуры, код реализации и советы эксперта по каждому этапу:

1
Этап 1 из 5

Архитектура схемы Tool Calling для генеративных компонентов

~45 минСредний

Практическое руководство:

Опишите типизированную Zod-схему для инструмента renderAnalyticsWidget. Схема должна поддерживать разные типы визуализаций, заголовок, массив точек данных и цветовую гамму.

План и контрольные точки реализации:
1Создать AnalyticsWidgetSchema с поддержкой 4 типов визуализации
2Добавить валидацию обязательных числовых полей
3Экспортировать TypeScript типы для клиентских компонентов
Важные технические нюансы и подводные камни:

Не позволяйте LLM возвращать произвольные имена полей данных — приведите их к стандартизированному формату { label: string, value: number, category?: string }.

Ожидаемый артефакт этапа:

Строгий контракт данных между LLM и React-компонентами.

TYPESCRIPT
import { z } from 'zod'

export const AnalyticsWidgetSchema = z.object({
  widgetType: z.enum(['line_chart', 'bar_chart', 'metric_card', 'data_table'])
    .describe('Тип визуализации данных'),
  title: z.string().describe('Понятный заголовок виджета'),
  description: z.string().optional().describe('Краткий вывод или инсайт из данных'),
  data: z.array(
    z.object({
      label: z.string().describe('Название периода, категории или сегмента'),
      value: z.number().describe('Числовое значение показателя'),
      secondaryValue: z.number().optional().describe('Значение для сравнения (например, прошлый год)'),
    })
  ).min(1).describe('Массив подготовленных данных для рендера графика'),
  unit: z.string().default('$').describe('Currency or unit ($, €, %, units)'),
})

export type AnalyticsWidgetData = z.infer<typeof AnalyticsWidgetSchema>
2
Этап 2 из 5

Реализация потокового Route Handler на Vercel AI SDK

~60 минСложный
3
Этап 3 из 5

Разработка параметризованных UI-виджетов (Recharts)

~60 минСредний
4
Этап 4 из 5

Клиентская интеграция с useChat и маппингом Tool Invocations

~45 минСредний
5
Этап 5 из 5

Экспорт отчета в PDF и закрепление виджетов (Pin to Dashboard)

~45 минСредний

Типичные грабли на этом ТЗ

3 антипаттерна

Что сдаём клиенту (Deliverables)

Чек-лист сдачи
Next.js 15 App Router страница с Generative UI интерфейсом (/dashboard/generative)
Route Handler (/api/ai/analytics/route.ts) с Vercel AI SDK и Tool Calling
Набор параметризованных UI-виджетов (RevenueChart, ConversionFunnel, TopPerformersTable)
Слой валидации SQL-запросов с защитой от доступа к чужим данным (Tenant Isolation)
Механизм экспорта сгенерированных отчетов в PDF и закрепления виджетов на главный экран

Инструменты экосистемы Fullstack AI Lab для этого ТЗ

Интеграция