Skip to content

Commit 721d1bc

Browse files
authored
Merge branch 'vercel:main' into fix/stop-button-condition
2 parents 9f9e6dd + 235b0ed commit 721d1bc

File tree

14 files changed

+114
-156
lines changed

14 files changed

+114
-156
lines changed

.env.example

Lines changed: 6 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,15 @@
1-
# Get your xAI API Key here for chat models: https://console.x.ai/
2-
XAI_API_KEY=****
3-
4-
# Get your OpenAI API Key here for chat models: https://platform.openai.com/account/api-keys
5-
OPENAI_API_KEY=****
6-
7-
# Get your Fireworks AI API Key here for reasoning models: https://fireworks.ai/account/api-keys
8-
FIREWORKS_API_KEY=****
9-
101
# Generate a random secret: https://generate-secret.vercel.app/32 or `openssl rand -base64 32`
112
AUTH_SECRET=****
123

134
# The following keys below are automatically created and
145
# added to your environment when you deploy on vercel
156

7+
# Get your xAI API Key here for chat and image models: https://console.x.ai/
8+
XAI_API_KEY=****
9+
10+
# Get your Groq API Key here for reasoning models: https://console.groq.com/keys
11+
GROQ_API_KEY=****
12+
1613
# Instructions to create a Vercel Blob Store here: https://vercel.com/docs/storage/vercel-blob
1714
BLOB_READ_WRITE_TOKEN=****
1815

.vscode/settings.json

Lines changed: 16 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,17 @@
11
{
2-
"editor.formatOnSave": true,
3-
"[javascript]": {
4-
"editor.defaultFormatter": "biomejs.biome"
5-
},
6-
"[typescript]": {
7-
"editor.defaultFormatter": "biomejs.biome"
8-
},
9-
"[typescriptreact]": {
10-
"editor.defaultFormatter": "biomejs.biome"
11-
},
12-
"typescript.tsdk": "node_modules/typescript/lib",
13-
"eslint.workingDirectories": [
14-
{ "pattern": "app/*" },
15-
{ "pattern": "packages/*" }
16-
]
17-
}
18-
2+
"editor.formatOnSave": true,
3+
"[javascript]": {
4+
"editor.defaultFormatter": "biomejs.biome"
5+
},
6+
"[typescript]": {
7+
"editor.defaultFormatter": "biomejs.biome"
8+
},
9+
"[typescriptreact]": {
10+
"editor.defaultFormatter": "biomejs.biome"
11+
},
12+
"typescript.tsdk": "node_modules/typescript/lib",
13+
"eslint.workingDirectories": [
14+
{ "pattern": "app/*" },
15+
{ "pattern": "packages/*" }
16+
]
17+
}

README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ This template ships with [xAI](https://x.ai) `grok-2-1212` as the default chat m
4141

4242
You can deploy your own version of the Next.js AI Chatbot to Vercel with one click:
4343

44-
[![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}])
44+
[![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=Generate%20a%20random%20secret%20to%20use%20for%20authentication&envLink=https%3A%2F%2Fgenerate-secret.vercel.app%2F32&project-name=my-awesome-chatbot&repository-name=my-awesome-chatbot&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&products=%5B%7B%22type%22%3A%22integration%22%2C%22protocol%22%3A%22ai%22%2C%22productSlug%22%3A%22grok%22%2C%22integrationSlug%22%3A%22xai%22%7D%2C%7B%22type%22%3A%22integration%22%2C%22protocol%22%3A%22ai%22%2C%22productSlug%22%3A%22api-key%22%2C%22integrationSlug%22%3A%22groq%22%7D%2C%7B%22type%22%3A%22integration%22%2C%22protocol%22%3A%22storage%22%2C%22productSlug%22%3A%22neon%22%2C%22integrationSlug%22%3A%22neon%22%7D%2C%7B%22type%22%3A%22blob%22%7D%5D)
4545

4646
## Running locally
4747

app/(chat)/api/chat/route.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -137,7 +137,7 @@ export async function POST(request: Request) {
137137
},
138138
],
139139
});
140-
} catch (error) {
140+
} catch (_) {
141141
console.error('Failed to save chat');
142142
}
143143
}

components/chat-header.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,7 @@ function PureChatHeader({
7272
asChild
7373
>
7474
<Link
75-
href="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"
75+
href={`https://vercel.com/new/clone?repository-url=https://github.com/vercel/ai-chatbot&env=AUTH_SECRET&envDescription=Learn more about how to get the API Keys for the application&envLink=https://github.com/vercel/ai-chatbot/blob/main/.env.example&demo-title=AI Chatbot&demo-description=An Open-Source AI Chatbot Template Built With Next.js and the AI SDK by Vercel.&demo-url=https://chat.vercel.ai&products=[{"type":"integration","protocol":"ai","productSlug":"grok","integrationSlug":"xai"},{"type":"integration","protocol":"ai","productSlug":"api-key","integrationSlug":"groq"},{"type":"integration","protocol":"storage","productSlug":"neon","integrationSlug":"neon"},{"type":"blob"}]`}
7676
target="_noblank"
7777
>
7878
<VercelIcon size={16} />

components/icons.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -757,7 +757,7 @@ export const PlusIcon = ({ size = 16 }: { size?: number }) => (
757757
<path
758758
fillRule="evenodd"
759759
clipRule="evenodd"
760-
d="M8.75 1.75V1H7.25V1.75V6.75H2.25H1.5V8.25H2.25H7.25V13.25V14H8.75V13.25V8.25H13.75H14.5V6.75H13.75H8.75V1.75Z"
760+
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"
761761
fill="currentColor"
762762
/>
763763
</svg>

components/multimodal-input.tsx

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
'use client';
22

3-
import type { Attachment, Message } from 'ai';
3+
import type { Attachment, Message, UIMessage } from 'ai';
44
import cx from 'classnames';
55
import type React from 'react';
66
import {
@@ -22,7 +22,7 @@ import { Button } from './ui/button';
2222
import { Textarea } from './ui/textarea';
2323
import { SuggestedActions } from './suggested-actions';
2424
import equal from 'fast-deep-equal';
25-
import { UseChatHelpers, UseChatOptions } from '@ai-sdk/react';
25+
import { UseChatHelpers } from '@ai-sdk/react';
2626

2727
function PureMultimodalInput({
2828
chatId,
@@ -45,8 +45,8 @@ function PureMultimodalInput({
4545
stop: () => void;
4646
attachments: Array<Attachment>;
4747
setAttachments: Dispatch<SetStateAction<Array<Attachment>>>;
48-
messages: Array<Message>;
49-
setMessages: Dispatch<SetStateAction<Array<Message>>>;
48+
messages: Array<UIMessage>;
49+
setMessages: UseChatHelpers['setMessages'];
5050
append: UseChatHelpers['append'];
5151
handleSubmit: UseChatHelpers['handleSubmit'];
5252
className?: string;
@@ -308,7 +308,7 @@ function PureStopButton({
308308
setMessages,
309309
}: {
310310
stop: () => void;
311-
setMessages: Dispatch<SetStateAction<Array<Message>>>;
311+
setMessages: UseChatHelpers['setMessages'];
312312
}) {
313313
return (
314314
<Button

components/suggested-actions.tsx

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,15 +2,12 @@
22

33
import { motion } from 'framer-motion';
44
import { Button } from './ui/button';
5-
import { ChatRequestOptions, CreateMessage, Message } from 'ai';
65
import { memo } from 'react';
6+
import { UseChatHelpers } from '@ai-sdk/react';
77

88
interface SuggestedActionsProps {
99
chatId: string;
10-
append: (
11-
message: Message | CreateMessage,
12-
chatRequestOptions?: ChatRequestOptions,
13-
) => Promise<string | null | undefined>;
10+
append: UseChatHelpers['append'];
1411
}
1512

1613
function PureSuggestedActions({ chatId, append }: SuggestedActionsProps) {

components/toolbar.tsx

Lines changed: 5 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
'use client';
22

3-
import type { ChatRequestOptions, CreateMessage, Message } from 'ai';
3+
import type { Message } from 'ai';
44
import cx from 'classnames';
55
import {
66
AnimatePresence,
@@ -39,10 +39,7 @@ type ToolProps = {
3939
isToolbarVisible?: boolean;
4040
setIsToolbarVisible?: Dispatch<SetStateAction<boolean>>;
4141
isAnimating: boolean;
42-
append: (
43-
message: Message | CreateMessage,
44-
chatRequestOptions?: ChatRequestOptions,
45-
) => Promise<string | null | undefined>;
42+
append: UseChatHelpers['append'];
4643
onClick: ({
4744
appendMessage,
4845
}: {
@@ -143,10 +140,7 @@ const ReadingLevelSelector = ({
143140
}: {
144141
setSelectedTool: Dispatch<SetStateAction<string | null>>;
145142
isAnimating: boolean;
146-
append: (
147-
message: Message | CreateMessage,
148-
chatRequestOptions?: ChatRequestOptions,
149-
) => Promise<string | null | undefined>;
143+
append: UseChatHelpers['append'];
150144
}) => {
151145
const LEVELS = [
152146
'Elementary',
@@ -257,10 +251,7 @@ export const Tools = ({
257251
isToolbarVisible: boolean;
258252
selectedTool: string | null;
259253
setSelectedTool: Dispatch<SetStateAction<string | null>>;
260-
append: (
261-
message: Message | CreateMessage,
262-
chatRequestOptions?: ChatRequestOptions,
263-
) => Promise<string | null | undefined>;
254+
append: UseChatHelpers['append'];
264255
isAnimating: boolean;
265256
setIsToolbarVisible: Dispatch<SetStateAction<boolean>>;
266257
tools: Array<ArtifactToolbarItem>;
@@ -319,7 +310,7 @@ const PureToolbar = ({
319310
status: UseChatHelpers['status'];
320311
append: UseChatHelpers['append'];
321312
stop: UseChatHelpers['stop'];
322-
setMessages: Dispatch<SetStateAction<Message[]>>;
313+
setMessages: UseChatHelpers['setMessages'];
323314
artifactKind: ArtifactKind;
324315
}) => {
325316
const toolbarRef = useRef<HTMLDivElement>(null);

docs/01-quick-start.md

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,9 @@ Deploying to [Vercel](https://vercel.com) is the quickest way to get started wit
1515

1616
### Deploy to Vercel
1717

18-
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.
18+
To deploy the chatbot template to Vercel, click the button below to enter the 1-click deploy flow.
19+
20+
[![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=Generate%20a%20random%20secret%20to%20use%20for%20authentication&envLink=https%3A%2F%2Fgenerate-secret.vercel.app%2F32&project-name=my-awesome-chatbot&repository-name=my-awesome-chatbot&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&products=%5B%7B%22type%22%3A%22integration%22%2C%22protocol%22%3A%22ai%22%2C%22productSlug%22%3A%22grok%22%2C%22integrationSlug%22%3A%22xai%22%7D%2C%7B%22type%22%3A%22integration%22%2C%22protocol%22%3A%22ai%22%2C%22productSlug%22%3A%22api-key%22%2C%22integrationSlug%22%3A%22groq%22%7D%2C%7B%22type%22%3A%22integration%22%2C%22protocol%22%3A%22storage%22%2C%22productSlug%22%3A%22neon%22%2C%22integrationSlug%22%3A%22neon%22%7D%2C%7B%22type%22%3A%22blob%22%7D%5D)
1921

2022
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.
2123

docs/02-update-models.md

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -7,20 +7,21 @@ To update the models, you will need to update the custom provider called `myProv
77
```ts
88
import { customProvider } from "ai";
99
import { xai } from "@ai-sdk/xai";
10+
import { groq } from "@ai-sdk/groq";
11+
import { fal } from "@ai-sdk/fal";
1012

1113
export const myProvider = customProvider({
1214
languageModels: {
1315
"chat-model": xai("grok-2-1212"),
1416
"chat-model-reasoning": wrapLanguageModel({
15-
model: fireworks("accounts/fireworks/models/deepseek-r1"),
17+
model: groq("deepseek-r1-distill-llama-70b"),
1618
middleware: extractReasoningMiddleware({ tagName: "think" }),
1719
}),
1820
"title-model": xai("grok-2-1212"),
1921
"artifact-model": xai("grok-2-1212"),
2022
},
2123
imageModels: {
22-
"small-model": openai.image("dall-e-2"),
23-
"large-model": openai.image("dall-e-3"),
24+
"small-model": fal.image("fal-ai/fast-sdxl"),
2425
},
2526
});
2627
```
@@ -31,20 +32,22 @@ For example, if you want to use Anthropic's `claude-3-5-sonnet` model for `chat-
3132

3233
```ts
3334
import { customProvider } from "ai";
35+
import { fal } from "@ai-sdk/fal";
36+
import { groq } from "@ai-sdk/groq";
3437
import { anthropic } from "@ai-sdk/anthropic";
3538

3639
export const myProvider = customProvider({
3740
languageModels: {
3841
"chat-model": anthropic("claude-3-5-sonnet"), // Replace xai with anthropic
3942
"chat-model-reasoning": wrapLanguageModel({
40-
model: fireworks("accounts/fireworks/models/deepseek-r1"),
43+
model: groq("deepseek-r1-distill-llama-70b"),
4144
middleware: extractReasoningMiddleware({ tagName: "think" }),
4245
}),
43-
"title-model": openai("gpt-4-turbo"),
44-
"artifact-model": openai("gpt-4o-mini"),
46+
"title-model": anthropic("claude-3-5-haiku"),
47+
"artifact-model": anthropic("claude-3-5-haiku"),
4548
},
4649
imageModels: {
47-
"small-model": openai.image("dall-e-3"),
50+
"small-model": fal.image("fal-ai/fast-sdxl"),
4851
},
4952
});
5053
```

lib/ai/providers.ts

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,7 @@ import {
33
extractReasoningMiddleware,
44
wrapLanguageModel,
55
} from 'ai';
6-
import { openai } from '@ai-sdk/openai';
7-
import { fireworks } from '@ai-sdk/fireworks';
6+
import { groq } from '@ai-sdk/groq';
87
import { xai } from '@ai-sdk/xai';
98
import { isTestEnvironment } from '../constants';
109
import {
@@ -27,14 +26,13 @@ export const myProvider = isTestEnvironment
2726
languageModels: {
2827
'chat-model': xai('grok-2-1212'),
2928
'chat-model-reasoning': wrapLanguageModel({
30-
model: fireworks('accounts/fireworks/models/deepseek-r1'),
29+
model: groq('deepseek-r1-distill-llama-70b'),
3130
middleware: extractReasoningMiddleware({ tagName: 'think' }),
3231
}),
3332
'title-model': xai('grok-2-1212'),
3433
'artifact-model': xai('grok-2-1212'),
3534
},
3635
imageModels: {
37-
'small-model': openai.image('dall-e-2'),
38-
'large-model': openai.image('dall-e-3'),
36+
'small-model': xai.image('grok-2-image'),
3937
},
4038
});

package.json

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -19,10 +19,9 @@
1919
"test": "export PLAYWRIGHT=True && pnpm exec playwright test --workers=4"
2020
},
2121
"dependencies": {
22-
"@ai-sdk/fireworks": "^0.1.16",
23-
"@ai-sdk/openai": "^1.2.5",
24-
"@ai-sdk/react": "^1.1.23",
25-
"@ai-sdk/xai": "^1.1.15",
22+
"@ai-sdk/groq": "^1.2.0",
23+
"@ai-sdk/react": "^1.2.0",
24+
"@ai-sdk/xai": "^1.2.1",
2625
"@codemirror/lang-javascript": "^6.2.2",
2726
"@codemirror/lang-python": "^6.1.6",
2827
"@codemirror/state": "^6.5.0",
@@ -41,7 +40,7 @@
4140
"@vercel/analytics": "^1.3.1",
4241
"@vercel/blob": "^0.24.1",
4342
"@vercel/postgres": "^0.10.0",
44-
"ai": "4.1.61",
43+
"ai": "4.2.0",
4544
"bcrypt-ts": "^5.0.2",
4645
"class-variance-authority": "^0.7.0",
4746
"classnames": "^2.5.1",

0 commit comments

Comments
 (0)