From 235b0edb916be4eaba6ffa9465207d6a2373b8ad Mon Sep 17 00:00:00 2001 From: Jeremy Date: Fri, 21 Mar 2025 21:18:56 -0700 Subject: [PATCH] feat: use xai image model and update deploy link (#882) --- .env.example | 15 ++-- README.md | 2 +- components/chat-header.tsx | 2 +- docs/01-quick-start.md | 4 +- lib/ai/providers.ts | 3 +- package.json | 9 +- pnpm-lock.yaml | 163 +++++++++++++------------------------ 7 files changed, 71 insertions(+), 127 deletions(-) diff --git a/.env.example b/.env.example index 6817851..ce92e55 100644 --- a/.env.example +++ b/.env.example @@ -1,18 +1,15 @@ -# Get your xAI API Key here for chat models: https://console.x.ai/ -XAI_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=**** # The following keys below are automatically created and # added to your environment when you deploy on vercel +# Get your xAI API Key here for chat and image models: https://console.x.ai/ +XAI_API_KEY=**** + +# 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/README.md b/README.md index 7d506fc..d15c331 100644 --- 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&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) +[![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) ## Running locally diff --git a/components/chat-header.tsx b/components/chat-header.tsx index 6e67e93..9d595ef 100644 --- a/components/chat-header.tsx +++ b/components/chat-header.tsx @@ -72,7 +72,7 @@ function PureChatHeader({ asChild > diff --git a/docs/01-quick-start.md b/docs/01-quick-start.md index 377d6fc..000ef72 100644 --- a/docs/01-quick-start.md +++ b/docs/01-quick-start.md @@ -15,7 +15,9 @@ Deploying to [Vercel](https://vercel.com) is the quickest way to get started wit ### 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,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. +To deploy the chatbot template to Vercel, click the button below to enter the 1-click deploy flow. + +[![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) 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/lib/ai/providers.ts b/lib/ai/providers.ts index 29300be..e0ea989 100644 --- a/lib/ai/providers.ts +++ b/lib/ai/providers.ts @@ -5,7 +5,6 @@ import { } from 'ai'; import { groq } from '@ai-sdk/groq'; import { xai } from '@ai-sdk/xai'; -import { fal } from '@ai-sdk/fal'; import { isTestEnvironment } from '../constants'; import { artifactModel, @@ -34,6 +33,6 @@ export const myProvider = isTestEnvironment 'artifact-model': xai('grok-2-1212'), }, imageModels: { - 'small-model': fal.image('fal-ai/fast-sdxl'), + 'small-model': xai.image('grok-2-image'), }, }); diff --git a/package.json b/package.json index f9308b8..0d1a16f 100644 --- a/package.json +++ b/package.json @@ -19,10 +19,9 @@ "test": "export PLAYWRIGHT=True && pnpm exec playwright test --workers=4" }, "dependencies": { - "@ai-sdk/fal": "^0.0.11", - "@ai-sdk/groq": "^1.1.16", - "@ai-sdk/react": "^1.1.25", - "@ai-sdk/xai": "^1.1.15", + "@ai-sdk/groq": "^1.2.0", + "@ai-sdk/react": "^1.2.0", + "@ai-sdk/xai": "^1.2.1", "@codemirror/lang-javascript": "^6.2.2", "@codemirror/lang-python": "^6.1.6", "@codemirror/state": "^6.5.0", @@ -41,7 +40,7 @@ "@vercel/analytics": "^1.3.1", "@vercel/blob": "^0.24.1", "@vercel/postgres": "^0.10.0", - "ai": "4.1.66", + "ai": "4.2.0", "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 index 381bdb5..00380fb 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -8,18 +8,15 @@ importers: .: dependencies: - '@ai-sdk/fal': - specifier: ^0.0.11 - version: 0.0.11(zod@3.24.2) '@ai-sdk/groq': - specifier: ^1.1.16 - version: 1.1.16(zod@3.24.2) + specifier: ^1.2.0 + version: 1.2.0(zod@3.24.2) '@ai-sdk/react': - specifier: ^1.1.25 - version: 1.1.25(react@19.0.0-rc-45804af1-20241021)(zod@3.24.2) + specifier: ^1.2.0 + version: 1.2.0(react@19.0.0-rc-45804af1-20241021)(zod@3.24.2) '@ai-sdk/xai': - specifier: ^1.1.15 - version: 1.1.15(zod@3.24.2) + specifier: ^1.2.1 + version: 1.2.1(zod@3.24.2) '@codemirror/lang-javascript': specifier: ^6.2.2 version: 6.2.3 @@ -75,8 +72,8 @@ importers: specifier: ^0.10.0 version: 0.10.0 ai: - specifier: 4.1.66 - version: 4.1.66(react@19.0.0-rc-45804af1-20241021)(zod@3.24.2) + specifier: 4.2.0 + version: 4.2.0(react@19.0.0-rc-45804af1-20241021)(zod@3.24.2) bcrypt-ts: specifier: ^5.0.2 version: 5.0.3 @@ -261,73 +258,46 @@ importers: packages: - '@ai-sdk/fal@0.0.11': - resolution: {integrity: sha512-lVjG5HTxNZ3l40yI1uJYe2cHmDdk1cuiQff0KQz/A5c6BpwSlyKUVWvb8HxBJETzWRBNDWK1dbWcXVTm+WK5aw==} + '@ai-sdk/groq@1.2.0': + resolution: {integrity: sha512-hF62hBUTpOMyqum+w9mozh/KIgxueKowM9cRo38n5PqpXYUexDEKcW8HxOAXWwmbAZcE4l+FBSTu/xk4lBZzZQ==} engines: {node: '>=18'} peerDependencies: zod: ^3.0.0 - '@ai-sdk/groq@1.1.16': - resolution: {integrity: sha512-25MacYnuswATGvvBSwj5uRLdkvJU0SlNweib6BmYd6+0F2mHRZWiYIiVIyuUIeRBmt6ybSNTaRKYz2Hh7whRcg==} + '@ai-sdk/openai-compatible@0.2.0': + resolution: {integrity: sha512-8rTOKGf791wlmIM4XKjzN/KqOsO50wUoz9PF9B6ZC4p3UZdLTx9f+pBk+Lo85A68JeK2uRkPAuXjr+8aBpqCuA==} engines: {node: '>=18'} peerDependencies: zod: ^3.0.0 - '@ai-sdk/openai-compatible@0.1.15': - resolution: {integrity: sha512-iuylARLylTkaVYXKdgA1GeGU2TwANaJ3RlhJqmN0cVO5uEt3qVKvedrzR3jrQIyy9hu3gngsiXfFBMW2UQ7Ntg==} + '@ai-sdk/provider-utils@2.2.0': + resolution: {integrity: sha512-RX5BnDSqudjvZjwwpROcxVQElyX7rUn/xImBgaZLXekSGqq8f7/tefqDcQiRbDZjuCd4CVIfhrK8y/Pta8cPfQ==} engines: {node: '>=18'} peerDependencies: - zod: ^3.0.0 + zod: ^3.23.8 - '@ai-sdk/provider-utils@2.1.13': - resolution: {integrity: sha512-kLjqsfOdONr6DGcGEntFYM1niXz1H05vyZNf9OAzK+KKKc64izyP4/q/9HX7W4+6g8hm6BnmKxu8vkr6FSOqDg==} - engines: {node: '>=18'} - peerDependencies: - zod: ^3.0.0 - peerDependenciesMeta: - zod: - optional: true - - '@ai-sdk/provider-utils@2.1.15': - resolution: {integrity: sha512-ndMVtDm2xS86t45CJZSfyl7UblZFewRB8gZkXQHeNi7BhjCYkhE+XQMwfDl6UOAO7kaV60IC1R4JLDWxWiiHug==} - engines: {node: '>=18'} - peerDependencies: - zod: ^3.0.0 - peerDependenciesMeta: - zod: - optional: true - - '@ai-sdk/provider@1.0.11': - resolution: {integrity: sha512-CPyImHGiT3svyfmvPvAFTianZzWFtm0qK82XjwlQIA1C3IQ2iku/PMQXi7aFyrX0TyMh3VTkJPB03tjU2VXVrw==} + '@ai-sdk/provider@1.1.0': + resolution: {integrity: sha512-0M+qjp+clUD0R1E5eWQFhxEvWLNaOtGQRUaBn8CUABnSKredagq92hUS9VjOzGsTm37xLfpaxl97AVtbeOsHew==} engines: {node: '>=18'} - '@ai-sdk/provider@1.0.12': - resolution: {integrity: sha512-88Uu1zJIE1UUOVJWfE2ybJXgiH8JJ97QY9fbmplErEbfa/k/1kF+tWMVAAJolF2aOGmazQGyQLhv4I9CCuVACw==} - engines: {node: '>=18'} - - '@ai-sdk/react@1.1.25': - resolution: {integrity: sha512-uKrnxvJmiixAhndquDtac/q/wOnG9EFBkAsL6mpDRDflHQv34+xtkOKswDxyEzt1FaQFoqig0J44Lx0F3vGSkg==} + '@ai-sdk/react@1.2.0': + resolution: {integrity: sha512-fUTZkAsxOMz8ijjWf87E/GfYkgsH4V5MH2yuj7EXh5ShjWe/oayn2ZJkyoqFMr4Jf8m5kptDaivmbIenDq5OXA==} engines: {node: '>=18'} peerDependencies: react: ^18 || ^19 || ^19.0.0-rc - zod: ^3.0.0 + zod: ^3.23.8 peerDependenciesMeta: - react: - optional: true zod: optional: true - '@ai-sdk/ui-utils@1.1.21': - resolution: {integrity: sha512-z88UBEioQvJM6JsBoLmG6MOholc5pDkq1BBeb53NZ7JmMeWX4btCbrGmM4qs+gYLDnZokV/HB8C6zpS1jaJbAw==} + '@ai-sdk/ui-utils@1.2.0': + resolution: {integrity: sha512-0IZwCqe7E+GkCASTDPAbzMr+POm9GDzWvFd37FvzpOeKNeibmge/LZEkTDbGSa+3b928H8wPwOLsOXBWPLUPDQ==} engines: {node: '>=18'} peerDependencies: - zod: ^3.0.0 - peerDependenciesMeta: - zod: - optional: true + zod: ^3.23.8 - '@ai-sdk/xai@1.1.15': - resolution: {integrity: sha512-Uuc6NC4xsNF5KyYivf/9egWEBNNZ0s3nnQ2klWLj0k9gu5h9fuGAto5thhp2Rd50cPMWzQVQ7R5zvYHmfiunWA==} + '@ai-sdk/xai@1.2.1': + resolution: {integrity: sha512-aVrucjm9ikb9blpkO0oo8nVPRRoA1SD+GvfRU69YgjbM3XVNK07nk/mEpq7xuEU2iD+7/T2Fkl2rjayS+Ee4Jg==} engines: {node: '>=18'} peerDependencies: zod: ^3.0.0 @@ -1682,17 +1652,15 @@ packages: engines: {node: '>=0.4.0'} hasBin: true - ai@4.1.66: - resolution: {integrity: sha512-2Ny3reUTpZJhRLMvhJK5pxJ8E15uQSXEyemgsmgX6C6rI81JPPhorPTj6J8xQqZ+BFWLgrKYn9CKpUWZiAVqHw==} + ai@4.2.0: + resolution: {integrity: sha512-3xJWzBZpBS3n/UY360IopufV5dpfgYoY08eCAV2A2m7CcyJxVOAQ4lXvBGSsB+mR+BYJ8Y/JOesFfc0+k4jz3A==} engines: {node: '>=18'} peerDependencies: react: ^18 || ^19 || ^19.0.0-rc - zod: ^3.0.0 + zod: ^3.23.8 peerDependenciesMeta: react: optional: true - zod: - optional: true ajv@6.12.6: resolution: {integrity: sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==} @@ -3898,73 +3866,52 @@ packages: snapshots: - '@ai-sdk/fal@0.0.11(zod@3.24.2)': + '@ai-sdk/groq@1.2.0(zod@3.24.2)': dependencies: - '@ai-sdk/provider': 1.0.12 - '@ai-sdk/provider-utils': 2.1.15(zod@3.24.2) + '@ai-sdk/provider': 1.1.0 + '@ai-sdk/provider-utils': 2.2.0(zod@3.24.2) zod: 3.24.2 - '@ai-sdk/groq@1.1.16(zod@3.24.2)': + '@ai-sdk/openai-compatible@0.2.0(zod@3.24.2)': dependencies: - '@ai-sdk/provider': 1.0.12 - '@ai-sdk/provider-utils': 2.1.15(zod@3.24.2) + '@ai-sdk/provider': 1.1.0 + '@ai-sdk/provider-utils': 2.2.0(zod@3.24.2) zod: 3.24.2 - '@ai-sdk/openai-compatible@0.1.15(zod@3.24.2)': + '@ai-sdk/provider-utils@2.2.0(zod@3.24.2)': dependencies: - '@ai-sdk/provider': 1.0.11 - '@ai-sdk/provider-utils': 2.1.13(zod@3.24.2) - zod: 3.24.2 - - '@ai-sdk/provider-utils@2.1.13(zod@3.24.2)': - dependencies: - '@ai-sdk/provider': 1.0.11 + '@ai-sdk/provider': 1.1.0 eventsource-parser: 3.0.0 nanoid: 3.3.9 secure-json-parse: 2.7.0 - optionalDependencies: zod: 3.24.2 - '@ai-sdk/provider-utils@2.1.15(zod@3.24.2)': - dependencies: - '@ai-sdk/provider': 1.0.12 - eventsource-parser: 3.0.0 - nanoid: 3.3.9 - secure-json-parse: 2.7.0 - optionalDependencies: - zod: 3.24.2 - - '@ai-sdk/provider@1.0.11': + '@ai-sdk/provider@1.1.0': dependencies: json-schema: 0.4.0 - '@ai-sdk/provider@1.0.12': + '@ai-sdk/react@1.2.0(react@19.0.0-rc-45804af1-20241021)(zod@3.24.2)': dependencies: - json-schema: 0.4.0 - - '@ai-sdk/react@1.1.25(react@19.0.0-rc-45804af1-20241021)(zod@3.24.2)': - dependencies: - '@ai-sdk/provider-utils': 2.1.15(zod@3.24.2) - '@ai-sdk/ui-utils': 1.1.21(zod@3.24.2) + '@ai-sdk/provider-utils': 2.2.0(zod@3.24.2) + '@ai-sdk/ui-utils': 1.2.0(zod@3.24.2) + react: 19.0.0-rc-45804af1-20241021 swr: 2.3.3(react@19.0.0-rc-45804af1-20241021) throttleit: 2.1.0 optionalDependencies: - react: 19.0.0-rc-45804af1-20241021 zod: 3.24.2 - '@ai-sdk/ui-utils@1.1.21(zod@3.24.2)': + '@ai-sdk/ui-utils@1.2.0(zod@3.24.2)': dependencies: - '@ai-sdk/provider': 1.0.12 - '@ai-sdk/provider-utils': 2.1.15(zod@3.24.2) + '@ai-sdk/provider': 1.1.0 + '@ai-sdk/provider-utils': 2.2.0(zod@3.24.2) + zod: 3.24.2 zod-to-json-schema: 3.24.3(zod@3.24.2) - optionalDependencies: - zod: 3.24.2 - '@ai-sdk/xai@1.1.15(zod@3.24.2)': + '@ai-sdk/xai@1.2.1(zod@3.24.2)': dependencies: - '@ai-sdk/openai-compatible': 0.1.15(zod@3.24.2) - '@ai-sdk/provider': 1.0.11 - '@ai-sdk/provider-utils': 2.1.13(zod@3.24.2) + '@ai-sdk/openai-compatible': 0.2.0(zod@3.24.2) + '@ai-sdk/provider': 1.1.0 + '@ai-sdk/provider-utils': 2.2.0(zod@3.24.2) zod: 3.24.2 '@alloc/quick-lru@5.2.0': {} @@ -5063,18 +5010,18 @@ snapshots: acorn@8.14.1: {} - ai@4.1.66(react@19.0.0-rc-45804af1-20241021)(zod@3.24.2): + ai@4.2.0(react@19.0.0-rc-45804af1-20241021)(zod@3.24.2): dependencies: - '@ai-sdk/provider': 1.0.12 - '@ai-sdk/provider-utils': 2.1.15(zod@3.24.2) - '@ai-sdk/react': 1.1.25(react@19.0.0-rc-45804af1-20241021)(zod@3.24.2) - '@ai-sdk/ui-utils': 1.1.21(zod@3.24.2) + '@ai-sdk/provider': 1.1.0 + '@ai-sdk/provider-utils': 2.2.0(zod@3.24.2) + '@ai-sdk/react': 1.2.0(react@19.0.0-rc-45804af1-20241021)(zod@3.24.2) + '@ai-sdk/ui-utils': 1.2.0(zod@3.24.2) '@opentelemetry/api': 1.9.0 eventsource-parser: 3.0.0 jsondiffpatch: 0.6.0 + zod: 3.24.2 optionalDependencies: react: 19.0.0-rc-45804af1-20241021 - zod: 3.24.2 ajv@6.12.6: dependencies: