MeetingGhost

MeetingGhost turns meeting transcripts into attendee-specific follow-up emails, action items, and a clean meeting summary. It is built for the moment after a meeting when the transcript is messy but the work still needs to get assigned.

What It Does

Paste or upload a transcript, let Gemini extract the structure, then review one card per attendee with their action items and draft email. The app also supports saving past meetings to the backend so they can be reopened from the history drawer.

Core Features

• Transcript input by paste, .txt / .md / .vtt / .srt upload, or demo transcript
• Gemini-powered extraction of meeting title, date, summary, attendees, action items, and personalised email drafts
• Tone and language settings for the generated emails
• Per-attendee tabs with keyboard navigation using left and right arrows
• Copy a single email, open it in Gmail, or copy/export all emails at once
• Markdown export of the complete meeting output
• Meeting history backed by the Express + Prisma API
• Loading and error states for the analysis flow

App Flow

1. Enter or upload a transcript.
2. Choose tone and output language if needed.
3. Run the analysis with the button or Ctrl/Cmd + Enter.
4. Review the meeting summary and attendee cards.
5. Copy, export, or send follow-ups from the generated drafts.

Tech Stack

• React 18 + TypeScript
• Vite
• Gemini 2.5 Flash via @google/generative-ai
• Express API for meeting history
• Prisma with PostgreSQL for persistence
• Vanilla CSS for the interface

Setup

npm install

Create a .env file in the project root:

VITE_GEMINI_API_KEY=your_gemini_api_key_here
DATABASE_URL=your_postgres_connection_string
DIRECT_URL=your_direct_postgres_connection_string

Start the app:

npm run dev

Other available scripts:

• npm run dev:client starts Vite only
• npm run dev:server starts the Express API only
• npm run build type-checks and builds the client
• npm run preview serves the production build locally

Project Structure

MeetingGhost/
├── index.html                # Vite entry HTML that mounts the React app
├── package.json              # Scripts, dependencies, and dev tooling
├── README.md                 # Project overview and setup guide
├── tsconfig.json             # TypeScript compiler configuration
├── vite.config.ts             # Vite build and dev-server configuration
├── walkthrough.md            # Product walkthrough and usage notes
├── prisma/
│   └── schema.prisma         # PostgreSQL schema for meetings and attendees
├── server/
│   └── index.ts              # Express API for saving and fetching meeting history
└── src/
    ├── App.tsx               # Main app shell, state management, and screen switching
    ├── main.tsx              # React bootstrap entry point
    ├── vite-env.d.ts         # Vite environment type declarations
    ├── components/
    │   ├── AttendeeCard.tsx  # Renders one attendee's action items and email draft
    │   ├── HeroSection.tsx   # Transcript input, demo load, upload, and analyze actions
    │   ├── HistorySidebar.tsx # Loads and displays previously saved meetings
    │   ├── Loader.tsx        # Animated analysis progress overlay
    │   ├── ResultsSection.tsx # Summary, export/copy actions, and attendee tab layout
    │   └── SettingsPanel.tsx # Tone and language settings modal
    ├── lib/
    │   ├── demo.ts           # Sample transcript used by the demo button
    │   └── gemini.ts         # Gemini prompt, request, and JSON parsing logic
    ├── styles/
    │   └── globals.css       # Global styles, theme tokens, layout, and animations
    └── types/
        └── index.ts          # Shared TypeScript types for results, settings, and attendees

File Guide

• src/App.tsx controls the main state for transcript, analysis results, settings, history, and loading.
• src/components/HeroSection.tsx handles transcript entry, file upload, demo loading, and the primary analyze action.
• src/components/ResultsSection.tsx shows the meeting summary, attendee tabs, export controls, and copy-all actions.
• src/components/AttendeeCard.tsx renders each attendee's tasks and email draft, with Gmail and copy shortcuts.
• src/components/HistorySidebar.tsx fetches previous meetings from /api/history and lets the user reopen them.
• src/components/SettingsPanel.tsx lets the user choose tone and output language.
• src/components/Loader.tsx shows the staged loading state while the transcript is being analysed.
• src/lib/gemini.ts sends the transcript to Gemini and normalises the JSON response into the app's result shape.
• src/lib/demo.ts contains the built-in demo transcript for quick testing.
• src/types/index.ts defines the shared MeetingResult, Attendee, and AppSettings types.
• src/styles/globals.css defines the visual theme, glassmorphism styling, spacing, and motion.
• server/index.ts exposes the history API and writes meeting results to the database.
• prisma/schema.prisma defines the Meeting and Attendee tables and their relation.
• index.html provides the Vite root element for the SPA.
• package.json defines the app scripts and dependency set.
• vite.config.ts configures the Vite build and dev server.
• tsconfig.json configures TypeScript compilation rules.
• walkthrough.md documents the product flow in a more narrative format.

Notes

• Analysis is performed on the client with Gemini.
• Meeting history is only available when the Express server and database are configured.
• The UI supports keyboard shortcuts for faster review and follow-up.

Built By

Kanav Modi

GitHub | Portfolio