Epic Next JS 15 Tutorial Part 6: Create Video Summary with Next.js and AI SDK

In the previous tutorial, we completed our Dashboard and Account pages. In this section, we'll build a video summary feature using the AI SDK from Vercel.

• Part 1: Learn Next.js by building a website
• Part 2: Building Out The Hero Section of the homepage
• Part 3: Finishup up the homepage Features Section, TopNavigation and Footer
• Part 4: How to handle login and Authentification in Next.js
• Part 5: Building out the Dashboard page and upload file using NextJS server actions
• Part 6: Get Video Transcript with AI SDK
• Part 7: Strapi CRUD permissions
• Part 8: Search & pagination in Nextjs
• Part 9: Backend deployment to Strapi Cloud
• Part 10: Frontend deployment to Vercel

We'll start by building a SummaryForm component. Instead of server actions, we'll use Next.js API routes for backend logic.

Learn more about Next.js route handlers.

Creating the Summary Form

First, let's create our summary form component.

Navigate to src/components/forms and create summary-form.tsx with this starter code:

1"use client";
2import { useState } from "react";
3import { toast } from "sonner";
4import { cn, extractYouTubeID } from "@/lib/utils";
5
6import { Input } from "@/components/ui/input";
7import { SubmitButton } from "@/components/custom/submit-button";
8
9type ITranscriptResponse = {
10  fullTranscript: string;
11  title?: string;
12  videoId?: string;
13  thumbnailUrl?: string;
14};
15
16interface IErrors {
17  message: string | null;
18  name: string;
19}
20
21const INITIAL_STATE = {
22  message: null,
23  name: "",
24};
25
26export function SummaryForm() {
27  const [loading, setLoading] = useState(false);
28  const [error, setError] = useState<IErrors>(INITIAL_STATE);
29  const [value, setValue] = useState<string>("");
30
31  async function handleFormSubmit(event: React.FormEvent<HTMLFormElement>) {
32    event.preventDefault();
33    setLoading(true);
34
35    const formData = new FormData(event.currentTarget);
36    const videoId = formData.get("videoId") as string;
37    const processedVideoId = extractYouTubeID(videoId);
38
39    if (!processedVideoId) {
40      toast.error("Invalid Youtube Video ID");
41      setLoading(false);
42      setValue("");
43      setError({
44        ...INITIAL_STATE,
45        message: "Invalid Youtube Video ID",
46        name: "Invalid Id",
47      });
48      return;
49    }
50
51    let currentToastId: string | number | undefined;
52
53    try {
54      // Step 1: Get transcript
55      currentToastId = toast.loading("Getting transcript...");
56
57      // Step 2: Generate summary
58      toast.dismiss(currentToastId);
59      currentToastId = toast.loading("Generating summary...");
60
61      // Step 3: Save summary to database
62      toast.dismiss(currentToastId);
63      currentToastId = toast.loading("Saving summary...");
64
65      toast.success("Summary Created and Saved!");
66      setValue("");
67
68      // Redirect to the summary details page
69    } catch (error) {
70      if (currentToastId) toast.dismiss(currentToastId);
71      console.error("Error:", error);
72      toast.error(
73        error instanceof Error ? error.message : "Failed to create summary"
74      );
75    } finally {
76      setLoading(false);
77    }
78  }
79
80  function clearError() {
81    setError(INITIAL_STATE);
82    if (error.message) setValue("");
83  }
84
85  const errorStyles = error.message
86    ? "outline-1 outline outline-red-500 placeholder:text-red-700"
87    : "";
88
89  return (
90    <div className="w-full">
91      <form onSubmit={handleFormSubmit} className="flex gap-2 items-center">
92        <Input
93          name="videoId"
94          placeholder={
95            error.message ? error.message : "Youtube Video ID or URL"
96          }
97          value={value}
98          onChange={(e) => setValue(e.target.value)}
99          onMouseDown={clearError}
100          className={cn(
101            "w-full focus:text-black focus-visible:ring-pink-500",
102            errorStyles
103          )}
104          required
105        />
106
107        <SubmitButton
108          text="Create Summary"
109          loadingText="Creating Summary"
110          className="bg-pink-500"
111          loading={loading}
112        />
113      </form>
114    </div>
115  );
116}

The above code contains a basic form UI and a handleFormSubmit function, which does not include any of our logic to get the summary yet.

We also use Sonner, one of my favorite toast libraries. You can learn more about it here.

But we are not using it directly; instead, we are using the Chadcn UI component, which you can find here.

npx shadcn@latest add sonner

Once Sonner is installed, implement it in our main layout.tsx file by adding the following import.

1import { Toaster } from "@/components/ui/sonner";

And adding the code below above our TopNav.

1<body className={`${geistSans.variable} ${geistMono.variable} antialiased`}>
2  <Toaster position="bottom-center" />
3  <Header data={globalData.data.header} />
4  {children}
5  <Footer data={globalData.data.footer} />
6</body>

Before adding this component to our top navigation, notice that we expect extractYouTubeID helper method, let's add the following in our utils.ts file found in our lib folder and add the following code:

1export function extractYouTubeID(urlOrID: string): string | null {
2  // Regular expression for YouTube ID format
3  const regExpID = /^[a-zA-Z0-9_-]{11}$/;
4
5  // Check if the input is a YouTube ID
6  if (regExpID.test(urlOrID)) {
7    return urlOrID;
8  }
9
10  // Regular expression for standard YouTube links
11  const regExpStandard = /youtube\.com\/watch\?v=([a-zA-Z0-9_-]+)/;
12
13  // Regular expression for YouTube Shorts links
14  const regExpShorts = /youtube\.com\/shorts\/([a-zA-Z0-9_-]+)/;
15
16  // Check for standard YouTube link
17  const matchStandard = urlOrID.match(regExpStandard);
18  if (matchStandard) {
19    return matchStandard[1];
20  }
21
22  // Check for YouTube Shorts link
23  const matchShorts = urlOrID.match(regExpShorts);
24  if (matchShorts) {
25    return matchShorts[1];
26  }
27
28  // Return null if no match is found
29  return null;
30}

Now we can go ahead and add this form to our top navigation by navigating to the src/components/custom/header.tsx file and making the following changes.

1// import the form
2import { SummaryForm } from "@/components/forms/summary-form";
3
4// rest of the code
5
6export async function Header({ data }: Readonly<HeaderProps>) {
7  const { logoText, ctaButton } = data;
8  const user = await getUserMeLoader();
9
10  return (
11    <div className={styles.header}>
12      <Logo text={logoText.label} />
13      {user.success && <SummaryForm />}
14      <div className={styles.actions}>
15        {user.success && user.data ? (
16          <LoggedInUser userData={user.data} />
17        ) : (
18          <Link href={ctaButton.href}>
19            <Button>{ctaButton.label}</Button>
20          </Link>
21        )}
22      </div>
23    </div>
24  );
25}

Let's restart our frontend project and see if it shows up.

Now that our basic form is working let's examine how to set up our first API Handler Route in Next.js 15.

How To Create A Route Handler in Next.js 15

We will have the Next.js docs open as a reference.

Let's start by creating a new folder inside our app directory called api, a folder called transcript, and a file called route.ts. Then, paste in the following code.

1import { NextRequest } from "next/server";
2import { actions } from "@/data/actions";
3import { services } from "@/data/services";
4
5export const maxDuration = 150;
6export const dynamic = "force-dynamic";
7
8export async function POST(req: NextRequest) {
9  const user = await services.auth.getUserMeService();
10  const token = await actions.auth.getAuthTokenAction();
11
12  if (!user.success || !token) {
13    return new Response(
14      JSON.stringify({ data: null, error: "Not authenticated" }),
15      { status: 401 }
16    );
17  }
18
19  const body = await req.json();
20  const videoId = body.videoId;
21
22  try {
23    const transcriptData = await services.summarize.generateTranscript(videoId);
24
25    if (!transcriptData?.fullTranscript) {
26      throw new Error("No transcript data found");
27    }
28
29    return new Response(JSON.stringify({ data: transcriptData, error: null }));
30  } catch (error) {
31    console.error("Error processing request:", error);
32    if (error instanceof Error)
33      return new Response(JSON.stringify({ error: error.message }));
34    return new Response(JSON.stringify({ error: "Unknown error" }));
35  }
36}

Getting Transcript From YouTube

Next, let's create a service to call in our new route handler that will be responsible for generating our video.

We will implement the following library youtubei.js in our Next.js application, directly.

Let's install it with the following:

yarn add youtubei.js

You can also move this functionality to Strapi via a plugin. You can learn how to do this in the following tutorial.

I like the plugin approach but to keep this tutorial in scope we will just implement it directly.

Navigate to src/data/services and create a new folder called summary and inside create a file called generate-transcript.ts.

And add the following code:

1import {
2  TranscriptData,
3  TranscriptSegment,
4  YouTubeTranscriptSegment,
5  YouTubeAPIVideoInfo,
6} from "./types";
7
8const processTranscriptSegments = (
9  segments: YouTubeTranscriptSegment[]
10): TranscriptSegment[] => {
11  return segments.map((segment) => ({
12    text: segment.snippet.text,
13    start: Number(segment.start_ms),
14    end: Number(segment.end_ms),
15    duration: Number(segment.end_ms) - Number(segment.start_ms),
16  }));
17};
18
19const cleanImageUrl = (url: string): string => url.split("?")[0];
20
21const validateIdentifier = (identifier: string): void => {
22  if (!identifier || typeof identifier !== "string") {
23    throw new Error("Invalid YouTube video identifier");
24  }
25};
26
27const extractBasicInfo = (info: YouTubeAPIVideoInfo) => {
28  const { title, id: videoId, thumbnail } = info.basic_info;
29  const thumbnailUrl = thumbnail?.[0]?.url;
30
31  return {
32    title: title || "Untitled Video",
33    videoId,
34    thumbnailUrl: thumbnailUrl ? cleanImageUrl(thumbnailUrl) : undefined,
35  };
36};
37
38const getTranscriptSegments = async (
39  info: YouTubeAPIVideoInfo
40): Promise<YouTubeTranscriptSegment[]> => {
41  const transcriptData = await info.getTranscript();
42
43  if (!transcriptData?.transcript?.content?.body?.initial_segments) {
44    throw new Error("No transcript available for this video");
45  }
46
47  return transcriptData.transcript.content.body.initial_segments;
48};
49
50export const generateTranscript = async (
51  identifier: string
52): Promise<TranscriptData> => {
53  console.log(identifier);
54  try {
55    const { Innertube } = await import("youtubei.js");
56    const youtube = await Innertube.create({
57      lang: "en",
58      location: "US",
59      retrieve_player: false,
60    });
61
62    console.log("IDENTIFIER", identifier, "VS", "LCYBVpSB0Wo");
63
64    validateIdentifier(identifier);
65
66    const info = await youtube.getInfo(identifier);
67
68    console.log("INFO:", info);
69    if (!info) {
70      throw new Error("No video information found");
71    }
72
73    const { title, videoId, thumbnailUrl } = extractBasicInfo(
74      info as YouTubeAPIVideoInfo
75    );
76    const segments = await getTranscriptSegments(info as YouTubeAPIVideoInfo);
77    const transcriptWithTimeCodes = processTranscriptSegments(segments);
78    const fullTranscript = segments
79      .map((segment) => segment.snippet.text)
80      .join(" ");
81
82    return {
83      title,
84      videoId,
85      thumbnailUrl,
86      fullTranscript,
87      transcriptWithTimeCodes,
88    };
89  } catch (error) {
90    console.error("Error fetching transcript:", error);
91    throw new Error(
92      error instanceof Error ? error.message : "Failed to fetch transcript"
93    );
94  }
95};

Now let's create our types file and add the following types.

1export interface StrapiConfig {
2  baseUrl: string;
3  apiToken: string;
4  path: string;
5}
6
7export interface TranscriptSegment {
8  text: string;
9  start: number;
10  end: number;
11  duration: number;
12}
13
14export interface TranscriptData {
15  title: string | undefined;
16  videoId: string | undefined;
17  thumbnailUrl: string | undefined;
18  fullTranscript: string | undefined;
19  transcriptWithTimeCodes?: TranscriptSegment[];
20}
21
22// Add proper types
23export interface SummaryData {
24  fullTranscript: string;
25  title: string;
26  thumbnailUrl: string;
27  transcriptWithTimeCodes: TranscriptSegment[];
28}
29
30export interface YouTubeTranscriptSegment {
31  snippet: {
32    text: string;
33  };
34  start_ms: string;
35  end_ms: string;
36}
37
38export interface YouTubeThumbnail {
39  url: string;
40  width?: number;
41  height?: number;
42}
43
44export interface YouTubeBasicInfo {
45  title: string | undefined;
46  id: string;
47  thumbnail?: YouTubeThumbnail[];
48}
49
50export interface YouTubeTranscriptContent {
51  transcript: {
52    content: {
53      body: {
54        initial_segments: YouTubeTranscriptSegment[];
55      };
56    };
57  };
58}
59
60// Minimal interface for the properties we actually use from the YouTube API
61export interface YouTubeAPIVideoInfo {
62  basic_info: {
63    title?: string;
64    id: string;
65    thumbnail?: Array<{
66      url: string;
67      width?: number;
68      height?: number;
69    }>;
70  };
71  getTranscript(): Promise<YouTubeTranscriptContent>;
72}

And finally let export our summary folder, let's create index.ts file and add the following code:

1import { generateTranscript } from "./generate-transcript";
2
3export { generateTranscript };

And finally let's add this to our root service index.ts file to export our summary service.

1import { generateTranscript } from "./summary";
2
3summarize: {
4    generateTranscript,
5},

The full file should look like the following:

1import {
2  registerUserService,
3  loginUserService,
4  getUserMeService,
5} from "./auth";
6
7import { updateProfileService, updateProfileImageService } from "./profile";
8import { fileUploadService, fileDeleteService } from "./file";
9
10import { generateTranscript } from "./summary";
11
12export const services = {
13  auth: {
14    registerUserService,
15    loginUserService,
16    getUserMeService,
17  },
18  profile: {
19    updateProfileService,
20    updateProfileImageService,
21  },
22  file: {
23    fileUploadService,
24    fileDeleteService,
25  },
26  summarize: {
27    generateTranscript,
28  },
29};

Now, let's update our form to incorperate our newly created route.

In the handle submit, lets add the following inside our try catch under Step 1 comment:

1const transcriptResponse = await api.post<
2  ITranscriptResponse,
3  { videoId: string }
4>("/api/transcript", { videoId: processedVideoId });
5
6if (!transcriptResponse.success) {
7  toast.dismiss(currentToastId);
8  toast.error(transcriptResponse.error?.message);
9  return;
10}
11
12const fullTranscript = !transcriptResponse.data?.fullTranscript;
13
14if (!fullTranscript) {
15  toast.dismiss(currentToastId);
16  toast.error("No transcript data found");
17  return;
18}
19
20console.log(fullTranscript);

Don't forget to import our api util at the top:

1import { api } from "@/data/data-api";

The complete summary-form.tsx file should look like the following.

1"use client";
2import { useState } from "react";
3import { toast } from "sonner";
4import { cn, extractYouTubeID } from "@/lib/utils";
5import { api } from "@/data/data-api";
6
7import { Input } from "@/components/ui/input";
8import { SubmitButton } from "@/components/custom/submit-button";
9
10type ITranscriptResponse = {
11  fullTranscript: string;
12  title?: string;
13  videoId?: string;
14  thumbnailUrl?: string;
15};
16
17interface IErrors {
18  message: string | null;
19  name: string;
20}
21
22const INITIAL_STATE = {
23  message: null,
24  name: "",
25};
26
27export function SummaryForm() {
28  const [loading, setLoading] = useState(false);
29  const [error, setError] = useState<IErrors>(INITIAL_STATE);
30  const [value, setValue] = useState<string>("");
31
32  async function handleFormSubmit(event: React.FormEvent<HTMLFormElement>) {
33    event.preventDefault();
34    setLoading(true);
35
36    const formData = new FormData(event.currentTarget);
37    const videoId = formData.get("videoId") as string;
38    const processedVideoId = extractYouTubeID(videoId);
39
40    if (!processedVideoId) {
41      toast.error("Invalid Youtube Video ID");
42      setLoading(false);
43      setValue("");
44      setError({
45        ...INITIAL_STATE,
46        message: "Invalid Youtube Video ID",
47        name: "Invalid Id",
48      });
49      return;
50    }
51
52    let currentToastId: string | number | undefined;
53
54    try {
55      // Step 1: Get transcript
56      currentToastId = toast.loading("Getting transcript...");
57
58      const transcriptResponse = await api.post<
59        ITranscriptResponse,
60        { videoId: string }
61      >("/api/transcript", { videoId: processedVideoId });
62
63      if (!transcriptResponse.success) {
64        toast.dismiss(currentToastId);
65        toast.error(transcriptResponse.error?.message);
66        return;
67      }
68
69      const fullTranscript = !transcriptResponse.data?.fullTranscript;
70
71      if (!fullTranscript) {
72        toast.dismiss(currentToastId);
73        toast.error("No transcript data found");
74        return;
75      }
76
77      console.log(fullTranscript);
78
79      // Step 2: Generate summary
80      toast.dismiss(currentToastId);
81      currentToastId = toast.loading("Generating summary...");
82
83      // Step 3: Save summary to database
84      toast.dismiss(currentToastId);
85      currentToastId = toast.loading("Saving summary...");
86
87      toast.success("Summary Created and Saved!");
88      setValue("");
89
90      // Redirect to the summary details page
91    } catch (error) {
92      if (currentToastId) toast.dismiss(currentToastId);
93      console.error("Error:", error);
94      toast.error(
95        error instanceof Error ? error.message : "Failed to create summary"
96      );
97    } finally {
98      setLoading(false);
99    }
100  }
101
102  function clearError() {
103    setError(INITIAL_STATE);
104    if (error.message) setValue("");
105  }
106
107  const errorStyles = error.message
108    ? "outline-1 outline outline-red-500 placeholder:text-red-700"
109    : "";
110
111  return (
112    <div className="w-full flex-1 mx-4">
113      <form onSubmit={handleFormSubmit} className="flex gap-2 items-center">
114        <Input
115          name="videoId"
116          placeholder={
117            error.message ? error.message : "Youtube Video ID or URL"
118          }
119          value={value}
120          onChange={(e) => setValue(e.target.value)}
121          onMouseDown={clearError}
122          className={cn(
123            "w-full focus:text-black focus-visible:ring-pink-500",
124            errorStyles
125          )}
126          required
127        />
128
129        <SubmitButton
130          text="Create Summary"
131          loadingText="Creating Summary"
132          className="bg-pink-500"
133          loading={loading}
134        />
135      </form>
136    </div>
137  );
138}

Now, let's test our front end to see if our transcript service is working as expected.

Once we submit our form, you should see the response in the console.

Excellent. Now that we have our transcript, we can use it to prepare our summary.

Summarize Video with AI SDK with OPEN AI

We will leverage AI SDK to summarize our video.

It is an amazing library from Vercel, and makes it easy to interact with our OPEN AI LLM.

Let's first start by installing the package with the following.

And then we will go through the process of creating our summarize service.

We can install the AI SDK with the following:

yarn add ai

and

yarn add @ai-sdk/openai

Since we will be using the Open AI model.

note: You will need to add your Open AI API key in the .env file.

1OPENAI_API_KEY = your_api_key_here;

Now, let's create our service to generate our summary using AI SDK.

Navigate to our summary folder and create the following file generate-summary.ts and paste in the following code:

1import { openai } from "@ai-sdk/openai";
2import { generateText } from "ai";
3
4export async function generateSummary(content: string, template?: string) {
5  const systemPrompt =
6    template ||
7    `
8    You are a helpful assistant that creates concise and informative summaries of YouTube video transcripts.
9    Please summarize the following transcript, highlighting the key points and main ideas.
10    Keep the summary clear, well-structured, and easy to understand.
11  `;
12
13  try {
14    const { text } = await generateText({
15      model: openai(process.env.OPENAI_MODEL ?? "gpt-4o-mini"),
16      system: systemPrompt,
17      prompt: `Please summarize this transcript:\n\n${content}`,
18      temperature: process.env.OPENAI_TEMPERATURE
19        ? parseFloat(process.env.OPENAI_TEMPERATURE)
20        : 0.7,
21      maxOutputTokens: process.env.OPENAI_MAX_TOKENS
22        ? parseInt(process.env.OPENAI_MAX_TOKENS)
23        : 4000,
24    });
25
26    return text;
27  } catch (error) {
28    console.error("Error generating summary:", error);
29
30    if (error instanceof Error) {
31      throw new Error(`Failed to generate summary: ${error.message}`);
32    }
33
34    throw new Error("Failed to generate summary");
35  }
36}

Nice, now let's export our service from the summary/index.ts file:

1import { generateTranscript } from "./generate-transcript";
2import { generateSummary } from "./generate-summary";
3
4export { generateTranscript, generateSummary };

And export it from the root service/index.ts file:

1import {
2  registerUserService,
3  loginUserService,
4  getUserMeService,
5} from "./auth";
6
7import { updateProfileService, updateProfileImageService } from "./profile";
8import { fileUploadService, fileDeleteService } from "./file";
9
10import { generateTranscript, generateSummary } from "./summary";
11
12export const services = {
13  auth: {
14    registerUserService,
15    loginUserService,
16    getUserMeService,
17  },
18  profile: {
19    updateProfileService,
20    updateProfileImageService,
21  },
22  file: {
23    fileUploadService,
24    fileDeleteService,
25  },
26  summarize: {
27    generateTranscript,
28    generateSummary,
29  },
30};

Now let's go pack to our summary-form.tsx and add the following changes in the form submit handler bellow the Step 2 comment:

1const summaryResponse = await api.post<string, { fullTranscript: string }>(
2  "/api/summarize",
3  { fullTranscript: fullTranscript },
4  { timeoutMs: 120000 }
5);
6
7if (!summaryResponse.success) {
8  toast.dismiss(currentToastId);
9  toast.error(summaryResponse.error?.message);
10  return;
11}
12
13const summaryData = summaryResponse.data;
14
15if (!summaryData) {
16  toast.dismiss(currentToastId);
17  toast.error("No summary generated");
18  return;
19}
20
21console.log(summaryData);

Notice we are making a POST request to /api/summarize endpoint, we did not yet create one, but it will follow a simular pattern of creating next.js routes.

Inside of our app/api folder, create a new folder called summarize with a file called route.ts and add the following code:

1import { NextRequest } from "next/server";
2import { actions } from "@/data/actions";
3import { services } from "@/data/services";
4
5export const maxDuration = 150;
6export const dynamic = "force-dynamic";
7
8const TEMPLATE = `
9You are an expert content analyst and copywriter. Create a comprehensive summary following this exact structure:
10
11## Quick Overview
12Start with a 2-3 sentence description of what this content covers.
13
14## Key Topics Summary
15Summarize the content using 5 main topics. Write in a conversational, first-person tone as if explaining to a friend.
16
17## Key Points & Benefits
18List the most important points and practical benefits viewers will gain.
19
20## Detailed Summary
21Write a complete Summary including:
22- Engaging introduction paragraph
23- Timestamped sections (if applicable)
24- Key takeaways section
25- Call-to-action
26
27---
28Format your response using clear markdown headers and bullet points. Keep language natural and accessible throughout.
29`.trim();
30
31export async function POST(req: NextRequest) {
32  const user = await services.auth.getUserMeService();
33  const token = await actions.auth.getAuthTokenAction();
34
35  if (!user.success || !token) {
36    return new Response(
37      JSON.stringify({ data: null, error: "Not authenticated" }),
38      { status: 401 }
39    );
40  }
41
42  console.log("USER CREDITS: ", user.data?.credits);
43
44  if (!user.data || (user.data.credits || 0) < 1) {
45    return new Response(
46      JSON.stringify({
47        data: null,
48        error: "Insufficient credits",
49      }),
50      { status: 402 }
51    );
52  }
53
54  const body = await req.json();
55  const { fullTranscript } = body;
56
57  if (!fullTranscript) {
58    return new Response(JSON.stringify({ error: "No transcript provided" }), {
59      status: 400,
60    });
61  }
62
63  try {
64    const summary = await services.summarize.generateSummary(
65      fullTranscript,
66      TEMPLATE
67    );
68
69    return new Response(JSON.stringify({ data: summary, error: null }));
70  } catch (error) {
71    console.error("Error processing request:", error);
72    if (error instanceof Error)
73      return new Response(JSON.stringify({ error: error.message }));
74    return new Response(JSON.stringify({ error: "Error generating summary." }));
75  }
76}

This route is gong to use our generateSummaryService also you may notice this code snippet where we check if user has enough credits.

1if (!user.data || (user.data.credits || 0) < 1) {
2  return new Response(
3    JSON.stringify({
4      error: {
5        status: 402,
6        name: "InsufficientCredits",
7        message: "Insufficient credits to generate summary",
8      },
9    }),
10    { status: 402 }
11  );
12}

Now, let's check if we are getting the summary?

Great! The insufficient credits error message works correctly. When we update the credits, we can successfully generate our summary.

Now that we know we are getting our summary, let's take a look how we can save our summaries to Strapi.

Saving Our Summary To Strapi

First, create a new collection-type in Strapi admin to save our summary.

Navigate to the content builder page and create a new collection named Summary with the following fields.

Let's add the following fields.

You can make a relations between the Summary and User collection types. But in this case we will only use the userId field to store the documentId of the user who created the summary.

This way we don't need to expose the user api which is something we would have to do if we were to make a relations between the Summary and User collection types.

So whenever we want to find all summaries for a user, we can simply query the Summary collection type and filter by the userId field.

Here is what the final fields will look like.

Now, navigate to Setting and add the following permissions.

Now that we have our Summary collection-type, let's create a service to handle saving our summary to Strapi.

Navigate to our summary folder in service and create the following file save-summary.ts and add the following code:

1import qs from "qs";
2import { getStrapiURL } from "@/lib/utils";
3import type { TStrapiResponse, TSummary } from "@/types";
4import { api } from "@/data/data-api";
5
6const baseUrl = getStrapiURL();
7
8export async function saveSummaryService(
9  summaryData: Partial<TSummary>
10): Promise<TStrapiResponse<TSummary>> {
11  const query = qs.stringify({
12    populate: "*",
13  });
14
15  const url = new URL("/api/summaries", baseUrl);
16  url.search = query;
17
18  // Strapi expects data to be wrapped in a 'data' object
19  const payload = { data: summaryData };
20  const result = await api.post<TSummary, typeof payload>(url.href, payload);
21
22  console.log("######### actual save summary response");
23  console.dir(result, { depth: null });
24
25  return result;
26}

Make sure to export it from the summary/index.ts file:

1import { generateTranscript } from "./generate-transcript";
2import { generateSummary } from "./generate-summary";
3import { saveSummaryService } from "./save-summary";
4
5export { generateTranscript, generateSummary, saveSummaryService };

And export it from the root index.ts file found in the services folder:

1import {
2  registerUserService,
3  loginUserService,
4  getUserMeService,
5} from "./auth";
6
7import { updateProfileService, updateProfileImageService } from "./profile";
8import { fileUploadService, fileDeleteService } from "./file";
9
10import {
11  generateTranscript,
12  generateSummary,
13  saveSummaryService,
14} from "./summary";
15
16export const services = {
17  auth: {
18    registerUserService,
19    loginUserService,
20    getUserMeService,
21  },
22  profile: {
23    updateProfileService,
24    updateProfileImageService,
25  },
26  file: {
27    fileUploadService,
28    fileDeleteService,
29  },
30  summarize: {
31    generateTranscript,
32    generateSummary,
33    saveSummaryService,
34  },
35};

Now that we have our saveSummaryService, let's use it in our handleFormSubmit, found in our form named summary-form.tsx.

First, let's import our newly created service.

Update the handleFormSubmit with the following code after the Step 3 comment:

1const saveResponse = await services.summarize.saveSummaryService({
2  title: transcriptResponse.data?.title || `Summary for ${processedVideoId}`,
3  content: summaryResponse.data,
4  videoId: processedVideoId,
5});
6
7if (!saveResponse.success) {
8  toast.dismiss(currentToastId);
9  toast.error(saveResponse.error?.message);
10  return;
11}
12
13console.log("SAVE RESPONSE:", saveResponse);
14toast.dismiss(currentToastId);
15currentToastId = undefined;
16toast.success("Summary Created and Saved!");
17setValue("");
18
19// Redirect to the summary details page
20router.push("/dashboard/summaries/" + saveResponse.data?.documentId);

Notice we are using router.push() make sure to import it from useRouter at the top.

1import { useRouter } from "next/navigation";

and define it in the component:

1const router = useRouter();

The final code should look like the following:

1"use client";
2import { useState } from "react";
3import { toast } from "sonner";
4import { cn, extractYouTubeID } from "@/lib/utils";
5import { api } from "@/data/data-api";
6import { useRouter } from "next/navigation";
7import { services } from "@/data/services";
8
9import { Input } from "@/components/ui/input";
10import { SubmitButton } from "@/components/custom/submit-button";
11
12type ITranscriptResponse = {
13  fullTranscript: string;
14  title?: string;
15  videoId?: string;
16  thumbnailUrl?: string;
17};
18
19interface IErrors {
20  message: string | null;
21  name: string;
22}
23
24const INITIAL_STATE = {
25  message: null,
26  name: "",
27};
28
29export function SummaryForm() {
30  const router = useRouter();
31  const [loading, setLoading] = useState(false);
32  const [error, setError] = useState<IErrors>(INITIAL_STATE);
33  const [value, setValue] = useState<string>("");
34
35  async function handleFormSubmit(event: React.FormEvent<HTMLFormElement>) {
36    event.preventDefault();
37    setLoading(true);
38
39    const formData = new FormData(event.currentTarget);
40    const videoId = formData.get("videoId") as string;
41    const processedVideoId = extractYouTubeID(videoId);
42
43    if (!processedVideoId) {
44      toast.error("Invalid Youtube Video ID");
45      setLoading(false);
46      setValue("");
47      setError({
48        ...INITIAL_STATE,
49        message: "Invalid Youtube Video ID",
50        name: "Invalid Id",
51      });
52      return;
53    }
54
55    let currentToastId: string | number | undefined;
56
57    try {
58      // Step 1: Get transcript
59      currentToastId = toast.loading("Getting transcript...");
60
61      const transcriptResponse = await api.post<
62        ITranscriptResponse,
63        { videoId: string }
64      >("/api/transcript", { videoId: processedVideoId });
65
66      if (!transcriptResponse.success) {
67        toast.dismiss(currentToastId);
68        toast.error(transcriptResponse.error?.message);
69        return;
70      }
71
72      const fullTranscript = transcriptResponse.data?.fullTranscript;
73
74      if (!fullTranscript) {
75        toast.dismiss(currentToastId);
76        toast.error("No transcript data found");
77        return;
78      }
79
80      // Step 2: Generate summary
81      toast.dismiss(currentToastId);
82      currentToastId = toast.loading("Generating summary...");
83
84      const summaryResponse = await api.post<
85        string,
86        { fullTranscript: string }
87      >(
88        "/api/summarize",
89        { fullTranscript: fullTranscript },
90        { timeoutMs: 120000 }
91      );
92
93      if (!summaryResponse.success) {
94        toast.dismiss(currentToastId);
95        toast.error(summaryResponse.error?.message);
96        return;
97      }
98
99      const summaryData = summaryResponse.data;
100
101      if (!summaryData) {
102        toast.dismiss(currentToastId);
103        toast.error("No summary generated");
104        return;
105      }
106
107      console.log(summaryData);
108
109      // Step 3: Save summary to database
110      toast.dismiss(currentToastId);
111      currentToastId = toast.loading("Saving summary...");
112
113      const saveResponse = await services.summarize.saveSummaryService({
114        title:
115          transcriptResponse.data?.title || `Summary for ${processedVideoId}`,
116        content: summaryResponse.data,
117        videoId: processedVideoId,
118      });
119
120      if (!saveResponse.success) {
121        toast.dismiss(currentToastId);
122        toast.error(saveResponse.error?.message);
123        return;
124      }
125
126      console.log("SAVE RESPONSE:", saveResponse);
127      toast.dismiss(currentToastId);
128      currentToastId = undefined;
129      toast.success("Summary Created and Saved!");
130      setValue("");
131
132      // Redirect to the summary details page
133      router.push("/dashboard/summaries/" + saveResponse.data?.documentId);
134
135      toast.success("Summary Created and Saved!");
136      setValue("");
137
138      // Redirect to the summary details page
139    } catch (error) {
140      if (currentToastId) toast.dismiss(currentToastId);
141      console.error("Error:", error);
142      toast.error(
143        error instanceof Error ? error.message : "Failed to create summary"
144      );
145    } finally {
146      setLoading(false);
147    }
148  }
149
150  function clearError() {
151    setError(INITIAL_STATE);
152    if (error.message) setValue("");
153  }
154
155  const errorStyles = error.message
156    ? "outline-1 outline outline-red-500 placeholder:text-red-700"
157    : "";
158
159  return (
160    <div className="w-full flex-1 mx-4">
161      <form onSubmit={handleFormSubmit} className="flex gap-2 items-center">
162        <Input
163          name="videoId"
164          placeholder={
165            error.message ? error.message : "Youtube Video ID or URL"
166          }
167          value={value}
168          onChange={(e) => setValue(e.target.value)}
169          onMouseDown={clearError}
170          className={cn(
171            "w-full focus:text-black focus-visible:ring-pink-500",
172            errorStyles
173          )}
174          required
175        />
176
177        <SubmitButton
178          text="Create Summary"
179          loadingText="Creating Summary"
180          className="bg-pink-500"
181          loading={loading}
182        />
183      </form>
184    </div>
185  );
186}