Askable
🌟 Inspiration
We were inspired by the gap between data and decision-making. Spreadsheets and CSVs are everywhere, but analyzing them requires programming skills, creating a barrier for non-technical users. We wanted to build a bridge—an interface where anyone could ask questions of their data in plain English and get not just answers, but also a transparent view into the analysis process.
🚀 What it does
Askable is an AI-powered data assistant. Users upload a CSV file and then chat with their data in natural language. The application generates instant, insightful answers and suggests relevant visualizations.
For full transparency and educational value, every answer is backed by the Python code (using Pandas) that would be used to generate it, though the code is not executed within the app for security reasons.
🛠️ How we built it
We built a full-stack Next.js application with a modern tech stack:
- Frontend: Next.js 14 with TypeScript, Tailwind CSS, and Shadcn/ui for a responsive interface.
- AI & LLM: Integrated with OpenRouter to leverage powerful open-source models like Qwen 3 Coder and Kimi K2 Instruct for understanding queries and generating code.
- Database: TiDB Serverless to store all chat history and user interactions reliably.
- File Storage: AWS S3 for secure and scalable CSV file handling.
- Animation: Framer Motion for smooth, engaging UI animations.
⚡ Challenges we ran into
- Structured AI Output: Ensuring the LLM consistently returned valid JSON objects with both natural language responses and Python code required extensive prompt engineering and error handling.
- Streaming Responses: Implementing a real-time streaming experience for the AI's responses was technically complex but crucial for UX.
- System Integration: Orchestrating seamless communication between the frontend, multiple cloud services (S3, TiDB), and the OpenRouter API posed significant architectural challenges.
🏆 Accomplishments that we're proud of
- Creating an intuitive product that demystifies data analysis for non-programmers.
- Building a complex, integrated full-stack application with multiple external APIs.
- Our unique approach of generating—but not executing—Python code, balancing educational value with security.
- Designing a clean, conversational UI that makes data exploration effortless.
📚 What we learned
We gained deep, hands-on experience in modern full-stack development, including:
- Advanced features of Next.js 14 (App Router, SSR).
- The intricacies of prompting LLMs for structured, reliable outputs.
- System design & architecture for securely connecting databases, cloud storage, and AI APIs.
- The critical importance of security in AI applications handling user data.
🔮 What's next for Askable
- Multi-File Analysis: Support for querying across multiple uploaded CSVs.
- Collaboration Features: Shared workspaces for teams to explore data together.
- Advanced AI Capabilities: Data cleaning and preprocessing suggestions directly within the chat interface.
Built With
- amazon-web-services
- next.js
- openrouter
- powered-by-openrouter's-ai-models
- shadcn/ui
- tailwind-css
- tidb-serverless
- typescript
Log in or sign up for Devpost to join the conversation.