Case study · 2025
AI Dashboard Builder
Scroll
AI Dashboard Builder
View live site- Year
- 2025
- Type
- Gen Ai project
- Tech stack
- Next.js 16 | TypeScript | Vercel AI SDK v6 | Google Gemini | Zod v4 | Recharts | shadcn/ui | Tailwind CSS v4 | Framer Motion
- Status
- Portfolio build
Build dashboards with AI.
Describe what you want in natural language and watch as Gemini streams interactive charts, KPIs, and filters into a 12-column responsive grid — using a Zod-validated schema that gives end-to-end type safety from the AI's structured output all the way to the rendered React components.
Scope & impact
- Generative UI — Gemini returns structured, Zod-validated JSON that maps directly to React chart components, not plain text
- Progressive streaming — charts, KPI cards, and filters render one by one via streamObject with a custom partial-JSON parser
- 6 chart types across a 12-column responsive grid, with dark/light theming, regenerate/refine prompts, and full mobile support