Katalyst Founding Engineer Task – Meeting Viewer App

Live Demo: https://chronos-one-beige.vercel.app

---

Tech Stack Used

• Frontend: Next.js 13, React 18, TypeScript, Tailwind CSS
• UI Components: Aceternity UI, shadcn/ui, Lucide Icons
• Calendar Integration: Composio (Google Calendar MCP)
• AI: Google Gemini 2.5 Pro (via Mastra SDK & MCP)
• Authentication: Supabase Auth (Email/Password + Google OAuth)
• Database: Supabase (PostgreSQL)
• Hosting: Vercel
• Markdown Rendering: react-markdown with remark-gfm

---

Features Implemented

• Authentication - Supabase Auth with Email/Password and Google OAuth
• Google Calendar Integration - Fetch meetings via Composio MCP
• Meeting Display - View past and upcoming meetings with full details
• AI-Powered Summaries - Per-meeting AI summaries using Gemini 2.5 Pro
• Supabase Integration - User authentication and connection storage
• Responsive Design - Mobile-first, fully responsive UI
• Live Deployment - Production-ready on Vercel

---

Assumptions & Design Decisions

Architecture

• MCP Integration: Used Composio's Model Context Protocol (MCP) because that was the requirement 😅

• Mastra SDK: Leveraged Mastra for agent-based AI interactions, enabling structured tool usage with Gemini

AI Implementation

• Gemini 2.5 Pro: Because I'm broke and Claude's and OpenAI's api aren't free

---

Environment Variables Required

Create a .env file with the following:

# Supabase
NEXT_PUBLIC_SUPABASE_URL=your_supabase_url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key
SUPABASE_SERVICE_ROLE_KEY=your_service_role_key

# Composio
COMPOSIO_API_KEY=your_composio_api_key
COMPOSIO_AUTH_CONFIG_GOOGLECALENDAR=your_auth_config_id

# Google Gemini
GEMINI_API_KEY=your_gemini_api_key

---

How to Run Locally

Prerequisites

• Node.js 18+ installed
• Supabase account and project
• Composio account with Google Calendar integration
• Google AI Studio API key

Installation

# Clone the repository
git clone <your-repo-url>
cd Chronos

# Install dependencies
npm install

# Set up environment variables
cp .env.example .env.local
# Edit .env.local with your credentials

# Run the development server
npm run dev

Open http://localhost:3000 in your browser.

Database Setup

Run the following SQL in your Supabase SQL editor:

-- Create users table
CREATE TABLE users (
  id UUID PRIMARY KEY REFERENCES auth.users(id) ON DELETE CASCADE,
  email TEXT,
  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- Create composio_connections table
CREATE TABLE composio_connections (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  user_id UUID REFERENCES users(id) ON DELETE CASCADE,
  auth_config_id TEXT NOT NULL,
  connection_id TEXT NOT NULL,
  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- Enable RLS
ALTER TABLE users ENABLE ROW LEVEL SECURITY;
ALTER TABLE composio_connections ENABLE ROW LEVEL SECURITY;

-- RLS Policies
CREATE POLICY "Users can view own data" ON users
  FOR SELECT USING (auth.uid() = id);

CREATE POLICY "Users can insert own data" ON users
  FOR INSERT WITH CHECK (auth.uid() = id);

CREATE POLICY "Users can view own connections" ON composio_connections
  FOR SELECT USING (auth.uid() = user_id);

CREATE POLICY "Users can insert own connections" ON composio_connections
  FOR INSERT WITH CHECK (auth.uid() = user_id);

---

Project Structure

Chronos/
├── app/
│   ├── api/
│   │   ├── connect/          # Consolidated connection endpoints
│   │   ├── meetings/         # Fetch calendar meetings
│   │   └── summary/          # Generate AI summaries
│   ├── auth/
│   │   └── callback/         # Supabase OAuth callback
│   ├── composio-callback/    # Composio OAuth callback
│   ├── login/                # Login page
│   ├── signup/               # Signup page
│   └── page.tsx              # Main dashboard
├── components/
│   ├── ui/                   # shadcn/ui components
│   └── auth-form.tsx         # Authentication form
├── lib/
│   ├── agent.ts              # Mastra AI agent setup
│   ├── composio.ts           # Composio client
│   ├── mcp-service.ts        # MCP server utilities
│   └── supabase.ts           # Supabase client
└── public/

---

Key Features Explained

1. AI-Powered Meeting Summaries

• Click the sparkle icon on any meeting card
• Gemini analyzes meeting details (title, attendees, description, time)
• Generates structured summary with key points and action items
• Rendered in Markdown for rich formatting

2. Google Calendar Integration

• OAuth flow via Composio
• Automatic connection status detection
• Fetches meetings from the last 30 days to next 30 days
• Categorizes into past and upcoming

3. Secure Authentication

• Email/password signup and login
• Google OAuth integration
• Protected routes with automatic redirects
• Session management via Supabase

---

Deployment

The app is deployed on Vercel with automatic deployments from the main branch.

Production URL: https://chronos-one-beige.vercel.app

Deployment Checklist

• Environment variables configured in Vercel
• Supabase redirect URLs updated for production domain
• Google OAuth credentials updated with production callback
• Composio callback URL configured for production

---