TranscriptNote AI

A modern Next.js study-notes workspace that converts pasted or YouTube transcript text into structured, actionable study guides with an OpenAI-backed summarization pipeline.

Stack

• Next.js App Router
• Tailwind CSS
• shadcn/ui-style local components
• OpenAI Responses API with Structured Outputs
• TypeScript transcript preprocessing utilities

Project Structure

app/
  api/
    chat/route.ts       transcript-grounded Q&A
    process/route.ts    transcript cleaning + AI note generation
    youtube/route.ts    best-effort public captions import
  globals.css
  layout.tsx
  page.tsx
components/
  chat-sidebar.tsx
  markdown-reader.tsx
  transcript-note-app.tsx
  ui/                 shadcn-style primitives
lib/
  note-schema.ts      Zod schema for Structured Outputs
  openai.ts           OpenAI client/config
  prompts.ts          summarization and chat prompts
  transcript.ts       filler removal, typo fixes, timestamp parsing
  types.ts
  utils.ts            Tailwind CSS styling utilities
  youtube.ts
scripts/
  clean-transcript.ts CLI transcript cleaner
  run-tests.ts        E2E test suite runner

Run

1. Install dependencies:

npm install

2. Create .env.local from .env.local.example and set OPENAI_API_KEY.

3. Start the app:

npm run dev

The app will be available at http://localhost:3000.

• OPENAI_MODEL defaults to gpt-4o-mini. You can set it to gpt-4o or another compatible model.
• The YouTube importer works only for videos with public captions available to the server.

Testing

You can run the comprehensive E2E test suite using the following commands:

• Run tests in mock mode (runs a local mock server and performs E2E HTTP requests/assertions fully offline):

  npx tsx scripts/run-tests.ts --mock

• Run tests against a live local instance (running on port 3000):

  npx tsx scripts/run-tests.ts