Web Extraction Reference

import { useWebExtract } from "@/hooks/use-web-extract";

export default function App() {
  const { extract, extractedText, isLoading, error } = useWebExtract();
  const [url, setUrl] = React.useState("");

  const handleExtract = async () => {
    if (!url.trim()) return;

    const text = await extract({ url: url.trim() });
    if (text) {
      console.log("Extracted content:", text);
    }
  };

  return (
    <div>
      <div className="flex gap-2">
        <input
          value={url}
          onChange={(event) => setUrl(event.target.value)}
          placeholder="Enter URL to extract..."
          className="flex-1"
        />
        <button onClick={handleExtract} disabled={isLoading || !url.trim()}>
          {isLoading ? <span className="inline-block mr-2 animate-spin rounded-full border-2 border-current border-t-transparent" /> : null}
          Extract
        </button>
      </div>
      {error && <p className="text-destructive">{error.message}</p>}
      {extractedText && (
        <div className="rounded-lg border p-4">
          <div>{extractedText}</div>
        </div>
      )}
    </div>
  );
}

import * as React from "react";
import { useAIText } from "@/hooks/use-ai";
import { useWebExtract } from "@/hooks/use-web-extract";

export default function App() {
  const { extract, isLoading: isExtracting } = useWebExtract();
  const { generateText, textStream, isLoading: isSummarizing } = useAIText({
    systemPrompt: "You are a helpful assistant that summarizes articles.",
  });
  const [url, setUrl] = React.useState("");

  const handleSummarize = async () => {
    if (!url.trim()) return;

    const content = await extract({ url: url.trim() });
    if (content) {
      await generateText({
        prompt: `Please summarize this article:\n\n${content}`,
      });
    }
  };

  const isLoading = isExtracting || isSummarizing;

  return (/* render URL input, loading state, and textStream */);
}