├── .eslintrc.json
├── app
    ├── favicon.ico
    ├── (preview)
    │   ├── twitter-image.png
    │   ├── opengraph-image.png
    │   ├── actions.ts
    │   ├── layout.tsx
    │   ├── globals.css
    │   └── page.tsx
    └── api
    │   └── generate-quiz
    │       └── route.ts
├── next.config.mjs
├── postcss.config.mjs
├── lib
    ├── utils.ts
    └── schemas.ts
├── components
    ├── ui
    │   ├── link.tsx
    │   ├── label.tsx
    │   ├── input.tsx
    │   ├── progress.tsx
    │   ├── badge.tsx
    │   ├── radio-group.tsx
    │   ├── scroll-area.tsx
    │   ├── card.tsx
    │   └── button.tsx
    ├── score.tsx
    ├── markdown.tsx
    ├── quiz-overview.tsx
    ├── icons.tsx
    └── quiz.tsx
├── components.json
├── .gitignore
├── tsconfig.json
├── package.json
├── README.md
└── tailwind.config.ts


/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": "next/core-web-vitals"
3 | }
4 | 


--------------------------------------------------------------------------------
/app/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/VichuA2/pdf-to-quiz-generator/HEAD/app/favicon.ico


--------------------------------------------------------------------------------
/next.config.mjs:
--------------------------------------------------------------------------------
1 | /** @type {import('next').NextConfig} */
2 | const nextConfig = {};
3 | 
4 | export default nextConfig;
5 | 


--------------------------------------------------------------------------------
/app/(preview)/twitter-image.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/VichuA2/pdf-to-quiz-generator/HEAD/app/(preview)/twitter-image.png


--------------------------------------------------------------------------------
/app/(preview)/opengraph-image.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/VichuA2/pdf-to-quiz-generator/HEAD/app/(preview)/opengraph-image.png


--------------------------------------------------------------------------------
/postcss.config.mjs:
--------------------------------------------------------------------------------
1 | /** @type {import('postcss-load-config').Config} */
2 | const config = {
3 |   plugins: {
4 |     tailwindcss: {},
5 |   },
6 | };
7 | 
8 | export default config;
9 | 


--------------------------------------------------------------------------------
/lib/utils.ts:
--------------------------------------------------------------------------------
1 | import { clsx, type ClassValue } from "clsx"
2 | import { twMerge } from "tailwind-merge"
3 | 
4 | export function cn(...inputs: ClassValue[]) {
5 |   return twMerge(clsx(inputs))
6 | }
7 | 


--------------------------------------------------------------------------------
/components/ui/link.tsx:
--------------------------------------------------------------------------------
 1 | import NextLink, { LinkProps as NextLinkProps } from "next/link";
 2 | 
 3 | export const Link = ({
 4 |   children,
 5 |   ...props
 6 | }: NextLinkProps & { children: React.ReactNode }) => {
 7 |   return (
 8 |     <NextLink
 9 |       {...props}
10 |       className="text-blue-500 dark:text-blue-400 hover:underline"
11 |       target="_blank"
12 |     >
13 |       {children}
14 |     </NextLink>
15 |   );
16 | };
17 | 


--------------------------------------------------------------------------------
/components.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "$schema": "https://ui.shadcn.com/schema.json",
 3 |   "style": "new-york",
 4 |   "rsc": true,
 5 |   "tsx": true,
 6 |   "tailwind": {
 7 |     "config": "tailwind.config.ts",
 8 |     "css": "app/(preview)/globals.css",
 9 |     "baseColor": "zinc",
10 |     "cssVariables": true,
11 |     "prefix": ""
12 |   },
13 |   "aliases": {
14 |     "components": "@/components",
15 |     "utils": "@/lib/utils",
16 |     "ui": "@/components/ui",
17 |     "lib": "@/lib",
18 |     "hooks": "@/hooks"
19 |   },
20 |   "iconLibrary": "lucide"
21 | }


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | .yarn/install-state.gz
 8 | 
 9 | # testing
10 | /coverage
11 | 
12 | # next.js
13 | /.next/
14 | /out/
15 | 
16 | # production
17 | /build
18 | 
19 | # misc
20 | .DS_Store
21 | *.pem
22 | 
23 | # debug
24 | npm-debug.log*
25 | yarn-debug.log*
26 | yarn-error.log*
27 | 
28 | # local env files
29 | .env*
30 | 
31 | # vercel
32 | .vercel
33 | 
34 | # typescript
35 | *.tsbuildinfo
36 | next-env.d.ts
37 | 


--------------------------------------------------------------------------------
/lib/schemas.ts:
--------------------------------------------------------------------------------
 1 | import { z } from "zod";
 2 | 
 3 | export const questionSchema = z.object({
 4 |   question: z.string(),
 5 |   options: z
 6 |     .array(z.string())
 7 |     .length(4)
 8 |     .describe(
 9 |       "Four possible answers to the question. Only one should be correct. They should all be of equal lengths.",
10 |     ),
11 |   answer: z
12 |     .enum(["A", "B", "C", "D"])
13 |     .describe(
14 |       "The correct answer, where A is the first option, B is the second, and so on.",
15 |     ),
16 | });
17 | 
18 | export type Question = z.infer<typeof questionSchema>;
19 | 
20 | export const questionsSchema = z.array(questionSchema).length(4);
21 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "ESNext",
 4 |     "lib": ["dom", "dom.iterable", "esnext"],
 5 |     "allowJs": true,
 6 |     "skipLibCheck": true,
 7 |     "strict": true,
 8 |     "noEmit": true,
 9 |     "esModuleInterop": true,
10 |     "module": "esnext",
11 |     "moduleResolution": "bundler",
12 |     "resolveJsonModule": true,
13 |     "isolatedModules": true,
14 |     "jsx": "preserve",
15 |     "incremental": true,
16 |     "plugins": [
17 |       {
18 |         "name": "next"
19 |       }
20 |     ],
21 |     "paths": {
22 |       "@/*": ["./*"]
23 |     }
24 |   },
25 |   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
26 |   "exclude": ["node_modules"]
27 | }
28 | 


--------------------------------------------------------------------------------
/app/(preview)/actions.ts:
--------------------------------------------------------------------------------
 1 | "use server";
 2 | 
 3 | import { google } from "@ai-sdk/google";
 4 | import { generateObject } from "ai";
 5 | import { z } from "zod";
 6 | 
 7 | export const generateQuizTitle = async (file: string) => {
 8 |   const result = await generateObject({
 9 |     model: google("gemini-1.5-flash-latest"),
10 |     schema: z.object({
11 |       title: z
12 |         .string()
13 |         .describe(
14 |           "A max three word title for the quiz based on the file provided as context",
15 |         ),
16 |     }),
17 |     prompt:
18 |       "Generate a title for a quiz based on the following (PDF) file name. Try and extract as much info from the file name as possible. If the file name is just numbers or incoherent, just return quiz.\n\n " + file,
19 |   });
20 |   return result.object.title;
21 | };
22 | 


--------------------------------------------------------------------------------
/components/ui/label.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import * as React from "react"
 4 | import * as LabelPrimitive from "@radix-ui/react-label"
 5 | import { cva, type VariantProps } from "class-variance-authority"
 6 | 
 7 | import { cn } from "@/lib/utils"
 8 | 
 9 | const labelVariants = cva(
10 |   "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
11 | )
12 | 
13 | const Label = React.forwardRef<
14 |   React.ElementRef<typeof LabelPrimitive.Root>,
15 |   React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
16 |     VariantProps<typeof labelVariants>
17 | >(({ className, ...props }, ref) => (
18 |   <LabelPrimitive.Root
19 |     ref={ref}
20 |     className={cn(labelVariants(), className)}
21 |     {...props}
22 |   />
23 | ))
24 | Label.displayName = LabelPrimitive.Root.displayName
25 | 
26 | export { Label }
27 | 


--------------------------------------------------------------------------------
/components/ui/input.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | 
 3 | import { cn } from "@/lib/utils"
 4 | 
 5 | const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
 6 |   ({ className, type, ...props }, ref) => {
 7 |     return (
 8 |       <input
 9 |         type={type}
10 |         className={cn(
11 |           "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
12 |           className
13 |         )}
14 |         ref={ref}
15 |         {...props}
16 |       />
17 |     )
18 |   }
19 | )
20 | Input.displayName = "Input"
21 | 
22 | export { Input }
23 | 


--------------------------------------------------------------------------------
/components/ui/progress.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import * as React from "react"
 4 | import * as ProgressPrimitive from "@radix-ui/react-progress"
 5 | 
 6 | import { cn } from "@/lib/utils"
 7 | 
 8 | const Progress = React.forwardRef<
 9 |   React.ElementRef<typeof ProgressPrimitive.Root>,
10 |   React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>
11 | >(({ className, value, ...props }, ref) => (
12 |   <ProgressPrimitive.Root
13 |     ref={ref}
14 |     className={cn(
15 |       "relative h-2 w-full overflow-hidden rounded-full bg-primary/20",
16 |       className
17 |     )}
18 |     {...props}
19 |   >
20 |     <ProgressPrimitive.Indicator
21 |       className="h-full w-full flex-1 bg-primary transition-all"
22 |       style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
23 |     />
24 |   </ProgressPrimitive.Root>
25 | ))
26 | Progress.displayName = ProgressPrimitive.Root.displayName
27 | 
28 | export { Progress }
29 | 


--------------------------------------------------------------------------------
/app/(preview)/layout.tsx:
--------------------------------------------------------------------------------
 1 | import "./globals.css";
 2 | import { Metadata } from "next";
 3 | import { Toaster } from "sonner";
 4 | import { ThemeProvider } from "next-themes";
 5 | import { Geist } from "next/font/google";
 6 | 
 7 | const geist = Geist({ subsets: ["latin"] });
 8 | 
 9 | export const metadata: Metadata = {
10 |   metadataBase: new URL("https://ai-sdk-preview-pdf-support.vercel.app"),
11 |   title: "PDF Support Preview",
12 |   description: "Experimental preview of PDF support with the AI SDK",
13 | };
14 | 
15 | export default function RootLayout({
16 |   children,
17 | }: Readonly<{
18 |   children: React.ReactNode;
19 | }>) {
20 |   return (
21 |     <html lang="en" suppressHydrationWarning className={`${geist.className}`}>
22 |       <body>
23 |         <ThemeProvider attribute="class" enableSystem forcedTheme="dark">
24 |           <Toaster position="top-center" richColors />
25 |           {children}
26 |         </ThemeProvider>
27 |       </body>
28 |     </html>
29 |   );
30 | }
31 | 


--------------------------------------------------------------------------------
/components/ui/badge.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | import { cva, type VariantProps } from "class-variance-authority"
 3 | 
 4 | import { cn } from "@/lib/utils"
 5 | 
 6 | const badgeVariants = cva(
 7 |   "inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
 8 |   {
 9 |     variants: {
10 |       variant: {
11 |         default:
12 |           "border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80",
13 |         secondary:
14 |           "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
15 |         destructive:
16 |           "border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80",
17 |         outline: "text-foreground",
18 |       },
19 |     },
20 |     defaultVariants: {
21 |       variant: "default",
22 |     },
23 |   }
24 | )
25 | 
26 | export interface BadgeProps
27 |   extends React.HTMLAttributes<HTMLDivElement>,
28 |     VariantProps<typeof badgeVariants> {}
29 | 
30 | function Badge({ className, variant, ...props }: BadgeProps) {
31 |   return (
32 |     <div className={cn(badgeVariants({ variant }), className)} {...props} />
33 |   )
34 | }
35 | 
36 | export { Badge, badgeVariants }
37 | 


--------------------------------------------------------------------------------
/components/score.tsx:
--------------------------------------------------------------------------------
 1 | import { Progress } from "@/components/ui/progress"
 2 | import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
 3 | 
 4 | interface QuizScoreProps {
 5 |   correctAnswers: number
 6 |   totalQuestions: number
 7 | }
 8 | 
 9 | export default function QuizScore({ correctAnswers, totalQuestions }: QuizScoreProps) {
10 |   const score = (correctAnswers / totalQuestions) * 100
11 |   const roundedScore = Math.round(score)
12 | 
13 |   const getMessage = () => {
14 |     if (score === 100) return "Perfect score! Congratulations!"
15 |     if (score >= 80) return "Great job! You did excellently!"
16 |     if (score >= 60) return "Good effort! You're on the right track."
17 |     if (score >= 40) return "Not bad, but there's room for improvement."
18 |     return "Keep practicing, you'll get better!"
19 |   }
20 | 
21 |   return (
22 |     <Card className="w-full">
23 |       <CardContent className="space-y-4 p-8">
24 |         <div className="text-center">
25 |           <p className="text-4xl font-bold">{roundedScore}%</p>
26 |           <p className="text-sm text-muted-foreground">
27 |             {correctAnswers} out of {totalQuestions} correct
28 |           </p>
29 |         </div>
30 |         <p className="text-center font-medium">{getMessage()}</p>
31 |       </CardContent>
32 |     </Card>
33 |   )
34 | }
35 | 


--------------------------------------------------------------------------------
/app/api/generate-quiz/route.ts:
--------------------------------------------------------------------------------
 1 | import { questionSchema, questionsSchema } from "@/lib/schemas";
 2 | import { google } from "@ai-sdk/google";
 3 | import { streamObject } from "ai";
 4 | 
 5 | export const maxDuration = 60;
 6 | 
 7 | export async function POST(req: Request) {
 8 |   const { files } = await req.json();
 9 |   const firstFile = files[0].data;
10 | 
11 |   const result = streamObject({
12 |     model: google("gemini-1.5-pro-latest"),
13 |     messages: [
14 |       {
15 |         role: "system",
16 |         content:
17 |           "You are a teacher. Your job is to take a document, and create a multiple choice test (with 4 questions) based on the content of the document. Each option should be roughly equal in length.",
18 |       },
19 |       {
20 |         role: "user",
21 |         content: [
22 |           {
23 |             type: "text",
24 |             text: "Create a multiple choice test based on this document.",
25 |           },
26 |           {
27 |             type: "file",
28 |             data: firstFile,
29 |             mimeType: "application/pdf",
30 |           },
31 |         ],
32 |       },
33 |     ],
34 |     schema: questionSchema,
35 |     output: "array",
36 |     onFinish: ({ object }) => {
37 |       const res = questionsSchema.safeParse(object);
38 |       if (res.error) {
39 |         throw new Error(res.error.errors.map((e) => e.message).join("\n"));
40 |       }
41 |     },
42 |   });
43 | 
44 |   return result.toTextStreamResponse();
45 | }
46 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "three-three-blog",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "dev": "next dev",
 7 |     "build": "next build",
 8 |     "start": "next start",
 9 |     "lint": "next lint"
10 |   },
11 |   "dependencies": {
12 |     "@ai-sdk/anthropic": "^1.0.5",
13 |     "@ai-sdk/google": "^1.0.9",
14 |     "@ai-sdk/openai": "^1.0.8",
15 |     "@radix-ui/react-label": "^2.1.0",
16 |     "@radix-ui/react-progress": "^1.1.0",
17 |     "@radix-ui/react-radio-group": "^1.2.1",
18 |     "@radix-ui/react-scroll-area": "^1.2.1",
19 |     "@radix-ui/react-slot": "^1.1.0",
20 |     "@vercel/analytics": "^1.4.1",
21 |     "@vercel/kv": "^3.0.0",
22 |     "ai": "^4.0.16",
23 |     "class-variance-authority": "^0.7.1",
24 |     "clsx": "^2.1.1",
25 |     "framer-motion": "^11.14.1",
26 |     "lucide-react": "^0.468.0",
27 |     "next": "15.1.0",
28 |     "next-themes": "^0.4.4",
29 |     "react": "^19.0.0",
30 |     "react-dom": "^19.0.0",
31 |     "react-markdown": "^9.0.1",
32 |     "remark-gfm": "^4.0.0",
33 |     "sonner": "^1.7.1",
34 |     "tailwind-merge": "^2.5.5",
35 |     "tailwindcss-animate": "^1.0.7",
36 |     "zod": "^3.24.1"
37 |   },
38 |   "devDependencies": {
39 |     "@types/node": "^22.10.2",
40 |     "@types/react": "^19.0.1",
41 |     "@types/react-dom": "^19.0.2",
42 |     "eslint": "^9.16.0",
43 |     "eslint-config-next": "15.1.0",
44 |     "postcss": "^8.4.49",
45 |     "tailwindcss": "^3.4.16",
46 |     "typescript": "^5.7.2"
47 |   }
48 | }
49 | 


--------------------------------------------------------------------------------
/components/ui/radio-group.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import * as React from "react"
 4 | import * as RadioGroupPrimitive from "@radix-ui/react-radio-group"
 5 | import { Circle } from "lucide-react"
 6 | 
 7 | import { cn } from "@/lib/utils"
 8 | 
 9 | const RadioGroup = React.forwardRef<
10 |   React.ElementRef<typeof RadioGroupPrimitive.Root>,
11 |   React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>
12 | >(({ className, ...props }, ref) => {
13 |   return (
14 |     <RadioGroupPrimitive.Root
15 |       className={cn("grid gap-2", className)}
16 |       {...props}
17 |       ref={ref}
18 |     />
19 |   )
20 | })
21 | RadioGroup.displayName = RadioGroupPrimitive.Root.displayName
22 | 
23 | const RadioGroupItem = React.forwardRef<
24 |   React.ElementRef<typeof RadioGroupPrimitive.Item>,
25 |   React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>
26 | >(({ className, ...props }, ref) => {
27 |   return (
28 |     <RadioGroupPrimitive.Item
29 |       ref={ref}
30 |       className={cn(
31 |         "aspect-square h-4 w-4 rounded-full border border-primary text-primary shadow focus:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
32 |         className
33 |       )}
34 |       {...props}
35 |     >
36 |       <RadioGroupPrimitive.Indicator className="flex items-center justify-center">
37 |         <Circle className="h-3.5 w-3.5 fill-primary" />
38 |       </RadioGroupPrimitive.Indicator>
39 |     </RadioGroupPrimitive.Item>
40 |   )
41 | })
42 | RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName
43 | 
44 | export { RadioGroup, RadioGroupItem }
45 | 


--------------------------------------------------------------------------------
/components/markdown.tsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import ReactMarkdown from "react-markdown";
 3 | import remarkGfm from "remark-gfm";
 4 | 
 5 | export const NonMemoizedMarkdown = ({ children }: { children: string }) => {
 6 |   const components = {
 7 |     code: ({ node, inline, className, children, ...props }: any) => {
 8 |       const match = /language-(\w+)/.exec(className || "");
 9 |       return !inline && match ? (
10 |         <pre
11 |           {...props}
12 |           className={`${className} text-sm w-[80dvw] md:max-w-[500px] overflow-x-scroll bg-zinc-100 p-2 rounded mt-2 dark:bg-zinc-800`}
13 |         >
14 |           <code className={match[1]}>{children}</code>
15 |         </pre>
16 |       ) : (
17 |         <code
18 |           className={`${className} text-sm bg-zinc-100 dark:bg-zinc-800 py-0.5 px-1 rounded`}
19 |           {...props}
20 |         >
21 |           {children}
22 |         </code>
23 |       );
24 |     },
25 |     ol: ({ node, children, ...props }: any) => {
26 |       return (
27 |         <ol className="list-decimal list-inside ml-4" {...props}>
28 |           {children}
29 |         </ol>
30 |       );
31 |     },
32 |     li: ({ node, children, ...props }: any) => {
33 |       return (
34 |         <li className="py-1" {...props}>
35 |           {children}
36 |         </li>
37 |       );
38 |     },
39 |     ul: ({ node, children, ...props }: any) => {
40 |       return (
41 |         <ul className="list-decimal list-inside ml-4" {...props}>
42 |           {children}
43 |         </ul>
44 |       );
45 |     },
46 |   };
47 | 
48 |   return (
49 |     <ReactMarkdown remarkPlugins={[remarkGfm]} components={components}>
50 |       {children}
51 |     </ReactMarkdown>
52 |   );
53 | };
54 | 
55 | export const Markdown = React.memo(
56 |   NonMemoizedMarkdown,
57 |   (prevProps, nextProps) => prevProps.children === nextProps.children
58 | );
59 | 


--------------------------------------------------------------------------------
/components/ui/scroll-area.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import * as React from "react"
 4 | import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
 5 | 
 6 | import { cn } from "@/lib/utils"
 7 | 
 8 | const ScrollArea = React.forwardRef<
 9 |   React.ElementRef<typeof ScrollAreaPrimitive.Root>,
10 |   React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
11 | >(({ className, children, ...props }, ref) => (
12 |   <ScrollAreaPrimitive.Root
13 |     ref={ref}
14 |     className={cn("relative overflow-hidden", className)}
15 |     {...props}
16 |   >
17 |     <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
18 |       {children}
19 |     </ScrollAreaPrimitive.Viewport>
20 |     <ScrollBar />
21 |     <ScrollAreaPrimitive.Corner />
22 |   </ScrollAreaPrimitive.Root>
23 | ))
24 | ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName
25 | 
26 | const ScrollBar = React.forwardRef<
27 |   React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
28 |   React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
29 | >(({ className, orientation = "vertical", ...props }, ref) => (
30 |   <ScrollAreaPrimitive.ScrollAreaScrollbar
31 |     ref={ref}
32 |     orientation={orientation}
33 |     className={cn(
34 |       "flex touch-none select-none transition-colors",
35 |       orientation === "vertical" &&
36 |         "h-full w-2.5 border-l border-l-transparent p-[1px]",
37 |       orientation === "horizontal" &&
38 |         "h-2.5 flex-col border-t border-t-transparent p-[1px]",
39 |       className
40 |     )}
41 |     {...props}
42 |   >
43 |     <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
44 |   </ScrollAreaPrimitive.ScrollAreaScrollbar>
45 | ))
46 | ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName
47 | 
48 | export { ScrollArea, ScrollBar }
49 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # AI SDK PDF Support Example
 2 | 
 3 | This example demonstrates how to use the [AI SDK](https://sdk.vercel.ai/docs) with [Next.js](https://nextjs.org/) with the `useObject` hook to submit PDF messages to the AI provider of your choice (Google or Anthropic).
 4 | 
 5 | ## Deploy your own
 6 | 
 7 | [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fvercel-labs%2Fai-sdk-preview-pdf-support&env=GOOGLE_API_KEY&envDescription=API%20keys%20needed%20for%20application&envLink=google.com)
 8 | 
 9 | ## How to use
10 | 
11 | Run [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init), [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/), or [pnpm](https://pnpm.io) to bootstrap the example:
12 | 
13 | ```bash
14 | npx create-next-app --example https://github.com/vercel-labs/ai-sdk-preview-pdf-support ai-sdk-preview-pdf-support-example
15 | ```
16 | 
17 | ```bash
18 | yarn create next-app --example https://github.com/vercel-labs/ai-sdk-preview-pdf-support ai-sdk-preview-pdf-support-example
19 | ```
20 | 
21 | ```bash
22 | pnpm create next-app --example https://github.com/vercel-labs/ai-sdk-preview-pdf-support ai-sdk-preview-pdf-support-example
23 | ```
24 | 
25 | To run the example locally you need to:
26 | 
27 | 1. Sign up for accounts with the AI providers you want to use (e.g., Google).
28 | 2. Obtain API keys for Google provider.
29 | 3. Set the required environment variables as shown in the `.env.example` file, but in a new file called `.env`.
30 | 4. `npm install` to install the required dependencies.
31 | 5. `npm run dev` to launch the development server.
32 | 
33 | 
34 | ## Learn More
35 | 
36 | To learn more about Vercel AI SDK or Next.js take a look at the following resources:
37 | 
38 | - [AI SDK docs](https://sdk.vercel.ai/docs)
39 | - [Vercel AI Playground](https://play.vercel.ai)
40 | - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
41 | 
42 | 


--------------------------------------------------------------------------------
/tailwind.config.ts:
--------------------------------------------------------------------------------
 1 | import type { Config } from "tailwindcss";
 2 | 
 3 | const config: Config = {
 4 |     darkMode: ["class"],
 5 |     content: [
 6 |     "./pages/**/*.{js,ts,jsx,tsx,mdx}",
 7 |     "./components/**/*.{js,ts,jsx,tsx,mdx}",
 8 |     "./app/**/*.{js,ts,jsx,tsx,mdx}",
 9 |   ],
10 |   theme: {
11 |   	extend: {
12 |   		backgroundImage: {
13 |   			'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
14 |   			'gradient-conic': 'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))'
15 |   		},
16 |   		borderRadius: {
17 |   			lg: 'var(--radius)',
18 |   			md: 'calc(var(--radius) - 2px)',
19 |   			sm: 'calc(var(--radius) - 4px)'
20 |   		},
21 |   		colors: {
22 |   			background: 'hsl(var(--background))',
23 |   			foreground: 'hsl(var(--foreground))',
24 |   			card: {
25 |   				DEFAULT: 'hsl(var(--card))',
26 |   				foreground: 'hsl(var(--card-foreground))'
27 |   			},
28 |   			popover: {
29 |   				DEFAULT: 'hsl(var(--popover))',
30 |   				foreground: 'hsl(var(--popover-foreground))'
31 |   			},
32 |   			primary: {
33 |   				DEFAULT: 'hsl(var(--primary))',
34 |   				foreground: 'hsl(var(--primary-foreground))'
35 |   			},
36 |   			secondary: {
37 |   				DEFAULT: 'hsl(var(--secondary))',
38 |   				foreground: 'hsl(var(--secondary-foreground))'
39 |   			},
40 |   			muted: {
41 |   				DEFAULT: 'hsl(var(--muted))',
42 |   				foreground: 'hsl(var(--muted-foreground))'
43 |   			},
44 |   			accent: {
45 |   				DEFAULT: 'hsl(var(--accent))',
46 |   				foreground: 'hsl(var(--accent-foreground))'
47 |   			},
48 |   			destructive: {
49 |   				DEFAULT: 'hsl(var(--destructive))',
50 |   				foreground: 'hsl(var(--destructive-foreground))'
51 |   			},
52 |   			border: 'hsl(var(--border))',
53 |   			input: 'hsl(var(--input))',
54 |   			ring: 'hsl(var(--ring))',
55 |   			chart: {
56 |   				'1': 'hsl(var(--chart-1))',
57 |   				'2': 'hsl(var(--chart-2))',
58 |   				'3': 'hsl(var(--chart-3))',
59 |   				'4': 'hsl(var(--chart-4))',
60 |   				'5': 'hsl(var(--chart-5))'
61 |   			}
62 |   		}
63 |   	}
64 |   },
65 |   plugins: [require("tailwindcss-animate")],
66 | };
67 | export default config;
68 | 


--------------------------------------------------------------------------------
/components/ui/card.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | 
 3 | import { cn } from "@/lib/utils"
 4 | 
 5 | const Card = React.forwardRef<
 6 |   HTMLDivElement,
 7 |   React.HTMLAttributes<HTMLDivElement>
 8 | >(({ className, ...props }, ref) => (
 9 |   <div
10 |     ref={ref}
11 |     className={cn(
12 |       "rounded-xl border bg-card text-card-foreground shadow",
13 |       className
14 |     )}
15 |     {...props}
16 |   />
17 | ))
18 | Card.displayName = "Card"
19 | 
20 | const CardHeader = React.forwardRef<
21 |   HTMLDivElement,
22 |   React.HTMLAttributes<HTMLDivElement>
23 | >(({ className, ...props }, ref) => (
24 |   <div
25 |     ref={ref}
26 |     className={cn("flex flex-col space-y-1.5 p-6", className)}
27 |     {...props}
28 |   />
29 | ))
30 | CardHeader.displayName = "CardHeader"
31 | 
32 | const CardTitle = React.forwardRef<
33 |   HTMLDivElement,
34 |   React.HTMLAttributes<HTMLDivElement>
35 | >(({ className, ...props }, ref) => (
36 |   <div
37 |     ref={ref}
38 |     className={cn("font-semibold leading-none tracking-tight", className)}
39 |     {...props}
40 |   />
41 | ))
42 | CardTitle.displayName = "CardTitle"
43 | 
44 | const CardDescription = React.forwardRef<
45 |   HTMLDivElement,
46 |   React.HTMLAttributes<HTMLDivElement>
47 | >(({ className, ...props }, ref) => (
48 |   <div
49 |     ref={ref}
50 |     className={cn("text-sm text-muted-foreground", className)}
51 |     {...props}
52 |   />
53 | ))
54 | CardDescription.displayName = "CardDescription"
55 | 
56 | const CardContent = React.forwardRef<
57 |   HTMLDivElement,
58 |   React.HTMLAttributes<HTMLDivElement>
59 | >(({ className, ...props }, ref) => (
60 |   <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
61 | ))
62 | CardContent.displayName = "CardContent"
63 | 
64 | const CardFooter = React.forwardRef<
65 |   HTMLDivElement,
66 |   React.HTMLAttributes<HTMLDivElement>
67 | >(({ className, ...props }, ref) => (
68 |   <div
69 |     ref={ref}
70 |     className={cn("flex items-center p-6 pt-0", className)}
71 |     {...props}
72 |   />
73 | ))
74 | CardFooter.displayName = "CardFooter"
75 | 
76 | export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
77 | 


--------------------------------------------------------------------------------
/components/ui/button.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | import { Slot } from "@radix-ui/react-slot"
 3 | import { cva, type VariantProps } from "class-variance-authority"
 4 | 
 5 | import { cn } from "@/lib/utils"
 6 | 
 7 | const buttonVariants = cva(
 8 |   "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
 9 |   {
10 |     variants: {
11 |       variant: {
12 |         default:
13 |           "bg-primary text-primary-foreground shadow hover:bg-primary/90",
14 |         destructive:
15 |           "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
16 |         outline:
17 |           "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
18 |         secondary:
19 |           "bg-secondary text-secondary-foreground border border-secondary shadow-sm hover:bg-secondary/80",
20 |         ghost: "hover:bg-accent hover:text-accent-foreground",
21 |         link: "text-primary underline-offset-4 hover:underline",
22 |       },
23 |       size: {
24 |         default: "h-9 px-4 py-2",
25 |         sm: "h-8 rounded-md px-3 text-xs",
26 |         lg: "h-10 rounded-md px-8",
27 |         icon: "h-9 w-9",
28 |       },
29 |     },
30 |     defaultVariants: {
31 |       variant: "default",
32 |       size: "default",
33 |     },
34 |   }
35 | )
36 | 
37 | export interface ButtonProps
38 |   extends React.ButtonHTMLAttributes<HTMLButtonElement>,
39 |     VariantProps<typeof buttonVariants> {
40 |   asChild?: boolean
41 | }
42 | 
43 | const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
44 |   ({ className, variant, size, asChild = false, ...props }, ref) => {
45 |     const Comp = asChild ? Slot : "button"
46 |     return (
47 |       <Comp
48 |         className={cn(buttonVariants({ variant, size, className }))}
49 |         ref={ref}
50 |         {...props}
51 |       />
52 |     )
53 |   }
54 | )
55 | Button.displayName = "Button"
56 | 
57 | export { Button, buttonVariants }
58 | 


--------------------------------------------------------------------------------
/app/(preview)/globals.css:
--------------------------------------------------------------------------------
 1 | @tailwind base;
 2 | @tailwind components;
 3 | @tailwind utilities;
 4 | 
 5 | @layer base {
 6 |     :root {
 7 |         --background: 0 0% 100%;
 8 |         --foreground: 240 10% 3.9%;
 9 |         --card: 0 0% 100%;
10 |         --card-foreground: 240 10% 3.9%;
11 |         --popover: 0 0% 100%;
12 |         --popover-foreground: 240 10% 3.9%;
13 |         --primary: 240 5.9% 10%;
14 |         --primary-foreground: 0 0% 98%;
15 |         --secondary: 240 4.8% 95.9%;
16 |         --secondary-foreground: 240 5.9% 10%;
17 |         --muted: 240 4.8% 95.9%;
18 |         --muted-foreground: 240 3.8% 46.1%;
19 |         --accent: 240 4.8% 95.9%;
20 |         --accent-foreground: 240 5.9% 10%;
21 |         --destructive: 0 84.2% 60.2%;
22 |         --destructive-foreground: 0 0% 98%;
23 |         --border: 240 5.9% 90%;
24 |         --input: 240 5.9% 90%;
25 |         --ring: 240 10% 3.9%;
26 |         --chart-1: 12 76% 61%;
27 |         --chart-2: 173 58% 39%;
28 |         --chart-3: 197 37% 24%;
29 |         --chart-4: 43 74% 66%;
30 |         --chart-5: 27 87% 67%;
31 |         --radius: 0.5rem;
32 |     }
33 |     .dark {
34 |         --background: 240 10% 3.9%;
35 |         --foreground: 0 0% 98%;
36 |         --card: 240 10% 3.9%;
37 |         --card-foreground: 0 0% 98%;
38 |         --popover: 240 10% 3.9%;
39 |         --popover-foreground: 0 0% 98%;
40 |         --primary: 0 0% 98%;
41 |         --primary-foreground: 240 5.9% 10%;
42 |         --secondary: 240 3.7% 15.9%;
43 |         --secondary-foreground: 0 0% 98%;
44 |         --muted: 240 3.7% 15.9%;
45 |         --muted-foreground: 240 5% 64.9%;
46 |         --accent: 240 3.7% 15.9%;
47 |         --accent-foreground: 0 0% 98%;
48 |         --destructive: 0 62.8% 30.6%;
49 |         --destructive-foreground: 0 0% 98%;
50 |         --border: 240 3.7% 15.9%;
51 |         --input: 240 3.7% 15.9%;
52 |         --ring: 240 4.9% 83.9%;
53 |         --chart-1: 220 70% 50%;
54 |         --chart-2: 160 60% 45%;
55 |         --chart-3: 30 80% 55%;
56 |         --chart-4: 280 65% 60%;
57 |         --chart-5: 340 75% 55%;
58 |     }
59 | }
60 | 
61 | @layer base {
62 |     * {
63 |         @apply border-border;
64 |     }
65 |     body {
66 |         @apply bg-background text-foreground;
67 |     }
68 | }
69 | 


--------------------------------------------------------------------------------
/components/quiz-overview.tsx:
--------------------------------------------------------------------------------
 1 | import { Check, X } from 'lucide-react'
 2 | import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
 3 | import { ScrollArea } from "@/components/ui/scroll-area"
 4 | import { Question } from '@/lib/schemas'
 5 | 
 6 | 
 7 | interface QuizReviewProps {
 8 |   questions: Question[]
 9 |   userAnswers: string[]
10 | }
11 | 
12 | export default function QuizReview({ questions, userAnswers }: QuizReviewProps) {
13 |   const answerLabels: ("A" | "B" | "C" | "D")[] = ["A", "B", "C", "D"]
14 | 
15 |   return (
16 |     <Card className="w-full">
17 |       <CardHeader>
18 |         <CardTitle className="text-2xl font-bold">Quiz Review</CardTitle>
19 |       </CardHeader>
20 |       <CardContent>
21 |           {questions.map((question, questionIndex) => (
22 |             <div key={questionIndex} className="mb-8 last:mb-0">
23 |               <h3 className="text-lg font-semibold mb-4">{question.question}</h3>
24 |               <div className="space-y-2">
25 |                 {question.options.map((option, optionIndex) => {
26 |                   const currentLabel = answerLabels[optionIndex]
27 |                   const isCorrect = currentLabel === question.answer
28 |                   const isSelected = currentLabel === userAnswers[questionIndex]
29 |                   const isIncorrectSelection = isSelected && !isCorrect
30 | 
31 |                   return (
32 |                     <div
33 |                       key={optionIndex}
34 |                       className={`flex items-center p-4 rounded-lg ${
35 |                         isCorrect
36 |                           ? 'bg-green-100 dark:bg-green-700/50'
37 |                           : isIncorrectSelection
38 |                           ? 'bg-red-100 dark:bg-red-700/50'
39 |                           : 'border border-border'
40 |                       }`}
41 |                     >
42 |                       <span className="text-lg font-medium mr-4 w-6">{currentLabel}</span>
43 |                       <span className="flex-grow">{option}</span>
44 |                       {isCorrect && (
45 |                         <Check className="ml-2 text-green-600 dark:text-green-400" size={20} />
46 |                       )}
47 |                       {isIncorrectSelection && (
48 |                         <X className="ml-2 text-red-600 dark:text-red-400" size={20} />
49 |                       )}
50 |                     </div>
51 |                   )
52 |                 })}
53 |               </div>
54 |             </div>
55 |           ))}
56 |       </CardContent>
57 |     </Card>
58 |   )
59 | }
60 | 
61 | 


--------------------------------------------------------------------------------
/components/icons.tsx:
--------------------------------------------------------------------------------
  1 | export const BotIcon = () => {
  2 |   return (
  3 |     <svg
  4 |       height="16"
  5 |       strokeLinejoin="round"
  6 |       viewBox="0 0 16 16"
  7 |       width="16"
  8 |       style={{ color: "currentcolor" }}
  9 |     >
 10 |       <path
 11 |         fillRule="evenodd"
 12 |         clipRule="evenodd"
 13 |         d="M8.75 2.79933C9.19835 2.53997 9.5 2.05521 9.5 1.5C9.5 0.671573 8.82843 0 8 0C7.17157 0 6.5 0.671573 6.5 1.5C6.5 2.05521 6.80165 2.53997 7.25 2.79933V5H7C4.027 5 1.55904 7.16229 1.08296 10H0V13H1V14.5V16H2.5H13.5H15V14.5V13H16V10H14.917C14.441 7.16229 11.973 5 9 5H8.75V2.79933ZM7 6.5C4.51472 6.5 2.5 8.51472 2.5 11V14.5H13.5V11C13.5 8.51472 11.4853 6.5 9 6.5H7ZM7.25 11.25C7.25 12.2165 6.4665 13 5.5 13C4.5335 13 3.75 12.2165 3.75 11.25C3.75 10.2835 4.5335 9.5 5.5 9.5C6.4665 9.5 7.25 10.2835 7.25 11.25ZM10.5 13C11.4665 13 12.25 12.2165 12.25 11.25C12.25 10.2835 11.4665 9.5 10.5 9.5C9.5335 9.5 8.75 10.2835 8.75 11.25C8.75 12.2165 9.5335 13 10.5 13Z"
 14 |         fill="currentColor"
 15 |       ></path>
 16 |     </svg>
 17 |   );
 18 | };
 19 | 
 20 | export const UserIcon = () => {
 21 |   return (
 22 |     <svg
 23 |       data-testid="geist-icon"
 24 |       height="16"
 25 |       strokeLinejoin="round"
 26 |       viewBox="0 0 16 16"
 27 |       width="16"
 28 |       style={{ color: "currentcolor" }}
 29 |     >
 30 |       <path
 31 |         fillRule="evenodd"
 32 |         clipRule="evenodd"
 33 |         d="M7.75 0C5.95507 0 4.5 1.45507 4.5 3.25V3.75C4.5 5.54493 5.95507 7 7.75 7H8.25C10.0449 7 11.5 5.54493 11.5 3.75V3.25C11.5 1.45507 10.0449 0 8.25 0H7.75ZM6 3.25C6 2.2835 6.7835 1.5 7.75 1.5H8.25C9.2165 1.5 10 2.2835 10 3.25V3.75C10 4.7165 9.2165 5.5 8.25 5.5H7.75C6.7835 5.5 6 4.7165 6 3.75V3.25ZM2.5 14.5V13.1709C3.31958 11.5377 4.99308 10.5 6.82945 10.5H9.17055C11.0069 10.5 12.6804 11.5377 13.5 13.1709V14.5H2.5ZM6.82945 9C4.35483 9 2.10604 10.4388 1.06903 12.6857L1 12.8353V13V15.25V16H1.75H14.25H15V15.25V13V12.8353L14.931 12.6857C13.894 10.4388 11.6452 9 9.17055 9H6.82945Z"
 34 |         fill="currentColor"
 35 |       ></path>
 36 |     </svg>
 37 |   );
 38 | };
 39 | 
 40 | export const AttachmentIcon = () => {
 41 |   return (
 42 |     <svg
 43 |       height="16"
 44 |       strokeLinejoin="round"
 45 |       viewBox="0 0 16 16"
 46 |       width="16"
 47 |       style={{ color: "currentcolor" }}
 48 |     >
 49 |       <path
 50 |         fillRule="evenodd"
 51 |         clipRule="evenodd"
 52 |         d="M14.5 6.5V13.5C14.5 14.8807 13.3807 16 12 16H4C2.61929 16 1.5 14.8807 1.5 13.5V1.5V0H3H8H9.08579C9.351 0 9.60536 0.105357 9.79289 0.292893L14.2071 4.70711C14.3946 4.89464 14.5 5.149 14.5 5.41421V6.5ZM13 6.5V13.5C13 14.0523 12.5523 14.5 12 14.5H4C3.44772 14.5 3 14.0523 3 13.5V1.5H8V5V6.5H9.5H13ZM9.5 2.12132V5H12.3787L9.5 2.12132Z"
 53 |         fill="currentColor"
 54 |       ></path>
 55 |     </svg>
 56 |   );
 57 | };
 58 | 
 59 | // export const VercelIcon = () => {
 60 | //   return (
 61 | //     <svg
 62 | //       height={17}
 63 | //       strokeLinejoin="round"
 64 | //       viewBox="0 0 16 16"
 65 | //       width={17}
 66 | //       style={{ color: "currentcolor" }}
 67 | //     >
 68 | //       <path
 69 | //         fillRule="evenodd"
 70 | //         clipRule="evenodd"
 71 | //         d="M8 1L16 15H0L8 1Z"
 72 | //         fill="currentColor"
 73 | //       ></path>
 74 | //     </svg>
 75 | //   );
 76 | // };
 77 | 
 78 | export const VercelIcon = ({ size = 18 }: { size: number }) => {
 79 |   return (
 80 |     <svg
 81 |       height={size}
 82 |       strokeLinejoin="round"
 83 |       viewBox="0 0 16 16"
 84 |       width={size}
 85 |       style={{ color: "currentcolor" }}
 86 |     >
 87 |       <path
 88 |         fillRule="evenodd"
 89 |         clipRule="evenodd"
 90 |         d="M8 1L16 15H0L8 1Z"
 91 |         fill="currentColor"
 92 |       ></path>
 93 |     </svg>
 94 |   );
 95 | };
 96 | 
 97 | export const GitIcon = () => {
 98 |   return (
 99 |     <svg
100 |       height="16"
101 |       strokeLinejoin="round"
102 |       viewBox="0 0 16 16"
103 |       width="16"
104 |       style={{ color: "currentcolor" }}
105 |     >
106 |       <g clipPath="url(#clip0_872_3147)">
107 |         <path
108 |           fillRule="evenodd"
109 |           clipRule="evenodd"
110 |           d="M8 0C3.58 0 0 3.57879 0 7.99729C0 11.5361 2.29 14.5251 5.47 15.5847C5.87 15.6547 6.02 15.4148 6.02 15.2049C6.02 15.0149 6.01 14.3851 6.01 13.7154C4 14.0852 3.48 13.2255 3.32 12.7757C3.23 12.5458 2.84 11.836 2.5 11.6461C2.22 11.4961 1.82 11.1262 2.49 11.1162C3.12 11.1062 3.57 11.696 3.72 11.936C4.44 13.1455 5.59 12.8057 6.05 12.5957C6.12 12.0759 6.33 11.726 6.56 11.5261C4.78 11.3262 2.92 10.6364 2.92 7.57743C2.92 6.70773 3.23 5.98797 3.74 5.42816C3.66 5.22823 3.38 4.40851 3.82 3.30888C3.82 3.30888 4.49 3.09895 6.02 4.1286C6.66 3.94866 7.34 3.85869 8.02 3.85869C8.7 3.85869 9.38 3.94866 10.02 4.1286C11.55 3.08895 12.22 3.30888 12.22 3.30888C12.66 4.40851 12.38 5.22823 12.3 5.42816C12.81 5.98797 13.12 6.69773 13.12 7.57743C13.12 10.6464 11.25 11.3262 9.47 11.5261C9.76 11.776 10.01 12.2558 10.01 13.0056C10.01 14.0752 10 14.9349 10 15.2049C10 15.4148 10.15 15.6647 10.55 15.5847C12.1381 15.0488 13.5182 14.0284 14.4958 12.6673C15.4735 11.3062 15.9996 9.67293 16 7.99729C16 3.57879 12.42 0 8 0Z"
111 |           fill="currentColor"
112 |         ></path>
113 |       </g>
114 |       <defs>
115 |         <clipPath id="clip0_872_3147">
116 |           <rect width="16" height="16" fill="white"></rect>
117 |         </clipPath>
118 |       </defs>
119 |     </svg>
120 |   );
121 | };


--------------------------------------------------------------------------------
/components/quiz.tsx:
--------------------------------------------------------------------------------
  1 | import React, { useState, useEffect } from "react";
  2 | import { motion, AnimatePresence } from "framer-motion";
  3 | import { Button } from "@/components/ui/button";
  4 | import { Progress } from "@/components/ui/progress";
  5 | import {
  6 |   ChevronLeft,
  7 |   ChevronRight,
  8 |   Check,
  9 |   X,
 10 |   RefreshCw,
 11 |   FileText,
 12 | } from "lucide-react";
 13 | import QuizScore from "./score";
 14 | import QuizReview from "./quiz-overview";
 15 | import { Question } from "@/lib/schemas";
 16 | 
 17 | type QuizProps = {
 18 |   questions: Question[];
 19 |   clearPDF: () => void;
 20 |   title: string;
 21 | };
 22 | 
 23 | const QuestionCard: React.FC<{
 24 |   question: Question;
 25 |   selectedAnswer: string | null;
 26 |   onSelectAnswer: (answer: string) => void;
 27 |   isSubmitted: boolean;
 28 |   showCorrectAnswer: boolean;
 29 | }> = ({ question, selectedAnswer, onSelectAnswer, showCorrectAnswer }) => {
 30 |   const answerLabels = ["A", "B", "C", "D"];
 31 | 
 32 |   return (
 33 |     <div className="space-y-6">
 34 |       <h2 className="text-lg font-semibold leading-tight">
 35 |         {question.question}
 36 |       </h2>
 37 |       <div className="grid grid-cols-1 gap-4">
 38 |         {question.options.map((option, index) => (
 39 |           <Button
 40 |             key={index}
 41 |             variant={
 42 |               selectedAnswer === answerLabels[index] ? "secondary" : "outline"
 43 |             }
 44 |             className={`h-auto py-6 px-4 justify-start text-left whitespace-normal ${
 45 |               showCorrectAnswer && answerLabels[index] === question.answer
 46 |                 ? "bg-green-600 hover:bg-green-700"
 47 |                 : showCorrectAnswer &&
 48 |                     selectedAnswer === answerLabels[index] &&
 49 |                     selectedAnswer !== question.answer
 50 |                   ? "bg-red-600 hover:bg-red-700"
 51 |                   : ""
 52 |             }`}
 53 |             onClick={() => onSelectAnswer(answerLabels[index])}
 54 |           >
 55 |             <span className="text-lg font-medium mr-4 shrink-0">
 56 |               {answerLabels[index]}
 57 |             </span>
 58 |             <span className="flex-grow">{option}</span>
 59 |             {(showCorrectAnswer && answerLabels[index] === question.answer) ||
 60 |               (selectedAnswer === answerLabels[index] && (
 61 |                 <Check className="ml-2 shrink-0 text-white" size={20} />
 62 |               ))}
 63 |             {showCorrectAnswer &&
 64 |               selectedAnswer === answerLabels[index] &&
 65 |               selectedAnswer !== question.answer && (
 66 |                 <X className="ml-2 shrink-0 text-white" size={20} />
 67 |               )}
 68 |           </Button>
 69 |         ))}
 70 |       </div>
 71 |     </div>
 72 |   );
 73 | };
 74 | 
 75 | export default function Quiz({
 76 |   questions,
 77 |   clearPDF,
 78 |   title = "Quiz",
 79 | }: QuizProps) {
 80 |   const [currentQuestionIndex, setCurrentQuestionIndex] = useState(0);
 81 |   const [answers, setAnswers] = useState<string[]>(
 82 |     Array(questions.length).fill(null),
 83 |   );
 84 |   const [isSubmitted, setIsSubmitted] = useState(false);
 85 |   const [score, setScore] = useState<number | null>(null);
 86 |   const [progress, setProgress] = useState(0);
 87 | 
 88 |   useEffect(() => {
 89 |     const timer = setTimeout(() => {
 90 |       setProgress((currentQuestionIndex / questions.length) * 100);
 91 |     }, 100);
 92 |     return () => clearTimeout(timer);
 93 |   }, [currentQuestionIndex, questions.length]);
 94 | 
 95 |   const handleSelectAnswer = (answer: string) => {
 96 |     if (!isSubmitted) {
 97 |       const newAnswers = [...answers];
 98 |       newAnswers[currentQuestionIndex] = answer;
 99 |       setAnswers(newAnswers);
100 |     }
101 |   };
102 | 
103 |   const handleNextQuestion = () => {
104 |     if (currentQuestionIndex < questions.length - 1) {
105 |       setCurrentQuestionIndex(currentQuestionIndex + 1);
106 |     } else {
107 |       handleSubmit();
108 |     }
109 |   };
110 | 
111 |   const handlePreviousQuestion = () => {
112 |     if (currentQuestionIndex > 0) {
113 |       setCurrentQuestionIndex(currentQuestionIndex - 1);
114 |     }
115 |   };
116 | 
117 |   const handleSubmit = () => {
118 |     setIsSubmitted(true);
119 |     const correctAnswers = questions.reduce((acc, question, index) => {
120 |       return acc + (question.answer === answers[index] ? 1 : 0);
121 |     }, 0);
122 |     setScore(correctAnswers);
123 |   };
124 | 
125 |   const handleReset = () => {
126 |     setAnswers(Array(questions.length).fill(null));
127 |     setIsSubmitted(false);
128 |     setScore(null);
129 |     setCurrentQuestionIndex(0);
130 |     setProgress(0);
131 |   };
132 | 
133 |   const currentQuestion = questions[currentQuestionIndex];
134 | 
135 |   return (
136 |     <div className="min-h-screen bg-background text-foreground">
137 |       <main className="container mx-auto px-4 py-12 max-w-4xl">
138 |         <h1 className="text-3xl font-bold mb-8 text-center text-foreground">
139 |           {title}
140 |         </h1>
141 |         <div className="relative">
142 |           {!isSubmitted && <Progress value={progress} className="h-1 mb-8" />}
143 |           <div className="min-h-[400px]">
144 |             {" "}
145 |             {/* Prevent layout shift */}
146 |             <AnimatePresence mode="wait">
147 |               <motion.div
148 |                 key={isSubmitted ? "results" : currentQuestionIndex}
149 |                 initial={{ opacity: 1 }}
150 |                 animate={{ opacity: 1 }}
151 |                 exit={{ opacity: 1 }}
152 |                 transition={{ duration: 0.3 }}
153 |               >
154 |                 {!isSubmitted ? (
155 |                   <div className="space-y-8">
156 |                     <QuestionCard
157 |                       question={currentQuestion}
158 |                       selectedAnswer={answers[currentQuestionIndex]}
159 |                       onSelectAnswer={handleSelectAnswer}
160 |                       isSubmitted={isSubmitted}
161 |                       showCorrectAnswer={false}
162 |                     />
163 |                     <div className="flex justify-between items-center pt-4">
164 |                       <Button
165 |                         onClick={handlePreviousQuestion}
166 |                         disabled={currentQuestionIndex === 0}
167 |                         variant="ghost"
168 |                       >
169 |                         <ChevronLeft className="mr-2 h-4 w-4" /> Previous
170 |                       </Button>
171 |                       <span className="text-sm font-medium">
172 |                         {currentQuestionIndex + 1} / {questions.length}
173 |                       </span>
174 |                       <Button
175 |                         onClick={handleNextQuestion}
176 |                         disabled={answers[currentQuestionIndex] === null}
177 |                         variant="ghost"
178 |                       >
179 |                         {currentQuestionIndex === questions.length - 1
180 |                           ? "Submit"
181 |                           : "Next"}{" "}
182 |                         <ChevronRight className="ml-2 h-4 w-4" />
183 |                       </Button>
184 |                     </div>
185 |                   </div>
186 |                 ) : (
187 |                   <div className="space-y-8">
188 |                     <QuizScore
189 |                       correctAnswers={score ?? 0}
190 |                       totalQuestions={questions.length}
191 |                     />
192 |                     <div className="space-y-12">
193 |                       <QuizReview questions={questions} userAnswers={answers} />
194 |                     </div>
195 |                     <div className="flex justify-center space-x-4 pt-4">
196 |                       <Button
197 |                         onClick={handleReset}
198 |                         variant="outline"
199 |                         className="bg-muted hover:bg-muted/80 w-full"
200 |                       >
201 |                         <RefreshCw className="mr-2 h-4 w-4" /> Reset Quiz
202 |                       </Button>
203 |                       <Button
204 |                         onClick={clearPDF}
205 |                         className="bg-primary hover:bg-primary/90 w-full"
206 |                       >
207 |                         <FileText className="mr-2 h-4 w-4" /> Try Another PDF
208 |                       </Button>
209 |                     </div>
210 |                   </div>
211 |                 )}
212 |               </motion.div>
213 |             </AnimatePresence>
214 |           </div>
215 |         </div>
216 |       </main>
217 |     </div>
218 |   );
219 | }
220 | 


--------------------------------------------------------------------------------
/app/(preview)/page.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | 
  3 | import { useState } from "react";
  4 | import { experimental_useObject } from "ai/react";
  5 | import { questionsSchema } from "@/lib/schemas";
  6 | import { z } from "zod";
  7 | import { toast } from "sonner";
  8 | import { FileUp, Plus, Loader2 } from "lucide-react";
  9 | import { Button } from "@/components/ui/button";
 10 | import {
 11 |   Card,
 12 |   CardContent,
 13 |   CardFooter,
 14 |   CardHeader,
 15 |   CardTitle,
 16 |   CardDescription,
 17 | } from "@/components/ui/card";
 18 | import { Progress } from "@/components/ui/progress";
 19 | import Quiz from "@/components/quiz";
 20 | import { Link } from "@/components/ui/link";
 21 | import NextLink from "next/link";
 22 | import { generateQuizTitle } from "./actions";
 23 | import { AnimatePresence, motion } from "framer-motion";
 24 | import { VercelIcon, GitIcon } from "@/components/icons";
 25 | 
 26 | export default function ChatWithFiles() {
 27 |   const [files, setFiles] = useState<File[]>([]);
 28 |   const [questions, setQuestions] = useState<z.infer<typeof questionsSchema>>(
 29 |     [],
 30 |   );
 31 |   const [isDragging, setIsDragging] = useState(false);
 32 |   const [title, setTitle] = useState<string>();
 33 | 
 34 |   const {
 35 |     submit,
 36 |     object: partialQuestions,
 37 |     isLoading,
 38 |   } = experimental_useObject({
 39 |     api: "/api/generate-quiz",
 40 |     schema: questionsSchema,
 41 |     initialValue: undefined,
 42 |     onError: (error) => {
 43 |       toast.error("Failed to generate quiz. Please try again.");
 44 |       setFiles([]);
 45 |     },
 46 |     onFinish: ({ object }) => {
 47 |       setQuestions(object ?? []);
 48 |     },
 49 |   });
 50 | 
 51 |   const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
 52 |     const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
 53 | 
 54 |     if (isSafari && isDragging) {
 55 |       toast.error(
 56 |         "Safari does not support drag & drop. Please use the file picker.",
 57 |       );
 58 |       return;
 59 |     }
 60 | 
 61 |     const selectedFiles = Array.from(e.target.files || []);
 62 |     const validFiles = selectedFiles.filter(
 63 |       (file) => file.type === "application/pdf" && file.size <= 5 * 1024 * 1024,
 64 |     );
 65 |     console.log(validFiles);
 66 | 
 67 |     if (validFiles.length !== selectedFiles.length) {
 68 |       toast.error("Only PDF files under 5MB are allowed.");
 69 |     }
 70 | 
 71 |     setFiles(validFiles);
 72 |   };
 73 | 
 74 |   const encodeFileAsBase64 = (file: File): Promise<string> => {
 75 |     return new Promise((resolve, reject) => {
 76 |       const reader = new FileReader();
 77 |       reader.readAsDataURL(file);
 78 |       reader.onload = () => resolve(reader.result as string);
 79 |       reader.onerror = (error) => reject(error);
 80 |     });
 81 |   };
 82 | 
 83 |   const handleSubmitWithFiles = async (e: React.FormEvent<HTMLFormElement>) => {
 84 |     e.preventDefault();
 85 |     const encodedFiles = await Promise.all(
 86 |       files.map(async (file) => ({
 87 |         name: file.name,
 88 |         type: file.type,
 89 |         data: await encodeFileAsBase64(file),
 90 |       })),
 91 |     );
 92 |     submit({ files: encodedFiles });
 93 |     const generatedTitle = await generateQuizTitle(encodedFiles[0].name);
 94 |     setTitle(generatedTitle);
 95 |   };
 96 | 
 97 |   const clearPDF = () => {
 98 |     setFiles([]);
 99 |     setQuestions([]);
100 |   };
101 | 
102 |   const progress = partialQuestions ? (partialQuestions.length / 4) * 100 : 0;
103 | 
104 |   if (questions.length === 4) {
105 |     return (
106 |       <Quiz title={title ?? "Quiz"} questions={questions} clearPDF={clearPDF} />
107 |     );
108 |   }
109 | 
110 |   return (
111 |     <div
112 |       className="min-h-[100dvh] w-full flex justify-center"
113 |       onDragOver={(e) => {
114 |         e.preventDefault();
115 |         setIsDragging(true);
116 |       }}
117 |       onDragExit={() => setIsDragging(false)}
118 |       onDragEnd={() => setIsDragging(false)}
119 |       onDragLeave={() => setIsDragging(false)}
120 |       onDrop={(e) => {
121 |         e.preventDefault();
122 |         setIsDragging(false);
123 |         console.log(e.dataTransfer.files);
124 |         handleFileChange({
125 |           target: { files: e.dataTransfer.files },
126 |         } as React.ChangeEvent<HTMLInputElement>);
127 |       }}
128 |     >
129 |       <AnimatePresence>
130 |         {isDragging && (
131 |           <motion.div
132 |             className="fixed pointer-events-none dark:bg-zinc-900/90 h-dvh w-dvw z-10 justify-center items-center flex flex-col gap-1 bg-zinc-100/90"
133 |             initial={{ opacity: 0 }}
134 |             animate={{ opacity: 1 }}
135 |             exit={{ opacity: 0 }}
136 |           >
137 |             <div>Drag and drop files here</div>
138 |             <div className="text-sm dark:text-zinc-400 text-zinc-500">
139 |               {"(PDFs only)"}
140 |             </div>
141 |           </motion.div>
142 |         )}
143 |       </AnimatePresence>
144 |       <Card className="w-full max-w-md h-full border-0 sm:border sm:h-fit mt-12">
145 |         <CardHeader className="text-center space-y-6">
146 |           <div className="mx-auto flex items-center justify-center space-x-2 text-muted-foreground">
147 |             <div className="rounded-full bg-primary/10 p-2">
148 |               <FileUp className="h-6 w-6" />
149 |             </div>
150 |             <Plus className="h-4 w-4" />
151 |             <div className="rounded-full bg-primary/10 p-2">
152 |               <Loader2 className="h-6 w-6" />
153 |             </div>
154 |           </div>
155 |           <div className="space-y-2">
156 |             <CardTitle className="text-2xl font-bold">
157 |               PDF Quiz Generator
158 |             </CardTitle>
159 |             <CardDescription className="text-base">
160 |               Upload a PDF to generate an interactive quiz based on its content
161 |               using the <Link href="https://sdk.vercel.ai">AI SDK</Link> and{" "}
162 |               <Link href="https://sdk.vercel.ai/providers/ai-sdk-providers/google-generative-ai">
163 |                 Google&apos;s Gemini Pro
164 |               </Link>
165 |               .
166 |             </CardDescription>
167 |           </div>
168 |         </CardHeader>
169 |         <CardContent>
170 |           <form onSubmit={handleSubmitWithFiles} className="space-y-4">
171 |             <div
172 |               className={`relative flex flex-col items-center justify-center border-2 border-dashed border-muted-foreground/25 rounded-lg p-6 transition-colors hover:border-muted-foreground/50`}
173 |             >
174 |               <input
175 |                 type="file"
176 |                 onChange={handleFileChange}
177 |                 accept="application/pdf"
178 |                 className="absolute inset-0 opacity-0 cursor-pointer"
179 |               />
180 |               <FileUp className="h-8 w-8 mb-2 text-muted-foreground" />
181 |               <p className="text-sm text-muted-foreground text-center">
182 |                 {files.length > 0 ? (
183 |                   <span className="font-medium text-foreground">
184 |                     {files[0].name}
185 |                   </span>
186 |                 ) : (
187 |                   <span>Drop your PDF here or click to browse.</span>
188 |                 )}
189 |               </p>
190 |             </div>
191 |             <Button
192 |               type="submit"
193 |               className="w-full"
194 |               disabled={files.length === 0}
195 |             >
196 |               {isLoading ? (
197 |                 <span className="flex items-center space-x-2">
198 |                   <Loader2 className="h-4 w-4 animate-spin" />
199 |                   <span>Generating Quiz...</span>
200 |                 </span>
201 |               ) : (
202 |                 "Generate Quiz"
203 |               )}
204 |             </Button>
205 |           </form>
206 |         </CardContent>
207 |         {isLoading && (
208 |           <CardFooter className="flex flex-col space-y-4">
209 |             <div className="w-full space-y-1">
210 |               <div className="flex justify-between text-sm text-muted-foreground">
211 |                 <span>Progress</span>
212 |                 <span>{Math.round(progress)}%</span>
213 |               </div>
214 |               <Progress value={progress} className="h-2" />
215 |             </div>
216 |             <div className="w-full space-y-2">
217 |               <div className="grid grid-cols-6 sm:grid-cols-4 items-center space-x-2 text-sm">
218 |                 <div
219 |                   className={`h-2 w-2 rounded-full ${
220 |                     isLoading ? "bg-yellow-500/50 animate-pulse" : "bg-muted"
221 |                   }`}
222 |                 />
223 |                 <span className="text-muted-foreground text-center col-span-4 sm:col-span-2">
224 |                   {partialQuestions
225 |                     ? `Generating question ${partialQuestions.length + 1} of 4`
226 |                     : "Analyzing PDF content"}
227 |                 </span>
228 |               </div>
229 |             </div>
230 |           </CardFooter>
231 |         )}
232 |       </Card>
233 |       <motion.div
234 |         className="flex flex-row gap-4 items-center justify-between fixed bottom-6 text-xs "
235 |         initial={{ y: 20, opacity: 0 }}
236 |         animate={{ y: 0, opacity: 1 }}
237 |       >
238 |         <NextLink
239 |           target="_blank"
240 |           href="https://github.com/vercel-labs/ai-sdk-preview-pdf-support"
241 |           className="flex flex-row gap-2 items-center border px-2 py-1.5 rounded-md hover:bg-zinc-100 dark:border-zinc-800 dark:hover:bg-zinc-800"
242 |         >
243 |           <GitIcon />
244 |           View Source Code
245 |         </NextLink>
246 | 
247 |         <NextLink
248 |           target="_blank"
249 |           href="https://vercel.com/templates/next.js/ai-quiz-generator"
250 |           className="flex flex-row gap-2 items-center bg-zinc-900 px-2 py-1.5 rounded-md text-zinc-50 hover:bg-zinc-950 dark:bg-zinc-100 dark:text-zinc-900 dark:hover:bg-zinc-50"
251 |         >
252 |           <VercelIcon size={14} />
253 |           Deploy with Vercel
254 |         </NextLink>
255 |       </motion.div>
256 |     </div>
257 |   );
258 | }
259 | 


--------------------------------------------------------------------------------