move to server

src/app/search/web/page.jsx

@@ -1,6 +1,5 @@
 "use client"
 import { useEffect, useState } from "react";
-import openai from 'openai';
 import WebSearchResults from "@/components/WebSearchResults";
 import Link from "next/link";
 
@@ -11,20 +10,19 @@ export default function WebSearchPage({ searchParams }) {
 
   useEffect(() => {
     async function fetchData() {
-      const response = await fetch(
-        `https://www.googleapis.com/customsearch/v1?key=${process.env.API_KEY}&cx=${process.env.CONTEXT_KEY}&q=${searchParams.searchTerm}&start=${startIndex}`
-      );
-  
+      // Fetch Google search results via server-side route
+      const response = await fetch(`/api/search?searchTerm=${searchParams.searchTerm}&start=${startIndex}`);
       if (!response.ok) {
         console.log(response);
         throw new Error("Something went wrong");
       }
-  
       const data = await response.json();
       setResults(data.items);
 
+      // Prepare AI prompt
       const aiPrompt = `You're creating a search engine experience. You got the following search results for the term "${searchParams.searchTerm}": ${JSON.stringify(data.items)}. How can you present these results in a helpful way?`;
 
+      // Fetch AI response via server-side route
       const openaiRes = new EventSource('/api/llm', {
         method: 'POST',
         headers: {
@@ -33,10 +31,10 @@ export default function WebSearchPage({ searchParams }) {
         body: JSON.stringify({ aiPrompt }),
       });
 
+      // Listen for AI responses and append to state
       openaiRes.onmessage = function(event) {
         setAiResponse(aiResponse => aiResponse + event.data);
       };
-
     }
 
     fetchData();

src/pages/api/google.js

@@ -0,0 +1,24 @@
+// pages/api/search.js
+
+export default async function handler(req, res) {
+    const { searchTerm, startIndex = "1" } = req.query;
+  
+    if (!searchTerm) {
+      res.status(400).json({ error: 'Search term is required' });
+      return;
+    }
+  
+    const response = await fetch(
+      `https://www.googleapis.com/customsearch/v1?key=${process.env.API_KEY}&cx=${process.env.CONTEXT_KEY}&q=${searchTerm}&start=${startIndex}`
+    );
+  
+    if (!response.ok) {
+      res.status(response.status).json({ error: 'Failed to fetch search results' });
+      return;
+    }
+  
+    const data = await response.json();
+  
+    res.status(200).json(data);
+  }
+