SvelteKit

Utilisez Firecrawl avec SvelteKit pour extraire, rechercher et interagir avec des données web dans votre application Svelte.

Prérequis

Un projet SvelteKit
Une clé API Firecrawl — obtenez-en une gratuitement

Installer le SDK

npm install firecrawl

Ajoutez votre clé API à .env :

FIRECRAWL_API_KEY=fc-YOUR-API-KEY

Recherche sur le Web

Créez une action de formulaire dans src/routes/search/+page.server.ts :

import { Firecrawl } from "firecrawl";
import { FIRECRAWL_API_KEY } from "$env/static/private";

const firecrawl = new Firecrawl({ apiKey: FIRECRAWL_API_KEY });

export const actions = {
  default: async ({ request }) => {
    const data = await request.formData();
    const query = data.get("query") as string;
    const results = await firecrawl.search(query, { limit: 5 });
    return { results: (results.web || []).map((r) => ({ title: r.title, url: r.url })) };
  },
};

Ajoutez-le dans src/routes/search/+page.svelte:

<script>
  export let form;
</script>

<form method="POST">
  <input name="query" placeholder="Search the web..." />
  <button>Search</button>
</form>

{#if form?.results}
  {#each form.results as result}
    <div><a href={result.url}>{result.title}</a></div>
  {/each}
{/if}

Scrape les données d’une page

Récupérez des données dans une fonction load située dans src/routes/scrape/+page.server.ts :

import { Firecrawl } from "firecrawl";
import { FIRECRAWL_API_KEY } from "$env/static/private";

const firecrawl = new Firecrawl({ apiKey: FIRECRAWL_API_KEY });

export async function load({ url }) {
  const target = url.searchParams.get("url");
  if (!target) return { markdown: null };

  const result = await firecrawl.scrape(target);
  return { markdown: result.markdown };
}

Affichez-le dans src/routes/scrape/+page.svelte :

<script>
  export let data;
</script>

{#if data.markdown}
  <pre>{data.markdown}</pre>
{:else}
  <p>Pass ?url= to scrape a page</p>
{/if}

Interact avec une page

Créez un point de terminaison côté serveur dans src/routes/api/interact/+server.ts:

import { json } from "@sveltejs/kit";
import { Firecrawl } from "firecrawl";
import { FIRECRAWL_API_KEY } from "$env/static/private";

const firecrawl = new Firecrawl({ apiKey: FIRECRAWL_API_KEY });

export async function POST() {
  const result = await firecrawl.scrape("https://www.amazon.com", {
    formats: ["markdown"],
  });

  const scrapeId = result.metadata?.scrapeId;

  await firecrawl.interact(scrapeId, {
    prompt: "Search for iPhone 16 Pro Max",
  });

  const response = await firecrawl.interact(scrapeId, {
    prompt: "Click on the first result and tell me the price",
  });

  await firecrawl.stopInteraction(scrapeId);

  return json({ output: response.output });
}

Prochaines étapes

Documentation Scrape

Toutes les options de scrape, y compris les formats, les actions et les proxies

Documentation recherche

Recherchez sur le web et obtenez le contenu intégral des pages

Documentation Interact

Cliquez, remplissez des formulaires et extrayez du contenu dynamique

Référence du SDK Node

Référence complète du SDK avec crawl, cartographie, extraction par lot et plus encore