Function Calling In Svelte (#258)

For now I am just pushing in the state where I was with my fork of @Zakinator123's fork.  I haven't updated to all the latest comments of that branch, but I wanted to get this available for those that were looking for the Svelte version, if they wanted to clone off this branch to work locally.  I'll upate to include the rest of the changes requested in the other PR here as I can.

.changeset/eight-lobsters-glow.md

@@ -0,0 +1,5 @@
+---
+'ai': patch
+---
+
+Add experimental client side OpenAI function calling to Svelte bindings

examples/sveltekit-openai/.env.example

@@ -0,0 +1 @@
+OPENAI_API_KEY=xxxxxxx

examples/sveltekit-openai/package.json

@@ -10,20 +10,20 @@
     "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch"
   },
   "dependencies": {
+    "openai-edge": "^1.1.1"
     "ai": "2.1.17",
-    "openai-edge": "^0.5.1"
   },
   "devDependencies": {
     "@fontsource/fira-mono": "^4.5.10",
     "@neoconfetti/svelte": "^1.0.0",
-    "@sveltejs/adapter-auto": "^2.0.0",
-    "@sveltejs/kit": "^1.5.0",
+    "@sveltejs/adapter-auto": "^2.1.0",
+    "@sveltejs/kit": "^1.21.0",
     "@types/cookie": "^0.5.1",
-    "svelte": "^4.0.0",
-    "svelte-check": "^3.0.1",
-    "tslib": "^2.4.1",
+    "svelte": "^4.0.1",
+    "svelte-check": "^3.4.4",
+    "tslib": "^2.6.0",
     "typescript": "5.1.3",
-    "vite": "^4.3.0"
+    "vite": "^4.3.9"
   },
   "type": "module"
 }

examples/sveltekit-openai/src/routes/api/chat-with-functions/+server.ts

@@ -0,0 +1,73 @@
+import { Configuration, OpenAIApi } from 'openai-edge'
+import { OpenAIStream, StreamingTextResponse } from 'ai'
+import type { ChatCompletionFunctions } from 'openai-edge/types/api'
+
+import { env } from '$env/dynamic/private'
+
+const config = new Configuration({
+  apiKey: env.OPENAI_API_KEY
+})
+const openai = new OpenAIApi(config)
+
+const functions: ChatCompletionFunctions[] = [
+  {
+    name: 'get_current_weather',
+    description: 'Get the current weather',
+    parameters: {
+      type: 'object',
+      properties: {
+        location: {
+          type: 'string',
+          description: 'The city and state, e.g. San Francisco, CA'
+        },
+        format: {
+          type: 'string',
+          enum: ['celsius', 'fahrenheit'],
+          description:
+            'The temperature unit to use. Infer this from the users location.'
+        }
+      },
+      required: ['location', 'format']
+    }
+  },
+  {
+    name: 'get_current_time',
+    description: 'Get the current time',
+    parameters: {
+      type: 'object',
+      properties: {},
+      required: []
+    }
+  },
+  {
+    name: 'eval_code_in_browser',
+    description: 'Execute javascript code in the browser with eval().',
+    parameters: {
+      type: 'object',
+      properties: {
+        code: {
+          type: 'string',
+          description: `Javascript code that will be directly executed via eval(). Do not use backticks in your response.
+           DO NOT include any newlines in your response, and be sure to provide only valid JSON when providing the arguments object.
+           The output of the eval() will be returned directly by the function.`
+        }
+      },
+      required: ['code']
+    }
+  }
+]
+
+export async function POST({ request }) {
+  const { messages, function_call } = await request.json()
+
+  const response = await openai.createChatCompletion({
+    model: 'gpt-3.5-turbo-0613',
+    stream: true,
+    messages,
+    functions,
+    function_call
+  })
+
+  const stream = OpenAIStream(response)
+  return new StreamingTextResponse(stream)
+}

examples/sveltekit-openai/src/routes/chat-with-functions/+page.svelte

@@ -0,0 +1,128 @@
+<script lang="ts">
+  import { useChat } from 'ai/svelte'
+  import type { ChatRequest, FunctionCallHandler } from 'ai'
+  import { nanoid } from 'ai'
+
+  const functionCallHandler: FunctionCallHandler = async (
+    chatMessages,
+    functionCall
+  ) => {
+    if (functionCall.name === 'get_current_weather') {
+      if (functionCall.arguments) {
+        const parsedFunctionCallArguments = JSON.parse(functionCall.arguments)
+        // You now have access to the parsed arguments here (assuming the JSON was valid)
+        // If JSON is invalid, return an appropriate message to the model so that it may retry?
+        console.log(parsedFunctionCallArguments)
+      }
+
+      // Generate a fake temperature
+      const temperature = Math.floor(Math.random() * (100 - 30 + 1) + 30)
+      // Generate random weather condition
+      const weather = ['sunny', 'cloudy', 'rainy', 'snowy'][
+        Math.floor(Math.random() * 4)
+      ]
+
+      const functionResponse: ChatRequest = {
+        messages: [
+          ...chatMessages,
+          {
+            id: nanoid(),
+            name: 'get_current_weather',
+            role: 'function' as const,
+            content: JSON.stringify({
+              temperature,
+              weather,
+              info: 'This data is randomly generated and came from a fake weather API!'
+            })
+          }
+        ]
+      }
+      return functionResponse
+    } else if (functionCall.name === 'get_current_time') {
+      const time = new Date().toLocaleTimeString()
+      const functionResponse: ChatRequest = {
+        messages: [
+          ...chatMessages,
+          {
+            id: nanoid(),
+            name: 'get_current_time',
+            role: 'function' as const,
+            content: JSON.stringify({ time })
+          }
+        ]
+        // You can also (optionally) return a list of functions here that the model can call next
+        // functions
+      }
+
+      return functionResponse
+    } else if (functionCall.name === 'eval_code_in_browser') {
+      if (functionCall.arguments) {
+        // Parsing here does not always work since it seems that some characters in generated code aren't escaped properly.
+        const parsedFunctionCallArguments: { code: string } = JSON.parse(
+          functionCall.arguments
+        )
+        const functionResponse = {
+          messages: [
+            ...chatMessages,
+            {
+              id: nanoid(),
+              name: 'eval_code_in_browser',
+              role: 'function' as const,
+              content: JSON.stringify(eval(parsedFunctionCallArguments.code))
+            }
+          ]
+        }
+        return functionResponse
+      }
+    }
+  }
+
+  const { messages, input, handleSubmit } = useChat({
+    api: '/api/chat-with-functions',
+    experimental_onFunctionCall: functionCallHandler
+  })
+</script>
+
+<svelte:head>
+  <title>Home</title>
+  <meta name="description" content="Svelte demo app" />
+</svelte:head>
+
+<section>
+  <h1>useChat</h1>
+
+  <p>
+    This is a demo of the <code>useChat</code> hook. It uses the
+    <code>experimental_onFunctionCall</code> option to handle function calls from
+    the model.
+  </p>
+  <p>
+    The available functions are: <code>get_current_weather</code>,
+    <code>get_current_time</code>
+    and <code>eval_code_in_browser</code>.
+  </p>
+
+  <ul>
+    {#each $messages as message}
+      <li>{message.role}: {message.content}</li>
+    {/each}
+  </ul>
+  <form on:submit={handleSubmit}>
+    <input bind:value={$input} />
+    <button type="submit">Send</button>
+  </form>
+</section>
+
+<style>
+  section {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    flex: 0.6;
+  }
+
+  h1 {
+    width: 100%;
+  }
+</style>