feat: update providers (#881)

jeremyphilemon · web-flow · commit 7811c0f7fb27 · 2025-03-20T14:10:45.000-07:00
diff --git a/.env.example b/.env.example
@@ -1,11 +1,11 @@
 # Get your xAI API Key here for chat models: https://console.x.ai/
 XAI_API_KEY=****
 
-# Get your OpenAI API Key here for chat models: https://platform.openai.com/account/api-keys
-OPENAI_API_KEY=****
+# Get your Groq API Key here for reasoning models: https://console.groq.com/keys
+GROQ_API_KEY=****
 
-# Get your Fireworks AI API Key here for reasoning models: https://fireworks.ai/account/api-keys
-FIREWORKS_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/.vscode/settings.json b/.vscode/settings.json
@@ -1,18 +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/*" }
-    ]
-  }
-  
+  "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
@@ -41,7 +41,7 @@ This template ships with [xAI](https://x.ai) `grok-2-1212` as the default chat m
 
 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,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=[{%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
 
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/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;
@@ -308,7 +308,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 { 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/02-update-models.md b/docs/02-update-models.md
@@ -7,20 +7,21 @@ To update the models, you will need to update the custom provider called `myProv
 ```ts
 import { customProvider } from "ai";
 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": 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": xai("grok-2-1212"),
     "artifact-model": xai("grok-2-1212"),
   },
   imageModels: {
-    "small-model": openai.image("dall-e-2"),
-    "large-model": openai.image("dall-e-3"),
+    "small-model": fal.image("fal-ai/fast-sdxl"),
   },
 });
 ```
@@ -31,20 +32,22 @@ For example, if you want to use Anthropic's `claude-3-5-sonnet` model for `chat-
 
 ```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": 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
@@ -3,9 +3,9 @@ import {
   extractReasoningMiddleware,
   wrapLanguageModel,
 } from 'ai';
-import { openai } from '@ai-sdk/openai';
-import { fireworks } from '@ai-sdk/fireworks';
+import { groq } from '@ai-sdk/groq';
 import { xai } from '@ai-sdk/xai';
+import { fal } from '@ai-sdk/fal';
 import { isTestEnvironment } from '../constants';
 import {
   artifactModel,
@@ -27,14 +27,13 @@ export const myProvider = isTestEnvironment
       languageModels: {
         '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': xai('grok-2-1212'),
         'artifact-model': xai('grok-2-1212'),
       },
       imageModels: {
-        'small-model': openai.image('dall-e-2'),
-        'large-model': openai.image('dall-e-3'),
+        'small-model': fal.image('fal-ai/fast-sdxl'),
       },
     });
diff --git a/package.json b/package.json
@@ -19,9 +19,9 @@
     "test": "export PLAYWRIGHT=True && pnpm exec playwright test --workers=4"
   },
   "dependencies": {
-    "@ai-sdk/fireworks": "^0.1.16",
-    "@ai-sdk/openai": "^1.2.5",
-    "@ai-sdk/react": "^1.1.23",
+    "@ai-sdk/fal": "^0.0.11",
+    "@ai-sdk/groq": "^1.1.16",
+    "@ai-sdk/react": "^1.1.25",
     "@ai-sdk/xai": "^1.1.15",
     "@codemirror/lang-javascript": "^6.2.2",
     "@codemirror/lang-python": "^6.1.6",
@@ -41,7 +41,7 @@
     "@vercel/analytics": "^1.3.1",
     "@vercel/blob": "^0.24.1",
     "@vercel/postgres": "^0.10.0",
-    "ai": "4.1.61",
+    "ai": "4.1.66",
     "bcrypt-ts": "^5.0.2",
     "class-variance-authority": "^0.7.0",
     "classnames": "^2.5.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml

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`	`}`