An AI-enhanced todo application that demonstrates how to meaningfully integrate Large Language Models (LLMs) into traditional web applications using BAML (Boundary AI Markup Language). This project showcases modern web development practices with comprehensive testing, accessibility standards, and real-time AI assistance.
This application was created to explore and demonstrate:
- BAML Integration: Learning how to use Boundary ML's BAML language to create structured AI interactions
- Meaningful AI Integration: Moving beyond simple chatbots to create AI that can perform complex, structured tasks
- Modern React Patterns: Implementing advanced React patterns with Server Components, streaming, and real-time updates
- Intelligent Todo Management: AI can add, delete, update, and toggle todos based on natural language requests
- Batch Operations: Process multiple todo actions in a single AI request (e.g., "Mark task 1 complete and add bread to shopping list")
- Real-time Streaming: AI responses stream in real-time using BAML's streaming capabilities
- Smart Categorization: AI automatically categorizes and prioritizes tasks
- Conversation Context: Maintains chat history for contextual AI interactions
- Next.js 15 - App Router with React Server Components
- React 19 - Latest React features including concurrent rendering
- TypeScript - Full type safety across the entire application
- Tailwind CSS v4 - Modern utility-first styling with CSS variables
- shadcn/ui - High-quality, accessible UI components
- Framer Motion - Smooth animations and transitions
- next-themes - Dark/light mode support
- BAML (Boundary AI Markup Language) - Structured AI interactions and type-safe LLM integration
- OpenAI GPT-4o - Advanced language model for intelligent task processing
- Next.js Server Actions - Server-side AI processing and data mutations
- File-based Storage - Simple JSON file storage with atomic operations
- Jest + React Testing Library - Comprehensive testing framework
- ESLint + TypeScript - Code quality and type checking
- Automated Hooks - Pre-commit quality checks ensure code standards
- Test-Driven Development - Following TDD principles throughout
src/
├── components/
│ ├── chat/ # AI chat interface
│ │ ├── ChatInterface.tsx # Main chat component
│ │ ├── ChatMessages.tsx # Message display
│ │ └── hooks/ # Chat-related hooks
│ ├── todo/ # Todo management
│ │ ├── TodoList.tsx # Todo display
│ │ ├── TodoItemClient.tsx # Individual todo items
│ │ └── TodoSectionServer.tsx # Server component wrapper
│ └── ui/ # shadcn/ui components
├── lib/ # Core business logic
│ ├── todo-operations.ts # Pure todo functions
│ ├── todo-data.ts # Data persistence
│ └── todo-action-processor.ts # AI action processing
├── actions/ # Next.js Server Actions
│ ├── todo-actions.ts # Todo CRUD operations
│ └── chat-actions.ts # AI chat handling
└── types/ # TypeScript definitions
- User Input: Natural language requests through chat interface
- AI Processing: BAML processes request and returns structured actions
- Server Actions: Execute todo operations with atomic file updates
- Cache Invalidation: Next.js cache automatically updates UI
- Real-time Updates: Changes appear instantly across all components
- Server Components: Leveraging React Server Components for optimal performance
- Atomic Operations: Batch processing prevents race conditions
- Error Boundaries: Graceful error handling at component level
- Optimistic Updates: UI updates immediately with server validation
- Accessibility First: WCAG AA compliant with full keyboard navigation
- Node.js 18+
- npm or yarn
- OpenAI API key
- Clone the repository
git clone <repository-url>
cd ai-todo- Install dependencies
npm install- Set up environment variables
Create a
.env.localfile in the root directory:
OPENAI_API_KEY=your_openai_api_key_here- Generate BAML client
npm run baml-generate- Run the development server
npm run dev- Open the application Navigate to http://localhost:3000 in your browser.
npm run dev- Start development server with Turbopacknpm run build- Build production bundlenpm run start- Start production servernpm run lint- Run ESLint for code qualitynpm run lint:fix- Auto-fix ESLint issuesnpm run type-check- TypeScript type checkingnpm run check- Run both TypeScript and ESLint checksnpm run test- Run all testsnpm run test:watch- Run tests in watch modenpm run test:coverage- Generate test coverage reportnpm run baml-generate- Generate BAML client code
The project follows Test-Driven Development (TDD) principles with comprehensive test coverage:
- Unit Tests: Individual components and utilities
- Integration Tests: Component interactions and data flow
- BAML Tests: AI function testing with mock responses
- Accessibility Tests: Screen reader and keyboard navigation
Run tests with:
npm run test # Single run
npm run test:watch # Watch mode
npm run test:coverage # Coverage reportThe AI assistant can understand and process complex requests:
- "Add buy groceries to my shopping list with high priority"
- "Mark the first three tasks as complete"
- "Change all work tasks to medium priority"
- "Delete completed personal tasks"
Process multiple actions in a single request:
- "Mark task 1 complete, add bread to shopping, and delete task 3"
- "Add gym session and meal prep to health category with high priority"
AI automatically categorizes tasks into:
- Work, Personal, Health, Learning, Shopping, General
Intelligent priority assignment:
- High Priority: Urgent/critical tasks
- Medium Priority: Important but not urgent
- Low Priority: Nice-to-have tasks
User: "Add prepare presentation for tomorrow with high priority"
AI: "I've added 'prepare presentation for tomorrow' to your Work tasks with high priority."
User: "Mark the gym task complete and add buy protein powder"
AI: "I've marked the gym task as complete and added 'buy protein powder' to your Shopping list."
User: "How should I organize my day?"
AI: "I'd recommend tackling your high-priority tasks first thing in the morning when your energy is highest..."