Models

Explore our complete list of models and API references here.

​
Prerequisites

Before you begin, make sure you have:

​
Installation

Add the JigsawStack SDK to your Next.js project: 
npm install jigsawstack

​
Configuration

​
Setting up environment variables

  1. Create or modify your .env.local file in the root of your Next.js project:
.env.local
JIGSAWSTACK_API_KEY='your-api-key'
  1. For production, make sure to add the environment variable to your deployment platform (Vercel, Netlify, etc.)

​
API Route Implementation

JigsawStack can be easily integrated into Next.js API routes. Here’s an example of a web-search API endpoint:
pages/api/web-search.ts
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);
  }
};

​
Client-Side Implementation

For client components that need to use JigsawStack, you should make requests through your API routes rather than directly from the client to protect your API key.
components/WebSearchButton.jsx
"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>
  );
}

​
App Router Support

If you’re using Next.js App Router, you can create a route handler:
app/api/web-search/route.ts
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 });
  }
}
JigsawStack seamlessly integrates with Next.js to provide powerful AI capabilities while maintaining best practices for security and performance.