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

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

Архітектура інтерактивного дашборду аналітики Generative UI на Next.js 15, Vercel AI SDK та Recharts: потоковий виклик інструментів, динамічна гідратація компонентів на льоту, збереження стану закріплених віджетів та експорт у PDF.

~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)

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

«Нам не потрібні звичайні текстові відповіді з цифрами; ми очікуємо повноцінні інтерактивні візуальні React-компоненти, згенеровані динамічно.»
Ключевые требования:
  • •Next.js 15 App Router із серверними компонентами React (RSC) та React 19
  • •Vercel AI SDK (ai/rsc або useChat) із підтримкою потокового виклику інструментів (Tool Calling)
  • •Каталог динамічних віджетів: MetricsCard, BarChartWidget, AreaTrendWidget, DataTableWidget
  • •Zod-схеми для суворої валідації параметрів компонентів, що генеруються моделлю
  • •Персистентність закріплених віджетів користувача в базі даних або localStorage
Ограничения проекта:
  • •Час відгуку першого фрагмента потокового віджета < 500 мс
  • •Нуль помилок розбіжності гідратації (Hydration Mismatch)
Критерии приёмки (KPI):
  • Рендеринг віджета менш ніж за 1.5 секунди після запиту
  • 100% адаптивність інтерфейсу від смартфонів до 4K екранів
  • Оцінка задоволеності топ-менеджменту ≥ 4.8/5.0

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

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

1
Этап 1 из 5

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

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

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

Опишіть Zod-схеми для всіх візуальних віджетів: render_metric_card, render_bar_chart, render_data_table. Визначте параметри: заголовок, масив точок даних, колірні схеми та період агрегації.

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

Використовуйте чіткі перерахування enum для типів діаграм та часових інтервалів.

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

Строгий контракт данных между 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

Крок 2: Реалізація потокового Route Handler на Vercel AI SDK

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

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

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

Крок 4: Клієнтська інтеграція з useChat та маппінгом Tool Invocations

~45 минСредний
5
Этап 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 для этого ТЗ

Интеграция