Main/WordPress Fullstack/Blueprints/AI & Agents/Generative UI Analytics Dashboard on Next.js 15 App Router
Back to «AI & Agents» cards
AI & Agents(ТЗ 48 из 54)
Spec: Generative UI Analytics Dashboard on Next.js 15 App Router
AI & Agents5 шагов • +25 XP

Spec: Generative UI Analytics Dashboard on Next.js 15 App Router

Architecting an interactive Generative UI analytics dashboard using Next.js 15, Vercel AI SDK, and Recharts: streaming tool calls, dynamic React component hydration on the fly, widget pin-to-dashboard state persistence, and PDF export.

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

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

“We don't want plain text responses with numbers; we want full interactive React visual widgets rendered dynamically.”
Ключевые требования:
  • •Next.js 15 App Router with React Server Components (RSC) and React 19
  • •Vercel AI SDK (ai/rsc or useChat) with streaming tool-calling support
  • •Dynamic UI widget catalog: MetricsCard, BarChartWidget, AreaTrendWidget, DataTableWidget
  • •Zod schemas for strict validation of component parameters produced by the model
  • •Persistent dashboard state allowing users to pin generated widgets into localStorage or database
Ограничения проекта:
  • •Initial streaming UI widget response time < 500 ms
  • •Zero client-side hydration mismatch errors
Критерии приёмки (KPI):
  • Interactive widget rendering within 1.5 seconds of prompt submission
  • 100% responsive display across mobile, tablet, and 4K displays
  • Executive user satisfaction score ≥ 4.8/5.0

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

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

1
Этап 1 из 5

Step 1: Tool Calling Schema Architecture for Generative Components

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

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

Define Zod schemas for all visual components: render_metric_card, render_bar_chart, render_data_table. Specify required props: title, data points, color schemes, and aggregation intervals.

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

Keep schema properties strictly structured with clear enum values for chart types and time granularities.

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

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

Step 2: Streaming Route Handler Implementation with Vercel AI SDK

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

Step 3: Parameterized UI Widget Library Development (Recharts)

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

Step 4: Client useChat Integration & Tool Invocation Mapping

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

Step 5: PDF Export & Pin to Dashboard Persistence

~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 для этого ТЗ

Интеграция

AI-Собеседование

Пройти голосовое или текстовое интервью по технологиям ТЗ

Архитектурные Воркфлоу

43 пошаговых сценария с командами CLI и готовыми конфигами