# Remix (/quickstarts/remix) Related: [Node.js](/quickstarts/nodejs.md), [Next.js](/quickstarts/nextjs.md), [Express](/quickstarts/express.md), [NestJS](/quickstarts/nestjs.md), [Fastify](/quickstarts/fastify.md), [Hono](/quickstarts/hono.md) ## Prerequisites [#prerequisites] * Remix project * A Firecrawl API key — [get one free](https://www.firecrawl.dev/app/api-keys) ## Install the SDK [#install-the-sdk] ```bash npm install firecrawl ``` Add your API key to `.env`: ```bash FIRECRAWL_API_KEY=fc-YOUR-API-KEY ``` ## Search the web [#search-the-web] Use Firecrawl in an `action` to handle form submissions. Create `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) => (
{r.title}
))}
); } ``` ## Scrape a page [#scrape-a-page] Use Firecrawl in a `loader` to fetch data at request time. Create `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 with a page [#interact-with-a-page] Use interact to control a live browser session — click buttons, fill forms, and extract dynamic content. Create `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}
}
); } ``` ## Next steps [#next-steps] All scrape options including formats, actions, and proxies Search the web and get full page content Click, fill forms, and extract dynamic content Full SDK reference with crawl, map, batch scrape, and more