More

README.md

@@ -1,5 +1,5 @@
 <a href="https://chat.vercel.ai/">
-  <img alt="Next.js 13 and app template Router-ready AI chatbot." src="https://chat.vercel.ai/opengraph-image.png">
+  <img alt="Next.js 14 and App Router-ready AI chatbot." src="https://chat.vercel.ai/opengraph-image.png">
   <h1 align="center">Next.js AI Chatbot</h1>
 </a>
 

app/api/chat/route.ts

@@ -1,22 +1,22 @@
 import { kv } from '@vercel/kv'
 import { OpenAIStream, StreamingTextResponse } from 'ai'
-import { Configuration, OpenAIApi } from 'openai-edge'
+import OpenAI from 'openai';
 
 import { auth } from '@/auth'
 import { nanoid } from '@/lib/utils'
 
 export const runtime = 'edge'
 
-const configuration = new Configuration({
-  apiKey: process.env.OPENAI_API_KEY
-})
-
-const openai = new OpenAIApi(configuration)
+const openai = new OpenAI({
+  apiKey: process.env.OPENAI_API_KEY,
+});
 
 export async function POST(req: Request) {
   const json = await req.json()
   const { messages, previewToken } = json
-  const userId = (await auth())?.user.id
+  const userId = (await auth())?.user.id // this doesn't seem to work getting the id
+
+  console.log('auth', await auth())
 
   if (!userId) {
     return new Response('Unauthorized', {
@@ -25,10 +25,10 @@ export async function POST(req: Request) {
   }
 
   if (previewToken) {
-    configuration.apiKey = previewToken
+    openai.apiKey = previewToken
   }
 
-  const res = await openai.createChatCompletion({
+  const res = await openai.chat.completions.create({
     model: 'gpt-3.5-turbo',
     messages,
     temperature: 0.7,

app/layout.tsx

@@ -1,5 +1,3 @@
-import { Metadata } from 'next'
-
 import { Toaster } from 'react-hot-toast'
 import { GeistSans } from 'geist/font/sans'
 import { GeistMono } from 'geist/font/mono'
@@ -10,17 +8,13 @@ import { TailwindIndicator } from '@/components/tailwind-indicator'
 import { Providers } from '@/components/providers'
 import { Header } from '@/components/header'
 
-export const metadata: Metadata = {
+export const metadata = {
   metadataBase: new URL('https://chat.vercel.ai/'),
   title: {
     default: 'Next.js AI Chatbot',
     template: `%s - Next.js AI Chatbot`
   },
   description: 'An AI-powered chatbot template built with Next.js and Vercel.',
-  themeColor: [
-    { media: '(prefers-color-scheme: light)', color: 'white' },
-    { media: '(prefers-color-scheme: dark)', color: 'black' }
-  ],
   icons: {
     icon: '/favicon.ico',
     shortcut: '/favicon-16x16.png',
@@ -28,6 +22,13 @@ export const metadata: Metadata = {
   }
 }
 
+export const viewport = {
+  themeColor: [
+    { media: '(prefers-color-scheme: light)', color: 'white' },
+    { media: '(prefers-color-scheme: dark)', color: 'black' }
+  ]
+}
+
 interface RootLayoutProps {
   children: React.ReactNode
 }

app/share/[id]/opengraph-image.tsx

@@ -1,4 +1,4 @@
-import { ImageResponse } from 'next/server'
+import { ImageResponse } from 'next/og'
 
 import { getSharedChat } from '@/app/actions'
 

auth.ts

@@ -13,7 +13,6 @@ declare module 'next-auth' {
 export const {
   handlers: { GET, POST },
   auth,
-  CSRF_experimental // will be removed in future
 } = NextAuth({
   providers: [GitHub],
   callbacks: {

components/header.tsx

@@ -26,7 +26,6 @@ export async function Header() {
         {session?.user ? (
           <Sidebar>
             <React.Suspense fallback={<div className="flex-1 overflow-auto" />}>
-              {/* @ts-ignore */}
               <SidebarList userId={session?.user?.id} />
             </React.Suspense>
             <SidebarFooter>

next.config.js

@@ -1,9 +1,5 @@
 /** @type {import('next').NextConfig} */
 module.exports = {
-  reactStrictMode: true,
-  experimental: {
-    serverActions: true,
-  },
   images: {
     remotePatterns: [
       {

package.json

@@ -1,6 +1,4 @@
 {
-  "name": "next-template",
-  "version": "0.0.2",
   "private": true,
   "scripts": {
     "dev": "next dev",
@@ -16,54 +14,54 @@
   "dependencies": {
     "@radix-ui/react-alert-dialog": "^1.0.4",
     "@radix-ui/react-dialog": "^1.0.4",
-    "@radix-ui/react-dropdown-menu": "^2.0.5",
+    "@radix-ui/react-dropdown-menu": "^2.0.6",
     "@radix-ui/react-label": "^2.0.2",
-    "@radix-ui/react-select": "^1.2.2",
+    "@radix-ui/react-select": "^2.0.0",
     "@radix-ui/react-separator": "^1.0.3",
     "@radix-ui/react-slot": "^1.0.2",
     "@radix-ui/react-switch": "^1.0.3",
-    "@radix-ui/react-tooltip": "^1.0.6",
-    "@vercel/analytics": "^1.0.0",
-    "@vercel/kv": "^0.2.1",
-    "@vercel/og": "^0.5.7",
-    "ai": "^2.1.6",
-    "class-variance-authority": "^0.4.0",
-    "clsx": "^1.2.1",
-    "focus-trap-react": "^10.1.1",
+    "@radix-ui/react-tooltip": "^1.0.7",
+    "@vercel/analytics": "^1.1.1",
+    "@vercel/kv": "^1.0.0",
+    "@vercel/og": "^0.5.20",
+    "ai": "^2.2.25",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.0.0",
+    "focus-trap-react": "^10.2.3",
     "geist": "^1.1.0",
-    "nanoid": "^4.0.2",
-    "next": "13.4.7-canary.1",
-    "next-auth": "0.0.0-manual.83c4ebd1",
+    "nanoid": "^5.0.3",
+    "next": "14.0.4-canary.17",
+    "next-auth": "5.0.0-beta.3",
     "next-themes": "^0.2.1",
-    "openai-edge": "^0.5.1",
+    "openai": "^4.20.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-hot-toast": "^2.4.1",
-    "react-intersection-observer": "^9.4.4",
+    "react-intersection-observer": "^9.5.3",
     "react-markdown": "^8.0.7",
     "react-syntax-highlighter": "^15.5.0",
-    "react-textarea-autosize": "^8.4.1",
+    "react-textarea-autosize": "^8.5.3",
     "remark-gfm": "^3.0.1",
     "remark-math": "^5.1.1"
   },
   "devDependencies": {
-    "@tailwindcss/typography": "^0.5.9",
-    "@types/node": "^17.0.12",
-    "@types/react": "^18.0.22",
-    "@types/react-dom": "^18.0.7",
-    "@types/react-syntax-highlighter": "^15.5.6",
-    "@typescript-eslint/parser": "^5.59.7",
-    "autoprefixer": "^10.4.13",
-    "eslint": "^8.31.0",
-    "eslint-config-next": "13.4.7-canary.1",
-    "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-tailwindcss": "^3.12.0",
-    "postcss": "^8.4.21",
-    "prettier": "^2.7.1",
-    "tailwind-merge": "^1.12.0",
-    "tailwindcss": "^3.3.1",
-    "tailwindcss-animate": "^1.0.5",
-    "typescript": "^5.1.3"
+    "@tailwindcss/typography": "^0.5.10",
+    "@types/node": "^20.10.0",
+    "@types/react": "^18.2.38",
+    "@types/react-dom": "^18.2.17",
+    "@types/react-syntax-highlighter": "^15.5.10",
+    "@typescript-eslint/parser": "^6.12.0",
+    "autoprefixer": "^10.4.16",
+    "eslint": "^8.54.0",
+    "eslint-config-next": "14.0.3",
+    "eslint-config-prettier": "^9.0.0",
+    "eslint-plugin-tailwindcss": "^3.13.0",
+    "postcss": "^8.4.31",
+    "prettier": "^3.1.0",
+    "tailwind-merge": "^2.0.0",
+    "tailwindcss": "^3.3.5",
+    "tailwindcss-animate": "^1.0.7",
+    "typescript": "^5.3.2"
   },
   "packageManager": "pnpm@8.6.3"
 }