Next.js

JIGSAWSTACK_API_KEY='your-api-key'

import type { NextApiRequest, NextApiResponse } from "next";
import { JigsawStack } from "jigsawstack";

const jigsawstack = JigsawStack(); // API key will be read from environment

export default async (req: NextApiRequest, res: NextApiResponse) => {
  try {
    const result = await jigsawstack.web.search({
      query: "What is the capital of France?",
    });

    res.status(200).json({
      results: result.results,
    });
    console.log(result);
  } catch (error) {
    return res.status(400).json(error);
  }
};

"use client";
import { useState } from "react";

export default function WebSearchButton() {
  const [loading, setLoading] = useState(false);

  const handleWebSearch = async () => {
    setLoading(true);
    try {
      const response = await fetch("/api/web-search");
      const data = await response.json();
      
      if (data.results) {
        // Handle successful response
        console.log("Web search results:", data.results);
      }

    } catch (error) {
      console.error("Error searching web:", error);
    } finally {
      setLoading(false);
    }
  };

  return (
    <button 
      onClick={handleWebSearch}
      disabled={loading}
      className="px-4 py-2 bg-blue-500 text-white rounded"
    >
      {loading ? "Searching..." : "Search Web"}
    </button>
  );
}

import { NextResponse } from "next/server";
import { JigsawStack } from "jigsawstack";

const jigsawstack = JigsawStack();

export async function POST(request) {
  try {
    const { text } = await request.json();
    
    const result = await jigsawstack.web.search({
      query: text || "What is the capital of France?",
    });

    return NextResponse.json({ results: result.results });
  } catch (error) {
    return NextResponse.json({ error: error.message }, { status: 400 });
  }
}