├── .env.example ├── app ├── favicon.ico ├── page.tsx ├── layout.tsx ├── api │ └── chat │ │ └── route.ts └── globals.css ├── postcss.config.mjs ├── public ├── vercel.svg ├── window.svg ├── file.svg ├── globe.svg └── next.svg ├── next.config.ts ├── lib ├── utils.ts └── hooks │ └── use-scroll-to-bottom.tsx ├── instrumentation.ts ├── ai ├── tools.ts └── providers.ts ├── eslint.config.mjs ├── components.json ├── .gitignore ├── components ├── ui │ ├── sonner.tsx │ ├── label.tsx │ ├── textarea.tsx │ ├── input.tsx │ ├── button.tsx │ └── select.tsx ├── messages.tsx ├── project-overview.tsx ├── model-picker.tsx ├── deploy-button.tsx ├── suggested-prompts.tsx ├── chat.tsx ├── input.tsx ├── header.tsx ├── textarea.tsx ├── icons.tsx └── message.tsx ├── tsconfig.json ├── package.json └── README.md /.env.example: -------------------------------------------------------------------------------- 1 | XAI_API_KEY="" 2 | -------------------------------------------------------------------------------- /app/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vercel-labs/ai-sdk-starter-xai/HEAD/app/favicon.ico -------------------------------------------------------------------------------- /postcss.config.mjs: -------------------------------------------------------------------------------- 1 | const config = { 2 | plugins: ["@tailwindcss/postcss"], 3 | }; 4 | 5 | export default config; 6 | -------------------------------------------------------------------------------- /app/page.tsx: -------------------------------------------------------------------------------- 1 | import Chat from "@/components/chat"; 2 | 3 | export default function Page() { 4 | return ; 5 | } 6 | -------------------------------------------------------------------------------- /public/vercel.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /next.config.ts: -------------------------------------------------------------------------------- 1 | import type { NextConfig } from "next"; 2 | 3 | const nextConfig: NextConfig = { 4 | /* config options here */ 5 | }; 6 | 7 | export default nextConfig; 8 | -------------------------------------------------------------------------------- /lib/utils.ts: -------------------------------------------------------------------------------- 1 | import { clsx, type ClassValue } from "clsx" 2 | import { twMerge } from "tailwind-merge" 3 | 4 | export function cn(...inputs: ClassValue[]) { 5 | return twMerge(clsx(inputs)) 6 | } 7 | -------------------------------------------------------------------------------- /instrumentation.ts: -------------------------------------------------------------------------------- 1 | import { registerOTel } from '@vercel/otel' 2 | 3 | export function register() { 4 | registerOTel({ 5 | serviceName: 'next-app', 6 | instrumentations: [ 7 | { 8 | name: 'ai-instrumentation', 9 | include: [/^\/api\/ai/] 10 | } 11 | ] 12 | }) 13 | } -------------------------------------------------------------------------------- /public/window.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/file.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /ai/tools.ts: -------------------------------------------------------------------------------- 1 | import { tool } from "ai"; 2 | import { z } from "zod"; 3 | 4 | export const weatherTool = tool({ 5 | description: "Get the weather in a location", 6 | inputSchema: z.object({ 7 | location: z.string().describe("The location to get the weather for"), 8 | }), 9 | execute: async ({ location }) => ({ 10 | location, 11 | temperature: 72 + Math.floor(Math.random() * 21) - 10, 12 | }), 13 | }); 14 | -------------------------------------------------------------------------------- /eslint.config.mjs: -------------------------------------------------------------------------------- 1 | import { dirname } from "path"; 2 | import { fileURLToPath } from "url"; 3 | import { FlatCompat } from "@eslint/eslintrc"; 4 | 5 | const __filename = fileURLToPath(import.meta.url); 6 | const __dirname = dirname(__filename); 7 | 8 | const compat = new FlatCompat({ 9 | baseDirectory: __dirname, 10 | }); 11 | 12 | const eslintConfig = [ 13 | ...compat.extends("next/core-web-vitals", "next/typescript"), 14 | ]; 15 | 16 | export default eslintConfig; 17 | -------------------------------------------------------------------------------- /components.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://ui.shadcn.com/schema.json", 3 | "style": "new-york", 4 | "rsc": true, 5 | "tsx": true, 6 | "tailwind": { 7 | "config": "", 8 | "css": "app/globals.css", 9 | "baseColor": "zinc", 10 | "cssVariables": true, 11 | "prefix": "" 12 | }, 13 | "aliases": { 14 | "components": "@/components", 15 | "utils": "@/lib/utils", 16 | "ui": "@/components/ui", 17 | "lib": "@/lib", 18 | "hooks": "@/hooks" 19 | }, 20 | "iconLibrary": "lucide" 21 | } -------------------------------------------------------------------------------- /ai/providers.ts: -------------------------------------------------------------------------------- 1 | import { xai } from "@ai-sdk/xai"; 2 | import { customProvider } from "ai"; 3 | 4 | const languageModels = { 5 | "grok-4": xai("grok-4-latest"), 6 | "grok-2-1212": xai("grok-2-1212"), 7 | "grok-3": xai("grok-3-latest"), 8 | "grok-3-fast": xai("grok-3-fast-latest"), 9 | "grok-3-mini": xai("grok-3-mini-latest"), 10 | "grok-3-mini-fast": xai("grok-3-mini-fast-latest"), 11 | }; 12 | 13 | export const model = customProvider({ 14 | languageModels, 15 | }); 16 | 17 | export type modelID = keyof typeof languageModels; 18 | 19 | export const MODELS = Object.keys(languageModels); 20 | 21 | export const defaultModel: modelID = "grok-4"; 22 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.* 7 | .yarn/* 8 | !.yarn/patches 9 | !.yarn/plugins 10 | !.yarn/releases 11 | !.yarn/versions 12 | 13 | # testing 14 | /coverage 15 | 16 | # next.js 17 | /.next/ 18 | /out/ 19 | 20 | # production 21 | /build 22 | 23 | # misc 24 | .DS_Store 25 | *.pem 26 | 27 | # debug 28 | npm-debug.log* 29 | yarn-debug.log* 30 | yarn-error.log* 31 | .pnpm-debug.log* 32 | 33 | # env files (can opt-in for committing if needed) 34 | .env 35 | 36 | # vercel 37 | .vercel 38 | 39 | # typescript 40 | *.tsbuildinfo 41 | next-env.d.ts 42 | .env*.local 43 | -------------------------------------------------------------------------------- /components/ui/sonner.tsx: -------------------------------------------------------------------------------- 1 | "use client" 2 | 3 | import { useTheme } from "next-themes" 4 | import { Toaster as Sonner, ToasterProps } from "sonner" 5 | 6 | const Toaster = ({ ...props }: ToasterProps) => { 7 | const { theme = "system" } = useTheme() 8 | 9 | return ( 10 | 22 | ) 23 | } 24 | 25 | export { Toaster } 26 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ES2017", 4 | "lib": ["dom", "dom.iterable", "esnext"], 5 | "allowJs": true, 6 | "skipLibCheck": true, 7 | "strict": true, 8 | "noEmit": true, 9 | "esModuleInterop": true, 10 | "module": "esnext", 11 | "moduleResolution": "bundler", 12 | "resolveJsonModule": true, 13 | "isolatedModules": true, 14 | "jsx": "preserve", 15 | "incremental": true, 16 | "plugins": [ 17 | { 18 | "name": "next" 19 | } 20 | ], 21 | "paths": { 22 | "@/*": ["./*"] 23 | } 24 | }, 25 | "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"], 26 | "exclude": ["node_modules"] 27 | } 28 | -------------------------------------------------------------------------------- /components/ui/label.tsx: -------------------------------------------------------------------------------- 1 | "use client" 2 | 3 | import * as React from "react" 4 | import * as LabelPrimitive from "@radix-ui/react-label" 5 | 6 | import { cn } from "@/lib/utils" 7 | 8 | function Label({ 9 | className, 10 | ...props 11 | }: React.ComponentProps) { 12 | return ( 13 | 21 | ) 22 | } 23 | 24 | export { Label } 25 | -------------------------------------------------------------------------------- /components/ui/textarea.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react" 2 | 3 | import { cn } from "@/lib/utils" 4 | 5 | function Textarea({ className, ...props }: React.ComponentProps<"textarea">) { 6 | return ( 7 |

15 |   )
16 | }
17 | 
18 | export { Textarea }
19 |

--------------------------------------------------------------------------------
/lib/hooks/use-scroll-to-bottom.tsx:
--------------------------------------------------------------------------------
 1 | import { useEffect, useRef, type RefObject } from 'react';
 2 | 
 3 | export function useScrollToBottom(): [
 4 |   RefObject<HTMLDivElement>,
 5 |   RefObject<HTMLDivElement>,
 6 | ] {
 7 |   const containerRef = useRef<HTMLDivElement>(null);
 8 |   const endRef = useRef<HTMLDivElement>(null);
 9 | 
10 |   useEffect(() => {
11 |     const container = containerRef.current;
12 |     const end = endRef.current;
13 | 
14 |     if (container && end) {
15 |       const observer = new MutationObserver(() => {
16 |         end.scrollIntoView({ behavior: 'instant', block: 'end' });
17 |       });
18 | 
19 |       observer.observe(container, {
20 |         childList: true,
21 |         subtree: true,
22 |         attributes: true,
23 |         characterData: true,
24 |       });
25 | 
26 |       return () => observer.disconnect();
27 |     }
28 |   }, []);
29 | 
30 |   // @ts-expect-error error
31 |   return [containerRef, endRef];
32 | }

--------------------------------------------------------------------------------
/public/globe.svg:
--------------------------------------------------------------------------------
1 | <svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g clip-path="url(#a)"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.27 14.1a6.5 6.5 0 0 0 3.67-3.45q-1.24.21-2.7.34-.31 1.83-.97 3.1M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m.48-1.52a7 7 0 0 1-.96 0H7.5a4 4 0 0 1-.84-1.32q-.38-.89-.63-2.08a40 40 0 0 0 3.92 0q-.25 1.2-.63 2.08a4 4 0 0 1-.84 1.31zm2.94-4.76q1.66-.15 2.95-.43a7 7 0 0 0 0-2.58q-1.3-.27-2.95-.43a18 18 0 0 1 0 3.44m-1.27-3.54a17 17 0 0 1 0 3.64 39 39 0 0 1-4.3 0 17 17 0 0 1 0-3.64 39 39 0 0 1 4.3 0m1.1-1.17q1.45.13 2.69.34a6.5 6.5 0 0 0-3.67-3.44q.65 1.26.98 3.1M8.48 1.5l.01.02q.41.37.84 1.31.38.89.63 2.08a40 40 0 0 0-3.92 0q.25-1.2.63-2.08a4 4 0 0 1 .85-1.32 7 7 0 0 1 .96 0m-2.75.4a6.5 6.5 0 0 0-3.67 3.44 29 29 0 0 1 2.7-.34q.31-1.83.97-3.1M4.58 6.28q-1.66.16-2.95.43a7 7 0 0 0 0 2.58q1.3.27 2.95.43a18 18 0 0 1 0-3.44m.17 4.71q-1.45-.12-2.69-.34a6.5 6.5 0 0 0 3.67 3.44q-.65-1.27-.98-3.1" fill="#666"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg>

--------------------------------------------------------------------------------
/components/messages.tsx:
--------------------------------------------------------------------------------
 1 | import type { UIMessage as TMessage } from "ai";
 2 | import { Message } from "./message";
 3 | import { useScrollToBottom } from "@/lib/hooks/use-scroll-to-bottom";
 4 | 
 5 | export const Messages = ({
 6 |   messages,
 7 |   isLoading,
 8 |   status,
 9 | }: {
10 |   messages: TMessage[];
11 |   isLoading: boolean;
12 |   status: "error" | "submitted" | "streaming" | "ready";
13 | }) => {
14 |   const [containerRef, endRef] = useScrollToBottom();
15 |   return (
16 |     <div
17 |       className="flex-1 h-full space-y-4 overflow-y-auto py-8"
18 |       ref={containerRef}
19 |     >
20 |       <div className="max-w-xl mx-auto pt-8">
21 |         {messages.map((m, i) => (
22 |           <Message
23 |             key={i}
24 |             isLatestMessage={i === messages.length - 1}
25 |             isLoading={isLoading}
26 |             message={m}
27 |             status={status}
28 |           />
29 |         ))}
30 |         <div className="h-1" ref={endRef} />
31 |       </div>
32 |     </div>
33 |   );
34 | };
35 |

--------------------------------------------------------------------------------
/components/ui/input.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | 
 3 | import { cn } from "@/lib/utils"
 4 | 
 5 | function Input({ className, type, ...props }: React.ComponentProps<"input">) {
 6 |   return (
 7 |     <input
 8 |       type={type}
 9 |       data-slot="input"
10 |       className={cn(
11 |         "border-input file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
12 |         "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
13 |         "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
14 |         className
15 |       )}
16 |       {...props}
17 |     />
18 |   )
19 | }
20 | 
21 | export { Input }
22 |

--------------------------------------------------------------------------------
/components/project-overview.tsx:
--------------------------------------------------------------------------------
 1 | import NextLink from "next/link";
 2 | export const ProjectOverview = () => {
 3 |   return (
 4 |     <div className="flex flex-col items-center justify-end">
 5 |       <h1 className="text-3xl font-semibold mb-4">Vercel{" "}<span className="text-zinc-500">+</span>{" "}xAI Chatbot</h1>
 6 |       <p className="text-center">
 7 |         This starter project uses <Link href="https://x.ai">xAI</Link> with
 8 |         the <Link href="https://sdk.vercel.ai/docs">AI SDK</Link> via the{" "}
 9 |         <Link href="https://vercel.com/marketplace/xai">
10 |           Vercel Marketplace
11 |         </Link>
12 |         .
13 |       </p>
14 |     </div>
15 |   );
16 | };
17 | 
18 | const Link = ({
19 |   children,
20 |   href,
21 | }: {
22 |   children: React.ReactNode;
23 |   href: string;
24 | }) => {
25 |   return (
26 |     <NextLink
27 |       target="_blank"
28 |       className="text-blue-500 hover:text-blue-600 transition-colors duration-75"
29 |       href={href}
30 |     >
31 |       {children}
32 |     </NextLink>
33 |   );
34 | };
35 |

--------------------------------------------------------------------------------
/app/layout.tsx:
--------------------------------------------------------------------------------
 1 | import type { Metadata } from "next";
 2 | import { Geist, Geist_Mono } from "next/font/google";
 3 | import "./globals.css";
 4 | import { Toaster } from "@/components/ui/sonner";
 5 | import { Analytics } from "@vercel/analytics/next"
 6 | 
 7 | const geistSans = Geist({
 8 |   variable: "--font-geist-sans",
 9 |   subsets: ["latin"],
10 | });
11 | 
12 | const geistMono = Geist_Mono({
13 |   variable: "--font-geist-mono",
14 |   subsets: ["latin"],
15 | });
16 | 
17 | export const metadata: Metadata = {
18 |   title: "Vercel x xAI Chatbot",
19 |   description:
20 |     "This starter project uses xAI with the AI SDK via the Vercel Marketplace",
21 | };
22 | 
23 | export default function RootLayout({
24 |   children,
25 | }: Readonly<{
26 |   children: React.ReactNode;
27 | }>) {
28 |   return (
29 |     <html lang="en">
30 |       <body
31 |         className={`${geistSans.variable} ${geistMono.variable} antialiased`}
32 |       >
33 |         {children}
34 |         <Toaster />
35 |         <Analytics />
36 |       </body>
37 |     </html>
38 |   );
39 | }
40 |

--------------------------------------------------------------------------------
/components/model-picker.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | import { MODELS, type modelID } from "@/ai/providers";
 3 | import {
 4 |   Select,
 5 |   SelectContent,
 6 |   SelectGroup,
 7 |   SelectItem,
 8 |   SelectTrigger,
 9 |   SelectValue,
10 | } from "./ui/select";
11 | 
12 | interface ModelPickerProps {
13 |   selectedModel: modelID;
14 |   setSelectedModel: (model: modelID) => void;
15 | }
16 | 
17 | export const ModelPicker = ({
18 |   selectedModel,
19 |   setSelectedModel,
20 | }: ModelPickerProps) => {
21 |   return (
22 |     <div className="absolute bottom-2 left-2 flex flex-col gap-2">
23 |       <Select value={selectedModel} onValueChange={setSelectedModel}>
24 |         <SelectTrigger className="">
25 |           <SelectValue placeholder="Select a model" />
26 |         </SelectTrigger>
27 |         <SelectContent>
28 |           <SelectGroup>
29 |             {MODELS.map((modelId) => (
30 |               <SelectItem key={modelId} value={modelId}>
31 |                 {modelId}
32 |               </SelectItem>
33 |             ))}
34 |           </SelectGroup>
35 |         </SelectContent>
36 |       </Select>
37 |     </div>
38 |   );
39 | };
40 |

--------------------------------------------------------------------------------
/app/api/chat/route.ts:
--------------------------------------------------------------------------------
 1 | import { model, type modelID } from "@/ai/providers";
 2 | import { weatherTool } from "@/ai/tools";
 3 | import { convertToModelMessages, stepCountIs, streamText, UIMessage } from "ai";
 4 | 
 5 | // Allow streaming responses up to 30 seconds
 6 | export const maxDuration = 30;
 7 | 
 8 | export async function POST(req: Request) {
 9 |   const {
10 |     messages,
11 |     selectedModel,
12 |   }: { messages: UIMessage[]; selectedModel: modelID } = await req.json();
13 | 
14 |   const result = streamText({
15 |     model: model.languageModel(selectedModel),
16 |     system: "You are a helpful assistant.",
17 |     messages: convertToModelMessages(messages),
18 |     stopWhen: stepCountIs(5), // enable multi-step agentic flow
19 |     tools: {
20 |       getWeather: weatherTool,
21 |     },
22 |     experimental_telemetry: {
23 |       isEnabled: false,
24 |     },
25 |   });
26 | 
27 |   return result.toUIMessageStreamResponse({
28 |     sendReasoning: true,
29 |     onError: (error) => {
30 |       if (error instanceof Error) {
31 |         if (error.message.includes("Rate limit")) {
32 |           return "Rate limit exceeded. Please try again later.";
33 |         }
34 |       }
35 |       console.error(error);
36 |       return "An error occurred.";
37 |     },
38 |   });
39 | }
40 |

--------------------------------------------------------------------------------
/components/deploy-button.tsx:
--------------------------------------------------------------------------------
 1 | import Link from "next/link";
 2 | 
 3 | export const DeployButton = () => (
 4 |   <Link
 5 |     href={`https://vercel.com/new/clone?project-name=Vercel+x+xAI+Chatbot&repository-name=ai-sdk-starter-xai&repository-url=https%3A%2F%2Fgithub.com%2Fvercel-labs%2Fai-sdk-starter-xai&demo-title=Vercel+x+xAI+Chatbot&demo-url=https%3A%2F%2Fai-sdk-starter-xai.labs.vercel.dev%2F&demo-description=A+simple+chatbot+application+built+with+Next.js+that+uses+xAI+via+the+AI+SDK+and+the+Vercel+Marketplace&products=%5B%7B%22type%22:%22integration%22,%22protocol%22:%22ai%22,%22productSlug%22:%22grok%22,%22integrationSlug%22:%22xai%22%7D%5D`}
 6 |     target="_blank"
 7 |     rel="noopener noreferrer"
 8 |     className="inline-flex items-center gap-2 ml-2 bg-black text-white text-sm px-3 py-1.5 rounded-md hover:bg-zinc-900 dark:bg-white dark:text-black dark:hover:bg-zinc-100"
 9 |   >
10 |     <svg
11 |       data-testid="geist-icon"
12 |       height={14}
13 |       strokeLinejoin="round"
14 |       viewBox="0 0 16 16"
15 |       width={14}
16 |       style={{ color: "currentcolor" }}
17 |     >
18 |       <path
19 |         fillRule="evenodd"
20 |         clipRule="evenodd"
21 |         d="M8 1L16 15H0L8 1Z"
22 |         fill="currentColor"
23 |       />
24 |     </svg>
25 |     Deploy
26 |   </Link>
27 | );
28 |

--------------------------------------------------------------------------------
/public/next.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>

--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "ai-sdk-starter",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "dev": "next dev --turbopack",
 7 |     "build": "next build --turbopack",
 8 |     "start": "next start",
 9 |     "lint": "next lint"
10 |   },
11 |   "dependencies": {
12 |     "@ai-sdk/react": "2.0.0-beta.25",
13 |     "@ai-sdk/xai": "2.0.0-beta.8",
14 |     "@opentelemetry/api-logs": "^0.200.0",
15 |     "@opentelemetry/instrumentation": "^0.200.0",
16 |     "@opentelemetry/sdk-logs": "^0.200.0",
17 |     "@radix-ui/react-label": "^2.1.3",
18 |     "@radix-ui/react-select": "^2.1.7",
19 |     "@radix-ui/react-slot": "^1.2.0",
20 |     "@vercel/analytics": "^1.5.0",
21 |     "@vercel/otel": "^1.11.0",
22 |     "ai": "5.0.0-beta.25",
23 |     "autoevals": "^0.0.127",
24 |     "braintrust": "^0.0.198",
25 |     "class-variance-authority": "^0.7.1",
26 |     "clsx": "^2.1.1",
27 |     "fast-deep-equal": "^3.1.3",
28 |     "lucide-react": "^0.488.0",
29 |     "motion": "^12.7.3",
30 |     "next": "^15.3.6",
31 |     "next-themes": "^0.4.6",
32 |     "react": "^19.1.0",
33 |     "react-dom": "^19.1.0",
34 |     "sonner": "^2.0.3",
35 |     "streamdown": "^1.6.7",
36 |     "tailwind-merge": "^3.2.0",
37 |     "tailwindcss-animate": "^1.0.7",
38 |     "zod": "^3.25.76"
39 |   },
40 |   "devDependencies": {
41 |     "@eslint/eslintrc": "^3.3.1",
42 |     "@tailwindcss/postcss": "^4.1.4",
43 |     "@types/node": "^22.14.1",
44 |     "@types/react": "^19.1.2",
45 |     "@types/react-dom": "^19.1.2",
46 |     "eslint": "^9.24.0",
47 |     "eslint-config-next": "15.3.0",
48 |     "tailwindcss": "^4.1.4",
49 |     "typescript": "^5.8.3"
50 |   }
51 | }
52 |

--------------------------------------------------------------------------------
/components/suggested-prompts.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import { motion } from "motion/react";
 4 | import { Button } from "./ui/button";
 5 | import { memo } from "react";
 6 | 
 7 | interface SuggestedPromptsProps {
 8 |   sendMessage: (input: string) => void;
 9 | }
10 | 
11 | function PureSuggestedPrompts({ sendMessage }: SuggestedPromptsProps) {
12 |   const suggestedActions = [
13 |     {
14 |       title: "What are the advantages",
15 |       label: "of using Next.js?",
16 |       action: "What are the advantages of using Next.js?",
17 |     },
18 |     {
19 |       title: "What is the weather",
20 |       label: "in San Francisco?",
21 |       action: "What is the weather in San Francisco?",
22 |     },
23 |   ];
24 | 
25 |   return (
26 |     <div
27 |       data-testid="suggested-actions"
28 |       className="grid sm:grid-cols-2 gap-2 w-full"
29 |     >
30 |       {suggestedActions.map((suggestedAction, index) => (
31 |         <motion.div
32 |           initial={{ opacity: 0, y: 20 }}
33 |           animate={{ opacity: 1, y: 0 }}
34 |           exit={{ opacity: 0, y: 20 }}
35 |           transition={{ delay: 0.05 * index }}
36 |           key={`suggested-action-${suggestedAction.title}-${index}`}
37 |           className={index > 1 ? "hidden sm:block" : "block"}
38 |         >
39 |           <Button
40 |             variant="ghost"
41 |             onClick={async () => {
42 |               sendMessage(suggestedAction.action);
43 |             }}
44 |             className="text-left border rounded-xl px-4 py-3.5 text-sm flex-1 gap-1 sm:flex-col w-full h-auto justify-start items-start"
45 |           >
46 |             <span className="font-medium">{suggestedAction.title}</span>
47 |             <span className="text-muted-foreground">
48 |               {suggestedAction.label}
49 |             </span>
50 |           </Button>
51 |         </motion.div>
52 |       ))}
53 |     </div>
54 |   );
55 | }
56 | 
57 | export const SuggestedPrompts = memo(PureSuggestedPrompts, () => true);
58 |

--------------------------------------------------------------------------------
/components/chat.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import { defaultModel, type modelID } from "@/ai/providers";
 4 | import { useChat } from "@ai-sdk/react";
 5 | import { useState } from "react";
 6 | import { Textarea } from "./textarea";
 7 | import { ProjectOverview } from "./project-overview";
 8 | import { Messages } from "./messages";
 9 | import { Header } from "./header";
10 | import { toast } from "sonner";
11 | 
12 | export default function Chat() {
13 |   const [input, setInput] = useState("");
14 |   const [selectedModel, setSelectedModel] = useState<modelID>(defaultModel);
15 |   const { sendMessage, messages, status, stop } = useChat({
16 |     onError: (error) => {
17 |       toast.error(
18 |         error.message.length > 0
19 |           ? error.message
20 |           : "An error occured, please try again later.",
21 |         { position: "top-center", richColors: true },
22 |       );
23 |     },
24 |   });
25 | 
26 |   const isLoading = status === "streaming" || status === "submitted";
27 | 
28 |   return (
29 |     <div className="h-dvh flex flex-col justify-center w-full stretch">
30 |       <Header />
31 |       {messages.length === 0 ? (
32 |         <div className="max-w-xl mx-auto w-full">
33 |           <ProjectOverview />
34 |         </div>
35 |       ) : (
36 |         <Messages messages={messages} isLoading={isLoading} status={status} />
37 |       )}
38 |       <form
39 |         onSubmit={(e) => {
40 |           e.preventDefault();
41 |           sendMessage({ text: input }, { body: { selectedModel } });
42 |           setInput("");
43 |         }}
44 |         className="pb-8 bg-white dark:bg-black w-full max-w-xl mx-auto px-4 sm:px-0"
45 |       >
46 |         <Textarea
47 |           selectedModel={selectedModel}
48 |           setSelectedModel={setSelectedModel}
49 |           handleInputChange={(e) => setInput(e.currentTarget.value)}
50 |           input={input}
51 |           isLoading={isLoading}
52 |           status={status}
53 |           stop={stop}
54 |         />
55 |       </form>
56 |     </div>
57 |   );
58 | }
59 |

--------------------------------------------------------------------------------
/components/input.tsx:
--------------------------------------------------------------------------------
 1 | import { ArrowUp } from "lucide-react";
 2 | import { Input as ShadcnInput } from "./ui/input";
 3 | 
 4 | interface InputProps {
 5 |   input: string;
 6 |   handleInputChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
 7 |   isLoading: boolean;
 8 |   status: string;
 9 |   stop: () => void;
10 | }
11 | 
12 | export const Input = ({
13 |   input,
14 |   handleInputChange,
15 |   isLoading,
16 |   status,
17 |   stop,
18 | }: InputProps) => {
19 |   return (
20 |     <div className="relative w-full">
21 |       <ShadcnInput
22 |         className="bg-secondary py-6 w-full rounded-xl pr-12"
23 |         value={input}
24 |         autoFocus
25 |         placeholder={"Say something..."}
26 |         onChange={handleInputChange}
27 |       />
28 |       {status === "streaming" || status === "submitted" ? (
29 |         <button
30 |           type="button"
31 |           onClick={stop}
32 |           className="cursor-pointer absolute right-2 top-1/2 -translate-y-1/2 rounded-full p-2 bg-black hover:bg-zinc-800 disabled:bg-zinc-300 disabled:cursor-not-allowed transition-colors"
33 |         >
34 |           <div className="animate-spin h-4 w-4">
35 |             <svg className="h-4 w-4 text-white" viewBox="0 0 24 24">
36 |               <circle
37 |                 className="opacity-25"
38 |                 cx="12"
39 |                 cy="12"
40 |                 r="10"
41 |                 stroke="currentColor"
42 |                 strokeWidth="4"
43 |                 fill="none"
44 |               />
45 |               <path
46 |                 className="opacity-75"
47 |                 fill="currentColor"
48 |                 d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
49 |               />
50 |             </svg>
51 |           </div>
52 |         </button>
53 |       ) : (
54 |         <button
55 |           type="submit"
56 |           disabled={isLoading || !input.trim()}
57 |           className="absolute right-2 top-1/2 -translate-y-1/2 rounded-full p-2 bg-black hover:bg-zinc-800 disabled:bg-zinc-300 disabled:cursor-not-allowed transition-colors"
58 |         >
59 |           <ArrowUp className="h-4 w-4 text-white" />
60 |         </button>
61 |       )}
62 |     </div>
63 |   );
64 | };
65 |

--------------------------------------------------------------------------------
/components/ui/button.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | import { Slot } from "@radix-ui/react-slot"
 3 | import { cva, type VariantProps } from "class-variance-authority"
 4 | 
 5 | import { cn } from "@/lib/utils"
 6 | 
 7 | const buttonVariants = cva(
 8 |   "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-[color,box-shadow] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
 9 |   {
10 |     variants: {
11 |       variant: {
12 |         default:
13 |           "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
14 |         destructive:
15 |           "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40",
16 |         outline:
17 |           "border border-input bg-background shadow-xs hover:bg-accent hover:text-accent-foreground",
18 |         secondary:
19 |           "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
20 |         ghost: "hover:bg-accent hover:text-accent-foreground",
21 |         link: "text-primary underline-offset-4 hover:underline",
22 |       },
23 |       size: {
24 |         default: "h-9 px-4 py-2 has-[>svg]:px-3",
25 |         sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
26 |         lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
27 |         icon: "size-9",
28 |       },
29 |     },
30 |     defaultVariants: {
31 |       variant: "default",
32 |       size: "default",
33 |     },
34 |   }
35 | )
36 | 
37 | function Button({
38 |   className,
39 |   variant,
40 |   size,
41 |   asChild = false,
42 |   ...props
43 | }: React.ComponentProps<"button"> &
44 |   VariantProps<typeof buttonVariants> & {
45 |     asChild?: boolean
46 |   }) {
47 |   const Comp = asChild ? Slot : "button"
48 | 
49 |   return (
50 |     <Comp
51 |       data-slot="button"
52 |       className={cn(buttonVariants({ variant, size, className }))}
53 |       {...props}
54 |     />
55 |   )
56 | }
57 | 
58 | export { Button, buttonVariants }
59 |

--------------------------------------------------------------------------------
/components/header.tsx:
--------------------------------------------------------------------------------
 1 | import Link from "next/link";
 2 | import { DeployButton } from "./deploy-button";
 3 | import { XAiIcon } from "./icons";
 4 | 
 5 | export const Header = () => {
 6 |   return (
 7 |     <div className="fixed right-0 left-0 w-full top-0 bg-white dark:bg-zinc-950">
 8 |       <div className="flex justify-between items-center p-4">
 9 |         <div className="flex flex-row items-center gap-2 shrink-0 ">
10 |           <span className="jsx-e3e12cc6f9ad5a71 flex flex-row items-center gap-2 home-links">
11 |             <Link
12 |               className="text-zinc-800 dark:text-zinc-100 -translate-y-[.5px]"
13 |               rel="noopener"
14 |               target="_blank"
15 |               href="https://vercel.com/"
16 |             >
17 |               <svg
18 |                 data-testid="geist-icon"
19 |                 height={18}
20 |                 strokeLinejoin="round"
21 |                 viewBox="0 0 16 16"
22 |                 width={18}
23 |                 style={{ color: "currentcolor" }}
24 |               >
25 |                 <title>Vercel Logo</title>
26 |                 <path
27 |                   fillRule="evenodd"
28 |                   clipRule="evenodd"
29 |                   d="M8 1L16 15H0L8 1Z"
30 |                   fill="currentColor"
31 |                 />
32 |               </svg>
33 |             </Link>
34 |             <div className="jsx-e3e12cc6f9ad5a71 w-4 text-lg text-center text-zinc-300 dark:text-zinc-600">
35 |               <svg
36 |                 data-testid="geist-icon"
37 |                 height={16}
38 |                 strokeLinejoin="round"
39 |                 viewBox="0 0 16 16"
40 |                 width={16}
41 |                 style={{ color: "currentcolor" }}
42 |               >
43 |                 <title>Separator</title>
44 |                 <path
45 |                   fillRule="evenodd"
46 |                   clipRule="evenodd"
47 |                   d="M4.01526 15.3939L4.3107 14.7046L10.3107 0.704556L10.6061 0.0151978L11.9849 0.606077L11.6894 1.29544L5.68942 15.2954L5.39398 15.9848L4.01526 15.3939Z"
48 |                   fill="currentColor"
49 |                 />
50 |               </svg>
51 |             </div>
52 |             <div className="jsx-e3e12cc6f9ad5a71 flex flex-row items-center gap-4">
53 |               <Link
54 |                 className="flex flex-row items-end gap-2"
55 |                 target="_blank"
56 |                 href="https://x.ai"
57 |               >
58 |                 <XAiIcon size={18} />
59 |               </Link>
60 |             </div>
61 |           </span>
62 |         </div>
63 |         <div className="flex flex-row items-center gap-2 shrink-0">
64 |           <DeployButton />
65 |         </div>
66 |       </div>
67 |     </div>
68 |   );
69 | };
70 |

--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | <a href="https://ai-sdk-starter-xai.vercel.app">
 2 |   <h1 align="center">Vercel x xAI Chatbot</h1>
 3 | </a>
 4 | 
 5 | <p align="center">
 6 |   An open-source AI chatbot app template built with Next.js, the AI SDK by Vercel, and xAI.
 7 | </p>
 8 | 
 9 | <p align="center">
10 |   <a href="#features"><strong>Features</strong></a> ·
11 |   <a href="#deploy-your-own"><strong>Deploy Your Own</strong></a> ·
12 |   <a href="#running-locally"><strong>Running Locally</strong></a> ·
13 |   <a href="#authors"><strong>Authors</strong></a>
14 | </p>
15 | <br/>
16 | 
17 | ## Features
18 | 
19 | - Streaming text responses powered by the [AI SDK by Vercel](https://sdk.vercel.ai/docs), allowing multiple AI providers to be used interchangeably with just a few lines of code.
20 | - Built-in tool integration for extending AI capabilities (demonstrated with a weather tool example).
21 | - Reasoning model support.
22 | - [shadcn/ui](https://ui.shadcn.com/) components for a modern, responsive UI powered by [Tailwind CSS](https://tailwindcss.com).
23 | - Built with the latest [Next.js](https://nextjs.org) App Router.
24 | 
25 | ## Deploy Your Own
26 | 
27 | You can deploy your own version to Vercel by clicking the button below:
28 | 
29 | [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?project-name=Vercel+x+xAI+Chatbot&repository-name=ai-sdk-starter-xai&repository-url=https%3A%2F%2Fgithub.com%2Fvercel-labs%2Fai-sdk-starter-xai&demo-title=Vercel+x+xAI+Chatbot&demo-url=https%3A%2F%2Fai-sdk-starter-xai.labs.vercel.dev%2F&demo-description=A+simple+chatbot+application+built+with+Next.js+that+uses+xAI+via+the+AI+SDK+and+the+Vercel+Marketplace&products=[{%22type%22:%22integration%22,%22protocol%22:%22ai%22,%22productSlug%22:%22grok%22,%22integrationSlug%22:%22xai%22}])
30 | 
31 | ## Running Locally
32 | 
33 | 1. Clone the repository and install dependencies:
34 | 
35 |    ```bash
36 |    npm install
37 |    # or
38 |    yarn install
39 |    # or
40 |    pnpm install
41 |    ```
42 | 
43 | 2. Install the [Vercel CLI](https://vercel.com/docs/cli):
44 | 
45 |    ```bash
46 |    npm i -g vercel
47 |    # or
48 |    yarn global add vercel
49 |    # or
50 |    pnpm install -g vercel
51 |    ```
52 | 
53 |    Once installed, link your local project to your Vercel project:
54 | 
55 |    ```bash
56 |    vercel link
57 |    ```
58 | 
59 |    After linking, pull your environment variables:
60 | 
61 |    ```bash
62 |    vercel env pull
63 |    ```
64 | 
65 |    This will create a `.env.local` file with all the necessary environment variables.
66 | 
67 | 3. Run the development server:
68 | 
69 |    ```bash
70 |    npm run dev
71 |    # or
72 |    yarn dev
73 |    # or
74 |    pnpm dev
75 |    ```
76 | 
77 | 4. Open [http://localhost:3000](http://localhost:3000) to view your new AI chatbot application.
78 | 
79 | ## Authors
80 | 
81 | This repository is maintained by the [Vercel](https://vercel.com) team and community contributors.
82 | 
83 | Contributions are welcome! Feel free to open issues or submit pull requests to enhance functionality or fix bugs.
84 |

--------------------------------------------------------------------------------
/components/textarea.tsx:
--------------------------------------------------------------------------------
 1 | import { modelID } from "@/ai/providers";
 2 | import { Textarea as ShadcnTextarea } from "@/components/ui/textarea";
 3 | import { ArrowUp } from "lucide-react";
 4 | import { ModelPicker } from "./model-picker";
 5 | 
 6 | interface InputProps {
 7 |   input: string;
 8 |   handleInputChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
 9 |   isLoading: boolean;
10 |   status: string;
11 |   stop: () => void;
12 |   selectedModel: modelID;
13 |   setSelectedModel: (model: modelID) => void;
14 | }
15 | 
16 | export const Textarea = ({
17 |   input,
18 |   handleInputChange,
19 |   isLoading,
20 |   status,
21 |   stop,
22 |   selectedModel,
23 |   setSelectedModel,
24 | }: InputProps) => {
25 |   return (
26 |     <div className="relative w-full pt-4">
27 |       <ShadcnTextarea
28 |         className="resize-none bg-secondary w-full rounded-2xl pr-12 pt-4 pb-16"
29 |         value={input}
30 |         autoFocus
31 |         placeholder={"Say something..."}
32 |         // @ts-expect-error err
33 |         onChange={handleInputChange}
34 |         onKeyDown={(e) => {
35 |           if (e.key === "Enter" && !e.shiftKey) {
36 |             e.preventDefault();
37 |             if (input.trim() && !isLoading) {
38 |               // @ts-expect-error err
39 |               const form = e.target.closest("form");
40 |               if (form) form.requestSubmit();
41 |             }
42 |           }
43 |         }}
44 |       />
45 |       <ModelPicker
46 |         setSelectedModel={setSelectedModel}
47 |         selectedModel={selectedModel}
48 |       />
49 | 
50 |       {status === "streaming" || status === "submitted" ? (
51 |         <button
52 |           type="button"
53 |           onClick={stop}
54 |           className="cursor-pointer absolute right-2 bottom-2 rounded-full p-2 bg-black hover:bg-zinc-800 disabled:bg-zinc-300 disabled:cursor-not-allowed transition-colors"
55 |         >
56 |           <div className="animate-spin h-4 w-4">
57 |             <svg className="h-4 w-4 text-white" viewBox="0 0 24 24">
58 |               <circle
59 |                 className="opacity-25"
60 |                 cx="12"
61 |                 cy="12"
62 |                 r="10"
63 |                 stroke="currentColor"
64 |                 strokeWidth="4"
65 |                 fill="none"
66 |               />
67 |               <path
68 |                 className="opacity-75"
69 |                 fill="currentColor"
70 |                 d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
71 |               />
72 |             </svg>
73 |           </div>
74 |         </button>
75 |       ) : (
76 |         <button
77 |           type="submit"
78 |           disabled={isLoading || !input.trim()}
79 |           className="absolute right-2 bottom-2 rounded-full p-2 bg-black hover:bg-zinc-800 disabled:bg-zinc-300 disabled:dark:bg-zinc-700 dark:disabled:opacity-80 disabled:cursor-not-allowed transition-colors"
80 |         >
81 |           <ArrowUp className="h-4 w-4 text-white" />
82 |         </button>
83 |       )}
84 |     </div>
85 |   );
86 | };
87 |

--------------------------------------------------------------------------------
/app/globals.css:
--------------------------------------------------------------------------------
  1 | @import "tailwindcss";
  2 | 
  3 | @source "../node_modules/streamdown/dist/*.js";
  4 | 
  5 | @plugin "tailwindcss-animate";
  6 | 
  7 | @custom-variant dark (&:is(.dark *));
  8 | 
  9 | @theme inline {
 10 |   --color-background: var(--background);
 11 |   --color-foreground: var(--foreground);
 12 |   --font-sans: var(--font-geist-sans);
 13 |   --font-mono: var(--font-geist-mono);
 14 |   --color-sidebar-ring: var(--sidebar-ring);
 15 |   --color-sidebar-border: var(--sidebar-border);
 16 |   --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
 17 |   --color-sidebar-accent: var(--sidebar-accent);
 18 |   --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
 19 |   --color-sidebar-primary: var(--sidebar-primary);
 20 |   --color-sidebar-foreground: var(--sidebar-foreground);
 21 |   --color-sidebar: var(--sidebar);
 22 |   --color-chart-5: var(--chart-5);
 23 |   --color-chart-4: var(--chart-4);
 24 |   --color-chart-3: var(--chart-3);
 25 |   --color-chart-2: var(--chart-2);
 26 |   --color-chart-1: var(--chart-1);
 27 |   --color-ring: var(--ring);
 28 |   --color-input: var(--input);
 29 |   --color-border: var(--border);
 30 |   --color-destructive-foreground: var(--destructive-foreground);
 31 |   --color-destructive: var(--destructive);
 32 |   --color-accent-foreground: var(--accent-foreground);
 33 |   --color-accent: var(--accent);
 34 |   --color-muted-foreground: var(--muted-foreground);
 35 |   --color-muted: var(--muted);
 36 |   --color-secondary-foreground: var(--secondary-foreground);
 37 |   --color-secondary: var(--secondary);
 38 |   --color-primary-foreground: var(--primary-foreground);
 39 |   --color-primary: var(--primary);
 40 |   --color-popover-foreground: var(--popover-foreground);
 41 |   --color-popover: var(--popover);
 42 |   --color-card-foreground: var(--card-foreground);
 43 |   --color-card: var(--card);
 44 |   --radius-sm: calc(var(--radius) - 4px);
 45 |   --radius-md: calc(var(--radius) - 2px);
 46 |   --radius-lg: var(--radius);
 47 |   --radius-xl: calc(var(--radius) + 4px);
 48 | }
 49 | 
 50 | :root {
 51 |   --background: oklch(1 0 0);
 52 |   --foreground: oklch(0.141 0.005 285.823);
 53 |   --card: oklch(1 0 0);
 54 |   --card-foreground: oklch(0.141 0.005 285.823);
 55 |   --popover: oklch(1 0 0);
 56 |   --popover-foreground: oklch(0.141 0.005 285.823);
 57 |   --primary: oklch(0.21 0.006 285.885);
 58 |   --primary-foreground: oklch(0.985 0 0);
 59 |   --secondary: oklch(0.967 0.001 286.375);
 60 |   --secondary-foreground: oklch(0.21 0.006 285.885);
 61 |   --muted: oklch(0.967 0.001 286.375);
 62 |   --muted-foreground: oklch(0.552 0.016 285.938);
 63 |   --accent: oklch(0.967 0.001 286.375);
 64 |   --accent-foreground: oklch(0.21 0.006 285.885);
 65 |   --destructive: oklch(0.577 0.245 27.325);
 66 |   --destructive-foreground: oklch(0.577 0.245 27.325);
 67 |   --border: oklch(0.92 0.004 286.32);
 68 |   --input: oklch(0.92 0.004 286.32);
 69 |   --ring: oklch(0.705 0.015 286.067);
 70 |   --chart-1: oklch(0.646 0.222 41.116);
 71 |   --chart-2: oklch(0.6 0.118 184.704);
 72 |   --chart-3: oklch(0.398 0.07 227.392);
 73 |   --chart-4: oklch(0.828 0.189 84.429);
 74 |   --chart-5: oklch(0.769 0.188 70.08);
 75 |   --radius: 0.625rem;
 76 |   --sidebar: oklch(0.985 0 0);
 77 |   --sidebar-foreground: oklch(0.141 0.005 285.823);
 78 |   --sidebar-primary: oklch(0.21 0.006 285.885);
 79 |   --sidebar-primary-foreground: oklch(0.985 0 0);
 80 |   --sidebar-accent: oklch(0.967 0.001 286.375);
 81 |   --sidebar-accent-foreground: oklch(0.21 0.006 285.885);
 82 |   --sidebar-border: oklch(0.92 0.004 286.32);
 83 |   --sidebar-ring: oklch(0.705 0.015 286.067);
 84 | }
 85 | 
 86 | .dark {
 87 |   --background: oklch(0.141 0.005 285.823);
 88 |   --foreground: oklch(0.985 0 0);
 89 |   --card: oklch(0.141 0.005 285.823);
 90 |   --card-foreground: oklch(0.985 0 0);
 91 |   --popover: oklch(0.141 0.005 285.823);
 92 |   --popover-foreground: oklch(0.985 0 0);
 93 |   --primary: oklch(0.985 0 0);
 94 |   --primary-foreground: oklch(0.21 0.006 285.885);
 95 |   --secondary: oklch(0.274 0.006 286.033);
 96 |   --secondary-foreground: oklch(0.985 0 0);
 97 |   --muted: oklch(0.274 0.006 286.033);
 98 |   --muted-foreground: oklch(0.705 0.015 286.067);
 99 |   --accent: oklch(0.274 0.006 286.033);
100 |   --accent-foreground: oklch(0.985 0 0);
101 |   --destructive: oklch(0.396 0.141 25.723);
102 |   --destructive-foreground: oklch(0.637 0.237 25.331);
103 |   --border: oklch(0.274 0.006 286.033);
104 |   --input: oklch(0.274 0.006 286.033);
105 |   --ring: oklch(0.442 0.017 285.786);
106 |   --chart-1: oklch(0.488 0.243 264.376);
107 |   --chart-2: oklch(0.696 0.17 162.48);
108 |   --chart-3: oklch(0.769 0.188 70.08);
109 |   --chart-4: oklch(0.627 0.265 303.9);
110 |   --chart-5: oklch(0.645 0.246 16.439);
111 |   --sidebar: oklch(0.21 0.006 285.885);
112 |   --sidebar-foreground: oklch(0.985 0 0);
113 |   --sidebar-primary: oklch(0.488 0.243 264.376);
114 |   --sidebar-primary-foreground: oklch(0.985 0 0);
115 |   --sidebar-accent: oklch(0.274 0.006 286.033);
116 |   --sidebar-accent-foreground: oklch(0.985 0 0);
117 |   --sidebar-border: oklch(0.274 0.006 286.033);
118 |   --sidebar-ring: oklch(0.442 0.017 285.786);
119 | }
120 | 
121 | @layer base {
122 |   * {
123 |     @apply border-border outline-ring/50;
124 |   }
125 |   body {
126 |     @apply bg-background text-foreground;
127 |   }
128 | }
129 |

--------------------------------------------------------------------------------
/components/icons.tsx:
--------------------------------------------------------------------------------
  1 | import Link from "next/link";
  2 | import * as React from "react";
  3 | import type { SVGProps } from "react";
  4 | 
  5 | export const VercelIcon = ({ size = 17 }) => {
  6 |   return (
  7 |     <svg
  8 |       height={size}
  9 |       strokeLinejoin="round"
 10 |       viewBox="0 0 16 16"
 11 |       width={size}
 12 |       style={{ color: "currentcolor" }}
 13 |     >
 14 |       <title>Vercel Icon</title>
 15 |       <path
 16 |         fillRule="evenodd"
 17 |         clipRule="evenodd"
 18 |         d="M8 1L16 15H0L8 1Z"
 19 |         fill="currentColor"
 20 |       />
 21 |     </svg>
 22 |   );
 23 | };
 24 | 
 25 | export const SpinnerIcon = ({ size = 16 }: { size?: number }) => (
 26 |   <svg
 27 |     height={size}
 28 |     strokeLinejoin="round"
 29 |     viewBox="0 0 16 16"
 30 |     width={size}
 31 |     style={{ color: "currentcolor" }}
 32 |   >
 33 |     <title>Spinner Icon</title>
 34 |     <g clipPath="url(#clip0_2393_1490)">
 35 |       <path d="M8 0V4" stroke="currentColor" strokeWidth="1.5" />
 36 |       <path
 37 |         opacity="0.5"
 38 |         d="M8 16V12"
 39 |         stroke="currentColor"
 40 |         strokeWidth="1.5"
 41 |       />
 42 |       <path
 43 |         opacity="0.9"
 44 |         d="M3.29773 1.52783L5.64887 4.7639"
 45 |         stroke="currentColor"
 46 |         strokeWidth="1.5"
 47 |       />
 48 |       <path
 49 |         opacity="0.1"
 50 |         d="M12.7023 1.52783L10.3511 4.7639"
 51 |         stroke="currentColor"
 52 |         strokeWidth="1.5"
 53 |       />
 54 |       <path
 55 |         opacity="0.4"
 56 |         d="M12.7023 14.472L10.3511 11.236"
 57 |         stroke="currentColor"
 58 |         strokeWidth="1.5"
 59 |       />
 60 |       <path
 61 |         opacity="0.6"
 62 |         d="M3.29773 14.472L5.64887 11.236"
 63 |         stroke="currentColor"
 64 |         strokeWidth="1.5"
 65 |       />
 66 |       <path
 67 |         opacity="0.2"
 68 |         d="M15.6085 5.52783L11.8043 6.7639"
 69 |         stroke="currentColor"
 70 |         strokeWidth="1.5"
 71 |       />
 72 |       <path
 73 |         opacity="0.7"
 74 |         d="M0.391602 10.472L4.19583 9.23598"
 75 |         stroke="currentColor"
 76 |         strokeWidth="1.5"
 77 |       />
 78 |       <path
 79 |         opacity="0.3"
 80 |         d="M15.6085 10.4722L11.8043 9.2361"
 81 |         stroke="currentColor"
 82 |         strokeWidth="1.5"
 83 |       />
 84 |       <path
 85 |         opacity="0.8"
 86 |         d="M0.391602 5.52783L4.19583 6.7639"
 87 |         stroke="currentColor"
 88 |         strokeWidth="1.5"
 89 |       />
 90 |     </g>
 91 |     <defs>
 92 |       <clipPath id="clip0_2393_1490">
 93 |         <rect width="16" height="16" fill="white" />
 94 |       </clipPath>
 95 |     </defs>
 96 |   </svg>
 97 | );
 98 | 
 99 | export const Github = (props: SVGProps<SVGSVGElement>) => (
100 |   <svg
101 |     viewBox="0 0 256 250"
102 |     width="1em"
103 |     height="1em"
104 |     fill="currentColor"
105 |     xmlns="http://www.w3.org/2000/svg"
106 |     preserveAspectRatio="xMidYMid"
107 |     {...props}
108 |   >
109 |     <title>GitHub Icon</title>
110 |     <path d="M128.001 0C57.317 0 0 57.307 0 128.001c0 56.554 36.676 104.535 87.535 121.46 6.397 1.185 8.746-2.777 8.746-6.158 0-3.052-.12-13.135-.174-23.83-35.61 7.742-43.124-15.103-43.124-15.103-5.823-14.795-14.213-18.73-14.213-18.73-11.613-7.944.876-7.78.876-7.78 12.853.902 19.621 13.19 19.621 13.19 11.417 19.568 29.945 13.911 37.249 10.64 1.149-8.272 4.466-13.92 8.127-17.116-28.431-3.236-58.318-14.212-58.318-63.258 0-13.975 5-25.394 13.188-34.358-1.329-3.224-5.71-16.242 1.24-33.874 0 0 10.749-3.44 35.21 13.121 10.21-2.836 21.16-4.258 32.038-4.307 10.878.049 21.837 1.47 32.066 4.307 24.431-16.56 35.165-13.12 35.165-13.12 6.967 17.63 2.584 30.65 1.255 33.873 8.207 8.964 13.173 20.383 13.173 34.358 0 49.163-29.944 59.988-58.447 63.157 4.591 3.972 8.682 11.762 8.682 23.704 0 17.126-.148 30.91-.148 35.126 0 3.407 2.304 7.398 8.792 6.14C219.37 232.5 256 184.537 256 128.002 256 57.307 198.691 0 128.001 0Zm-80.06 182.34c-.282.636-1.283.827-2.194.39-.929-.417-1.45-1.284-1.15-1.922.276-.655 1.279-.838 2.205-.399.93.418 1.46 1.293 1.139 1.931Zm6.296 5.618c-.61.566-1.804.303-2.614-.591-.837-.892-.994-2.086-.375-2.66.63-.566 1.787-.301 2.626.591.838.903 1 2.088.363 2.66Zm4.32 7.188c-.785.545-2.067.034-2.86-1.104-.784-1.138-.784-2.503.017-3.05.795-.547 2.058-.055 2.861 1.075.782 1.157.782 2.522-.019 3.08Zm7.304 8.325c-.701.774-2.196.566-3.29-.49-1.119-1.032-1.43-2.496-.726-3.27.71-.776 2.213-.558 3.315.49 1.11 1.03 1.45 2.505.701 3.27Zm9.442 2.81c-.31 1.003-1.75 1.459-3.199 1.033-1.448-.439-2.395-1.613-2.103-2.626.301-1.01 1.747-1.484 3.207-1.028 1.446.436 2.396 1.602 2.095 2.622Zm10.744 1.193c.036 1.055-1.193 1.93-2.715 1.95-1.53.034-2.769-.82-2.786-1.86 0-1.065 1.202-1.932 2.733-1.958 1.522-.03 2.768.818 2.768 1.868Zm10.555-.405c.182 1.03-.875 2.088-2.387 2.37-1.485.271-2.861-.365-3.05-1.386-.184-1.056.893-2.114 2.376-2.387 1.514-.263 2.868.356 3.061 1.403Z" />
111 |   </svg>
112 | );
113 | 
114 | export function StarButton() {
115 |   return (
116 |     <Link
117 |       href="https://github.com/vercel-labs/ai-sdk-preview-reasoning"
118 |       target="_blank"
119 |       rel="noopener noreferrer"
120 |       className="flex items-center gap-2 text-sm text-zinc-600 dark:text-zinc-300 hover:text-zinc-700 dark:hover:text-zinc-300"
121 |     >
122 |       <Github className="size-4" />
123 |       <span className="hidden sm:inline">Star on GitHub</span>
124 |     </Link>
125 |   );
126 | }
127 | 
128 | export const XAiIcon = ({ size = 16 }) => {
129 |   return (
130 |     <svg
131 |       xmlns="http://www.w3.org/2000/svg"
132 |       height={size}
133 |       version="1.1"
134 |       viewBox="0 0 438.7 481.4"
135 |     >
136 |       <title>xAI Icon</title>
137 |       <path d="M355.5,155.1l8.3,326.4h66.6l8.3-445.2-83.2,118.8ZM438.7,0h-101.6l-159.4,227.6,50.8,72.5L438.7,0ZM0,481.4h101.6l50.8-72.5-50.8-72.5L0,481.4ZM0,155.1l228.5,326.4h101.6L101.6,155.1H0Z" />
138 |     </svg>
139 |   );
140 | };
141 |

--------------------------------------------------------------------------------
/components/ui/select.tsx:
--------------------------------------------------------------------------------
  1 | "use client"
  2 | 
  3 | import * as React from "react"
  4 | import * as SelectPrimitive from "@radix-ui/react-select"
  5 | import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react"
  6 | 
  7 | import { cn } from "@/lib/utils"
  8 | 
  9 | function Select({
 10 |   ...props
 11 | }: React.ComponentProps<typeof SelectPrimitive.Root>) {
 12 |   return <SelectPrimitive.Root data-slot="select" {...props} />
 13 | }
 14 | 
 15 | function SelectGroup({
 16 |   ...props
 17 | }: React.ComponentProps<typeof SelectPrimitive.Group>) {
 18 |   return <SelectPrimitive.Group data-slot="select-group" {...props} />
 19 | }
 20 | 
 21 | function SelectValue({
 22 |   ...props
 23 | }: React.ComponentProps<typeof SelectPrimitive.Value>) {
 24 |   return <SelectPrimitive.Value data-slot="select-value" {...props} />
 25 | }
 26 | 
 27 | function SelectTrigger({
 28 |   className,
 29 |   children,
 30 |   ...props
 31 | }: React.ComponentProps<typeof SelectPrimitive.Trigger>) {
 32 |   return (
 33 |     <SelectPrimitive.Trigger
 34 |       data-slot="select-trigger"
 35 |       className={cn(
 36 |         "text-muted-foreground data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive flex h-9 w-fit items-center justify-between gap-2 rounded-md bg-transparent px-3 py-2 text-sm whitespace-nowrap transition-[color,box-shadow] outline-none hover:bg-secondary data-[state=open]:bg-secondary disabled:cursor-not-allowed disabled:opacity-50 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
 37 |         className
 38 |       )}
 39 |       {...props}
 40 |     >
 41 |       {children}
 42 |       <SelectPrimitive.Icon asChild>
 43 |         <ChevronDownIcon className="size-4 opacity-50" />
 44 |       </SelectPrimitive.Icon>
 45 |     </SelectPrimitive.Trigger>
 46 |   )
 47 | }
 48 | 
 49 | function SelectContent({
 50 |   className,
 51 |   children,
 52 |   position = "popper",
 53 |   ...props
 54 | }: React.ComponentProps<typeof SelectPrimitive.Content>) {
 55 |   return (
 56 |     <SelectPrimitive.Portal>
 57 |       <SelectPrimitive.Content
 58 |         data-slot="select-content"
 59 |         className={cn(
 60 |           "bg-secondary text-secondary-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] overflow-x-hidden overflow-y-auto rounded-md border shadow-md",
 61 |           position === "popper" &&
 62 |             "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
 63 |           className
 64 |         )}
 65 |         position={position}
 66 |         {...props}
 67 |       >
 68 |         <SelectScrollUpButton />
 69 |         <SelectPrimitive.Viewport
 70 |           className={cn(
 71 |             "p-1",
 72 |             position === "popper" &&
 73 |               "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1"
 74 |           )}
 75 |         >
 76 |           {children}
 77 |         </SelectPrimitive.Viewport>
 78 |         <SelectScrollDownButton />
 79 |       </SelectPrimitive.Content>
 80 |     </SelectPrimitive.Portal>
 81 |   )
 82 | }
 83 | 
 84 | function SelectLabel({
 85 |   className,
 86 |   ...props
 87 | }: React.ComponentProps<typeof SelectPrimitive.Label>) {
 88 |   return (
 89 |     <SelectPrimitive.Label
 90 |       data-slot="select-label"
 91 |       className={cn("px-2 py-1.5 text-sm font-medium", className)}
 92 |       {...props}
 93 |     />
 94 |   )
 95 | }
 96 | 
 97 | function SelectItem({
 98 |   className,
 99 |   children,
100 |   ...props
101 | }: React.ComponentProps<typeof SelectPrimitive.Item>) {
102 |   return (
103 |     <SelectPrimitive.Item
104 |       data-slot="select-item"
105 |       className={cn(
106 |         "focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
107 |         className
108 |       )}
109 |       {...props}
110 |     >
111 |       <span className="absolute right-2 flex size-3.5 items-center justify-center">
112 |         <SelectPrimitive.ItemIndicator>
113 |           <CheckIcon className="size-4" />
114 |         </SelectPrimitive.ItemIndicator>
115 |       </span>
116 |       <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
117 |     </SelectPrimitive.Item>
118 |   )
119 | }
120 | 
121 | function SelectSeparator({
122 |   className,
123 |   ...props
124 | }: React.ComponentProps<typeof SelectPrimitive.Separator>) {
125 |   return (
126 |     <SelectPrimitive.Separator
127 |       data-slot="select-separator"
128 |       className={cn("bg-border pointer-events-none -mx-1 my-1 h-px", className)}
129 |       {...props}
130 |     />
131 |   )
132 | }
133 | 
134 | function SelectScrollUpButton({
135 |   className,
136 |   ...props
137 | }: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
138 |   return (
139 |     <SelectPrimitive.ScrollUpButton
140 |       data-slot="select-scroll-up-button"
141 |       className={cn(
142 |         "flex cursor-default items-center justify-center py-1",
143 |         className
144 |       )}
145 |       {...props}
146 |     >
147 |       <ChevronUpIcon className="size-4" />
148 |     </SelectPrimitive.ScrollUpButton>
149 |   )
150 | }
151 | 
152 | function SelectScrollDownButton({
153 |   className,
154 |   ...props
155 | }: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
156 |   return (
157 |     <SelectPrimitive.ScrollDownButton
158 |       data-slot="select-scroll-down-button"
159 |       className={cn(
160 |         "flex cursor-default items-center justify-center py-1",
161 |         className
162 |       )}
163 |       {...props}
164 |     >
165 |       <ChevronDownIcon className="size-4" />
166 |     </SelectPrimitive.ScrollDownButton>
167 |   )
168 | }
169 | 
170 | export {
171 |   Select,
172 |   SelectContent,
173 |   SelectGroup,
174 |   SelectItem,
175 |   SelectLabel,
176 |   SelectScrollDownButton,
177 |   SelectScrollUpButton,
178 |   SelectSeparator,
179 |   SelectTrigger,
180 |   SelectValue,
181 | }
182 |

--------------------------------------------------------------------------------
/components/message.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | 
  3 | import { getToolName, type ReasoningUIPart, type UIMessage } from "ai";
  4 | import { AnimatePresence, motion } from "motion/react";
  5 | import { memo, useCallback, useEffect, useState } from "react";
  6 | import equal from "fast-deep-equal";
  7 | 
  8 | import { Streamdown } from "streamdown";
  9 | import { cn } from "@/lib/utils";
 10 | import {
 11 |   CheckCircle,
 12 |   ChevronDownIcon,
 13 |   ChevronUpIcon,
 14 |   Loader2,
 15 |   PocketKnife,
 16 |   SparklesIcon,
 17 |   StopCircle,
 18 | } from "lucide-react";
 19 | import { SpinnerIcon } from "./icons";
 20 | 
 21 | interface ReasoningMessagePartProps {
 22 |   part: ReasoningUIPart;
 23 |   isReasoning: boolean;
 24 | }
 25 | 
 26 | export function ReasoningMessagePart({
 27 |   part,
 28 |   isReasoning,
 29 | }: ReasoningMessagePartProps) {
 30 |   const [isExpanded, setIsExpanded] = useState(false);
 31 | 
 32 |   const variants = {
 33 |     collapsed: {
 34 |       height: 0,
 35 |       opacity: 0,
 36 |       marginTop: 0,
 37 |       marginBottom: 0,
 38 |     },
 39 |     expanded: {
 40 |       height: "auto",
 41 |       opacity: 1,
 42 |       marginTop: "1rem",
 43 |       marginBottom: 0,
 44 |     },
 45 |   };
 46 | 
 47 |   const memoizedSetIsExpanded = useCallback((value: boolean) => {
 48 |     setIsExpanded(value);
 49 |   }, []);
 50 | 
 51 |   useEffect(() => {
 52 |     memoizedSetIsExpanded(isReasoning);
 53 |   }, [isReasoning, memoizedSetIsExpanded]);
 54 | 
 55 |   return (
 56 |     <div className="flex flex-col">
 57 |       {isReasoning ? (
 58 |         <div className="flex flex-row gap-2 items-center">
 59 |           <div className="text-sm font-medium">Reasoning</div>
 60 |           <div className="animate-spin">
 61 |             <SpinnerIcon />
 62 |           </div>
 63 |         </div>
 64 |       ) : (
 65 |         <div className="flex flex-row gap-2 items-center">
 66 |           <div className="text-sm font-medium">Reasoned for a few seconds</div>
 67 |           <button
 68 |             className={cn(
 69 |               "rounded-full cursor-pointer dark:hover:bg-zinc-800 hover:bg-zinc-200",
 70 |               {
 71 |                 "dark:bg-zinc-800 bg-zinc-200": isExpanded,
 72 |               },
 73 |             )}
 74 |             onClick={() => {
 75 |               setIsExpanded(!isExpanded);
 76 |             }}
 77 |           >
 78 |             {isExpanded ? (
 79 |               <ChevronDownIcon className="w-4 h-4" />
 80 |             ) : (
 81 |               <ChevronUpIcon className="w-4 h-4" />
 82 |             )}
 83 |           </button>
 84 |         </div>
 85 |       )}
 86 | 
 87 |       <AnimatePresence initial={false}>
 88 |         {isExpanded && (
 89 |           <motion.div
 90 |             key="reasoning"
 91 |             className="flex flex-col gap-4 pl-3 text-sm border-l dark:text-zinc-400 text-zinc-600 dark:border-zinc-800"
 92 |             initial="collapsed"
 93 |             animate="expanded"
 94 |             exit="collapsed"
 95 |             variants={variants}
 96 |             transition={{ duration: 0.2, ease: "easeInOut" }}
 97 |           >
 98 |             <Streamdown>{part.text}</Streamdown>
 99 |           </motion.div>
100 |         )}
101 |       </AnimatePresence>
102 |     </div>
103 |   );
104 | }
105 | 
106 | const PurePreviewMessage = ({
107 |   message,
108 |   isLatestMessage,
109 |   status,
110 | }: {
111 |   message: UIMessage;
112 |   isLoading: boolean;
113 |   status: "error" | "submitted" | "streaming" | "ready";
114 |   isLatestMessage: boolean;
115 | }) => {
116 |   return (
117 |     <AnimatePresence key={message.id}>
118 |       <motion.div
119 |         className="px-4 mx-auto w-full group/message"
120 |         initial={{ y: 5, opacity: 0 }}
121 |         animate={{ y: 0, opacity: 1 }}
122 |         key={`message-${message.id}`}
123 |         data-role={message.role}
124 |       >
125 |         <div
126 |           className={cn(
127 |             "flex gap-4 w-full group-data-[role=user]/message:ml-auto group-data-[role=user]/message:max-w-2xl",
128 |             "group-data-[role=user]/message:w-fit",
129 |           )}
130 |         >
131 |           {message.role === "assistant" && (
132 |             <div className="flex justify-center items-center rounded-full ring-1 size-8 shrink-0 ring-border bg-background">
133 |               <div className="">
134 |                 <SparklesIcon size={14} />
135 |               </div>
136 |             </div>
137 |           )}
138 | 
139 |           <div className="flex flex-col space-y-4 w-full">
140 |             {message.parts?.map((part, i) => {
141 |               switch (part.type) {
142 |                 case "text":
143 |                   return (
144 |                     <motion.div
145 |                       initial={{ y: 5, opacity: 0 }}
146 |                       animate={{ y: 0, opacity: 1 }}
147 |                       key={`message-${message.id}-part-${i}`}
148 |                       className="flex flex-row gap-2 items-start pb-4 w-full"
149 |                     >
150 |                       <div
151 |                         className={cn("flex flex-col gap-4", {
152 |                           "bg-secondary text-secondary-foreground px-3 py-2 rounded-tl-xl rounded-tr-xl rounded-bl-xl":
153 |                             message.role === "user",
154 |                         })}
155 |                       >
156 |                         <Streamdown>{part.text}</Streamdown>
157 |                       </div>
158 |                     </motion.div>
159 |                   );
160 |                 // TODO: add your other tools here
161 |                 case "tool-getWeather":
162 |                   const { state } = part;
163 | 
164 |                   return (
165 |                     <motion.div
166 |                       initial={{ y: 5, opacity: 0 }}
167 |                       animate={{ y: 0, opacity: 1 }}
168 |                       key={`message-${message.id}-part-${i}`}
169 |                       className="flex flex-col gap-2 p-2 mb-3 text-sm rounded-md border bg-zinc-50 dark:bg-zinc-900 border-zinc-200 dark:border-zinc-800"
170 |                     >
171 |                       <div className="flex flex-1 justify-center items-center">
172 |                         <div className="flex justify-center items-center w-8 h-8 rounded-full bg-zinc-50 dark:bg-zinc-800">
173 |                           <PocketKnife className="w-4 h-4" />
174 |                         </div>
175 |                         <div className="flex-1">
176 |                           <div className="flex gap-2 items-baseline font-medium">
177 |                             {state === "input-streaming" ? "Calling" : "Called"}{" "}
178 |                             <span className="px-2 py-1 font-mono rounded-md bg-zinc-100 dark:bg-zinc-800">
179 |                               {getToolName(part)}
180 |                             </span>
181 |                           </div>
182 |                         </div>
183 |                         <div className="flex justify-center items-center w-5 h-5">
184 |                           {state === "input-streaming" ? (
185 |                             isLatestMessage && status !== "ready" ? (
186 |                               <Loader2 className="w-4 h-4 animate-spin text-zinc-500" />
187 |                             ) : (
188 |                               <StopCircle className="w-4 h-4 text-red-500" />
189 |                             )
190 |                           ) : state === "output-available" ? (
191 |                             <CheckCircle size={14} className="text-green-600" />
192 |                           ) : null}
193 |                         </div>
194 |                       </div>
195 |                     </motion.div>
196 |                   );
197 |                 case "reasoning":
198 |                   return (
199 |                     <ReasoningMessagePart
200 |                       key={`message-${message.id}-${i}`}
201 |                       part={part}
202 |                       isReasoning={
203 |                         (message.parts &&
204 |                           status === "streaming" &&
205 |                           i === message.parts.length - 1) ??
206 |                         false
207 |                       }
208 |                     />
209 |                   );
210 |                 default:
211 |                   return null;
212 |               }
213 |             })}
214 |           </div>
215 |         </div>
216 |       </motion.div>
217 |     </AnimatePresence>
218 |   );
219 | };
220 | 
221 | export const Message = memo(PurePreviewMessage, (prevProps, nextProps) => {
222 |   if (prevProps.status !== nextProps.status) return false;
223 |   if (!equal(prevProps.message.parts, nextProps.message.parts)) return false;
224 | 
225 |   return true;
226 | });
227 |

--------------------------------------------------------------------------------