add serp api

README.md

@@ -7,17 +7,3 @@ app_port: 3000
 
 # 🔗 url-surfer 🏄‍♂️
 
-Simple API to navigate to a URL from a prompt, returning relevant context from the prompt using a vector store.
-
-## How it works
-
-1. Navigate (parse url/fetch/mime-type check)
-2. Extract text (jsdom/puppeteer/pdf-parse)
-3. Create vector store (transformers.js)
-4. Return vector results in prompt (langchain)
-
-
-## Ideas
-
-* Configuration: Vector search size, token counting
-* OpenAI functions integration

app/api/chat/route.ts

@@ -1,8 +1,10 @@
 import { Configuration, OpenAIApi } from "openai-edge";
 import { OpenAIStream, StreamingTextResponse } from "ai";
 import { createUrlSurfer } from "@/app/tools/surfer";
+import { createSerpApi } from "@/app/tools/serp-api";
 
-const [, requestSchema] = createUrlSurfer();
+const [, urlSurferSchema] = createUrlSurfer();
+const [, serpApiSchema] = createSerpApi({ apiKey: process.env.SERP_API_KEY || '' });
 
 const config = new Configuration({
   apiKey: process.env.OPENAI_API_KEY,
@@ -10,7 +12,8 @@ const config = new Configuration({
 const openai = new OpenAIApi(config);
 
 const functions: any[] = [
-  requestSchema
+  urlSurferSchema,
+  serpApiSchema
 ];
 
 export async function POST(req: Request) {

app/page.tsx

@@ -15,13 +15,15 @@ const Page: React.FC = () => {
     functionCall,
   ) => {
     let result;
-    const response = await fetch("/api/surfer", {
+    const { name, arguments: args } = functionCall;
+    const response = await fetch("/api/functions", {
       method: "POST",
       headers: {
         "Content-Type": "application/json",
       },
       body: JSON.stringify({
-        prompt: input
+        prompt: input,
+        name: name
       })
     } as any);
 

app/tools/serp-api.ts

@@ -0,0 +1,30 @@
+import { Tool } from 'openai-function-calling-tools';
+import { z } from 'zod';
+import { getJson } from 'serpapi';
+
+function createSerpApi({ apiKey }: { apiKey: string }) {
+  const paramsSchema = z.object({
+    input: z.string(),
+  });
+  const name = 'serpApi';
+  const description = 'A custom search engine. Useful for when you need to answer questions about current events. Input should be a search query. Outputs a JSON array of results.';
+
+  const execute = async ({ input }: z.infer<typeof paramsSchema>) => {
+    try {
+        const response = await getJson({
+            engine: "google",
+            api_key: apiKey,
+            q: input,
+            location: "Seattle, Washington",
+        });
+      
+      return JSON.stringify(response);
+    } catch (error) {
+      throw new Error(`Error in serpApi: ${error}`);
+    }
+  };
+
+  return new Tool(paramsSchema, name, description, execute).tool;
+}
+
+export { createSerpApi };

package-lock.json

@@ -28,6 +28,7 @@
         "react": "^18",
         "react-dom": "^18",
         "react-markdown": "^9.0.0",
+        "serpapi": "^2.0.0",
         "sonner": "^1.1.0",
         "zod": "^3.22.4",
         "zod-to-json-schema": "^3.21.4"
@@ -7245,6 +7246,11 @@
         "node": ">=10"
       }
     },
+    "node_modules/serpapi": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/serpapi/-/serpapi-2.0.0.tgz",
+      "integrity": "sha512-LKrIBrXWhZDmS1urFwB8e/T8omW2C7r7ZmW231aVBtMbfNx/p9pi5gkiScM/VSAcsyhX1q3oPeWCvbzQiiwaCg=="
+    },
     "node_modules/set-function-length": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.1.1.tgz",

package.json

@@ -29,6 +29,7 @@
     "react": "^18",
     "react-dom": "^18",
     "react-markdown": "^9.0.0",
+    "serpapi": "^2.0.0",
     "sonner": "^1.1.0",
     "zod": "^3.22.4",
     "zod-to-json-schema": "^3.21.4"

pages/api/{surfer → functions}/index.ts

@@ -7,6 +7,7 @@ import puppeteer from 'puppeteer';
 import { RecursiveCharacterTextSplitter } from 'langchain/text_splitter';
 import { MemoryVectorStore } from 'langchain/vectorstores/memory';
 import { HuggingFaceTransformersEmbeddings } from "langchain/embeddings/hf_transformers";
+import { createSerpApi } from '../../../app/tools/serp-api'
 
 export const config = {
     api: {
@@ -31,6 +32,11 @@ const model = new HuggingFaceTransformersEmbeddings({
 
 const urlRegex = /(https?:\/\/[^\s]+)/g;
 
+const [serpApi] =
+  createSerpApi({
+    apiKey: process.env.SERP_API_KEY || "",
+});
+
 const handleContentText = async (targetUrl: string) => {
   const response = await fetch(targetUrl);
   const contentType = response.headers.get('content-type') || '';
@@ -60,6 +66,7 @@ const handleContentText = async (targetUrl: string) => {
 
 export default async function handler(req: NextApiRequest, res: NextApiResponse) {
   const prompt = req.body.prompt as string;
+  const functionName = req.body.name as string;
   const urls = prompt.match(urlRegex);
   const targetUrl = urls ? urls[0] : null;
   const promptWithoutUrl = urls ? prompt.replace(urlRegex, '').trim() : prompt;
@@ -69,23 +76,28 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
   }
   
   try {
-    const content: string = await handleContentText(targetUrl)
-    if (!content) {
-      return `Couldn't find ${targetUrl}, here is the prompt: ${promptWithoutUrl}`;
-    }
-    
-    const documents = await textSplitter.createDocuments([content]);
+    if (functionName === 'serpApi') {
+      const result = await serpApi({ input: prompt });
+      return res.status(200).send(result);
+    } else {
+      const content: string = await handleContentText(targetUrl)
+      if (!content) {
+        return `Couldn't find ${targetUrl}, here is the prompt: ${promptWithoutUrl}`;
+      }
+      
+      const documents = await textSplitter.createDocuments([content]);
 
-    const vectorStore = await MemoryVectorStore.fromTexts(
-      // @ts-ignore
-      [...documents.map(doc => doc.pageContent)],
-      // @ts-ignore
-      [...documents.map((v, k) => k)],
-      model
-    )
-    const queryResult = await vectorStore.similaritySearch(promptWithoutUrl, VECTOR_STORE_SIZE);
-    return res.status(200).send(
-      `Here is the context: ${JSON.stringify(queryResult.map(result => result.pageContent))} from using the prompt to lookup relevant information. Here is the prompt: ${promptWithoutUrl}`);
+      const vectorStore = await MemoryVectorStore.fromTexts(
+        // @ts-ignore
+        [...documents.map(doc => doc.pageContent)],
+        // @ts-ignore
+        [...documents.map((v, k) => k)],
+        model
+      )
+      const queryResult = await vectorStore.similaritySearch(promptWithoutUrl, VECTOR_STORE_SIZE);
+      return res.status(200).send(
+        `Here is the context: ${JSON.stringify(queryResult.map(result => result.pageContent))} from using the prompt to lookup relevant information. Here is the prompt: ${promptWithoutUrl}`);
+    }
   } catch (error) {
     console.error(error);
     // @ts-ignore