Remix

Utilisez Firecrawl avec Remix pour extraire, rechercher et interagir avec les données du web dans votre application React full-stack.

Prérequis

Un projet Remix
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

Utilisez Firecrawl dans une action pour traiter les envois de formulaire. Créez app/routes/search.tsx:

import { json, type ActionFunctionArgs } from "@remix-run/node";
import { Form, useActionData } from "@remix-run/react";
import { Firecrawl } from "firecrawl";

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

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

export default function SearchPage() {
  const data = useActionData<typeof action>();

  return (
    <div>
      <Form method="post">
        <input name="query" placeholder="Search the web..." />
        <button type="submit">Search</button>
      </Form>
      {data?.results?.map((r, i) => (
        <div key={i}>
          <a href={r.url}>{r.title}</a>
        </div>
      ))}
    </div>
  );
}

Scraper une page

Utilisez Firecrawl dans un loader pour récupérer des données lors de la requête. Créez app/routes/scrape.tsx :

import { json, type LoaderFunctionArgs } from "@remix-run/node";
import { useLoaderData } from "@remix-run/react";
import { Firecrawl } from "firecrawl";

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

export async function loader({ request }: LoaderFunctionArgs) {
  const url = new URL(request.url);
  const target = url.searchParams.get("url");
  if (!target) return json({ markdown: null });

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

export default function ScrapePage() {
  const { markdown } = useLoaderData<typeof loader>();

  return (
    <div>
      <h1>Scraped Content</h1>
      {markdown ? <pre>{markdown}</pre> : <p>Pass ?url= to scrape a page</p>}
    </div>
  );
}

Interact avec une page

Utilisez Interact pour piloter une session de navigateur active — cliquez sur des boutons, remplissez des formulaires et extrayez du contenu dynamique. Créez app/routes/interact.tsx :

import { json, type ActionFunctionArgs } from "@remix-run/node";
import { Form, useActionData } from "@remix-run/react";
import { Firecrawl } from "firecrawl";

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

export async function action({ request }: ActionFunctionArgs) {
  const formData = await request.formData();
  const url = formData.get("url") as string;

  const result = await firecrawl.scrape(url, { 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 });
}

export default function InteractPage() {
  const data = useActionData<typeof action>();

  return (
    <div>
      <Form method="post">
        <input name="url" placeholder="URL to interact with..." />
        <button type="submit">Interact</button>
      </Form>
      {data?.output && <pre>{data.output}</pre>}
    </div>
  );
}

É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 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, etc.