vercel · elliott-with-the-longest-name-on-github · Mar 26, 2025 · Mar 22, 2025 · Mar 22, 2025 · Mar 22, 2025
diff --git a/.env.example b/.env.example
@@ -1,14 +1,11 @@
+# The following keys are automatically created when you deploy with Vercel
+# and use the suggested integrations.
+
 # 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 Fireworks AI API Key here for reasoning models: https://fireworks.ai/account/api-keys
-FIREWORKS_API_KEY=****
-
-# The following keys below are automatically created and
-# added to your environment when you deploy on vercel
+# Get your Groq API Key here for reasoning models: https://console.groq.com/keys
+GROQ_API_KEY=****
 
 # Instructions to create a Vercel Blob Store here: https://vercel.com/docs/storage/vercel-blob
 BLOB_READ_WRITE_TOKEN=****

diff --git a/.github/workflows/quality.yml b/.github/workflows/quality.yml
@@ -44,6 +44,6 @@ jobs:
       - run: pnpm check
         env:
           POSTGRES_URL: ''
-          OPENAI_API_KEY: ''
-          FIREWORKS_API_KEY: ''
+          XAI_API_KEY: ''
+          GROQ_API_KEY: ''
           BLOB_READ_WRITE_TOKEN: ''
diff --git a/README.md b/README.md
@@ -21,7 +21,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), Groq, and other model providers
 - [shadcn-svelte](https://shadcn-svelte.com)
   - Styling with [Tailwind CSS](https://tailwindcss.com)
   - Component primitives from [Bits UI](https://www.bits-ui.com) for accessibility and flexibility
@@ -31,19 +31,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 SvelteKit 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-svelte&env=OPENAI_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-svelte%2Fblob%2Fmain%2F.env.example&demo-title=AI%20Chatbot&demo-description=An%20Open-Source%20AI%20Chatbot%20Template%20Built%20With%20SvelteKit%20and%20the%20AI%20SDK%20by%20Vercel.&demo-url=https%3A%2F%2Fsvelte-chat.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-svelte&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%2Fsvelte-chat.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)
 
 ## Running locally
 
 You will need to use the environment variables [defined in `.env.example`](.env.example) to run SvelteKit 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/package.json b/package.json
@@ -21,9 +21,9 @@
 		"db:up": "drizzle-kit up"
 	},
 	"devDependencies": {
-		"@ai-sdk/fireworks": "^0.1.12",
-		"@ai-sdk/openai": "^1.1.14",
+		"@ai-sdk/groq": "^1.2.0",
 		"@ai-sdk/svelte": "^2.1.0",
+		"@ai-sdk/xai": "^1.2.1",
 		"@eslint/compat": "^1.2.5",
 		"@eslint/js": "^9.18.0",
 		"@lucide/svelte": "^0.483.0",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/lib/ai/models.ts b/src/lib/ai/models.ts
@@ -8,14 +8,9 @@ interface ChatModel {
 
 export const chatModels: Array<ChatModel> = [
 	{
-		id: 'chat-model-small',
-		name: 'Small model',
-		description: 'Small model for fast, lightweight tasks'
-	},
-	{
-		id: 'chat-model-large',
-		name: 'Large model',
-		description: 'Large model for complex, multi-step tasks'
+		id: 'chat-model',
+		name: 'Chat model',
+		description: 'Primary model for all-purpose chat'
 	},
 	{
 		id: 'chat-model-reasoning',

diff --git a/src/lib/components/chat-header.svelte b/src/lib/components/chat-header.svelte
@@ -64,7 +64,7 @@
 
 	<Button
 		class="order-4 hidden h-fit bg-zinc-900 px-2 py-1.5 text-zinc-50 hover:bg-zinc-800 dark:bg-zinc-100 dark:text-zinc-900 dark:hover:bg-zinc-200 md:ml-auto md:flex md:h-[34px]"
-		href="https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fvercel%2Fai-chatbot-svelte&env=OPENAI_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-svelte%2Fblob%2Fmain%2F.env.example&demo-title=AI%20Chatbot&demo-description=An%20Open-Source%20AI%20Chatbot%20Template%20Built%20With%20SvelteKit%20and%20the%20AI%20SDK%20by%20Vercel.&demo-url=https%3A%2F%2Fsvelte-chat.vercel.ai&stores=%5B%7B%22type%22%3A%22postgres%22%7D%2C%7B%22type%22%3A%22blob%22%7D%5D"
+		href="https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fvercel%2Fai-chatbot-svelte&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%2Fsvelte-chat.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"
 		target="_blank"
 	>
 		<VercelIcon size={16} />

diff --git a/src/lib/server/ai/models.ts b/src/lib/server/ai/models.ts
@@ -1,24 +1,22 @@
-import { createOpenAI } from '@ai-sdk/openai';
-import { createFireworks } from '@ai-sdk/fireworks';
+import { createXai } from '@ai-sdk/xai';
+import { createGroq } from '@ai-sdk/groq';
 import { customProvider, extractReasoningMiddleware, wrapLanguageModel } from 'ai';
-import { OPENAI_API_KEY, FIREWORKS_API_KEY } from '$env/static/private';
+import { XAI_API_KEY, GROQ_API_KEY } from '$env/static/private';
 
-const openai = createOpenAI({ apiKey: OPENAI_API_KEY });
-const fireworks = createFireworks({ apiKey: FIREWORKS_API_KEY });
+const xai = createXai({ apiKey: XAI_API_KEY });
+const groq = createGroq({ apiKey: GROQ_API_KEY });
 
 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-2'),
-		'large-model': openai.image('dall-e-3')
+		'small-model': xai.image('grok-2-image')
 	}
 });