Tech Stack
Description
The Instant Dashboard App is an AI-driven tool designed to bridge the gap between raw structured data and visual presentation. Users provide JSON data along with natural language instructions, and the system generates a complete one-page dashboard automatically.
The application is built using Next.js App Router and TypeScript, with server-side API routes used to securely communicate with the Google Gemini large language model.
A carefully designed system prompt instructs the AI to behave as a frontend developer and return only valid HTML and CSS, preventing hallucinations and ensuring accurate data representation.
The generated dashboard is rendered inside an iframe for safety and isolation, allowing instant preview without executing untrusted scripts.
- Designed an end-to-end AI workflow from JSON input to visual dashboard rendering.
- Implemented secure server-side LLM integration using Google Gemini API.
- Engineered a strict system prompt to restrict output to valid HTML/CSS only.
- Ensured accurate data usage with zero hallucinated values from the AI.
- Built real-time JSON validation with graceful error handling.
- Rendered AI output safely using iframe-based sandboxing.
- Deployed the application on Vercel with optimized production builds.
Page Info
Landing & Workflow Overview
Modern landing interface explaining the three-step workflow: JSON input, prompt instructions, and AI-generated dashboard preview.
JSON Input & Validation
Large JSON editor with real-time validation to ensure structured data is correct before sending it to the AI model.
Prompt Instructions
Prompt input section allowing users to describe dashboard layout, style, and presentation using natural language.
Generated Dashboard Output
Fully rendered one-page dashboard displaying totals, summaries, charts, and tabular data derived strictly from the provided JSON.
