DashWizard AI- Built with Kiro
Inspiration
We were inspired by the growing need for accessible data analytics. Traditional dashboarding tools often require significant technical expertise, limiting data insights to a select few. We envisioned a world where anyone, regardless of their coding background, could effortlessly transform raw data into beautiful, insightful dashboards using natural language. The goal was to democratize data analysis, making it as simple as having a conversation.
What it does
Is an intelligent analytics platform that allows users to build comprehensive dashboards and analyze data using natural language.
AI-Powered Dashboard Creation: Simply chat with our AI assistant to generate entire dashboards, individual widgets (charts, metrics, tables), or execute complex SQL queries.
Intuitive Data Management: Easily upload CSV files to create new data sources, explore existing tables and views, and run custom SQL queries in a built-in editor.
Interactive Dashboard Editor: A drag-and-drop interface enables users to arrange, resize, and configure widgets with granular control over data sources, filters, computed fields, and styling.
Diverse Visualizations: Supports a wide range of chart types (bar, line, pie, area), dynamic metrics with trend indicators, and sortable, searchable data tables.
Backend AI Agent: Powered by a sophisticated "master AI agent" hosted on Supabase AI (specifically, a Supabase Edge Function), which interprets user requests and generates appropriate dashboard components and SQL.
How we built it
DashboardAI was built as a full-stack application leveraging modern web technologies, an innovative AI backend, and Kiro's advanced development capabilities:
Frontend: Developed with React, Vite, Tailwind CSS, and Shadcn UI for a responsive and visually appealing user interface. We utilized React hooks for state management and Lucide React for crisp, functional icons.
In-Browser Database: Data storage and SQL query execution are handled entirely in the browser using sql.js, providing a fast and private data processing environment. CSV files uploaded by users are transformed into SQLite tables on the fly.
AI Integration: The core intelligence is a "master AI agent" implemented as a Supabase Edge Function. This agent processes natural language inputs, generates structured JSON responses, and constructs SQL queries based on the user's data context.
Data Management Layer: A custom data store (src/store/dataStore.ts) manages the lifecycle of data sources (tables and views), orchestrating interactions with the sql.js engine for data loading, querying, and schema introspection.
Development with Kiro: This backend agent and entire application were built and refined using Kiro, an AI-powered coding IDE that revolutionized our development process through:
- Agent Hooks: Automated workflows that triggered documentation updates, code quality checks, and testing whenever we modified source files
- Spec-Driven Development: Structured feature planning that helped us systematically design requirements, create technical specifications, and generate implementation tasks for complex dashboard components
- Vibe Coding: Natural language programming that allowed us to describe functionality conversationally and have Kiro generate the corresponding code, dramatically accelerating our development velocity
Iterative Design with Kiro: The UI/UX was a central focus, undergoing extensive iteration and refinement using Kiro's intelligent code generation and refactoring capabilities. We went through over 15 Kiro projects and 6 major versions of the application to perfect the interaction flows and visual design, with Kiro's agent hooks automatically maintaining code quality and documentation consistency throughout our rapid iteration cycles.
Challenges we ran into
Our journey to build DashboardAI was filled with exciting challenges:
UI/UX Complexity & Iteration: Designing an intuitive and powerful interface for AI-driven dashboard creation was our biggest hurdle. It took us over two weeks just to figure out the optimal UI and UX for interactions and page layouts. This involved an intense iterative process, leading us through more than 15 distinct Kiro projects and 6 major application versions, each building upon the last to refine the user experience. Kiro's spec-driven development helped us systematically approach each iteration with clear requirements and implementation plans.
AI Agent Reliability: Ensuring the AI agent consistently generated accurate and valid JSON responses, along with correct SQL queries for diverse user requests, was a significant technical challenge. This involved meticulous prompt engineering and robust error handling within the agent, especially given its deployment on Supabase AI. Kiro's vibe coding capabilities allowed us to rapidly prototype and test different agent implementations.
In-Browser Database Management: Integrating and managing sql.js (a WebAssembly-based SQLite database) presented challenges related to WASM file loading, performance optimization for large datasets, and ensuring data integrity within the browser environment.
Seamless Integration: Tying together the AI chat, the in-browser database, and the interactive dashboard editor into a cohesive and responsive user experience required careful architectural planning and continuous testing. Kiro's agent hooks proved invaluable here, automatically running integration tests and updating documentation as we connected different system components.
Accomplishments that we're proud of
Despite the challenges, we achieved several significant accomplishments:
Revolutionary UI/UX: We successfully designed and implemented a highly intuitive and beautiful user interface that makes complex data analysis accessible to everyone. The extensive iteration across 15+ Kiro projects and 6 app versions demonstrates our commitment to a polished and user-centric design.
Powerful AI Agent: We built a robust "master AI agent" that effectively translates natural language into actionable dashboard components and precise SQL queries. Its deployment on Supabase AI showcases a scalable and intelligent backend.
Full-Stack Functionality: DashboardAI is a complete, end-to-end solution, from seamless CSV data ingestion to interactive, customizable dashboards, all within a single, responsive application.
Rapid Development with Kiro: The ability to quickly prototype and iterate on our ideas using Kiro's AI-powered development environment was crucial. Kiro's spec-driven development allowed us to systematically plan features, while vibe coding enabled rapid implementation. Agent hooks maintained code quality and documentation automatically, allowing us to focus on innovation rather than maintenance tasks.
Rich Mock Data: We integrated extensive mock data covering various domains (sales, HR, marketing, finance, customer support) to demonstrate the versatility of the platform and provide a rich testing environment.
What we learned
This project provided invaluable learning experiences:
The Primacy of UI/UX: We gained a profound appreciation for the critical role of user experience in complex applications. The two weeks spent solely on UI/UX design, and the subsequent iterations, underscored that even the most advanced technology is ineffective without a user-friendly interface.
AI as an Abstraction Layer: We learned how AI, particularly through our master AI agent hosted on Supabase AI, can serve as a powerful abstraction layer, enabling non-technical users to perform highly technical tasks (like SQL querying and dashboard design) through simple conversational commands.
Iterative Development is Key: The process of building and refining DashboardAI through many versions and projects reinforced the importance of iterative development, continuous feedback, and agile methodologies. Kiro's spec-driven approach made this iteration systematic and efficient.
In-Browser Capabilities: We explored the immense potential of in-browser technologies like WebAssembly (via sql.js) for client-side data processing, opening up new possibilities for privacy-preserving and high-performance web applications.
Full-Stack AI Development: We deepened our understanding of the intricacies involved in building full-stack AI applications, from frontend interaction design to backend AI agent development and data persistence strategies.
AI-Powered Development Workflows: Working with Kiro taught us how AI can transform the development process itself. Agent hooks automated routine tasks, spec-driven development provided structure to complex features, and vibe coding accelerated implementation. This meta-experience of using AI to build AI applications provided unique insights into the future of software development.
What's next for DashWiszardAI
We have an exciting roadmap planned for DashWiszardAI:
Advanced AI Capabilities: Integrate more sophisticated AI features such as predictive analytics, anomaly detection, and automated data storytelling.
Expanded Data Source Integrations: Connect to external databases (e.g., PostgreSQL, MySQL), cloud data warehouses (e.g., Snowflake, BigQuery), and popular APIs to broaden data ingestion capabilities.
Collaboration Features: Implement real-time collaboration, dashboard sharing with granular permissions, and commenting functionalities.
Enhanced Customization: Provide more advanced styling options, custom themes, and the ability to import custom chart types or components.
Mobile Responsiveness: Optimize the dashboard viewing and editing experience for mobile devices.
Deployment & Scaling: Explore options for deploying the AI agent and database to scalable cloud infrastructure for production-ready performance.
Continued Kiro Integration: Leverage Kiro's evolving capabilities to implement new features through spec-driven development, maintain code quality with enhanced agent hooks, and explore advanced vibe coding patterns for even more intuitive development workflows.
Log in or sign up for Devpost to join the conversation.