Merge remote-tracking branch 'upstream/main'

relkrahs · relkrahs · commit 7614111ab9ed · 2025-03-22T09:57:50.000+08:00
diff --git a/.env.example b/.env.example
@@ -1,8 +1,11 @@
-# Get your OpenAI API Key here for chat models: https://platform.openai.com/account/api-keys
-OPENAI_API_KEY=****
+# Get your xAI API Key here for chat models: https://console.x.ai/
+XAI_API_KEY=****
 
-# Get your Fireworks AI API Key here for reasoning models: https://fireworks.ai/account/api-keys
-FIREWORKS_API_KEY=****
+# Get your Groq API Key here for reasoning models: https://console.groq.com/keys
+GROQ_API_KEY=****
+
+# Get your Fal AI API Key here for image models: https://docs.fal.ai/authentication/key-based
+FAL_API_KEY=****
 
 # Generate a random secret: https://generate-secret.vercel.app/32 or `openssl rand -base64 32`
 AUTH_SECRET=****
diff --git a/.gitignore b/.gitignore
@@ -34,7 +34,6 @@ yarn-error.log*
 
 .env
 .vercel
-.vscode
 .env*.local
 
 certificates
diff --git a/.vscode/extensions.json b/.vscode/extensions.json
@@ -0,0 +1,3 @@
+{
+  "recommendations": ["biomejs.biome"]
+}
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,17 @@
+{
+  "editor.formatOnSave": true,
+  "[javascript]": {
+    "editor.defaultFormatter": "biomejs.biome"
+  },
+  "[typescript]": {
+    "editor.defaultFormatter": "biomejs.biome"
+  },
+  "[typescriptreact]": {
+    "editor.defaultFormatter": "biomejs.biome"
+  },
+  "typescript.tsdk": "node_modules/typescript/lib",
+  "eslint.workingDirectories": [
+    { "pattern": "app/*" },
+    { "pattern": "packages/*" }
+  ]
+}
diff --git a/README.md b/README.md
@@ -23,7 +23,7 @@
 - [AI SDK](https://sdk.vercel.ai/docs)
   - Unified API for generating text, structured objects, and tool calls with LLMs
   - Hooks for building dynamic chat and generative user interfaces
-  - Supports OpenAI (default), Anthropic, Cohere, and other model providers
+  - Supports xAI (default), OpenAI, Fireworks, and other model providers
 - [shadcn/ui](https://ui.shadcn.com)
   - Styling with [Tailwind CSS](https://tailwindcss.com)
   - Component primitives from [Radix UI](https://radix-ui.com) for accessibility and flexibility
@@ -35,19 +35,19 @@
 
 ## Model Providers
 
-This template ships with OpenAI `gpt-4o` as the default. However, with the [AI SDK](https://sdk.vercel.ai/docs), you can switch LLM providers to [OpenAI](https://openai.com), [Anthropic](https://anthropic.com), [Cohere](https://cohere.com/), and [many more](https://sdk.vercel.ai/providers/ai-sdk-providers) with just a few lines of code.
+This template ships with [xAI](https://x.ai) `grok-2-1212` as the default chat model. However, with the [AI SDK](https://sdk.vercel.ai/docs), you can switch LLM providers to [OpenAI](https://openai.com), [Anthropic](https://anthropic.com), [Cohere](https://cohere.com/), and [many more](https://sdk.vercel.ai/providers/ai-sdk-providers) with just a few lines of code.
 
 ## Deploy Your Own
 
 You can deploy your own version of the Next.js AI Chatbot to Vercel with one click:
 
-[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fvercel%2Fai-chatbot&env=AUTH_SECRET,OPENAI_API_KEY&envDescription=Learn%20more%20about%20how%20to%20get%20the%20API%20Keys%20for%20the%20application&envLink=https%3A%2F%2Fgithub.com%2Fvercel%2Fai-chatbot%2Fblob%2Fmain%2F.env.example&demo-title=AI%20Chatbot&demo-description=An%20Open-Source%20AI%20Chatbot%20Template%20Built%20With%20Next.js%20and%20the%20AI%20SDK%20by%20Vercel.&demo-url=https%3A%2F%2Fchat.vercel.ai&stores=[{%22type%22:%22postgres%22},{%22type%22:%22blob%22}])
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fvercel%2Fai-chatbot&env=AUTH_SECRET&envDescription=Learn%20more%20about%20how%20to%20get%20the%20API%20Keys%20for%20the%20application&envLink=https%3A%2F%2Fgithub.com%2Fvercel%2Fai-chatbot%2Fblob%2Fmain%2F.env.example&demo-title=AI%20Chatbot&demo-description=An%20Open-Source%20AI%20Chatbot%20Template%20Built%20With%20Next.js%20and%20the%20AI%20SDK%20by%20Vercel.&demo-url=https%3A%2F%2Fchat.vercel.ai&stores=[{%22type%22:%22postgres%22},{%22type%22:%22blob%22}]&integration-ids=oac_g1tOx3546WuLOQ4QeyAX1n1P,oac_G6x10PjgSxUUTu6Pi25ZAtbp,oac_GzhR3rwEIUyQEpKEsmAiEjfi)
 
 ## Running locally
 
 You will need to use the environment variables [defined in `.env.example`](.env.example) to run Next.js AI Chatbot. It's recommended you use [Vercel Environment Variables](https://vercel.com/docs/projects/environment-variables) for this, but a `.env` file is all that is necessary.
 
-> Note: You should not commit your `.env` file or it will expose secrets that will allow others to control access to your various OpenAI and authentication provider accounts.
+> Note: You should not commit your `.env` file or it will expose secrets that will allow others to control access to your various AI and authentication provider accounts.
 
 1. Install Vercel CLI: `npm i -g vercel`
 2. Link local instance with Vercel and GitHub accounts (creates `.vercel` directory): `vercel link`
diff --git a/app/(auth)/_register/page.tsx b/app/(auth)/_register/page.tsx
@@ -39,7 +39,7 @@ export default function Page() {
       setIsSuccessful(true);
       router.refresh();
     }
-  }, [state, router]);
+  }, [state]);
 
   const handleSubmit = (formData: FormData) => {
     setEmail(formData.get('email') as string);
diff --git a/app/(auth)/login/page.tsx b/app/(auth)/login/page.tsx
@@ -38,7 +38,7 @@ export default function Page() {
       setIsSuccessful(true);
       router.refresh();
     }
-  }, [state.status, router]);
+  }, [state.status]);
 
   const handleSubmit = (formData: FormData) => {
     setEmail(formData.get('email') as string);
diff --git a/app/(chat)/api/chat/route.ts b/app/(chat)/api/chat/route.ts
@@ -137,7 +137,7 @@ export async function POST(request: Request) {
                     },
                   ],
                 });
-              } catch (error) {
+              } catch (_) {
                 console.error('Failed to save chat');
               }
             }
diff --git a/app/(chat)/layout.tsx b/app/(chat)/layout.tsx
@@ -2,7 +2,6 @@ import { cookies } from 'next/headers';
 
 import { AppSidebar } from '@/components/app-sidebar';
 import { SidebarInset, SidebarProvider } from '@/components/ui/sidebar';
-
 import { auth } from '../(auth)/auth';
 import Script from 'next/script';
 
diff --git a/app/globals.css b/app/globals.css
@@ -102,20 +102,6 @@
     body {
         @apply bg-background text-foreground;
     }
-
-    @font-face {
-        font-family: "geist";
-        font-style: normal;
-        font-weight: 100 900;
-        src: url(/fonts/geist.woff2) format("woff2");
-    }
-
-    @font-face {
-        font-family: "geist-mono";
-        font-style: normal;
-        font-weight: 100 900;
-        src: url(/fonts/geist-mono.woff2) format("woff2");
-    }
 }
 
 .skeleton {
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -1,6 +1,6 @@
 import type { Metadata, Viewport } from 'next';
 import { Toaster } from 'sonner';
-
+import { Geist, Geist_Mono } from 'next/font/google';
 import { ThemeProvider } from '@/components/theme-provider';
 
 import './globals.css';
@@ -37,6 +37,18 @@ export const viewport: Viewport = {
   viewportFit: 'cover',
 };
 
+const geist = Geist({
+  subsets: ['latin'],
+  display: 'swap',
+  variable: '--font-geist',
+});
+
+const geistMono = Geist_Mono({
+  subsets: ['latin'],
+  display: 'swap',
+  variable: '--font-geist-mono',
+});
+
 const LIGHT_THEME_COLOR = 'hsl(0 0% 100%)';
 const DARK_THEME_COLOR = 'hsl(240deg 10% 3.92%)';
 const THEME_COLOR_SCRIPT = `\
@@ -70,6 +82,7 @@ export default async function RootLayout({
       // prop is necessary to avoid the React hydration mismatch warning.
       // https://github.com/pacocoursey/next-themes?tab=readme-ov-file#with-app
       suppressHydrationWarning
+      className={`${geist.variable} ${geistMono.variable}`}
     >
       <head>
         <script
@@ -78,7 +91,7 @@ export default async function RootLayout({
           }}
         />
       </head>
-      <body className="">
+      <body className="antialiased">
         <ThemeProvider
           attribute="class"
           defaultTheme="system"
diff --git a/components/icons.tsx b/components/icons.tsx
@@ -757,7 +757,7 @@ export const PlusIcon = ({ size = 16 }: { size?: number }) => (
     <path
       fillRule="evenodd"
       clipRule="evenodd"
-      d="M8.75 1.75V1H7.25V1.75V6.75H2.25H1.5V8.25H2.25H7.25V13.25V14H8.75V13.25V8.25H13.75H14.5V6.75H13.75H8.75V1.75Z"
+      d="M 8.75,1 H7.25 V7.25 H1.5 V8.75 H7.25 V15 H8.75 V8.75 H14.5 V7.25 H8.75 V1.75 Z"
       fill="currentColor"
     />
   </svg>
diff --git a/components/multimodal-input.tsx b/components/multimodal-input.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import type { Attachment, Message } from 'ai';
+import type { Attachment, Message, UIMessage } from 'ai';
 import cx from 'classnames';
 import type React from 'react';
 import {
@@ -22,7 +22,7 @@ import { Button } from './ui/button';
 import { Textarea } from './ui/textarea';
 import { SuggestedActions } from './suggested-actions';
 import equal from 'fast-deep-equal';
-import { UseChatHelpers, UseChatOptions } from '@ai-sdk/react';
+import { UseChatHelpers } from '@ai-sdk/react';
 
 function PureMultimodalInput({
   chatId,
@@ -45,8 +45,8 @@ function PureMultimodalInput({
   stop: () => void;
   attachments: Array<Attachment>;
   setAttachments: Dispatch<SetStateAction<Array<Attachment>>>;
-  messages: Array<Message>;
-  setMessages: Dispatch<SetStateAction<Array<Message>>>;
+  messages: Array<UIMessage>;
+  setMessages: UseChatHelpers['setMessages'];
   append: UseChatHelpers['append'];
   handleSubmit: UseChatHelpers['handleSubmit'];
   className?: string;
@@ -325,7 +325,7 @@ function PureStopButton({
   setMessages,
 }: {
   stop: () => void;
-  setMessages: Dispatch<SetStateAction<Array<Message>>>;
+  setMessages: UseChatHelpers['setMessages'];
 }) {
   return (
     <Button
diff --git a/components/suggested-actions.tsx b/components/suggested-actions.tsx
@@ -2,15 +2,12 @@
 
 import { motion } from 'framer-motion';
 import { Button } from './ui/button';
-import type { ChatRequestOptions, CreateMessage, Message } from 'ai';
 import { memo } from 'react';
+import { UseChatHelpers } from '@ai-sdk/react';
 
 interface SuggestedActionsProps {
   chatId: string;
-  append: (
-    message: Message | CreateMessage,
-    chatRequestOptions?: ChatRequestOptions,
-  ) => Promise<string | null | undefined>;
+  append: UseChatHelpers['append'];
 }
 
 function PureSuggestedActions({ chatId, append }: SuggestedActionsProps) {
diff --git a/components/toolbar.tsx b/components/toolbar.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import type { ChatRequestOptions, CreateMessage, Message } from 'ai';
+import type { Message } from 'ai';
 import cx from 'classnames';
 import {
   AnimatePresence,
@@ -39,10 +39,7 @@ type ToolProps = {
   isToolbarVisible?: boolean;
   setIsToolbarVisible?: Dispatch<SetStateAction<boolean>>;
   isAnimating: boolean;
-  append: (
-    message: Message | CreateMessage,
-    chatRequestOptions?: ChatRequestOptions,
-  ) => Promise<string | null | undefined>;
+  append: UseChatHelpers['append'];
   onClick: ({
     appendMessage,
   }: {
@@ -143,10 +140,7 @@ const ReadingLevelSelector = ({
 }: {
   setSelectedTool: Dispatch<SetStateAction<string | null>>;
   isAnimating: boolean;
-  append: (
-    message: Message | CreateMessage,
-    chatRequestOptions?: ChatRequestOptions,
-  ) => Promise<string | null | undefined>;
+  append: UseChatHelpers['append'];
 }) => {
   const LEVELS = [
     'Elementary',
@@ -257,10 +251,7 @@ export const Tools = ({
   isToolbarVisible: boolean;
   selectedTool: string | null;
   setSelectedTool: Dispatch<SetStateAction<string | null>>;
-  append: (
-    message: Message | CreateMessage,
-    chatRequestOptions?: ChatRequestOptions,
-  ) => Promise<string | null | undefined>;
+  append: UseChatHelpers['append'];
   isAnimating: boolean;
   setIsToolbarVisible: Dispatch<SetStateAction<boolean>>;
   tools: Array<ArtifactToolbarItem>;
@@ -319,7 +310,7 @@ const PureToolbar = ({
   status: UseChatHelpers['status'];
   append: UseChatHelpers['append'];
   stop: UseChatHelpers['stop'];
-  setMessages: Dispatch<SetStateAction<Message[]>>;
+  setMessages: UseChatHelpers['setMessages'];
   artifactKind: ArtifactKind;
 }) => {
   const toolbarRef = useRef<HTMLDivElement>(null);
diff --git a/docs/01-quick-start.md b/docs/01-quick-start.md
@@ -8,11 +8,14 @@ Deploying to [Vercel](https://vercel.com) is the quickest way to get started wit
 
 - Vercel account and [Vercel CLI](https://vercel.com/docs/cli)
 - GitHub/GitLab/Bitbucket account
-- API Key from [OpenAI](https://platform.openai.com)
+- API Keys from three AI model providers:
+  - [xAI](https://console.x.ai/)
+  - [OpenAI](https://platform.openai.com/account/api-keys)
+  - [Fireworks](https://fireworks.ai/account/api-keys)
 
 ### Deploy to Vercel
 
-To deploy the chatbot template to Vercel, click this [link](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fvercel%2Fai-chatbot&env=AUTH_SECRET,OPENAI_API_KEY&envDescription=Learn%20more%20about%20how%20to%20get%20the%20API%20Keys%20for%20the%20application&envLink=https%3A%2F%2Fgithub.com%2Fvercel%2Fai-chatbot%2Fblob%2Fmain%2F.env.example&demo-title=AI%20Chatbot&demo-description=An%20Open-Source%20AI%20Chatbot%20Template%20Built%20With%20Next.js%20and%20the%20AI%20SDK%20by%20Vercel.&demo-url=https%3A%2F%2Fchat.vercel.ai&stores=%5B%7B%22type%22:%22postgres%22%7D,%7B%22type%22:%22blob%22%7D%5D) to enter the 1-click deploy flow.
+To deploy the chatbot template to Vercel, click this [link](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fvercel%2Fai-chatbot&env=AUTH_SECRET,OPENAI_API_KEY,XAI_API_KEY,FIREWORKS_API_KEY&envDescription=Learn%20more%20about%20how%20to%20get%20the%20API%20Keys%20for%20the%20application&envLink=https%3A%2F%2Fgithub.com%2Fvercel%2Fai-chatbot%2Fblob%2Fmain%2F.env.example&demo-title=AI%20Chatbot&demo-description=An%20Open-Source%20AI%20Chatbot%20Template%20Built%20With%20Next.js%20and%20the%20AI%20SDK%20by%20Vercel.&demo-url=https%3A%2F%2Fchat.vercel.ai&stores=%5B%7B%22type%22:%22postgres%22%7D,%7B%22type%22:%22blob%22%7D%5D) to enter the 1-click deploy flow.
 
 During the flow, you will be prompted to create and connect to a postgres database and blob store. You will also need to provide environment variables for the application.
 
diff --git a/docs/02-update-models.md b/docs/02-update-models.md
@@ -1,51 +1,53 @@
 # Update Models
 
-The chatbot template ships with [OpenAI](https://sdk.vercel.ai/providers/ai-sdk-providers/openai) as the default model provider. Since the template is powered by the [AI SDK](https://sdk.vercel.ai), which supports [multiple providers](https://sdk.vercel.ai/providers/ai-sdk-providers) out of the box, you can easily switch to another provider of your choice.
+The chatbot template ships with [xAI](https://sdk.vercel.ai/providers/ai-sdk-providers/xai) as the default model provider. Since the template is powered by the [AI SDK](https://sdk.vercel.ai), which supports [multiple providers](https://sdk.vercel.ai/providers/ai-sdk-providers) out of the box, you can easily switch to another provider of your choice.
 
 To update the models, you will need to update the custom provider called `myProvider` at `/lib/ai/models.ts` shown below.
 
 ```ts
 import { customProvider } from "ai";
-import { openai } from "@ai-sdk/openai";
+import { xai } from "@ai-sdk/xai";
+import { groq } from "@ai-sdk/groq";
+import { fal } from "@ai-sdk/fal";
 
 export const myProvider = customProvider({
   languageModels: {
-    "chat-model-small": openai("gpt-4o-mini"),
-    "chat-model-large": openai("gpt-4o"),
+    "chat-model": xai("grok-2-1212"),
     "chat-model-reasoning": wrapLanguageModel({
-      model: fireworks("accounts/fireworks/models/deepseek-r1"),
+      model: groq("deepseek-r1-distill-llama-70b"),
       middleware: extractReasoningMiddleware({ tagName: "think" }),
     }),
-    "title-model": openai("gpt-4-turbo"),
-    "artifact-model": openai("gpt-4o-mini"),
+    "title-model": xai("grok-2-1212"),
+    "artifact-model": xai("grok-2-1212"),
   },
   imageModels: {
-    "small-model": openai.image("dall-e-3"),
+    "small-model": fal.image("fal-ai/fast-sdxl"),
   },
 });
 ```
 
-You can replace the `openai` models with any other provider of your choice. You will need to install the provider library and switch the models accordingly.
+You can replace the models with any other provider of your choice. You will need to install the provider library and switch the models accordingly.
 
-For example, if you want to use Anthropic's `claude-3-5-sonnet` model for `chat-model-large`, you can replace the `openai` model with the `anthropic` model as shown below.
+For example, if you want to use Anthropic's `claude-3-5-sonnet` model for `chat-model`, you can replace the `xai` model with the `anthropic` model as shown below.
 
 ```ts
 import { customProvider } from "ai";
+import { fal } from "@ai-sdk/fal";
+import { groq } from "@ai-sdk/groq";
 import { anthropic } from "@ai-sdk/anthropic";
 
 export const myProvider = customProvider({
   languageModels: {
-    "chat-model-small": openai("gpt-4o-mini"),
-    "chat-model-large": anthropic("claude-3-5-sonnet"), // Replace openai with anthropic
+    "chat-model": anthropic("claude-3-5-sonnet"), // Replace xai with anthropic
     "chat-model-reasoning": wrapLanguageModel({
-      model: fireworks("accounts/fireworks/models/deepseek-r1"),
+      model: groq("deepseek-r1-distill-llama-70b"),
       middleware: extractReasoningMiddleware({ tagName: "think" }),
     }),
-    "title-model": openai("gpt-4-turbo"),
-    "artifact-model": openai("gpt-4o-mini"),
+    "title-model": anthropic("claude-3-5-haiku"),
+    "artifact-model": anthropic("claude-3-5-haiku"),
   },
   imageModels: {
-    "small-model": openai.image("dall-e-3"),
+    "small-model": fal.image("fal-ai/fast-sdxl"),
   },
 });
 ```
diff --git a/lib/ai/providers.ts b/lib/ai/providers.ts
@@ -16,8 +16,7 @@ import {
 export const myProvider = isTestEnvironment
   ? customProvider({
       languageModels: {
-        'chat-model-small': chatModel,
-        'chat-model-large': chatModel,
+        'chat-model': chatModel,
         'chat-model-reasoning': reasoningModel,
         'title-model': titleModel,
         'artifact-model': artifactModel,
diff --git a/package.json b/package.json
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/public/fonts/geist-mono.woff2 b/public/fonts/geist-mono.woff2
diff --git a/public/fonts/geist.woff2 b/public/fonts/geist.woff2
diff --git a/tailwind.config.ts b/tailwind.config.ts

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+{`
	`2`	`+ "recommendations": ["biomejs.biome"]`
	`3`	`+}`
Original file line number	Diff line number	Diff line change
`@@ -39,7 +39,7 @@ export default function Page() {`
`39`	`39`	`setIsSuccessful(true);`
`40`	`40`	`router.refresh();`
`41`	`41`	`}`
`42`		`- }, [state, router]);`
	`42`	`+ }, [state]);`
`43`	`43`
`44`	`44`	`const handleSubmit = (formData: FormData) => {`
`45`	`45`	`setEmail(formData.get('email') as string);`
Original file line number	Diff line number	Diff line change
`@@ -38,7 +38,7 @@ export default function Page() {`
`38`	`38`	`setIsSuccessful(true);`
`39`	`39`	`router.refresh();`
`40`	`40`	`}`
`41`		`- }, [state.status, router]);`
	`41`	`+ }, [state.status]);`
`42`	`42`
`43`	`43`	`const handleSubmit = (formData: FormData) => {`
`44`	`44`	`setEmail(formData.get('email') as string);`
Original file line number	Diff line number	Diff line change
`@@ -137,7 +137,7 @@ export async function POST(request: Request) {`
`137`	`137`	`},`
`138`	`138`	`],`
`139`	`139`	`});`
`140`		`- } catch (error) {`
	`140`	`+ } catch (_) {`
`141`	`141`	`console.error('Failed to save chat');`
`142`	`142`	`}`
`143`	`143`	`}`