跳转到主要内容
将 Firecrawl 与 Vercel AI SDK 集成,构建由网页数据驱动的 AI 应用。

设置

npm install ai @ai-sdk/openai @mendable/firecrawl-js 
创建 .env 文件:
FIRECRAWL_API_KEY=your_firecrawl_key
OPENAI_API_KEY=your_openai_key
注意: 如果使用 Node 版本低于 20,请安装 dotenv,并在代码中添加 import 'dotenv/config'

抓取 + 生成文本

本示例展示了一个简单的工作流:抓取网站,并使用 Vercel AI SDK 生成文本。
import FirecrawlApp from '@mendable/firecrawl-js';
import { openai } from '@ai-sdk/openai';
import { generateText } from 'ai';

const firecrawl = new FirecrawlApp({ apiKey: process.env.FIRECRAWL_API_KEY });

const scrapeResult = await firecrawl.scrape('https://firecrawl.dev', {
    formats: ['markdown']
});

console.log('抓取内容长度:', scrapeResult.markdown?.length);

const { text } = await generateText({
    model: openai('gpt-5-nano'),
    prompt: `总结: ${scrapeResult.markdown}`
});

console.log('摘要:', text);

抓取 + 流式输出文本

此示例演示如何以流式方式输出 AI 响应,以提升用户体验。
import FirecrawlApp from '@mendable/firecrawl-js';
import { openai } from '@ai-sdk/openai';
import { streamText } from 'ai';

const firecrawl = new FirecrawlApp({ apiKey: process.env.FIRECRAWL_API_KEY });

const scrapeResult = await firecrawl.scrape('https://stripe.com', {
    formats: ['markdown']
});

console.log('抓取的内容长度:', scrapeResult.markdown?.length);

const { textStream } = await streamText({
    model: openai('gpt-5-nano'),
    prompt: `分析该公司并列出其主要产品: ${scrapeResult.markdown}`
});

for await (const chunk of textStream) {
    process.stdout.write(chunk);
}

工具调用

本示例演示如何使用 Vercel AI SDK 的工具调用功能,让模型自行决定何时抓取网站。
import FirecrawlApp from '@mendable/firecrawl-js';
import { openai } from '@ai-sdk/openai';
import { generateText, tool } from 'ai';
import { z } from 'zod';

console.log('初始化 Firecrawl...');
const firecrawl = new FirecrawlApp({ apiKey: process.env.FIRECRAWL_API_KEY });

const scrapeWebsiteTool = tool({
    description: '抓取任意网站 URL 的内容',
    inputSchema: z.object({
        url: z.string().url().describe('要抓取的 URL')
    }),
    execute: async ({ url }) => {
        console.log('抓取中:', url);
        const result = await firecrawl.scrape(url, {
            formats: ['markdown']
        });
        console.log('抓取内容预览:', result.markdown?.slice(0, 200) + '...');
        return { content: result.markdown };
    }
});

console.log('使用 AI 生成文本...');

const { text, toolCalls } = await generateText({
    model: openai('gpt-5-nano'),
    prompt: '什么是 Firecrawl?访问 firecrawl.dev 并告诉我相关信息。',
    tools: {
        scrapeWebsite: scrapeWebsiteTool
    },
});

console.log('工具调用:', toolCalls);
// 继续对话或将文本用于其他用途

结构化数据提取

本示例演示如何使用 Vercel AI SDK 的结构化输出功能来提取结构化数据。
import FirecrawlApp from '@mendable/firecrawl-js';
import { openai } from '@ai-sdk/openai';
import { generateObject } from 'ai';
import { z } from 'zod';

const firecrawl = new FirecrawlApp({ apiKey: process.env.FIRECRAWL_API_KEY });

const scrapeResult = await firecrawl.scrape('https://stripe.com', {
    formats: ['markdown']
});

console.log('抓取内容长度:', scrapeResult.markdown?.length);

const CompanyInfoSchema = z.object({
    name: z.string(),
    industry: z.string(),
    description: z.string(),
    products: z.array(z.string())
});

const { object } = await generateObject({
    model: openai('gpt-5-nano'),
    schema: CompanyInfoSchema,
    prompt: `从以下网站内容中提取公司信息: ${scrapeResult.markdown}`
});

console.log('提取的公司信息:', object);
更多示例请参阅 Vercel AI SDK 文档