Astro クイックスタート

前提条件

SSR が有効化された Astro プロジェクト (output: "server" または "hybrid")
Firecrawl APIキー — 無料で取得できます

SDKをインストール

npm install firecrawl

.env に API key を追加します:

FIRECRAWL_API_KEY=fc-YOUR-API-KEY

Webを検索する

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

または、サーバーサイドでレンダリングされるページ (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>検索結果</h1>
    {results.length > 0 ? (
      <ul>
        {results.map((r) => (
          <li><a href={r.url}>{r.title}</a></li>
        ))}
      </ul>
    ) : (
      <p>ウェブを検索するには ?q= を指定してください</p>
    )}
  </body>
</html>

ページをスクレイピングする

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

または、サーバーサイドでレンダリングされるページでリクエスト時にスクレイピングします (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>スクレイピングされたコンテンツ</h1>
    {markdown ? <pre>{markdown}</pre> : <p>ページをスクレイピングするには ?url= を渡してください</p>}
  </body>
</html>

ページとInteractする

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

次のステップ

スクレイピングドキュメント

フォーマット、アクション、プロキシなど、スクレイピングのオプションをすべて掲載

Search ドキュメント

Webを検索し、ページ全体のコンテンツを取得

Interact ドキュメント

クリック、フォーム入力、動的コンテンツを抽出

Node SDK リファレンス

クロール、map、バッチスクレイピングなどを含むSDKの完全なリファレンス

はじめに

主要エンドポイント

その他

クイックスタート

開発者ガイド

webhook

ユースケース

その他

貢献

Astro

前提条件

SDKをインストール

Webを検索する

ページをスクレイピングする

ページとInteractする

次のステップ

スクレイピングドキュメント

Search ドキュメント

Interact ドキュメント

Node SDK リファレンス

​前提条件

​SDKをインストール

​Webを検索する

​ページをスクレイピングする

​ページとInteractする

​次のステップ

スクレイピング ドキュメント

Search ドキュメント

Interact ドキュメント

Node SDK リファレンス

前提条件

SDKをインストール

Webを検索する

ページをスクレイピングする

ページとInteractする

次のステップ

スクレイピングドキュメント