Add Webpage support with Firecrawl 🔥

README.md

@@ -47,6 +47,7 @@ yarn install
 
 ```env
 GOOGLE_GENERATIVE_AI_API_KEY=your_api_key_here
+FIRECRAWL_API_KEY=
 ```
 
 4. Run the development server:

app/api/generate-quiz/route.ts

@@ -1,32 +1,54 @@
 import { pdfExtractSchema } from "@/lib/schemas";
 import { google } from "@ai-sdk/google";
 import { streamObject } from "ai";
+import FirecrawlApp from '@mendable/firecrawl-js';
 
 export const maxDuration = 60;
 
 export async function POST(req: Request) {
-  const { files } = await req.json();
-  const firstFile = files[0].data;
+  const { files, url } = await req.json();
+
+  let content = '';
+
+  if (url) {
+    const app = new FirecrawlApp({ apiKey: process.env.FIRECRAWL_API_KEY! });
+
+    const scrapeResponse = await app.scrapeUrl(url, {
+      formats: ['markdown'],
+    });
+
+    if (!scrapeResponse.success) {
+      throw new Error(`Failed to scrape: ${scrapeResponse.error}`);
+    }
+
+    content = scrapeResponse.markdown ?? '';
+    console.log(content);
+  } else if (files && files.length > 0) {
+    content = files[0]?.data ?? '';
+  } else {
+    throw new Error('No content provided');
+  }
 
   const result = await streamObject({
     model: google("gemini-1.5-pro-latest"),
     messages: [
       {
         role: "system",
         content:
-          "You are a document analyzer. Extract the most important points from the provided PDF document. Focus on key information, main ideas, and significant details.",
+          "You are a document analyzer. Extract the most important points from the provided document. Focus on key information, main ideas, and significant details.",
       },
       {
         role: "user",
         content: [
           {
             type: "text",
-            text: "Please read this PDF and extract the key points. Include relevant context where helpful.",
+            text: url 
+              ? "Please analyze this webpage content and extract the key points. Include relevant context where helpful."
+              : "Please read this PDF and extract the key points. Include relevant context where helpful.",
           },
           {
-            type: "file",
-            data: firstFile,
-            mimeType: "application/pdf",
+            type: "text",
+            text: content,
           },
         ],
       },

components/MindMap.tsx

@@ -115,14 +115,9 @@ export default function MindMap({ data, onNodeClick }: MindMapProps) {
           <FileUp className="h-12 w-12 text-zinc-300 mx-auto mb-6" />
           <h3 className="text-xl font-medium">No Mind Map Yet</h3>
           <p className="text-sm text-zinc-400 pb-4">
-            Upload a PDF to generate an interactive mind map of its key concepts.
+            Upload a PDF or Enter a URL to generate an interactive mind map of its key concepts.
           </p>
-          <Button 
-            onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })} 
-            className="font-mono bg-zinc-100 text-zinc-800 shadow-none hover:bg-zinc-200 duration-200"
-          >
-            Upload File
-          </Button>
+
         </div>
       </div>
     )