Principal/WordPress Fullstack/Blueprints/IA y Agentes/Dashboard de analítica con Generative UI en Next.js 15 App Router
Volver a tarjetas «IA y Agentes»
IA y Agentes(ТЗ 48 из 54)
Especificación: Dashboard de analítica con Generative UI en Next.js 15 App Router
IA y Agentes5 шагов • +25 XP

Especificación: Dashboard de analítica con Generative UI en Next.js 15 App Router

Arquitectura de un panel de control interactivo con Generative UI utilizando Next.js 15, Vercel AI SDK y Recharts: streaming de llamadas a herramientas, renderizado dinámico de componentes React en tiempo real, anclaje de widgets y exportación a 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)

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

«No queremos respuestas en texto plano con cifras sueltas; exigimos componentes visuales interactivos de React renderizados dinámicamente.»
Ключевые требования:
  • •Next.js 15 App Router con React Server Components (RSC) y React 19
  • •Vercel AI SDK (ai/rsc o useChat) con soporte para streaming de llamadas a herramientas
  • •Catálogo de widgets dinámicos: MetricsCard, BarChartWidget, AreaTrendWidget, DataTableWidget
  • •Esquemas Zod para la validación rigurosa de los parámetros de componentes devueltos por el modelo
  • •Persistencia de widgets anclados por el usuario en base de datos o almacenamiento local
Ограничения проекта:
  • •Latencia de inicio del stream del widget interactivo inferior a 500 ms
  • •Cero discrepancias de hidratación (Hydration Mismatch) en el cliente
Критерии приёмки (KPI):
  • Generación y renderizado del componente visual en menos de 1.5 segundos
  • Diseño 100% responsivo adaptable desde smartphones hasta pantallas 4K
  • Índice de satisfacción directiva ≥ 4.8/5.0

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

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

1
Этап 1 из 5

Paso 1: Diseño de esquemas de Tool Calling para componentes generativos

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

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

Defina esquemas Zod para los componentes gráficos: render_metric_card, render_bar_chart, render_data_table. Especifique títulos, arrays de datos, paletas cromáticas y granularidad temporal.

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

Estructure los esquemas de forma estricta utilizando enums para tipos de visualización y períodos de agrupación.

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

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

Paso 2: Implementación de Route Handler en streaming con Vercel AI SDK

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

Paso 3: Desarrollo de la librería de widgets visuales (Recharts)

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

Paso 4: Integración del hook useChat y mapeo de Tool Invocations

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

Paso 5: Exportación a PDF y anclaje persistente en el 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 для этого ТЗ

Интеграция