A modern, WhatsApp-inspired calendar management application that lets you interact with your Google Calendar using natural language. Built with Next.js, powered by AWS Bedrock (Claude AI), and featuring a sleek chat interface.
- Modern Chat UI: Clean, messaging-app-inspired design
- Auto-scrolling Messages: Automatic scroll to latest messages
- Real-time Typing Indicators: Shows when AI is processing
- Message Bubbles: Distinct styling for user and assistant messages
- Sidebar Navigation: Collapsible sidebar with quick actions
- Natural Language Processing: Ask in plain English
- Conversation Memory: Remembers context from previous messages
- Smart Event Creation: Automatically extracts event details
- Context-Aware Responses: References previous conversations
- Mobile-First: Optimized for all screen sizes
- Touch-Friendly: Large touch targets and smooth animations
- Cross-Platform: Works seamlessly on desktop and mobile
- Google OAuth2: Secure login with Google
- Privacy-First: Your data stays private
- Session Management: Automatic token refresh
- Node.js 18+ installed
- Google Cloud Console project
- AWS account with Bedrock access
git clone <your-repo>
cd calendar-assistant
npm installCreate a .env.local file:
# NextAuth Configuration
NEXTAUTH_URL=http://localhost:3000
NEXTAUTH_SECRET=your-secret-key-here
# Google OAuth2
GOOGLE_CLIENT_ID=your-google-client-id
GOOGLE_CLIENT_SECRET=your-google-client-secret
# AWS Bedrock
AWS_ACCESS_KEY_ID=your-aws-access-key
AWS_SECRET_ACCESS_KEY=your-aws-secret-key
AWS_REGION=us-east-1- Go to Google Cloud Console
- Create a new project or select existing
- Enable Google Calendar API
- Create OAuth2 credentials
- Add authorized redirect URI:
http://localhost:3000/api/auth/callback/google - Add your email as a test user in OAuth consent screen
npm run devVisit http://localhost:3000 to start chatting with your calendar!
You: "Schedule a team meeting tomorrow at 2pm"
AI: Creates event and confirms ✅ Event "Team Meeting" created successfully!
You: "Book a call with [email protected] on Friday at 10am"
AI: Extracts email, creates meeting with attendee
You: "What meetings do I have today?"
AI: Shows today's events in a clean list
You: "How busy am I this week?"
AI: Provides weekly overview with insights
You: "What about next week?"
AI: Remembers context from previous question about schedule
You: "Can you reschedule that meeting to 3pm?"
AI: Knows which meeting you're referring to
- App Router: Modern Next.js routing
- React 18: Latest React features
- Tailwind CSS: Utility-first styling
- Framer Motion: Smooth animations
- NextAuth.js: Authentication
- Chat API: Processes messages with conversation history
- Calendar API: Handles Google Calendar operations
- Authentication: Manages OAuth2 tokens
- AWS Bedrock: Claude 3 Sonnet model
- Context Awareness: Maintains conversation history
- Smart Parsing: Extracts structured data from natural language
- Google Calendar API: Calendar operations
- Google OAuth2: User authentication
- AWS Bedrock: AI model inference
MessageBubble: WhatsApp-style message bubblesChatInput: Modern input with emoji and attachment buttonsAuto-scroll: Smooth scrolling to latest messages
CalendarView: Clean event displayEvent Creation: Smart form processingQuick Actions: One-click calendar operations
SignInButton: Google OAuth integrationSession Management: Automatic token handlingProtected Routes: Secure API endpoints
The app uses a green color scheme inspired by WhatsApp. To customize:
- Update
tailwind.config.jsfor theme colors - Modify
app/globals.cssfor component styles - Adjust color classes in components
Customize AI responses in lib/aws-bedrock.js:
- Modify system prompts
- Adjust conversation history length
- Change response formatting
Add new features by:
- Creating new API routes in
app/api/ - Adding components in
components/ - Updating the main chat logic in
app/page.js
"Access blocked: Test Me has not completed the Google verification process"
- Add your Google account as a test user in OAuth consent screen
"Error 400: redirect_uri_mismatch"
- Ensure
NEXTAUTH_URLmatches your domain - Add correct redirect URI in Google Cloud Console
Calendar events not creating
- Check Google Calendar API is enabled
- Verify OAuth scopes include calendar permissions
- Check AWS Bedrock credentials and region
Messages not showing conversation history
- Ensure conversation history is being passed to API
- Check browser console for JavaScript errors
- Use browser dev tools to inspect API calls
- Check server logs for detailed error messages
- Test with different natural language inputs
- Verify environment variables are loaded
- Connect your GitHub repository
- Add environment variables in Vercel dashboard
- Update
NEXTAUTH_URLto your production domain - Deploy!
- Update
NEXTAUTH_URLto match your domain - Ensure all environment variables are set
- Configure OAuth redirect URIs for production
- Fork the repository
- Create a feature branch
- Make your changes
- Test thoroughly
- Submit a pull request
MIT License - feel free to use this project for personal or commercial purposes.
- Next.js Team - Amazing React framework
- Tailwind CSS - Utility-first CSS framework
- Framer Motion - Smooth animations
- AWS Bedrock - Powerful AI capabilities
- Google Calendar API - Calendar integration
Built with ❤️ using modern web technologies
For support or questions, please open an issue on GitHub.