Vibe Code Your Dashboard
Scaffold a Next.js + tRPC + SQLite project and build a live GitHub dashboard
By the end of this guide you'll have a working Next.js app with a live Google Calendar dashboard — and you'll have written almost none of the UI yourself.
Scaffold the T3 app
npm create t3-app@latest my-cal-dashboard -- --CI --trpc --tailwind --appRoutercd my-cal-dashboardInstall
npm install corsair @corsair-dev/googlecalendarGenerate your encryption key
Corsair encrypts stored credentials with a Key Encryption Key. Generate one and add it to .env:
Keep this key safe
If you lose it, you lose access to all stored credentials. Treat it like a root password.
Migrate the database
Corsair needs five tables. Install the driver, then run the migration:
npm install better-sqlite3npm install --save-dev @types/better-sqlite3sqlite3 corsair.db < migration.sqlCreate src/server/corsair.ts
import 'dotenv/config';
import Database from 'better-sqlite3';
import { createCorsair } from 'corsair';
import { googlecalendar } from "@corsair-dev/googlecalendar";
const db = new Database('corsair.db');
export const corsair = createCorsair({
plugins: [googlecalendar()],
database: db,
kek: process.env.CORSAIR_KEK!,
});Connect Google Calendar (optional)
Google Calendar uses OAuth2. You'll need a GCP OAuth app first:
- Go to the Google Cloud Console, create a project, and enable the Google Calendar API.
- Under APIs & Services → Credentials, create an OAuth 2.0 Client ID (Application type: Web application). No redirect URI needed — Corsair handles it locally.
- Copy your Client ID and Client Secret, then store them:
npm install @corsair-dev/clinpx corsair setup --googlecalendar client_id=YOUR_CLIENT_ID client_secret=YOUR_CLIENT_SECRET- Start the OAuth flow:
npx corsair auth --plugin=googlecalendarOpen the authUrl printed in the terminal. Once you authorize in the browser, tokens are saved automatically and the command exits.
Vibe code the dashboard (optional)
Paste this prompt into Claude, Cursor, or any AI coding agent:
I have a Next.js T3 app. The Google Calendar plugin is connected via Corsair.
Build me a Google Calendar dashboard on the home page. I want to see:
- A stats row showing: how many events I have today, how many this week, what my next meeting is, and how many hours are blocked
today
- Today's full agenda — all my events for today in order with times and titles
- An upcoming events panel — my next couple weeks of events grouped by day
- A Create Meeting button that opens a form to schedule a new event
- A notes field on each meeting card where I can save and edit private notes per event (store these in a local table, not on Google
Calendar)
- A Refresh button in the header that fetches the latest events from Google Calendar and updates what's shown on screen, including
removing any events the user has deleted from Google Calendar
The app should use await corsair.googlecalendar.db as a cache — load from there first, and only call Google Calendar when the data isn't
cached yet, when creating an event, or when the user clicks Refresh. The page should not make any live API calls on its own after
the first load.Run pnpm dev when it's done.
What's next
Google Calendar Plugin
Full API reference — create events, check availability, and handle webhook notifications.
Webhooks
React to calendar changes in real time — new events, updates, and deletions pushed to your server.
Workflows
Chain calendar events to other plugins — meeting created → Slack notification → Linear task.
Multi-Tenancy
Building a product? Each user gets their own calendar credentials and isolated data.