Added firecrawl as a toolcall to crawl website contents from url

apps/studio/.env.example

@@ -4,4 +4,6 @@ VITE_SUPABASE_ANON_KEY=
 VITE_MIXPANEL_TOKEN=
 
 # Add your keys here to use Anthropic directly
-VITE_ANTHROPIC_API_KEY=
+VITE_ANTHROPIC_API_KEY=
+# Add your Firecrawl API key here
+VITE_FIRECRAWL_API_KEY=

apps/studio/package.json

@@ -53,6 +53,7 @@
         "@emotion/react": "^11.13.3",
         "@emotion/styled": "^11.13.0",
         "@fontsource-variable/inter": "^5.1.0",
+        "@mendable/firecrawl-js": "^1.24.0",
         "@onlook/foundation": "*",
         "@onlook/supabase": "*",
         "@onlook/ui": "*",

apps/studio/src/lib/projects/create.ts

@@ -89,9 +89,15 @@ export class CreateManager {
         }
     }
 
-    async sendPrompt(prompt: string, images: ImageMessageContext[], blank: boolean = false) {
+    async sendPrompt(
+        prompt: string,
+        images: ImageMessageContext[],
+        crawledContent?: string,
+        blank: boolean = false,
+    ) {
         sendAnalytics('prompt create project', {
             prompt,
+            crawledContent,
             blank,
         });
 
@@ -104,6 +110,7 @@ export class CreateManager {
         } else {
             result = await invokeMainChannel(MainChannels.CREATE_NEW_PROJECT_PROMPT, {
                 prompt,
+                crawledContent,
                 images,
             });
         }

apps/studio/src/lib/services/crawler.ts

@@ -0,0 +1,64 @@
+import FirecrawlApp from '@mendable/firecrawl-js';
+
+export interface CrawlOptions {
+    limit?: number;
+    scrapeOptions?: {
+        formats?: (
+            | 'markdown'
+            | 'html'
+            | 'rawHtml'
+            | 'content'
+            | 'links'
+            | 'screenshot'
+            | 'screenshot@fullPage'
+            | 'extract'
+            | 'json'
+            | 'changeTracking'
+        )[];
+    };
+}
+
+export class CrawlerService {
+    private static instance: CrawlerService;
+
+    private app: FirecrawlApp;
+
+    private constructor() {
+        const apiKey = import.meta.env.VITE_FIRECRAWL_API_KEY;
+        if (!apiKey) {
+            throw new Error(
+                'VITE_FIRECRAWL_API_KEY is not defined. Please provide a valid API key.',
+            );
+        }
+        this.app = new FirecrawlApp({ apiKey });
+    }
+
+    static getInstance(): CrawlerService {
+        if (!this.instance) {
+            this.instance = new CrawlerService();
+        }
+        return this.instance;
+    }
+
+    async crawlUrl(
+        url: string,
+        options: CrawlOptions = {
+            limit: 100,
+            scrapeOptions: {
+                formats: ['markdown', 'html'],
+            },
+        },
+    ) {
+        try {
+            const response = await this.app.crawlUrl(url, options);
+
+            if (!response.success) {
+                throw new Error(`Failed to crawl: ${response.error}`);
+            }
+            return response;
+        } catch (error) {
+            console.error('Error during crawling:', error);
+            throw error;
+        }
+    }
+}

apps/studio/src/locales/en/translation.json

@@ -73,6 +73,16 @@
                 "fileReference": "File Reference",
                 "submit": "Start building your site"
             },
+            "crawl": {
+                "title": "Duplicate a website",
+                "description": "Paste a link to a website that you want to duplicate",
+                "input": {
+                    "placeholder": "Paste a link to a website",
+                    "arialLabel": "URL input for web page crawling",
+                    "crawling": "Getting Data",
+                    "submit": "Get Data"
+                }
+            },
             "blankStart": "Start from a blank page"
         }
     },

apps/studio/src/routes/projects/PromptCreation/PromptingCard.tsx

@@ -14,6 +14,8 @@ import { useEffect, useRef, useState } from 'react';
 import useResizeObserver from 'use-resize-observer';
 import { DraftImagePill } from '../../editor/EditPanel/ChatTab/ContextPills/DraftingImagePill';
 import { useTranslation } from 'react-i18next';
+import { CrawlerService } from '@/lib/services/crawler';
+import { toast } from '@onlook/ui/use-toast';
 
 export const PromptingCard = () => {
     const projectsManager = useProjectsManager();
@@ -28,6 +30,9 @@ export const PromptingCard = () => {
     const [isComposing, setIsComposing] = useState(false);
     const imageRef = useRef<HTMLInputElement>(null);
     const { t } = useTranslation();
+    const [urlInput, setUrlInput] = useState('');
+    const [isCrawling, setIsCrawling] = useState(false);
+    const [crawledValue, setCrawledValue] = useState('');
 
     useEffect(() => {
         const handleEscapeKey = (e: KeyboardEvent) => {
@@ -45,11 +50,12 @@ export const PromptingCard = () => {
             console.warn('Input is too short');
             return;
         }
-        projectsManager.create.sendPrompt(inputValue, selectedImages, false);
+        projectsManager.create.sendPrompt(inputValue, selectedImages, crawledValue, false);
+        setCrawledValue('');
     };
 
     const handleBlankSubmit = async () => {
-        projectsManager.create.sendPrompt('', [], true);
+        projectsManager.create.sendPrompt('', [], '', true);
     };
 
     const handleDragOver = (e: React.DragEvent) => {
@@ -179,6 +185,65 @@ export const PromptingCard = () => {
         }
     };
 
+    const handleCrawlSubmit = async () => {
+        const trimmedUrlInput = urlInput.trim();
+        if (!trimmedUrlInput) {
+            console.warn('URL input is empty');
+            return;
+        }
+
+        try {
+            const url = new URL(trimmedUrlInput);
+            if (!['http:', 'https:'].includes(url.protocol)) {
+                console.warn('URL must start with http or https');
+                toast({
+                    title: 'Invalid URL',
+                    description: 'Please enter a URL that starts with http or https.',
+                    variant: 'destructive',
+                });
+                return;
+            }
+        } catch (error) {
+            console.warn('Invalid URL:', trimmedUrlInput);
+            toast({
+                title: 'Invalid URL',
+                description: 'Please enter a valid URL format.',
+                variant: 'destructive',
+            });
+            return;
+        }
+
+        setIsCrawling(true);
+
+        try {
+            const crawler = CrawlerService.getInstance();
+
+            const response = await crawler.crawlUrl(trimmedUrlInput);
+
+            const responseData = response.data;
+            const html = responseData[0]?.html || '';
+            const markdown = responseData[0]?.markdown || '';
+
+            setCrawledValue(`---MARKDOWN---\n${markdown}\n\n---HTML---\n${html}`);
+
+            toast({
+                title: 'URL Crawled',
+                description: `Data for ${trimmedUrlInput} has been crawled successfully.`,
+            });
+
+            setUrlInput('');
+        } catch (error) {
+            console.error('Failed to crawl URL:', error);
+            toast({
+                title: 'Failed to Crawl URL',
+                description: error instanceof Error ? error.message : 'An unknown error occurred',
+                variant: 'destructive',
+            });
+        } finally {
+            setIsCrawling(false);
+        }
+    };
+
     return (
         <MotionConfig transition={{ duration: 0.5, type: 'spring', bounce: 0 }}>
             <div className="flex flex-col gap-4 mb-12">
@@ -382,6 +447,69 @@ export const PromptingCard = () => {
                         </CardContent>
                     </motion.div>
                 </MotionCard>
+                <MotionCard
+                    initial={{ opacity: 0, y: 20 }}
+                    animate={{ opacity: 1, y: 0 }}
+                    exit={{ opacity: 0, y: 20 }}
+                    className="w-[600px] backdrop-blur-md bg-background/30 overflow-hidden"
+                >
+                    <CardHeader>
+                        <motion.h2
+                            initial={{ opacity: 0, y: 20 }}
+                            animate={{ opacity: 1, y: 0 }}
+                            className="text-2xl text-foreground-primary"
+                        >
+                            {t('projects.prompt.crawl.title')}
+                        </motion.h2>
+                        <motion.p
+                            initial={{ opacity: 0, y: 20 }}
+                            animate={{ opacity: 1, y: 0 }}
+                            transition={{ delay: 0.1 }}
+                            className="text-sm text-foreground-secondary"
+                        >
+                            {t('projects.prompt.crawl.description')}
+                        </motion.p>
+                    </CardHeader>
+                    <CardContent className="flex flex-col gap-4">
+                        <div className="flex flex-col gap-2">
+                            <div className="flex flex-row gap-2">
+                                <input
+                                    type="url"
+                                    value={urlInput}
+                                    onChange={(e) => setUrlInput(e.target.value)}
+                                    aria-label={t('projects.prompt.crawl.input.ariaLabel')}
+                                    placeholder={t('projects.prompt.crawl.input.placeholder')}
+                                    className={cn(
+                                        'flex-1 h-9 px-3 rounded-md',
+                                        'bg-background-secondary/80 backdrop-blur-sm',
+                                        'border border-border',
+                                        'text-sm text-foreground-primary',
+                                        'placeholder:text-foreground-secondary',
+                                        'focus:outline-none focus:ring-2 focus:ring-ring',
+                                    )}
+                                />
+                                <Button
+                                    variant="secondary"
+                                    className="gap-2"
+                                    disabled={!urlInput.trim() || isCrawling}
+                                    onClick={handleCrawlSubmit}
+                                >
+                                    {isCrawling ? (
+                                        <>
+                                            <Icons.Circle className="w-4 h-4 animate-spin" />{' '}
+                                            {t('projects.prompt.crawl.input.crawling')}
+                                        </>
+                                    ) : (
+                                        <>
+                                            <Icons.ArrowRight className="w-4 h-4" />{' '}
+                                            {t('projects.prompt.crawl.input.submit')}
+                                        </>
+                                    )}
+                                </Button>
+                            </div>
+                        </div>
+                    </CardContent>
+                </MotionCard>
                 <Button
                     variant="outline"
                     className="w-fit mx-auto bg-background-secondary/90 text-sm border text-foreground-secondary"

apps/web/client/messages/en.json

@@ -73,6 +73,16 @@
                 "fileReference": "File Reference",
                 "submit": "Start building your site"
             },
+            "crawl": {
+                "title": "Duplicate a website",
+                "description": "Paste a link to a website that you want to duplicate",
+                "input": {
+                    "placeholder": "Paste a link to a website",
+                    "arialLabel": "URL input for web page crawling",
+                    "crawling": "Getting Data",
+                    "submit": "Get Data"
+                }
+            },
             "blankStart": "Start from a blank page"
         }
     },