Astro

Utilisez Firecrawl avec Astro pour extraire, rechercher et interagir avec des données web sur votre site riche en contenu.

Prérequis

Un projet Astro avec SSR activé (output: "server" ou "hybrid")
Une clé d’API Firecrawl — obtenez-en une gratuitement

Installer le SDK

npm install firecrawl

Ajoutez votre clé API dans .env :

FIRECRAWL_API_KEY=fc-YOUR-API-KEY

Recherche sur le Web

Créez src/pages/api/search.ts :

import type { APIRoute } from "astro";
import { Firecrawl } from "firecrawl";

const firecrawl = new Firecrawl({
  apiKey: import.meta.env.FIRECRAWL_API_KEY,
});

export const POST: APIRoute = async ({ request }) => {
  const { query } = await request.json();
  const results = await firecrawl.search(query, { limit: 5 });
  return new Response(JSON.stringify(results), {
    headers: { "Content-Type": "application/json" },
  });
};

Ou effectuez une recherche lors de la requête dans une page rendue côté serveur (src/pages/search.astro) :

---
import { Firecrawl } from "firecrawl";

const firecrawl = new Firecrawl({
  apiKey: import.meta.env.FIRECRAWL_API_KEY,
});

const query = Astro.url.searchParams.get("q");
let results = [];

if (query) {
  const searchData = await firecrawl.search(query, { limit: 5 });
  results = searchData.web || [];
}
---

<html>
  <body>
    <h1>Search Results</h1>
    {results.length > 0 ? (
      <ul>
        {results.map((r) => (
          <li><a href={r.url}>{r.title}</a></li>
        ))}
      </ul>
    ) : (
      <p>Pass ?q= to search the web</p>
    )}
  </body>
</html>

Scrape une page

Créez src/pages/api/scrape.ts:

import type { APIRoute } from "astro";
import { Firecrawl } from "firecrawl";

const firecrawl = new Firecrawl({
  apiKey: import.meta.env.FIRECRAWL_API_KEY,
});

export const POST: APIRoute = async ({ request }) => {
  const { url } = await request.json();
  const result = await firecrawl.scrape(url);
  return new Response(JSON.stringify(result), {
    headers: { "Content-Type": "application/json" },
  });
};

Ou lancez le scraping au moment de la requête dans une page rendue côté serveur (src/pages/scrape.astro) :

---
import { Firecrawl } from "firecrawl";

const firecrawl = new Firecrawl({
  apiKey: import.meta.env.FIRECRAWL_API_KEY,
});

const target = Astro.url.searchParams.get("url");
let markdown = null;

if (target) {
  const result = await firecrawl.scrape(target);
  markdown = result.markdown;
}
---

<html>
  <body>
    <h1>Contenu extrait</h1>
    {markdown ? <pre>{markdown}</pre> : <p>Passez ?url= pour scraper une page</p>}
  </body>
</html>

Interact avec une page

Créez src/pages/api/interact.ts:

import type { APIRoute } from "astro";
import { Firecrawl } from "firecrawl";

const firecrawl = new Firecrawl({
  apiKey: import.meta.env.FIRECRAWL_API_KEY,
});

export const POST: APIRoute = async () => {
  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 new Response(JSON.stringify({ output: response.output }), {
    headers: { "Content-Type": "application/json" },
  });
};

Étapes suivantes

Documentation Scrape

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

Documentation recherche

Effectuez une recherche sur le web et obtenez le contenu complet de la page

Documentation Interact

Cliquez, remplissez des formulaires et extrayez du contenu dynamique

Référence du Node SDK

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