メインコンテンツへスキップ
ウェブデータを活用した AI アプリケーションを構築するために、Firecrawl を Vercel AI SDK と統合しましょう。

​
セットアップ

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 のドキュメントをご覧ください。