
何を作るか
前提条件
- Node.js 18 以降がインストールされていること
- platform.openai.com で取得した OpenAI API キー
- firecrawl.dev で取得した Firecrawl API キー
- React と Next.js の基礎知識
1
新規の Next.js プロジェクトを作成
まずは新しい Next.js アプリケーションを作成し、プロジェクトディレクトリに移動します。プロンプトが表示されたら、次のオプションを選択してください:
- TypeScript: はい
- ESLint: はい
- Tailwind CSS: はい
- App Router: はい
- 「src/」ディレクトリを使用: いいえ
- インポートエイリアス: はい (@/*)
2
依存関係をインストール
AI SDK パッケージのインストール
AI SDK は、さまざまな LLM プロバイダーを統一的に扱える API を提供する TypeScript 製のツールキットです。ai: ストリーミング、ツール呼び出し、レスポンス処理に対応したコア SDK@ai-sdk/react: チャットインターフェース構築のためのuseChatなどの React フックzod: ツール入力向けのスキーマ検証
AI Elements をインストールする
AI Elements は、AI アプリケーション向けのプリビルト UI コンポーネントを提供します。必要なコンポーネント一式を用意するには、次のコマンドを実行します:OpenAI プロバイダーのインストール
OpenAI のモデルと接続するために、OpenAI プロバイダーをインストールします:3
フロントエンドのチャットインターフェースを実装する
app/page.tsxにメインページを作成し、下記のCodeタブからコードをコピーします。これがユーザーがAIアシスタントとやり取りするチャットインターフェースになります。- プレビュー
- コード

フロントエンドを理解する
フロントエンドはAI Elementsコンポーネントを使用して完全なチャットインターフェースを提供します:主な機能:- 会話表示:
Conversationコンポーネントはメッセージのスクロールと表示を自動で処理します - メッセージのレンダリング: 各メッセージの構成要素は、そのタイプ(text、reasoning、tool calls)に応じてレンダリングされます
- ツールの可視化: ツール呼び出しは、入力と出力を示す折りたたみセクションとして表示されます
- インタラクティブコントロール:ユーザーはWeb検索のオン/オフ、モデルの選択、ファイルの添付が可能
- メッセージのアクション: アシスタントメッセージのコピーと再試行
4
Markdown レンダリングのサポートを追加
LLM からの Markdown を正しく表示するため、メッセージ応答内の Markdown コンテンツをレンダリングするために必要なスタイルをインポートします。
app/globals.css ファイルに次の import を追加してください:5
基本的なAPIルートを作成する
app/api/chat/route.ts にチャットAPIエンドポイントを作成します。このルートは受信メッセージを処理し、AIからの応答をストリーミング配信します。- フロントエンドからメッセージを受け取る
- ユーザーが選択した OpenAI モデルを使用する
- レスポンスをクライアントへストリーミングする
- まだツールは未対応 — 次で追加します
6
環境変数を設定する
プロジェクトのルートに「.env.local」ファイルを作成します:OpenAI の API キーを追加する:
OPENAI_API_KEY は AI モデルの動作に必須です。7
Basic Chat のテスト
Firecrawl との統合なしで AI SDK のチャットボットをテストできるようになりました。開発サーバーを起動してください:ブラウザで localhost:3000 を開き、基本的なチャット機能をテストしてください。アシスタントはメッセージに応答しますが、まだWebスクレイピングや検索機能はありません。

8
Firecrawl のツールを追加
それでは、Firecrawl を使って、ウェブスクレイピングと検索機能でアシスタントを強化しましょう。次のコードを追加して、ウェブスクレイピングと検索ツールを定義します:
Firecrawl SDK のインストール
Firecrawl は、スクレイピングと検索機能により、ウェブサイトを LLM 向けのフォーマットに変換します。Tools ファイルを作成する
lib フォルダを作成し、その中に tools.ts ファイルを作成します。lib/tools.ts
ツールの概要
Scrape Website Tool:- 入力としてURLを受け取る(Zodスキーマで検証)
- Firecrawlの
scrapeメソッドでページをMarkdownとして取得 - トークン使用量を抑えるために主要コンテンツのみを抽出
- 取得したコンテンツをAIの分析用に返す
- 任意のフィルター付き検索クエリを受け取る
- Firecrawlの
searchメソッドで関連するWebページを検索 - 位置情報、期間、コンテンツカテゴリなどの高度なフィルターに対応
- タイトル、URL、説明を含む構造化結果を返す
9
Firecrawl のツールで API ルートを更新する
先ほど作成した Firecrawl のツールを組み込むように、
基本的なルートからの主な変更点:
app/api/chat/route.ts を更新します。app/api/chat/route.ts の完全なコードを表示
app/api/chat/route.ts の完全なコードを表示
- AI SDK から
stepCountIsをインポート @/lib/toolsから Firecrawl のツールをインポートscrapeWebsiteとsearchWebの両ツールを含むtoolsオブジェクトを追加- 実行ステップ数を制限するために
stopWhen: stepCountIs(5)を追加 - Web 検索が有効な場合は
toolChoiceを “auto”、それ以外は “none” に設定
streamText の詳細: ai-sdk.dev/docs/reference/ai-sdk-core/stream-text.10
Firecrawl APIキーを追加
11
アプリケーション全体のテスト
開発サーバーを再起動してください:
localhost:3000 を開き、拡張されたアシスタントを試します:

- 「Search」ボタンをオンにしてウェブ検索を有効化
- 次のように質問します: 「firecrawl.dev の最新機能は何ですか?」
- AI が
searchWebまたはscrapeWebsiteツールを呼び出す様子を確認 - 入力と出力とともに、UI 上でのツールの実行を確認
- スクレイピングしたデータに基づく AI の分析を読む
使い方
メッセージフロー
- ユーザーがメッセージを送信: ユーザーが質問を入力し、送信をクリック
- フロントエンドがリクエストを送信:
useChatが選択したモデルとウェブ検索設定を添えてメッセージを/api/chatに送信 - バックエンドがメッセージを処理: API ルートがメッセージを受け取り、
streamTextを呼び出す - AI がツールを選択: モデルが質問を分析し、
scrapeWebsiteかsearchWebを使うかを判断(ウェブ検索が有効な場合のみ) - ツールを実行: ツールが呼び出された場合、Firecrawl がウェブをスクレイピングまたは検索
- AI が応答を生成: モデルがツールの結果を分析し、自然言語の応答を生成
- フロントエンドが結果を表示: UI がツール呼び出しと最終応答をリアルタイムに表示
ツール呼び出しプロセス
- モデルがユーザーのメッセージと利用可能なツールの説明を受け取る
- ツールが必要と判断した場合、モデルがパラメータ付きのツール呼び出しを生成する
- SDK がそのパラメータでツール関数を実行する
- ツールの結果がモデルに返される
- モデルがその結果を用いて最終的な応答を生成する
streamText 呼び出し内で自動的に行われ、結果はリアルタイムでフロントエンドへストリーミングされます。
主な機能
モデル選択
- GPT-5 Mini (Thinking): 高度な推論機能を備えた最新の OpenAI モデル
- GPT-4o Mini: 高速でコスト効率に優れたモデル
ウェブ検索トグル
- 有効: 必要に応じて
scrapeWebsiteとsearchWebツールを呼び出せます - 無効: AI は学習済みの知識のみで応答します
カスタマイズのアイデア
ツールを追加する
- 社内データのデータベース参照
- 顧客情報を取得するためのCRM連携
- メール送信機能
- ドキュメント生成
toolsオブジェクトに登録します。
AIモデルを変更する
UI をカスタマイズする
- コンポーネントファイル内のスタイルを変更する
- 既存コンポーネントに新しいバリアントを追加する
- デザインシステムに合致するカスタムコンポーネントを作成する
ベストプラクティス
-
適切なツールを使う: まず関連ページの発見には
searchWeb、単一ページにはscrapeWebsiteを使うか、AI に任せる - API 使用量を監視する: 予期せぬコストを避けるために Firecrawl と OpenAI の API 使用量を把握する
- エラーを適切に処理する: ツールにはエラーハンドリングが含まれているが、ユーザー向けのエラーメッセージの表示も検討する
- パフォーマンスを最適化する: ストリーミングで即時にフィードバックを返し、頻繁にアクセスされるコンテンツはキャッシュを検討する
-
妥当な制限を設定する:
stopWhen: stepCountIs(5)は過剰なツール呼び出しやコストの暴走を防ぐ

