integrate ai gateway and improve ui components (vercel#1145)

# Conflicts:
#	app/(chat)/api/chat/route.ts
#	lib/ai/providers.ts
#	package.json
#	pnpm-lock.yaml

Author: dancer

.env.example

@@ -4,8 +4,10 @@ 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=****
+# AI Gateway API Key (required for non-Vercel deployments)
+# For Vercel deployments, OIDC tokens are used automatically
+AI_GATEWAY_API_KEY=****
+
 
 # Instructions to create a Vercel Blob Store here: https://vercel.com/docs/storage/vercel-blob
 BLOB_READ_WRITE_TOKEN=****

.github/workflows/lint.yml

@@ -9,17 +9,18 @@ jobs:
       matrix:
         node-version: [20]
     steps:
-    - uses: actions/checkout@v4
-    - name: Install pnpm
-      uses: pnpm/action-setup@v4
-      with:
-        version: 9.12.3
-    - name: Use Node.js ${{ matrix.node-version }}
-      uses: actions/setup-node@v4
-      with:
-        node-version: ${{ matrix.node-version }}
-        cache: 'pnpm'
-    - name: Install dependencies
-      run: pnpm install
-    - name: Run lint
-      run: pnpm lint
+      - uses: actions/checkout@v4
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 9.12.3
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ matrix.node-version }}
+          cache: "pnpm"
+      - name: Install dependencies
+        run: pnpm install
+      - name: Run lint
+        run: pnpm lint
+1

README.md

@@ -39,7 +39,15 @@
 
 ## Model Providers
 
-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.
+This template uses the [Vercel AI Gateway](https://vercel.com/docs/ai-gateway) to access multiple AI models through a unified interface. The default configuration includes [xAI](https://x.ai) models (`grok-2-vision-1212`, `grok-3-mini-beta`) routed through the gateway.
+
+### AI Gateway Authentication
+
+**For Vercel deployments**: Authentication is handled automatically via OIDC tokens.
+
+**For non-Vercel deployments**: You need to provide an AI Gateway API key by setting the `AI_GATEWAY_API_KEY` environment variable in your `.env.local` file.
+
+With the [AI SDK](https://ai-sdk.dev/docs/introduction), you can also switch to direct LLM providers like [OpenAI](https://openai.com), [Anthropic](https://anthropic.com), [Cohere](https://cohere.com/), and [many more](https://ai-sdk.dev/providers/ai-sdk-providers) with just a few lines of code.
 
 See `docs/berget-ai.md` for details about using Berget AI models.
 

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

@@ -167,18 +167,18 @@ export async function POST(request: Request) {
           stopWhen: stepCountIs(5),
           experimental_activeTools:
             selectedChatModel === 'chat-model-reasoning' ||
-            selectedChatModel === 'deepseek-r1' ||
-            selectedChatModel === 'openai-gpt-oss-120b'
+              selectedChatModel === 'deepseek-r1' ||
+              selectedChatModel === 'openai-gpt-oss-120b'
               ? []
               : [
-                  'getWeather',
-                  'searchWeb',
-                  'scrapeUrl',
-                  'createDocument',
-                  'updateDocument',
-                  'requestSuggestions',
-                  'generateImageTool',
-                ],
+                'getWeather',
+                'searchWeb',
+                'scrapeUrl',
+                'createDocument',
+                'updateDocument',
+                'requestSuggestions',
+                'generateImageTool',
+              ],
           experimental_transform: smoothStream({ chunking: 'word' }),
           tools: {
             getWeather,
@@ -240,16 +240,9 @@ export async function POST(request: Request) {
     if (error instanceof ChatSDKError) {
       return error.toResponse();
     }
-    // Return a proper error response for other errors
-    return new Response(
-      JSON.stringify({
-        error: error instanceof Error ? error.message : 'An error occurred',
-      }),
-      {
-        status: 500,
-        headers: { 'Content-Type': 'application/json' },
-      },
-    );
+
+    console.error('Unhandled error in chat API:', error);
+    return new ChatSDKError('offline:chat').toResponse();
   }
 }
 

artifacts/image/server.ts

@@ -42,7 +42,7 @@ function PureArtifactMessages({
   return (
     <div
       ref={messagesContainerRef}
-      className="flex flex-col gap-4 h-full items-center overflow-y-scroll px-4 pt-20"
+      className="flex overflow-y-scroll flex-col gap-4 items-center px-4 pt-20 h-full"
     >
       {messages.map((message, index) => (
         <PreviewMessage
@@ -61,6 +61,7 @@ function PureArtifactMessages({
           requiresScrollPadding={
             hasSentMessage && index === messages.length - 1
           }
+          isArtifactVisible={true}
         />
       ))}
 

components/artifact-messages.tsx

@@ -67,6 +67,7 @@ function PureArtifact({
   votes,
   isReadonly,
   selectedVisibilityType,
+  selectedModelId,
 }: {
   chatId: string;
   input: string;
@@ -82,6 +83,7 @@ function PureArtifact({
   regenerate: UseChatHelpers<ChatMessage>['regenerate'];
   isReadonly: boolean;
   selectedVisibilityType: VisibilityType;
+  selectedModelId: string;
 }) {
   const { artifact, setArtifact, metadata, setMetadata } = useArtifact();
 
@@ -286,9 +288,9 @@ function PureArtifact({
                 x: 0,
                 scale: 1,
                 transition: {
-                  delay: 0.2,
+                  delay: 0.1,
                   type: 'spring',
-                  stiffness: 200,
+                  stiffness: 300,
                   damping: 30,
                 },
               }}
@@ -336,6 +338,7 @@ function PureArtifact({
                     className="bg-background dark:bg-muted"
                     setMessages={setMessages}
                     selectedVisibilityType={selectedVisibilityType}
+                    selectedModelId={selectedModelId}
                   />
                 </div>
               </div>
@@ -375,9 +378,9 @@ function PureArtifact({
                     transition: {
                       delay: 0,
                       type: 'spring',
-                      stiffness: 200,
+                      stiffness: 300,
                       damping: 30,
-                      duration: 5000,
+                      duration: 0.8,
                     },
                   }
                 : {
@@ -392,9 +395,9 @@ function PureArtifact({
                     transition: {
                       delay: 0,
                       type: 'spring',
-                      stiffness: 200,
+                      stiffness: 300,
                       damping: 30,
-                      duration: 5000,
+                      duration: 0.8,
                     },
                   }
             }

components/artifact.tsx

@@ -4,7 +4,6 @@ import Link from 'next/link';
 import { useRouter } from 'next/navigation';
 import { useWindowSize } from 'usehooks-ts';
 
-import { ModelSelector } from '@/components/model-selector';
 import { SidebarToggle } from '@/components/sidebar-toggle';
 import { Button } from '@/components/ui/button';
 import { PlusIcon, VercelIcon } from './icons';
@@ -16,13 +15,11 @@ import type { Session } from 'next-auth';
 
 function PureChatHeader({
   chatId,
-  selectedModelId,
   selectedVisibilityType,
   isReadonly,
   session,
 }: {
   chatId: string;
-  selectedModelId: string;
   selectedVisibilityType: VisibilityType;
   isReadonly: boolean;
   session: Session;
@@ -55,24 +52,16 @@ function PureChatHeader({
         </Tooltip>
       )}
 
-      {!isReadonly && (
-        <ModelSelector
-          session={session}
-          selectedModelId={selectedModelId}
-          className="order-1 md:order-2"
-        />
-      )}
-
       {!isReadonly && (
         <VisibilitySelector
           chatId={chatId}
           selectedVisibilityType={selectedVisibilityType}
-          className="order-1 md:order-3"
+          className="order-1 md:order-2"
         />
       )}
 
       <Button
-        className="bg-zinc-900 dark:bg-zinc-100 hover:bg-zinc-800 dark:hover:bg-zinc-200 text-zinc-50 dark:text-zinc-900 hidden md:flex py-1.5 px-2 h-fit md:h-[34px] order-4 md:ml-auto"
+        className="bg-zinc-900 dark:bg-zinc-100 hover:bg-zinc-800 dark:hover:bg-zinc-200 text-zinc-50 dark:text-zinc-900 hidden md:flex py-1.5 px-2 h-fit md:h-[34px] order-3 md:ml-auto"
         asChild
       >
         <Link
@@ -88,5 +77,9 @@ function PureChatHeader({
 }
 
 export const ChatHeader = memo(PureChatHeader, (prevProps, nextProps) => {
-  return prevProps.selectedModelId === nextProps.selectedModelId;
+  return (
+    prevProps.chatId === nextProps.chatId &&
+    prevProps.selectedVisibilityType === nextProps.selectedVisibilityType &&
+    prevProps.isReadonly === nextProps.isReadonly
+  );
 });

components/chat-header.tsx

@@ -6,7 +6,7 @@ import { useEffect, useState } from 'react';
 import useSWR, { useSWRConfig } from 'swr';
 import { ChatHeader } from '@/components/chat-header';
 import type { Vote } from '@/lib/db/schema';
-import { fetcher, fetchWithErrorHandlers, generateUUID } from '@/lib/utils';
+import { fetcher, fetchWithErrorHandlers, generateUUID, cn } from '@/lib/utils';
 import { Artifact } from './artifact';
 import { MultimodalInput } from './multimodal-input';
 import { Messages } from './messages';
@@ -131,7 +131,6 @@ export function Chat({
       <div className="flex flex-col min-w-0 h-dvh bg-background">
         <ChatHeader
           chatId={id}
-          selectedModelId={initialChatModel}
           selectedVisibilityType={initialVisibilityType}
           isReadonly={isReadonly}
           session={session}
@@ -162,6 +161,7 @@ export function Chat({
               setMessages={setMessages}
               sendMessage={sendMessage}
               selectedVisibilityType={visibilityType}
+              selectedModelId={initialChatModel}
             />
           )}
         </div>
@@ -182,6 +182,7 @@ export function Chat({
         votes={votes}
         isReadonly={isReadonly}
         selectedVisibilityType={visibilityType}
+        selectedModelId={initialChatModel}
       />
     </>
   );

components/chat.tsx

@@ -54,6 +54,9 @@ export const CodeBlock = ({
             fontSize: '0.875rem',
             background: 'hsl(var(--background))',
             color: 'hsl(var(--foreground))',
+            overflowX: 'auto',
+            overflowWrap: 'break-word',
+            wordBreak: 'break-all',
           }}
           language={language}
           lineNumberStyle={{
@@ -77,6 +80,9 @@ export const CodeBlock = ({
             fontSize: '0.875rem',
             background: 'hsl(var(--background))',
             color: 'hsl(var(--foreground))',
+            overflowX: 'auto',
+            overflowWrap: 'break-word',
+            wordBreak: 'break-all',
           }}
           language={language}
           lineNumberStyle={{