Initial commit from Create Next App

Author: sshader

.env.local.example

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

.gitignore

@@ -0,0 +1,35 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

README.md

@@ -0,0 +1,42 @@
+# Vercel AI SDK, Next.js, and OpenAI Chat Example
+
+This example shows how to use the [Vercel AI SDK](https://sdk.vercel.ai/docs) with [Next.js](https://nextjs.org/) and [OpenAI](https://openai.com) to create a ChatGPT-like AI-powered streaming chat bot.
+
+## Deploy your own
+
+Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=ai-sdk-example):
+
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fvercel%2Fai%2Ftree%2Fmain%2Fexamples%2Fnext-openai&env=OPENAI_API_KEY&envDescription=OpenAI%20API%20Key&envLink=https%3A%2F%2Fplatform.openai.com%2Faccount%2Fapi-keys&project-name=vercel-ai-chat-openai&repository-name=vercel-ai-chat-openai)
+
+## How to use
+
+Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init), [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/), or [pnpm](https://pnpm.io) to bootstrap the example:
+
+```bash
+npx create-next-app --example https://github.com/vercel/ai/tree/main/examples/next-openai next-openai-app
+```
+
+```bash
+yarn create next-app --example https://github.com/vercel/ai/tree/main/examples/next-openai next-openai-app
+```
+
+```bash
+pnpm create next-app --example https://github.com/vercel/ai/tree/main/examples/next-openai next-openai-app
+```
+
+To run the example locally you need to:
+
+1. Sign up at [OpenAI's Developer Platform](https://platform.openai.com/signup).
+2. Go to [OpenAI's dashboard](https://platform.openai.com/account/api-keys) and create an API KEY.
+3. Set the required OpenAI environment variable as the token value as shown [the example env file](./.env.local.example) but in a new file called `.env.local`
+4. `pnpm install` to install the required dependencies.
+5. `pnpm dev` to launch the development server.
+
+## Learn More
+
+To learn more about OpenAI, Next.js, and the Vercel AI SDK take a look at the following resources:
+
+- [Vercel AI SDK docs](https://sdk.vercel.ai/docs)
+- [Vercel AI Playground](https://play.vercel.ai)
+- [OpenAI Documentation](https://platform.openai.com/docs) - learn about OpenAI features and API.
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.

app/api/assistant/assistant-setup.md

@@ -0,0 +1,63 @@
+# Home Automation Assistant Example
+
+## Setup
+
+### Create OpenAI Assistant
+
+[OpenAI Assistant Website](https://platform.openai.com/assistants)
+
+Create a new assistant. Enable Code interpreter. Add the following functions and instructions to the assistant.
+
+Then add the assistant id to the `.env.local` file as `ASSISTANT_ID=your-assistant-id`.
+
+### Instructions
+
+```
+You are an assistant with access to a home automation system. You can get and set the temperature in the bedroom, home office, living room, kitchen and bathroom.
+
+The system uses temperature in Celsius. If the user requests Fahrenheit, you should convert the temperature to Fahrenheit.
+```
+
+### getRoomTemperature function
+
+```json
+{
+  "name": "getRoomTemperature",
+  "description": "Get the temperature in a room",
+  "parameters": {
+    "type": "object",
+    "properties": {
+      "room": {
+        "type": "string",
+        "enum": ["bedroom", "home office", "living room", "kitchen", "bathroom"]
+      }
+    },
+    "required": ["room"]
+  }
+}
+```
+
+### setRoomTemperature function
+
+```json
+{
+  "name": "setRoomTemperature",
+  "description": "Set the temperature in a room",
+  "parameters": {
+    "type": "object",
+    "properties": {
+      "room": {
+        "type": "string",
+        "enum": ["bedroom", "home office", "living room", "kitchen", "bathroom"]
+      },
+      "temperature": { "type": "number" }
+    },
+    "required": ["room", "temperature"]
+  }
+}
+```
+
+## Run
+
+1. Run `pnpm run dev` in `examples/next-openai`
+2. Go to http://localhost:3000/assistant

app/api/assistant/route.ts

@@ -0,0 +1,126 @@
+import { AssistantResponse } from 'ai';
+import OpenAI from 'openai';
+
+// Create an OpenAI API client (that's edge friendly!)
+const openai = new OpenAI({
+  apiKey: process.env.OPENAI_API_KEY || '',
+});
+
+// Allow streaming responses up to 30 seconds
+export const maxDuration = 30;
+
+const homeTemperatures = {
+  bedroom: 20,
+  'home office': 21,
+  'living room': 21,
+  kitchen: 22,
+  bathroom: 23,
+};
+
+export async function POST(req: Request) {
+  // Parse the request body
+  const input: {
+    threadId: string | null;
+    message: string;
+  } = await req.json();
+
+  // Create a thread if needed
+  const threadId = input.threadId ?? (await openai.beta.threads.create({})).id;
+
+  // Add a message to the thread
+  const createdMessage = await openai.beta.threads.messages.create(
+    threadId,
+    {
+      role: 'user',
+      content: input.message,
+    },
+    { signal: req.signal },
+  );
+
+  return AssistantResponse(
+    { threadId, messageId: createdMessage.id },
+    async ({ forwardStream, sendDataMessage }) => {
+      // Run the assistant on the thread
+      const runStream = openai.beta.threads.runs.stream(
+        threadId,
+        {
+          assistant_id:
+            process.env.ASSISTANT_ID ??
+            (() => {
+              throw new Error('ASSISTANT_ID is not set');
+            })(),
+        },
+        { signal: req.signal },
+      );
+
+      // forward run status would stream message deltas
+      let runResult = await forwardStream(runStream);
+
+      // status can be: queued, in_progress, requires_action, cancelling, cancelled, failed, completed, or expired
+      while (
+        runResult?.status === 'requires_action' &&
+        runResult.required_action?.type === 'submit_tool_outputs'
+      ) {
+        const tool_outputs =
+          runResult.required_action.submit_tool_outputs.tool_calls.map(
+            (toolCall: any) => {
+              const parameters = JSON.parse(toolCall.function.arguments);
+
+              switch (toolCall.function.name) {
+                case 'getRoomTemperature': {
+                  const temperature =
+                    homeTemperatures[
+                      parameters.room as keyof typeof homeTemperatures
+                    ];
+
+                  return {
+                    tool_call_id: toolCall.id,
+                    output: temperature.toString(),
+                  };
+                }
+
+                case 'setRoomTemperature': {
+                  const oldTemperature =
+                    homeTemperatures[
+                      parameters.room as keyof typeof homeTemperatures
+                    ];
+
+                  homeTemperatures[
+                    parameters.room as keyof typeof homeTemperatures
+                  ] = parameters.temperature;
+
+                  sendDataMessage({
+                    role: 'data',
+                    data: {
+                      oldTemperature,
+                      newTemperature: parameters.temperature,
+                      description: `Temperature in ${parameters.room} changed from ${oldTemperature} to ${parameters.temperature}`,
+                    },
+                  });
+
+                  return {
+                    tool_call_id: toolCall.id,
+                    output: `temperature set successfully`,
+                  };
+                }
+
+                default:
+                  throw new Error(
+                    `Unknown tool call function: ${toolCall.function.name}`,
+                  );
+              }
+            },
+          );
+
+        runResult = await forwardStream(
+          openai.beta.threads.runs.submitToolOutputsStream(
+            threadId,
+            runResult.id,
+            { tool_outputs },
+            { signal: req.signal },
+          ),
+        );
+      }
+    },
+  );
+}

app/api/chat/route.ts

@@ -0,0 +1,23 @@
+import { openai } from '@ai-sdk/openai';
+import { streamText } from 'ai';
+
+// Allow streaming responses up to 30 seconds
+export const maxDuration = 30;
+
+export async function POST(req: Request) {
+  // Extract the `messages` from the body of the request
+  const { messages } = await req.json();
+
+  // Call the language model
+  const result = await streamText({
+    model: openai('gpt-4-turbo'),
+    messages,
+    async onFinish({ text, toolCalls, toolResults, usage, finishReason }) {
+      // implement your own logic here, e.g. for storing messages
+      // or recording token usage
+    },
+  });
+
+  // Respond with the stream
+  return result.toAIStreamResponse();
+}

app/api/completion/route.ts

@@ -0,0 +1,32 @@
+import { openai } from '@ai-sdk/openai';
+import { StreamData, StreamingTextResponse, streamText } from 'ai';
+
+// Allow streaming responses up to 30 seconds
+export const maxDuration = 30;
+
+export async function POST(req: Request) {
+  // Extract the `prompt` from the body of the request
+  const { prompt } = await req.json();
+
+  const result = await streamText({
+    model: openai('gpt-3.5-turbo-instruct'),
+    maxTokens: 2000,
+    prompt,
+  });
+
+  // optional: use stream data
+  const data = new StreamData();
+
+  data.append('call started');
+
+  // Convert the response to an AI data stream
+  const stream = result.toAIStream({
+    onFinal(completion) {
+      data.append('call completed');
+      data.close();
+    },
+  });
+
+  // Respond with the stream
+  return new StreamingTextResponse(stream, {}, data);
+}

app/api/use-chat-streamdata/route.ts

@@ -0,0 +1,30 @@
+import { openai } from '@ai-sdk/openai';
+import { StreamData, StreamingTextResponse, streamText } from 'ai';
+
+// Allow streaming responses up to 30 seconds
+export const maxDuration = 30;
+
+export async function POST(req: Request) {
+  const { messages } = await req.json();
+
+  const result = await streamText({
+    model: openai('gpt-4-turbo'),
+    messages,
+  });
+
+  // optional: use stream data
+  const data = new StreamData();
+
+  data.append('initialized call');
+
+  return new StreamingTextResponse(
+    result.toAIStream({
+      onFinal() {
+        data.append('call completed');
+        data.close();
+      },
+    }),
+    {},
+    data,
+  );
+}