# Astro (/zh/quickstarts/astro)
Related: [Node.js](/zh/quickstarts/nodejs.md), [Next.js](/zh/quickstarts/nextjs.md), [Express](/zh/quickstarts/express.md), [NestJS](/zh/quickstarts/nestjs.md), [Fastify](/zh/quickstarts/fastify.md), [Hono](/zh/quickstarts/hono.md)
## 前提条件 [#前提条件]
* 已启用 SSR 的 Astro 项目 (`output: "server"` 或 `"hybrid"`)
* Firecrawl API 密钥——[可免费获取](https://www.firecrawl.dev/app/api-keys)
## 安装 SDK [#安装-sdk]
```bash
npm install firecrawl
```
将你的 API 密钥添加到 `.env` 文件中：
```bash
FIRECRAWL_API_KEY=fc-YOUR-API-KEY
```
## 进行网页搜索 [#进行网页搜索]
新建 `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" },
});
};
```
或者在服务端渲染页面 (`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 || [];
}
---
搜索结果
{results.length > 0 ? (
) : (
传入 ?q= 进行网页搜索
)}
```
## 抓取网页 [#抓取网页]
创建 `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" },
});
};
```
或者在服务端渲染页面中，在请求时进行抓取 (`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;
}
---
Scraped Content
{markdown ? {markdown} : Pass ?url= to scrape a page
}
```
## 与页面交互 [#与页面交互]
创建 `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" },
});
};
```
## 下一步 [#下一步]
所有抓取选项，包括 formats、actions 和代理设置
进行网页搜索并获取完整页面内容
点击、填写表单并提取动态内容
完整的 SDK 参考，涵盖爬取、map、batch 抓取 等功能