Pixel Pete and the Smart Summary Machine

I am building a Debate / Group Discussion web application using Next.js (App Router). Current functionality: Multiple participants generate arguments on a topic. All discussion messages are stored in an array. Each message contains speaker name and content. Now I want to implement a new feature: 🎯 Feature: AI-Powered Discussion Summarizer Requirements: Add a button: "Generate Discussion Summary" When clicked: Collect the full discussion transcript. Send it to a backend API route. Use an LLM to generate a structured summary. The AI should analyze the transcript and return: Key Topics Discussed Main Arguments Presented Important Insights Conflicting Opinions Final Overall Summary (5–7 sentences) The output should be structured and clean. Use proper loading state and error handling. Ensure the prompt prevents hallucination and keeps summary neutral. Tech Stack: - Next.js 15 (App Router) - TypeScript - Folder structure: src/ ├── app/ │ ├── api/ │ └── debate/page.tsx ├── components/ │ └── debate/TrainingModeClient.tsx Task: Add summarization feature.