Quick wins for a faster PC:
Repair Windows errors before they cause bigger problemsFix Now →Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →To stream an answer grounded in a web page, scrape that page on your server with Firecrawl, pass its extracted content and the user’s question to a model through the Vercel AI SDK, then return a stream that the React client reads with useChat. Keep the Firecrawl API key server-side, choose a stream protocol that matches the UI, and validate and limit scraped content before sending it to a model.
How the data moves from a URL to the React UI
The application has three boundaries: the browser submits a URL and question; a server route scrapes the page and requests a model response; the browser receives and renders the response as it streams. This keeps the Firecrawl credential out of browser code and gives the server a place to validate inputs and bound the content it sends to the model.
As an Amazon Associate I earn from qualifying purchases.
- React client: Collect the URL and question, then send them to the chat endpoint using the AI SDK transport.
- Server route: Validate the request, call Firecrawl, and provide the extracted page content and question to a model-generation call.
- Stream response: Return the generated response using either a plain-text stream or the AI SDK UI message data stream.
- React client: Render message parts as the stream updates.
This is an implementation pattern based on the vendors’ documented APIs, not a claim that a particular set of pinned packages has been tested together.
Free tools Windows power users keep installed
One-click scans. No signup required.
Choose the Firecrawl output for what the model needs
Firecrawl’s Node SDK can scrape a single URL and return Markdown or HTML; its scrape documentation also describes structured JSON extraction. Choose the narrowest useful representation for the next step rather than passing every available form downstream.
#1 Best Overall
| Output | When it fits |
|---|---|
| Markdown | A natural starting point for model-readable page text and a question-answering flow. |
| HTML | Useful when the server needs to process the page’s markup or DOM structure downstream. |
| Structured JSON | Useful when the task calls for fields that can be expressed with a schema, rather than a free-form page summary. |
The Firecrawl Node SDK documentation shows creating a client with new Firecrawl({ apiKey: ... }) and calling scrape. The scrape documentation covers output formats including Markdown, HTML, and schema-guided JSON. For a simple Markdown scrape, the call shape is await firecrawl.scrape(url, { formats: ['markdown'] }).
Build the server route around validation and a bounded scrape
The route is the trust boundary. The user controls the URL and prompt, and the scraped page is external content. Validate the submitted values, impose appropriate limits on the content sent to the model, and treat page text as untrusted input. Do not treat instructions found inside a scraped page as trusted application instructions.
- Accept only the inputs the feature needs. Parse the requested URL and question on the server, reject malformed values, and apply URL restrictions suitable for your application.
- Initialize Firecrawl with a server environment variable. Use the server-side value for
FIRECRAWL_API_KEY; do not embed the key in a client component or browser bundle. - Scrape the requested page. Request Markdown for a text-focused question-answering flow, or choose HTML or structured JSON when the downstream task needs those forms.
- Bound and prepare the extracted content. Enforce application limits before adding page text to the model request. This is an application safety and resource-control measure, not a Firecrawl guarantee.
- Generate and stream the answer. Supply the extracted content and user question to your chosen model through the AI SDK, then return a response in the stream format expected by the client.
Firecrawl documents a default maxAge cache freshness window of 172,800,000 milliseconds (two days); setting maxAge: 0 bypasses the cache. Cache freshness and usage terms can change, so check the current scrape documentation when those details affect your application.
Choose a stream protocol that matches the interface
The server’s response format and the client transport must agree. The AI SDK documents two protocol families, and they serve different UI needs.
| Protocol | Best fit | Implementation consideration |
|---|---|---|
| Text stream | A response that is plain text only. | The client receives concatenated text chunks; use the corresponding text-stream transport. |
| UI message data stream | Message parts or other supported data beyond a single plain-text string. | A custom backend must follow the documented UI message stream format and header; configure the client transport to match. |
Use the AI SDK UI Stream Protocols guide for the format details. If the interface needs tool calls, richer data, persistence, or custom transport behavior, decide those requirements as part of the stream design instead of assuming a plain-text stream will cover them.
Use the current transport-based useChat API
The current API imports useChat from @ai-sdk/react. It is transport-based and no longer manages input state internally. Keep the text fields in React state, call sendMessage with the submitted values, and render the hook’s messages and their parts as they update. The transport defaults to /api/chat unless configured otherwise.
The current useChat reference documents message state, sendMessage, stopping or aborting a response, error state, and transport configuration. Older examples that rely on hook-managed input or import from a legacy ai/react path do not describe this current API.
- Keep form state in React. Store the URL and question in component state rather than expecting
useChatto own an input value. - Submit through the hook. Call
sendMessagewith the message and any application-specific data your configured transport sends to the route. - Render message parts. Iterate through the returned messages and display their parts so the UI can reflect updates while the response is streaming.
- Expose stream controls and errors. Use the hook’s documented stop/abort and error behavior to let users interrupt a response and understand when a request fails.
Keep credentials and deployment details on the server
The Firecrawl SDK examples initialize the client with an API key, so that credential belongs in server configuration rather than client-side code. On Vercel, Firecrawl announced a Marketplace integration on 2026-05-26 that provisions a Firecrawl team and API key, injects FIRECRAWL_API_KEY into the project environment, and places Firecrawl billing on the Vercel invoice. It is a Vercel-specific provisioning option, not a requirement for this server-side scraping and streaming pattern. See the Firecrawl Vercel Marketplace announcement.
Best Value
Check the route’s runtime and deployment duration limits for the project you deploy. The API patterns alone do not establish that a route’s runtime or execution allowance is suitable for every scrape and generation request.
Verify the React 19 and AI SDK package combination
React 19 is stable and available on npm, as stated in the React 19 announcement. That announcement does not establish a peer-dependency pairing with a specific @ai-sdk/react release. The current AI SDK reference documents the API, but it does not provide an exact React 19 compatibility matrix for a pinned release.
- Pin the React, AI SDK, and provider packages in the application.
- Install that specific combination and verify the package peer dependencies and build.
- Exercise the actual route and client together, including the selected stream protocol and deployment runtime.
Until that combination has been installed and checked, describe this as the documented architecture rather than a verified package pairing.
Crashes, No Sound, or Screen Glitches?
Random freezes, missing sound and display glitches usually trace back to one bad driver. Find and replace yours safely.Free scan · under a minutePC Slower Than It Used to Be?
A free scan shows the junk files, broken settings and background clutter dragging Windows down - then fixes them in one click.Free scan · Windows 10 & 11Account for changing scrape usage terms
In a Firecrawl tutorial published 2026-05-04, the company reported that a scrape starts at 1 credit; JSON mode and audio extraction each add 4 credits, bringing those calls to 5 credits per page; PDF parsing adds 1 credit per PDF page; and zero data retention (ZDR), available only on Enterprise in that report, adds 1 credit per page. It also reported that cached results still cost the full 1 credit per page. These are vendor-published figures from that date, not a guarantee of current plan terms. See the Firecrawl scrape endpoint tutorial and confirm current terms before using the figures for an estimate.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
