# Astro (/pt-BR/quickstarts/astro)

<!-- agent-signals: reading_time_min: 5 · est_tokens: 2276 · updated: 2026-07-30 -->
Related: [Node.js](/pt-BR/quickstarts/nodejs.md), [Next.js](/pt-BR/quickstarts/nextjs.md), [Express](/pt-BR/quickstarts/express.md), [NestJS](/pt-BR/quickstarts/nestjs.md), [Fastify](/pt-BR/quickstarts/fastify.md), [Hono](/pt-BR/quickstarts/hono.md)

<div id="prerequisites">
  ## Pré-requisitos [#pré-requisitos]
</div>

* Um projeto Astro com SSR habilitado (`output: "server"` ou `"hybrid"`)
* Uma chave de API do Firecrawl — [obtenha uma gratuitamente](https://www.firecrawl.dev/app/api-keys)

<div id="install-the-sdk">
  ## Instalar o SDK [#instalar-o-sdk]
</div>

```bash
npm install firecrawl
```

Adicione sua chave de API ao `.env`:

```bash
FIRECRAWL_API_KEY=fc-YOUR-API-KEY
```

<div id="search-the-web">
  ## Fazer uma busca na web [#fazer-uma-busca-na-web]
</div>

Crie `src/pages/api/search.ts`:

```typescript
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 faça a busca em tempo de requisição em uma página renderizada no servidor (`src/pages/search.astro`):

```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>Resultados de Busca</h1>
    {results.length > 0 ? (
      <ul>
        {results.map((r) => (
          <li><a href={r.url}>{r.title}</a></li>
        ))}
      </ul>
    ) : (
      <p>Passe ?q= para fazer uma busca na web</p>
    )}
  </body>
</html>
```

<div id="scrape-a-page">
  ## Executar scraping em uma página [#executar-scraping-em-uma-página]
</div>

Crie `src/pages/api/scrape.ts`:

```typescript
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 faça scraping durante a requisição em uma página renderizada no servidor (`src/pages/scrape.astro`):

```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>Conteúdo Extraído</h1>
    {markdown ? <pre>{markdown}</pre> : <p>Passe ?url= para fazer scraping de uma página</p>}
  </body>
</html>
```

<div id="interact-with-a-page">
  ## Interaja com uma página [#interaja-com-uma-página]
</div>

Crie `src/pages/api/interact.ts`:

```typescript
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" },
  });
};
```

<div id="next-steps">
  ## Próximos passos [#próximos-passos]
</div>

<CardGroup cols="2">
  <Card title="Docs de scraping" icon="<svg xmlns=&#x22;http://www.w3.org/2000/svg&#x22; viewBox=&#x22;0 0 24 24&#x22; fill=&#x22;none&#x22;><path d=&#x22;M8 7L16 7&#x22; stroke=&#x22;currentColor&#x22; stroke-linecap=&#x22;round&#x22; stroke-linejoin=&#x22;round&#x22; stroke-width=&#x22;1.5&#x22;/><path d=&#x22;M8 11L12 11&#x22; stroke=&#x22;currentColor&#x22; stroke-linecap=&#x22;round&#x22; stroke-linejoin=&#x22;round&#x22; stroke-width=&#x22;1.5&#x22;/><path d=&#x22;M13 21.5V21C13 18.1716 13 16.7574 13.8787 15.8787C14.7574 15 16.1716 15 19 15H19.5M20 13.3431V10C20 6.22876 20 4.34315 18.8284 3.17157C17.6569 2 15.7712 2 12 2C8.22877 2 6.34315 2 5.17157 3.17157C4 4.34314 4 6.22876 4 10L4 14.5442C4 17.7892 4 19.4117 4.88607 20.5107C5.06508 20.7327 5.26731 20.9349 5.48933 21.1139C6.58831 22 8.21082 22 11.4558 22C12.1614 22 12.5141 22 12.8372 21.886C12.9044 21.8623 12.9702 21.835 13.0345 21.8043C13.3436 21.6564 13.593 21.407 14.0919 20.9081L18.8284 16.1716C19.4065 15.5935 19.6955 15.3045 19.8478 14.9369C20 14.5694 20 14.1606 20 13.3431Z&#x22; stroke=&#x22;currentColor&#x22; stroke-linecap=&#x22;round&#x22; stroke-linejoin=&#x22;round&#x22; stroke-width=&#x22;1.5&#x22;/></svg>" href="/pt-BR/features/scrape">
    Todas as opções de scraping, incluindo formatos, ações e proxies
  </Card>

  <Card title="Docs de busca" icon="<svg xmlns=&#x22;http://www.w3.org/2000/svg&#x22; viewBox=&#x22;0 0 24 24&#x22; fill=&#x22;none&#x22;><path d=&#x22;M8 7L16 7&#x22; stroke=&#x22;currentColor&#x22; stroke-linecap=&#x22;round&#x22; stroke-linejoin=&#x22;round&#x22; stroke-width=&#x22;1.5&#x22;/><path d=&#x22;M8 11L12 11&#x22; stroke=&#x22;currentColor&#x22; stroke-linecap=&#x22;round&#x22; stroke-linejoin=&#x22;round&#x22; stroke-width=&#x22;1.5&#x22;/><path d=&#x22;M13 21.5V21C13 18.1716 13 16.7574 13.8787 15.8787C14.7574 15 16.1716 15 19 15H19.5M20 13.3431V10C20 6.22876 20 4.34315 18.8284 3.17157C17.6569 2 15.7712 2 12 2C8.22877 2 6.34315 2 5.17157 3.17157C4 4.34314 4 6.22876 4 10L4 14.5442C4 17.7892 4 19.4117 4.88607 20.5107C5.06508 20.7327 5.26731 20.9349 5.48933 21.1139C6.58831 22 8.21082 22 11.4558 22C12.1614 22 12.5141 22 12.8372 21.886C12.9044 21.8623 12.9702 21.835 13.0345 21.8043C13.3436 21.6564 13.593 21.407 14.0919 20.9081L18.8284 16.1716C19.4065 15.5935 19.6955 15.3045 19.8478 14.9369C20 14.5694 20 14.1606 20 13.3431Z&#x22; stroke=&#x22;currentColor&#x22; stroke-linecap=&#x22;round&#x22; stroke-linejoin=&#x22;round&#x22; stroke-width=&#x22;1.5&#x22;/></svg>" href="/pt-BR/features/search">
    Faça uma busca na web e obtenha o conteúdo completo da página
  </Card>

  <Card title="Docs de interação" icon="<svg xmlns=&#x22;http://www.w3.org/2000/svg&#x22; viewBox=&#x22;0 0 24 24&#x22; fill=&#x22;none&#x22;><path d=&#x22;M8 7L16 7&#x22; stroke=&#x22;currentColor&#x22; stroke-linecap=&#x22;round&#x22; stroke-linejoin=&#x22;round&#x22; stroke-width=&#x22;1.5&#x22;/><path d=&#x22;M8 11L12 11&#x22; stroke=&#x22;currentColor&#x22; stroke-linecap=&#x22;round&#x22; stroke-linejoin=&#x22;round&#x22; stroke-width=&#x22;1.5&#x22;/><path d=&#x22;M13 21.5V21C13 18.1716 13 16.7574 13.8787 15.8787C14.7574 15 16.1716 15 19 15H19.5M20 13.3431V10C20 6.22876 20 4.34315 18.8284 3.17157C17.6569 2 15.7712 2 12 2C8.22877 2 6.34315 2 5.17157 3.17157C4 4.34314 4 6.22876 4 10L4 14.5442C4 17.7892 4 19.4117 4.88607 20.5107C5.06508 20.7327 5.26731 20.9349 5.48933 21.1139C6.58831 22 8.21082 22 11.4558 22C12.1614 22 12.5141 22 12.8372 21.886C12.9044 21.8623 12.9702 21.835 13.0345 21.8043C13.3436 21.6564 13.593 21.407 14.0919 20.9081L18.8284 16.1716C19.4065 15.5935 19.6955 15.3045 19.8478 14.9369C20 14.5694 20 14.1606 20 13.3431Z&#x22; stroke=&#x22;currentColor&#x22; stroke-linecap=&#x22;round&#x22; stroke-linejoin=&#x22;round&#x22; stroke-width=&#x22;1.5&#x22;/></svg>" href="/pt-BR/features/interact">
    Clique, preencha formulários e extraia conteúdo dinâmico
  </Card>

  <Card title="Referência do SDK de Node" icon="<svg xmlns=&#x22;http://www.w3.org/2000/svg&#x22; viewBox=&#x22;0 0 24 24&#x22; fill=&#x22;none&#x22;><path d=&#x22;M8 7L16 7&#x22; stroke=&#x22;currentColor&#x22; stroke-linecap=&#x22;round&#x22; stroke-linejoin=&#x22;round&#x22; stroke-width=&#x22;1.5&#x22;/><path d=&#x22;M8 11L12 11&#x22; stroke=&#x22;currentColor&#x22; stroke-linecap=&#x22;round&#x22; stroke-linejoin=&#x22;round&#x22; stroke-width=&#x22;1.5&#x22;/><path d=&#x22;M13 21.5V21C13 18.1716 13 16.7574 13.8787 15.8787C14.7574 15 16.1716 15 19 15H19.5M20 13.3431V10C20 6.22876 20 4.34315 18.8284 3.17157C17.6569 2 15.7712 2 12 2C8.22877 2 6.34315 2 5.17157 3.17157C4 4.34314 4 6.22876 4 10L4 14.5442C4 17.7892 4 19.4117 4.88607 20.5107C5.06508 20.7327 5.26731 20.9349 5.48933 21.1139C6.58831 22 8.21082 22 11.4558 22C12.1614 22 12.5141 22 12.8372 21.886C12.9044 21.8623 12.9702 21.835 13.0345 21.8043C13.3436 21.6564 13.593 21.407 14.0919 20.9081L18.8284 16.1716C19.4065 15.5935 19.6955 15.3045 19.8478 14.9369C20 14.5694 20 14.1606 20 13.3431Z&#x22; stroke=&#x22;currentColor&#x22; stroke-linecap=&#x22;round&#x22; stroke-linejoin=&#x22;round&#x22; stroke-width=&#x22;1.5&#x22;/></svg>" href="/pt-BR/sdks/node">
    Referência completa do SDK com rastreamento, map, extração em lote e muito mais
  </Card>
</CardGroup>
