Firecrawl を LangChain と連携し、Web データを活用した AI アプリケーションを構築します。
セットアップ#
npm install @langchain/openai firecrawl .env ファイルを作成する：
FIRECRAWL_API_KEY=your_firecrawl_keyOPENAI_API_KEY=your_openai_key注記: Node 20 未満を使用している場合は、
dotenvをインストールし、コードにimport 'dotenv/config'を追加してください。
スクレイピング + チャット#
この例では、ウェブサイトをスクレイピングし、そのコンテンツを LangChain で処理するという、シンプルなワークフローを示します。
import { Firecrawl } from 'firecrawl';import { ChatOpenAI } from '@langchain/openai';import { HumanMessage } from '@langchain/core/messages';const firecrawl = new Firecrawl({ apiKey: process.env.FIRECRAWL_API_KEY });const chat = new ChatOpenAI({ model: 'gpt-5-nano', apiKey: process.env.OPENAI_API_KEY});const scrapeResult = await firecrawl.scrape('https://firecrawl.dev', { formats: ['markdown']});console.log('Scraped content length:', scrapeResult.markdown?.length);const response = await chat.invoke([ new HumanMessage(`Summarize: ${scrapeResult.markdown}`)]);console.log('Summary:', response.content);チェーン#
この例では、スクレイピングで取得したコンテンツを処理・分析するための LangChain チェーンの構築方法を示します。
import { Firecrawl } from 'firecrawl';import { ChatOpenAI } from '@langchain/openai';import { ChatPromptTemplate } from '@langchain/core/prompts';import { StringOutputParser } from '@langchain/core/output_parsers';const firecrawl = new Firecrawl({ apiKey: process.env.FIRECRAWL_API_KEY });const model = new ChatOpenAI({ model: 'gpt-5-nano', apiKey: process.env.OPENAI_API_KEY});const scrapeResult = await firecrawl.scrape('https://stripe.com', { formats: ['markdown']});console.log('Scraped content length:', scrapeResult.markdown?.length);// 処理チェーンを作成const prompt = ChatPromptTemplate.fromMessages([ ['system', 'You are an expert at analyzing company websites.'], ['user', 'Extract the company name and main products from: {content}']]);const chain = prompt.pipe(model).pipe(new StringOutputParser());// チェーンを実行const result = await chain.invoke({ content: scrapeResult.markdown});console.log('Chain result:', result);ツール呼び出し#
この例では、LangChain のツール呼び出し機能を使って、モデルが Web サイトをスクレイピングするタイミングを判断できるようにする方法を示します。
import { Firecrawl } from 'firecrawl';import { ChatOpenAI } from '@langchain/openai';import { DynamicStructuredTool } from '@langchain/core/tools';import { z } from 'zod';const firecrawl = new Firecrawl({ apiKey: process.env.FIRECRAWL_API_KEY });// スクレイピングツールを作成const scrapeWebsiteTool = new DynamicStructuredTool({ name: 'scrape_website', description: 'Scrape content from any website URL', schema: z.object({ url: z.string().url().describe('The URL to scrape') }), func: async ({ url }) => { console.log('Scraping:', url); const result = await firecrawl.scrape(url, { formats: ['markdown'] }); console.log('Scraped content preview:', result.markdown?.substring(0, 200) + '...'); return result.markdown || 'No content scraped'; }});const model = new ChatOpenAI({ model: 'gpt-5-nano', apiKey: process.env.OPENAI_API_KEY}).bindTools([scrapeWebsiteTool]);const response = await model.invoke('What is Firecrawl? Visit firecrawl.dev and tell me about it.');console.log('Response:', response.content);console.log('Tool calls:', response.tool_calls);構造化データ抽出#
この例では、LangChainの構造化出力機能を使って構造化データを抽出する方法を示します。
import { Firecrawl } from 'firecrawl';import { ChatOpenAI } from '@langchain/openai';import { z } from 'zod';const firecrawl = new Firecrawl({ 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 model = new ChatOpenAI({ model: 'gpt-5-nano', apiKey: process.env.OPENAI_API_KEY}).withStructuredOutput(CompanyInfoSchema);const companyInfo = await model.invoke([ { role: 'system', content: 'ウェブサイトのコンテンツから企業情報を抽出する。' }, { role: 'user', content: `データを抽出: ${scrapeResult.markdown}` }]);console.log('抽出された企業情報:', companyInfo);より多くの例については、LangChain のドキュメントを参照してください。