# Remix (/fr/quickstarts/remix)
Related: [Node.js](/fr/quickstarts/nodejs.md), [Next.js](/fr/quickstarts/nextjs.md), [Express](/fr/quickstarts/express.md), [NestJS](/fr/quickstarts/nestjs.md), [Fastify](/fr/quickstarts/fastify.md), [Hono](/fr/quickstarts/hono.md)
## Prérequis [#prérequis]
* Un projet Remix
* Une clé API Firecrawl — [obtenez-en une gratuitement](https://www.firecrawl.dev/app/api-keys)
## Installer le SDK [#installer-le-sdk]
```bash
npm install firecrawl
```
Ajoutez votre clé API à `.env` :
```bash
FIRECRAWL_API_KEY=fc-YOUR-API-KEY
```
## Recherche sur le web [#recherche-sur-le-web]
Utilisez Firecrawl dans une `action` pour traiter les envois de formulaire. Créez `app/routes/search.tsx`:
```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();
return (
{data?.results?.map((r, i) => (
))}
);
}
```
## Scraper une page [#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` :
```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();
return (
Scraped Content
{markdown ?
{markdown} :
Pass ?url= to scrape a page
}
);
}
```
## Interact avec une page [#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` :
```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();
return (
{data?.output &&
{data.output}}
);
}
```
## Étapes suivantes [#étapes-suivantes]
Toutes les options de scrape, y compris les formats, les actions et les proxies
Effectuez une recherche sur le web et obtenez le contenu intégral des pages
Cliquez, remplissez des formulaires et extrayez du contenu dynamique
Référence complète du SDK avec crawl, cartographie, extraction par lot, etc.