[V0_FILE]plaintext:file=".gitignore" # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. # dependencies /node_modules # next.js /.next/ /out/ # production /build # debug npm-debug.log* yarn-debug.log* yarn-error.log* .pnpm-debug.log* # env files .env* # vercel .vercel # typescript *.tsbuildinfo next-env.d.ts .env*.local [V0_FILE]markdown:file="README.md" > **Note** > START by cloning the template from https://v0.app/templates/ai-ship-workshop-tyVvKQthD7X # AI Ship 2025 Workshop - v0 Template Starter _Learn to build modern AI-powered applications with the latest Vercel AI SDK and v0_ [![Built with v0](https://img.shields.io/badge/Built%20with-v0.app-black?style=for-the-badge)](https://v0.app/templates/ai-ship-workshop-tyVvKQthD7X) [![Deployed on Vercel](https://img.shields.io/badge/Deployed%20on-Vercel-black?style=for-the-badge&logo=vercel)](https://v0.app/templates/ai-ship-workshop-tyVvKQthD7X) ## Overview This is a hands-on workshop template for AI Ship 2025 that teaches you how to refactor AI applications from traditional patterns to modern, secure, and scalable approaches using the latest Vercel AI SDK v5 features. The workshop focuses on migrating to best practices including agents, workflows, structured outputs, and AI Elements. ## Tech Stack - **Next.js** - React framework for production - **AI SDK 5** - Vercel's AI SDK with modern agent patterns - **shadcn/ui** - Beautiful, accessible component library - **AI Gateway** - All AI providers in one place - **AI Elements** - Pre-built UI components for AI interactions - **Upstash KV** - Redis-compatible storage for workflows - **Workflows SDK** - Long-running async operations - **Vercel Sandbox** - Secure code execution environment ## Prerequisites Before starting the workshop, ensure you have: - ✅ **React** knowledge - ✅ **Next.js** experience - ✅ **v0 Account** - [Sign up at v0.dev](https://v0.dev) - ✅ **Vercel Account** - [Sign up at vercel.com](https://vercel.com) - ✅ **Vercel AI Gateway credits** - will be provided by Vercel for you to use durign the workshop - ✅ **GitHub Account** - [Sign up at github.com](https://github.com) ## Development (after you have cloned the template!!) Run the development server: \`\`\`bash pnpm install vercel link vercel env pull pnpm dev \`\`\` Open [http://localhost:3000](http://localhost:3000) to see your application. Test the application with "iPhone" in the brand input field. ## Workshop Tasks ### 1. Initial Setup #### Task 1.1: Clone Template from v0 - Navigate to [v0.dev](https://v0.app/templates/ai-ship-workshop-tyVvKQthD7X) - [Find this workshop template](https://v0.app/templates/ai-ship-workshop-tyVvKQthD7X) - Clone it into your personal v0 workspace #### Task 1.2: Connect to GitHub - In v0, connect your project to GitHub - Authorize v0 to access your GitHub account - Create a new repository for this project #### Task 1.3: Deploy to Production - Deploy your project from v0 to Vercel - Verify the deployment is successful - Note your production URL #### Task 1.4: Clone Locally - Clone the GitHub repository to your local machine \`\`\`bash git clone cd v0-ai-ship-workshop pnpm install \`\`\` ### 2. Refactor to AI SDK v5 Features The main focus of this workshop is modernizing the codebase with AI SDK v5 features: #### Task 2.1: Refactor from `generateText` to `generateObject` - Update API routes to use structured outputs - Implement proper TypeScript types for responses - Reference: [Structured Output Docs](https://ai-sdk.dev/docs/agents/building-agents#structured-output) #### Task 2.2: Implement System Prompts - Add system prompts to guide AI behavior - Ensure consistent AI responses across endpoints #### Task 2.3: Use Agent Class for Generate Questions - Refactor `generate-questions` route to use the Agent class - **Requirement**: Verify there is no brand mentioned in the output - Implement validation logic #### Task 2.4: Use Agent Class for Check Visibility - Convert `check-visibility` route to use Agent class - Transform into a "detect results" pattern - Implement proper error handling #### Task 2.5: Implement Prepare Step - Use Prepare Step for changing models dynamically - Apply for brand mention detection - Apply for detecting results - Optimize model selection based on task #### Task 2.6: Push Changes to GitHub \`\`\`bash git add . git commit -m "Refactor to AI SDK v5 with Agent class and modern patterns" git push origin main \`\`\` ### 3. Sync and Enhance #### Task 3.1: Sync v0 with GitHub - Pull latest changes into v0 - Verify synchronization is working #### Task 3.2: Add Payment Option - Add payment integration to make this a full SaaS example - Use v0 to generate payment UI components - Implement billing logic #### Task 3.3: Final Sync - Commit payment features - Push to GitHub - Verify v0 sync ## Stretch Goals Once you've completed the main tasks, try these advanced challenges: ### 🚀 Advanced Features 1. **Refactor to Use Vercel Sandbox** - refactor all 3 API Routes (create-brand-context, generate-questions, check-visibility) into one initial call that will execute Vercel Sandbox 2. **Add AI Elements** - Integrate AI Elements library - Enhance "view chats" functionality with AI Elements - Enhance UI with pre-built AI components 3. **Implement Security: BotID** - Add bot detection and prevention - Implement BotID for request verification - Protect against automated abuse 4. **Add Rate Limiting for API Routes** - Implement rate limiting middleware - Protect API endpoints from abuse - Use Vercel Edge Config or Upstash or Vercel Firewall 5. **Add Charts to Final Report** - Use v0 to generate chart components - Visualize data in the final report - Add interactive data visualizations ## Troubleshooting - Make sure you have `AI_GATEWAY_API_KEY` environment variable set in `.env.local` - Make sure youhave REDIS connected in v0 and then do `vercel env pull` to pull the environment variables into your local environment. ## Resources - [AI SDK v5 Documentation](https://sdk.vercel.ai/docs) - [Agent Building Guide](https://ai-sdk.dev/docs/agents/building-agents) - [v0 Documentation](https://v0.dev/docs) - [Next.js Documentation](https://nextjs.org/docs) - [Vercel Workflows](https://vercel.com/docs/workflow) --- **Happy Building! 🚀** [V0_FILE]typescript:file="app/api/check-status/route.ts" import { type NextRequest, NextResponse } from "next/server" import { redis } from "@/lib/upstash" import type { RunStatus, VisibilityAnswer } from "@/lib/upstash" export async function GET(request: NextRequest) { try { const searchParams = request.nextUrl.searchParams const runId = searchParams.get("runId") if (!runId) { return NextResponse.json({ error: "Missing runId" }, { status: 400 }) } const context = await redis.get(`${runId}:context`) const questions = await redis.get(`${runId}:questions`) const keys = await redis.keys(`${runId}:Q*:answer*`) const answers: VisibilityAnswer[] = [] if (keys && Array.isArray(keys) && keys.length > 0) { const values = await redis.mget(...keys) if (values && Array.isArray(values)) { for (const value of values) { if (value && typeof value === "object") { answers.push(value as VisibilityAnswer) } } } } // Determine status let status: RunStatus["status"] = "pending" if (context && !questions) { status = "context" } else if (questions && answers.length === 0) { status = "questions" } else if (answers.length > 0 && answers.length < 27) { status = "checking" } else if (answers.length === 27) { status = "complete" } const runStatus: RunStatus = { runId, brand: (context as any)?.brand || "", context: context as any, questions: Array.isArray(questions) ? questions : null, // Ensure questions is array or null answers, totalAnswers: 27, completedAnswers: answers.length, status, } return NextResponse.json(runStatus) } catch (error) { console.info("[v0] Error checking status:", error) return NextResponse.json({ error: "Failed to check status" }, { status: 500 }) } } [V0_FILE]typescript:file="app/api/check-visibility/route.ts" import { type NextRequest, NextResponse } from "next/server" import { generateText } from "ai" import { redis } from "@/lib/upstash" export async function POST(request: NextRequest) { try { const { runId, questionId, question, model, run, brand } = await request.json() if (!runId || !questionId || !question || !model || !run || !brand) { return NextResponse.json({ error: "Missing required parameters" }, { status: 400 }) } console.log(`[v0] Checking visibility for ${brand} with ${model}, run ${run}`) try { const { text: answer } = await generateText({ model, prompt: question, }) console.log(`[v0] Got answer from ${model}:`, answer.substring(0, 100)) const detectionPrompt = `Given this answer from an AI model, determine: 1. Is the brand "${brand}" mentioned in the answer? (true/false) 2. If yes, what position is it mentioned among other brands/products? (1-10, or null if not mentioned or if it's the only one) Answer: "${answer}" Return ONLY valid JSON with this structure (no markdown, no code fences): { "isVisible": boolean, "position": number or null }` const { text: detectionResult } = await generateText({ model: "openai/gpt-4o-mini", prompt: detectionPrompt, }) console.log(`[v0] Detection result:`, detectionResult) let detection try { const cleanedResult = detectionResult .replace(/```json\n?/g, "") .replace(/```\n?/g, "") .trim() detection = JSON.parse(cleanedResult) } catch (parseError) { console.error("[v0] Failed to parse detection result:", parseError) // Fallback to simple string matching detection = { isVisible: answer.toLowerCase().includes(brand.toLowerCase()), position: null, } } const answerData = { questionId, model, run, answer, mentioned: detection.isVisible, position: detection.position, timestamp: Date.now(), failed: false, // Mark as successful } await redis.set(`${runId}:${questionId}:answer${run}:${model.replace(/\//g, "_")}`, JSON.stringify(answerData)) console.log(`[v0] Stored answer for ${runId}:${questionId}:answer${run}:${model.replace(/\//g, "_")}`) return NextResponse.json({ success: true, answer: answerData, }) } catch (checkError) { console.log(`[v0] Check failed for ${model}, run ${run}:`, checkError) const failedAnswerData = { questionId, model, run, answer: "", mentioned: false, position: null, timestamp: Date.now(), failed: true, // Mark as failed error: checkError instanceof Error ? checkError.message : "Unknown error", } await redis.set( `${runId}:${questionId}:answer${run}:${model.replace(/\//g, "_")}`, JSON.stringify(failedAnswerData), ) return NextResponse.json({ success: true, // Still return success so the run continues answer: failedAnswerData, }) } } catch (error) { console.log("[v0] Error checking visibility:", error) return NextResponse.json( { error: "Failed to check visibility", message: error instanceof Error ? error.message : "Unknown error", }, { status: 500 }, ) } } [V0_FILE]typescript:file="app/api/create-brand-context/route.ts" import { type NextRequest, NextResponse } from "next/server" import { generateText } from "ai" import { redis } from "@/lib/upstash" export async function POST(request: NextRequest) { try { const { runId, brand } = await request.json() if (!runId || !brand) { return NextResponse.json({ error: "Missing runId or brand" }, { status: 400 }) } // Generate master context using AI const { text } = await generateText({ model: "openai/gpt-4o-mini", prompt: `You are an expert at creating comprehensive brand context for AI visibility testing. Given the brand/product: "${brand}" Create a detailed master context that includes: 1. What the brand/product is 2. Key features and offerings 3. Target audience 4. Industry and category 5. Unique value propositions Format as a comprehensive paragraph that will be used to generate natural questions users might ask AI assistants.`, }) // Store context in Upstash const contextData = { brand, context: text, timestamp: Date.now(), } await redis.set(`${runId}:context`, JSON.stringify(contextData)) return NextResponse.json({ success: true, context: contextData, }) } catch (error) { console.error("[v0] Error creating brand context:", error) return NextResponse.json({ error: "Failed to create brand context" }, { status: 500 }) } } [V0_FILE]typescript:file="app/api/generate-questions/route.ts" import { type NextRequest, NextResponse } from "next/server" import { generateText } from "ai" import { redis } from "@/lib/upstash" export async function POST(request: NextRequest) { try { const { runId } = await request.json() if (!runId) { return NextResponse.json({ error: "Missing runId" }, { status: 400 }) } const contextData = await redis.get(`${runId}:context`) if (!contextData) { return NextResponse.json({ error: "Context not found for this runId" }, { status: 404 }) } // Generate 3 natural questions using AI const { text } = await generateText({ model: "openai/gpt-4o-mini", prompt: `You are an expert at creating natural, AEO-optimized questions that users would ask AI assistants. Given this brand context: ${(contextData as any).context} Generate exactly 3 natural questions that users would realistically ask AI assistants when looking for solutions that "${(contextData as any).brand}" provides. Requirements: - Users don’t know the brand yet and are asking to discover solutions, prices, or providers. - DO NOT USE brand name in questions. The questions are used to check answers for brand mentions. - Questions should be natural and conversational - Questions should be the type users would ask when seeking recommendations - Questions should be relevant to the brand's offerings - Format as a JSON array of objects with "id" and "question" fields - Use Q1, Q2, Q3 as IDs Example format: [ {"id": "Q1", "question": "What are the best tools for..."}, {"id": "Q2", "question": "How can I..."}, {"id": "Q3", "question": "Which platform should I use for..."} ] Return ONLY the JSON array, no other text.`, }) // Parse questions const questions = JSON.parse(text.trim()) // Store questions in Upstash await redis.set(`${runId}:questions`, JSON.stringify(questions)) return NextResponse.json({ success: true, questions, }) } catch (error) { console.error("[v0] Error generating questions:", error) return NextResponse.json({ error: "Failed to generate questions" }, { status: 500 }) } } [V0_FILE]css:file="app/globals.css" @import 'tailwindcss'; @import 'tw-animate-css'; @custom-variant dark (&:is(.dark *)); :root { --background: oklch(1 0 0); --foreground: oklch(0.145 0 0); --card: oklch(1 0 0); --card-foreground: oklch(0.145 0 0); --popover: oklch(1 0 0); --popover-foreground: oklch(0.145 0 0); --primary: oklch(0.205 0 0); --primary-foreground: oklch(0.985 0 0); --secondary: oklch(0.97 0 0); --secondary-foreground: oklch(0.205 0 0); --muted: oklch(0.97 0 0); --muted-foreground: oklch(0.556 0 0); --accent: oklch(0.97 0 0); --accent-foreground: oklch(0.205 0 0); --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(0.577 0.245 27.325); --border: oklch(0.922 0 0); --input: oklch(0.922 0 0); --ring: oklch(0.708 0 0); --chart-1: oklch(0.646 0.222 41.116); --chart-2: oklch(0.6 0.118 184.704); --chart-3: oklch(0.398 0.07 227.392); --chart-4: oklch(0.828 0.189 84.429); --chart-5: oklch(0.769 0.188 70.08); --radius: 0.625rem; --sidebar: oklch(0.985 0 0); --sidebar-foreground: oklch(0.145 0 0); --sidebar-primary: oklch(0.205 0 0); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.97 0 0); --sidebar-accent-foreground: oklch(0.205 0 0); --sidebar-border: oklch(0.922 0 0); --sidebar-ring: oklch(0.708 0 0); } .dark { --background: oklch(0.145 0 0); --foreground: oklch(0.985 0 0); --card: oklch(0.145 0 0); --card-foreground: oklch(0.985 0 0); --popover: oklch(0.145 0 0); --popover-foreground: oklch(0.985 0 0); --primary: oklch(0.985 0 0); --primary-foreground: oklch(0.205 0 0); --secondary: oklch(0.269 0 0); --secondary-foreground: oklch(0.985 0 0); --muted: oklch(0.269 0 0); --muted-foreground: oklch(0.708 0 0); --accent: oklch(0.269 0 0); --accent-foreground: oklch(0.985 0 0); --destructive: oklch(0.396 0.141 25.723); --destructive-foreground: oklch(0.637 0.237 25.331); --border: oklch(0.269 0 0); --input: oklch(0.269 0 0); --ring: oklch(0.439 0 0); --chart-1: oklch(0.488 0.243 264.376); --chart-2: oklch(0.696 0.17 162.48); --chart-3: oklch(0.769 0.188 70.08); --chart-4: oklch(0.627 0.265 303.9); --chart-5: oklch(0.645 0.246 16.439); --sidebar: oklch(0.205 0 0); --sidebar-foreground: oklch(0.985 0 0); --sidebar-primary: oklch(0.488 0.243 264.376); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.269 0 0); --sidebar-accent-foreground: oklch(0.985 0 0); --sidebar-border: oklch(0.269 0 0); --sidebar-ring: oklch(0.439 0 0); } @theme inline { --font-sans: var(--font-geist-sans); --font-mono: var(--font-geist-mono); --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; } } [V0_FILE]typescriptreact:file="app/layout.tsx" import type React from "react"; import type { Metadata } from "next"; import { Analytics } from "@vercel/analytics/next"; import { Suspense } from "react"; import "./globals.css"; export const metadata: Metadata = { title: "v0 App", description: "Created with v0", generator: "v0.app", }; export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode; }>) { return ( {/* Suspense is used here to supress v0 build linter checks */} Loading... } > {children} ); } [V0_FILE]typescriptreact:file="app/page.tsx" "use client"; import { LoaderIcon } from "lucide-react"; import { useState } from "react"; import { ThemeSwitcher } from "@/components/theme-switcher"; import { Button } from "@/components/ui/button"; import { Input } from "@/components/ui/input"; import { Label } from "@/components/ui/label"; import { AgentProgress } from "@/components/agent-progress"; import { Results } from "@/components/results"; import type { RunStatus } from "@/lib/upstash"; import { MODELS } from "@/lib/constants"; import { useIntervalPollingResults } from "@/lib/use-interval-polling-results"; import { getAggregatedResults } from "@/lib/get-aggregated-results"; export default function Home() { const [brand, setBrand] = useState(""); // input brand name const [runId, setRunId] = useState(null); // run ID to identify the run in Redis // status from the server (fetch visibility results from redis) const [status, setStatus] = useState(null); const [isRunning, setIsRunning] = useState(false); const [error, setError] = useState(null); // Custom hook for polling results every few seconds const { stopPolling } = useIntervalPollingResults({ runId, isRunning, setStatus, setError, setIsRunning, }); // Main Agent workflow const startAgent = async () => { if (!brand.trim()) { setError("Please enter a brand name"); return; } setError(null); setIsRunning(true); // Generate runID const newRunId = `run_${Date.now()}_${Math.random() .toString(36) .substr(2, 9)}`; setRunId(newRunId); try { // Step 1: Create brand context const contextResponse = await fetch("/api/create-brand-context", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ runId: newRunId, brand }), }); if (!contextResponse.ok) throw new Error("Failed to create context"); // Step 2: Generate questions const questionsResponse = await fetch("/api/generate-questions", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ runId: newRunId }), }); if (!questionsResponse.ok) throw new Error("Failed to generate questions"); const { questions } = await questionsResponse.json(); // Step 3: Check visibility across all models (27 parallel calls) // Fire and forget - let them run in background while polling shows results const totalChecks = questions.length * MODELS.length * 3; console.log(`[v0] Starting ${totalChecks} visibility checks in parallel`); for (const question of questions) { for (const model of MODELS) { for (let run = 1; run <= 3; run++) { fetch("/api/check-visibility", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ runId: newRunId, questionId: question.id, question: question.question, model: model.id, run, brand, }), }).catch((err) => { console.error( `[v0] Error checking visibility for ${model.id}, run ${run}:`, err ); }); } } } console.log( `[v0] All visibility checks initiated. Results will appear as they complete.` ); } catch (err) { console.error("[v0] Error in workflow:", err); setError(err instanceof Error ? err.message : "An error occurred"); stopPolling(); } }; // Get aggregated results from individual results const results = getAggregatedResults(status); return (

{/* Header */}

Check your brand's visibility in LLMs

{/* Input Section */}

Brand or product description setBrand(e.target.value)} disabled={isRunning} />

{error &&

{error}

}

{/* Chain of Thought - Show progress */} {status && } {/* Results Table */}

); } [V0_FILE]json:file="components.json" { "$schema": "https://ui.shadcn.com/schema.json", "style": "new-york", "rsc": true, "tsx": true, "tailwind": { "config": "", "css": "app/globals.css", "baseColor": "neutral", "cssVariables": true, "prefix": "" }, "iconLibrary": "lucide", "aliases": { "components": "@/components", "utils": "@/lib/utils", "ui": "@/components/ui", "lib": "@/lib", "hooks": "@/hooks" }, "registries": { "@ai-elements": "https://registry.ai-sdk.dev/{name}.json" } } [V0_FILE]typescriptreact:file="components/agent-progress.tsx" "use client"; import { ChainOfThought, ChainOfThoughtContent, ChainOfThoughtHeader, ChainOfThoughtStep, } from "@/components/ai-elements/chain-of-thought"; import { CodeBlock, CodeBlockCopyButton, } from "@/components/ai-elements/code-block"; import { Suggestion } from "@/components/ai-elements/suggestion"; import { CheckCircleIcon, DatabaseIcon, MessageSquareIcon, SearchIcon, LoaderIcon, ChevronDownIcon, } from "lucide-react"; import { Collapsible, CollapsibleContent, CollapsibleTrigger, } from "@/components/ui/collapsible"; import { useState } from "react"; import type { RunStatus } from "@/lib/upstash"; interface AgentProgressProps { status: RunStatus; } export function AgentProgress({ status }: AgentProgressProps) { const [isContextOpen, setIsContextOpen] = useState(false); return (

Agent Progress {/* Step 1: Create Master Context */} {status.context && (

Generated comprehensive brand context for {status.brand}

View master context

)} {/* Step 2: Generate Questions */} {status.questions && (

Created {status.questions.length} natural questions users would ask AI assistants

{status.questions.map((q) => ( ))}

)} {/* Step 3: Check Visibility */} {status.answers.length > 0 && (

{status.completedAnswers === 27 ? "Completed" : "Running"}{" "} visibility checks across 3 models

{status.completedAnswers === 27 ? ( ) : ( )} Checked {status.completedAnswers} / {status.totalAnswers}{" "} LLM calls

)}

); } [V0_FILE]typescriptreact:file="components/ai-elements/chain-of-thought.tsx" "use client"; import { useControllableState } from "@radix-ui/react-use-controllable-state"; import { Badge } from "@/components/ui/badge"; import { Collapsible, CollapsibleContent, CollapsibleTrigger, } from "@/components/ui/collapsible"; import { cn } from "@/lib/utils"; import { BrainIcon, ChevronDownIcon, DotIcon, type LucideIcon, } from "lucide-react"; import type { ComponentProps } from "react"; import { createContext, memo, useContext, useMemo } from "react"; type ChainOfThoughtContextValue = { isOpen: boolean; setIsOpen: (open: boolean) => void; }; const ChainOfThoughtContext = createContext( null ); const useChainOfThought = () => { const context = useContext(ChainOfThoughtContext); if (!context) { throw new Error( "ChainOfThought components must be used within ChainOfThought" ); } return context; }; export type ChainOfThoughtProps = ComponentProps<"div"> & { open?: boolean; defaultOpen?: boolean; onOpenChange?: (open: boolean) => void; }; export const ChainOfThought = memo( ({ className, open, defaultOpen = false, onOpenChange, children, ...props }: ChainOfThoughtProps) => { const [isOpen, setIsOpen] = useControllableState({ prop: open, defaultProp: defaultOpen, onChange: onOpenChange, }); const chainOfThoughtContext = useMemo( () => ({ isOpen, setIsOpen }), [isOpen, setIsOpen] ); return (

{children}

); } ); export type ChainOfThoughtHeaderProps = ComponentProps< typeof CollapsibleTrigger >; export const ChainOfThoughtHeader = memo( ({ className, children, ...props }: ChainOfThoughtHeaderProps) => { const { isOpen, setIsOpen } = useChainOfThought(); return ( {children ?? "Chain of Thought"} ); } ); export type ChainOfThoughtStepProps = ComponentProps<"div"> & { icon?: LucideIcon; label: string; description?: string; status?: "complete" | "active" | "pending"; }; export const ChainOfThoughtStep = memo( ({ className, icon: Icon = DotIcon, label, description, status = "complete", children, ...props }: ChainOfThoughtStepProps) => { const statusStyles = { complete: "text-muted-foreground", active: "text-foreground", pending: "text-muted-foreground/50", }; return (

{label}

{description && (

{description}

)} {children}

); } ); export type ChainOfThoughtSearchResultsProps = ComponentProps<"div">; export const ChainOfThoughtSearchResults = memo( ({ className, ...props }: ChainOfThoughtSearchResultsProps) => (

) ); export type ChainOfThoughtSearchResultProps = ComponentProps; export const ChainOfThoughtSearchResult = memo( ({ className, children, ...props }: ChainOfThoughtSearchResultProps) => ( {children} ) ); export type ChainOfThoughtContentProps = ComponentProps< typeof CollapsibleContent >; export const ChainOfThoughtContent = memo( ({ className, children, ...props }: ChainOfThoughtContentProps) => { const { isOpen } = useChainOfThought(); return ( {children} ); } ); export type ChainOfThoughtImageProps = ComponentProps<"div"> & { caption?: string; }; export const ChainOfThoughtImage = memo( ({ className, children, caption, ...props }: ChainOfThoughtImageProps) => (

{children}

{caption &&

{caption}

}

) ); ChainOfThought.displayName = "ChainOfThought"; ChainOfThoughtHeader.displayName = "ChainOfThoughtHeader"; ChainOfThoughtStep.displayName = "ChainOfThoughtStep"; ChainOfThoughtSearchResults.displayName = "ChainOfThoughtSearchResults"; ChainOfThoughtSearchResult.displayName = "ChainOfThoughtSearchResult"; ChainOfThoughtContent.displayName = "ChainOfThoughtContent"; ChainOfThoughtImage.displayName = "ChainOfThoughtImage"; [V0_FILE]typescriptreact:file="components/ai-elements/code-block.tsx" "use client" import { Button } from "@/components/ui/button" import { cn } from "@/lib/utils" import { CheckIcon, CopyIcon } from "lucide-react" import type { ComponentProps, HTMLAttributes, ReactNode } from "react" import { createContext, useContext, useState } from "react" type CodeBlockContextType = { code: string } const CodeBlockContext = createContext({ code: "", }) export type CodeBlockProps = HTMLAttributes & { code: string language: string showLineNumbers?: boolean children?: ReactNode } export const CodeBlock = ({ code, language, showLineNumbers = false, className, children, ...props }: CodeBlockProps) => (

          {code}

{children &&

{children}

}

) export type CodeBlockCopyButtonProps = ComponentProps & { onCopy?: () => void onError?: (error: Error) => void timeout?: number } export const CodeBlockCopyButton = ({ onCopy, onError, timeout = 2000, children, className, ...props }: CodeBlockCopyButtonProps) => { const [isCopied, setIsCopied] = useState(false) const { code } = useContext(CodeBlockContext) const copyToClipboard = async () => { if (typeof window === "undefined" || !navigator.clipboard.writeText) { onError?.(new Error("Clipboard API not available")) return } try { await navigator.clipboard.writeText(code) setIsCopied(true) onCopy?.() setTimeout(() => setIsCopied(false), timeout) } catch (error) { onError?.(error as Error) } } const Icon = isCopied ? CheckIcon : CopyIcon return ( ) } [V0_FILE]typescriptreact:file="components/ai-elements/loader.tsx" import { cn } from "@/lib/utils"; import type { HTMLAttributes } from "react"; type LoaderIconProps = { size?: number; }; const LoaderIcon = ({ size = 16 }: LoaderIconProps) => ( ); export type LoaderProps = HTMLAttributes & { size?: number; }; export const Loader = ({ className, size = 16, ...props }: LoaderProps) => (

); [V0_FILE]typescriptreact:file="components/ai-elements/reasoning.tsx" "use client"; import { useControllableState } from "@radix-ui/react-use-controllable-state"; import { Collapsible, CollapsibleContent, CollapsibleTrigger, } from "@/components/ui/collapsible"; import { cn } from "@/lib/utils"; import { BrainIcon, ChevronDownIcon } from "lucide-react"; import type { ComponentProps } from "react"; import { createContext, memo, useContext, useEffect, useState } from "react"; import { Response } from "./response"; type ReasoningContextValue = { isStreaming: boolean; isOpen: boolean; setIsOpen: (open: boolean) => void; duration: number; }; const ReasoningContext = createContext(null); const useReasoning = () => { const context = useContext(ReasoningContext); if (!context) { throw new Error("Reasoning components must be used within Reasoning"); } return context; }; export type ReasoningProps = ComponentProps & { isStreaming?: boolean; open?: boolean; defaultOpen?: boolean; onOpenChange?: (open: boolean) => void; duration?: number; }; const AUTO_CLOSE_DELAY = 1000; const MS_IN_S = 1000; export const Reasoning = memo( ({ className, isStreaming = false, open, defaultOpen = true, onOpenChange, duration: durationProp, children, ...props }: ReasoningProps) => { const [isOpen, setIsOpen] = useControllableState({ prop: open, defaultProp: defaultOpen, onChange: onOpenChange, }); const [duration, setDuration] = useControllableState({ prop: durationProp, defaultProp: 0, }); const [hasAutoClosed, setHasAutoClosed] = useState(false); const [startTime, setStartTime] = useState(null); // Track duration when streaming starts and ends useEffect(() => { if (isStreaming) { if (startTime === null) { setStartTime(Date.now()); } } else if (startTime !== null) { setDuration(Math.ceil((Date.now() - startTime) / MS_IN_S)); setStartTime(null); } }, [isStreaming, startTime, setDuration]); // Auto-open when streaming starts, auto-close when streaming ends (once only) useEffect(() => { if (defaultOpen && !isStreaming && isOpen && !hasAutoClosed) { // Add a small delay before closing to allow user to see the content const timer = setTimeout(() => { setIsOpen(false); setHasAutoClosed(true); }, AUTO_CLOSE_DELAY); return () => clearTimeout(timer); } }, [isStreaming, isOpen, defaultOpen, setIsOpen, hasAutoClosed]); const handleOpenChange = (newOpen: boolean) => { setIsOpen(newOpen); }; return ( {children} ); } ); export type ReasoningTriggerProps = ComponentProps; const getThinkingMessage = (isStreaming: boolean, duration?: number) => { if (isStreaming || duration === 0) { return

Thinking...

; } if (duration === undefined) { return

Thought for a few seconds

; } return

Thought for {duration} seconds

; }; export const ReasoningTrigger = memo( ({ className, children, ...props }: ReasoningTriggerProps) => { const { isStreaming, isOpen, duration } = useReasoning(); return ( {children ?? ( <> {getThinkingMessage(isStreaming, duration)} )} ); } ); export type ReasoningContentProps = ComponentProps< typeof CollapsibleContent > & { children: string; }; export const ReasoningContent = memo( ({ className, children, ...props }: ReasoningContentProps) => ( {children} ) ); Reasoning.displayName = "Reasoning"; ReasoningTrigger.displayName = "ReasoningTrigger"; ReasoningContent.displayName = "ReasoningContent"; [V0_FILE]typescriptreact:file="components/ai-elements/response.tsx" "use client"; import { cn } from "@/lib/utils"; import { type ComponentProps, memo } from "react"; import { Streamdown } from "streamdown"; type ResponseProps = ComponentProps; export const Response = memo( ({ className, ...props }: ResponseProps) => ( *:first-child]:mt-0 [&>*:last-child]:mb-0", className )} {...props} /> ), (prevProps, nextProps) => prevProps.children === nextProps.children ); Response.displayName = "Response"; [V0_FILE]typescriptreact:file="components/ai-elements/suggestion.tsx" "use client"; import { Button } from "@/components/ui/button"; import { ScrollArea, ScrollBar, } from "@/components/ui/scroll-area"; import { cn } from "@/lib/utils"; import type { ComponentProps } from "react"; export type SuggestionsProps = ComponentProps; export const Suggestions = ({ className, children, ...props }: SuggestionsProps) => (

{children}

); export type SuggestionProps = Omit, "onClick"> & { suggestion: string; onClick?: (suggestion: string) => void; }; export const Suggestion = ({ suggestion, onClick, className, variant = "outline", size = "sm", children, ...props }: SuggestionProps) => { const handleClick = () => { onClick?.(suggestion); }; return ( ); }; [V0_FILE]typescriptreact:file="components/ai-elements/task.tsx" "use client"; import { Collapsible, CollapsibleContent, CollapsibleTrigger, } from "@/components/ui/collapsible"; import { cn } from "@/lib/utils"; import { ChevronDownIcon, SearchIcon } from "lucide-react"; import type { ComponentProps } from "react"; export type TaskItemFileProps = ComponentProps<"div">; export const TaskItemFile = ({ children, className, ...props }: TaskItemFileProps) => (

{children}

); export type TaskItemProps = ComponentProps<"div">; export const TaskItem = ({ children, className, ...props }: TaskItemProps) => (

{children}

); export type TaskProps = ComponentProps; export const Task = ({ defaultOpen = true, className, ...props }: TaskProps) => ( ); export type TaskTriggerProps = ComponentProps & { title: string; }; export const TaskTrigger = ({ children, className, title, ...props }: TaskTriggerProps) => ( {children ?? (

{title}

)} ); export type TaskContentProps = ComponentProps; export const TaskContent = ({ children, className, ...props }: TaskContentProps) => (

{children}

); [V0_FILE]typescriptreact:file="components/ai-elements/tool.tsx" "use client"; import { Badge } from "@/components/ui/badge"; import { Collapsible, CollapsibleContent, CollapsibleTrigger, } from "@/components/ui/collapsible"; import { cn } from "@/lib/utils"; import type { ToolUIPart } from "ai"; import { CheckCircleIcon, ChevronDownIcon, CircleIcon, ClockIcon, WrenchIcon, XCircleIcon, } from "lucide-react"; import type { ComponentProps, ReactNode } from "react"; import { isValidElement } from "react"; import { CodeBlock } from "./code-block"; export type ToolProps = ComponentProps; export const Tool = ({ className, ...props }: ToolProps) => ( ); export type ToolHeaderProps = { title?: string; type: ToolUIPart["type"]; state: ToolUIPart["state"]; className?: string; }; const getStatusBadge = (status: ToolUIPart["state"]) => { const labels = { "input-streaming": "Pending", "input-available": "Running", "output-available": "Completed", "output-error": "Error", } as const; const icons = { "input-streaming": , "input-available": , "output-available": , "output-error": , } as const; return ( {icons[status]} {labels[status]} ); }; export const ToolHeader = ({ className, title, type, state, ...props }: ToolHeaderProps) => (

{title ?? type.split("-").slice(1).join("-")} {getStatusBadge(state)}

); export type ToolContentProps = ComponentProps; export const ToolContent = ({ className, ...props }: ToolContentProps) => ( ); export type ToolInputProps = ComponentProps<"div"> & { input: ToolUIPart["input"]; }; export const ToolInput = ({ className, input, ...props }: ToolInputProps) => (

Parameters

); export type ToolOutputProps = ComponentProps<"div"> & { output: ToolUIPart["output"]; errorText: ToolUIPart["errorText"]; }; export const ToolOutput = ({ className, output, errorText, ...props }: ToolOutputProps) => { if (!(output || errorText)) { return null; } let Output =

{output as ReactNode}

; if (typeof output === "object" && !isValidElement(output)) { Output = ( ); } else if (typeof output === "string") { Output = ; } return (

{errorText ? "Error" : "Result"}

{errorText &&

{errorText}

} {Output}

); }; [V0_FILE]typescriptreact:file="components/results.tsx" "use client"; import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from "@/components/ui/table"; import { CheckCircleIcon, ChevronRightIcon } from "lucide-react"; import { useState, Fragment } from "react"; import type { AggregatedResult } from "@/lib/get-aggregated-results"; interface ResultsProps { results: AggregatedResult[]; } export function Results({ results }: ResultsProps) { const [expandedRows, setExpandedRows] = useState>(new Set()); const toggleRow = (index: number) => { const newExpanded = new Set(expandedRows); if (newExpanded.has(index)) { newExpanded.delete(index); } else { newExpanded.add(index); } setExpandedRows(newExpanded); }; if (results.length === 0) { return null; } return (

Visibility Results

Model Question Visible Avg Position Success Rate {results.map((result, i) => ( toggleRow(i)} > {result.model} {result.question} {result.visible ? ( ) : ( — )} {result.position ? ( #{result.position} ) : ( — )}

{result.runs} {result.failedCount > 0 && ( ({result.failedCount} failed) )}

{expandedRows.has(i) && (

LLM Responses ({result.answers.length} runs)

{result.answers.length > 0 ? (

{result.answers.map((answer, idx) => (

Run {idx + 1}

{answer}

))}

) : (

No responses yet

)}

)} ))}

); } [V0_FILE]typescriptreact:file="components/theme-provider.tsx" 'use client' import * as React from 'react' import { ThemeProvider as NextThemesProvider, type ThemeProviderProps, } from 'next-themes' export function ThemeProvider({ children, ...props }: ThemeProviderProps) { return {children} } [V0_FILE]typescriptreact:file="components/theme-switcher.tsx" "use client" import * as React from "react" import { Moon, Sun, Monitor } from "lucide-react" import { Button } from "@/components/ui/button" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu" export function ThemeSwitcher() { const [theme, setTheme] = React.useState<"light" | "dark" | "system">("system") React.useEffect(() => { const root = window.document.documentElement const savedTheme = localStorage.getItem("theme") as "light" | "dark" | "system" | null if (savedTheme) { setTheme(savedTheme) } const applyTheme = (currentTheme: "light" | "dark" | "system") => { root.classList.remove("light", "dark") if (currentTheme === "system") { const systemTheme = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light" root.classList.add(systemTheme) } else { root.classList.add(currentTheme) } } applyTheme(savedTheme || theme) const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)") const handleChange = () => { if (theme === "system") { applyTheme("system") } } mediaQuery.addEventListener("change", handleChange) return () => mediaQuery.removeEventListener("change", handleChange) }, [theme]) const handleThemeChange = (newTheme: "light" | "dark" | "system") => { setTheme(newTheme) localStorage.setItem("theme", newTheme) const root = window.document.documentElement root.classList.remove("light", "dark") if (newTheme === "system") { const systemTheme = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light" root.classList.add(systemTheme) } else { root.classList.add(newTheme) } } return ( handleThemeChange("light")}> Light handleThemeChange("dark")}> Dark handleThemeChange("system")}> System ) } [V0_FILE]typescriptreact:file="components/ui/badge.tsx" import * as React from "react" import { Slot } from "@radix-ui/react-slot" import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" const badgeVariants = cva( "inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-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 transition-[color,box-shadow] overflow-hidden", { variants: { variant: { default: "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90", secondary: "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90", destructive: "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60", outline: "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground", }, }, defaultVariants: { variant: "default", }, } ) function Badge({ className, variant, asChild = false, ...props }: React.ComponentProps<"span"> & VariantProps & { asChild?: boolean }) { const Comp = asChild ? Slot : "span" return ( ) } export { Badge, badgeVariants } [V0_FILE]typescriptreact:file="components/ui/button.tsx" import * as React from 'react' import { Slot } from '@radix-ui/react-slot' import { cva, type VariantProps } from 'class-variance-authority' import { cn } from '@/lib/utils' const buttonVariants = cva( "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all 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", { variants: { variant: { default: 'bg-primary text-primary-foreground hover:bg-primary/90', destructive: 'bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60', outline: 'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50', secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80', ghost: 'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50', link: 'text-primary underline-offset-4 hover:underline', }, size: { default: 'h-9 px-4 py-2 has-[>svg]:px-3', sm: 'h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5', lg: 'h-10 rounded-md px-6 has-[>svg]:px-4', icon: 'size-9', 'icon-sm': 'size-8', 'icon-lg': 'size-10', }, }, defaultVariants: { variant: 'default', size: 'default', }, }, ) function Button({ className, variant, size, asChild = false, ...props }: React.ComponentProps<'button'> & VariantProps & { asChild?: boolean }) { const Comp = asChild ? Slot : 'button' return ( ) } export { Button, buttonVariants } [V0_FILE]typescriptreact:file="components/ui/collapsible.tsx" "use client" import * as CollapsiblePrimitive from "@radix-ui/react-collapsible" function Collapsible({ ...props }: React.ComponentProps) { return } function CollapsibleTrigger({ ...props }: React.ComponentProps) { return ( ) } function CollapsibleContent({ ...props }: React.ComponentProps) { return ( ) } export { Collapsible, CollapsibleTrigger, CollapsibleContent } [V0_FILE]typescriptreact:file="components/ui/dropdown-menu.tsx" 'use client' import * as React from 'react' import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu' import { CheckIcon, ChevronRightIcon, CircleIcon } from 'lucide-react' import { cn } from '@/lib/utils' function DropdownMenu({ ...props }: React.ComponentProps) { return } function DropdownMenuPortal({ ...props }: React.ComponentProps) { return ( ) } function DropdownMenuTrigger({ ...props }: React.ComponentProps) { return ( ) } function DropdownMenuContent({ className, sideOffset = 4, ...props }: React.ComponentProps) { return ( ) } function DropdownMenuGroup({ ...props }: React.ComponentProps) { return ( ) } function DropdownMenuItem({ className, inset, variant = 'default', ...props }: React.ComponentProps & { inset?: boolean variant?: 'default' | 'destructive' }) { return ( ) } function DropdownMenuCheckboxItem({ className, children, checked, ...props }: React.ComponentProps) { return ( {children} ) } function DropdownMenuRadioGroup({ ...props }: React.ComponentProps) { return ( ) } function DropdownMenuRadioItem({ className, children, ...props }: React.ComponentProps) { return ( {children} ) } function DropdownMenuLabel({ className, inset, ...props }: React.ComponentProps & { inset?: boolean }) { return ( ) } function DropdownMenuSeparator({ className, ...props }: React.ComponentProps) { return ( ) } function DropdownMenuShortcut({ className, ...props }: React.ComponentProps<'span'>) { return ( ) } function DropdownMenuSub({ ...props }: React.ComponentProps) { return } function DropdownMenuSubTrigger({ className, inset, children, ...props }: React.ComponentProps & { inset?: boolean }) { return ( {children} ) } function DropdownMenuSubContent({ className, ...props }: React.ComponentProps) { return ( ) } export { DropdownMenu, DropdownMenuPortal, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuGroup, DropdownMenuLabel, DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubTrigger, DropdownMenuSubContent, } [V0_FILE]typescriptreact:file="components/ui/input.tsx" import * as React from 'react' import { cn } from '@/lib/utils' function Input({ className, type, ...props }: React.ComponentProps<'input'>) { return ( ) } export { Input } [V0_FILE]typescriptreact:file="components/ui/label.tsx" 'use client' import * as React from 'react' import * as LabelPrimitive from '@radix-ui/react-label' import { cn } from '@/lib/utils' function Label({ className, ...props }: React.ComponentProps) { return ( ) } export { Label } [V0_FILE]typescriptreact:file="components/ui/scroll-area.tsx" "use client" import * as React from "react" import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area" import { cn } from "@/lib/utils" function ScrollArea({ className, children, ...props }: React.ComponentProps) { return ( {children} ) } function ScrollBar({ className, orientation = "vertical", ...props }: React.ComponentProps) { return ( ) } export { ScrollArea, ScrollBar } [V0_FILE]typescriptreact:file="components/ui/table.tsx" 'use client' import * as React from 'react' import { cn } from '@/lib/utils' function Table({ className, ...props }: React.ComponentProps<'table'>) { return (

) } function TableHeader({ className, ...props }: React.ComponentProps<'thead'>) { return ( ) } function TableBody({ className, ...props }: React.ComponentProps<'tbody'>) { return ( ) } function TableFooter({ className, ...props }: React.ComponentProps<'tfoot'>) { return ( tr]:last:border-b-0', className, )} {...props} /> ) } function TableRow({ className, ...props }: React.ComponentProps<'tr'>) { return ( ) } function TableHead({ className, ...props }: React.ComponentProps<'th'>) { return (

) } export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption, } [V0_FILE]typescript:file="lib/constants.ts" export const MODELS = [ { id: "openai/gpt-oss-20b", name: "OpenAI" }, { id: "google/gemini-2.0-flash-lite", name: "Google" }, { id: "anthropic/claude-3-haiku", name: "Anthropic" }, ] [V0_FILE]typescript:file="lib/get-aggregated-results.ts" import type { RunStatus } from "@/lib/upstash"; import { MODELS } from "@/lib/constants"; export interface AggregatedResult { model: string; question: string; visible: boolean; position: number | null; runs: string; answers: string[]; failedCount: number; } export function getAggregatedResults( status: RunStatus | null ): AggregatedResult[] { if (!status?.questions || !status?.answers) return []; const results: AggregatedResult[] = []; for (const question of status.questions) { for (const model of MODELS) { const modelAnswers = status.answers.filter( (a) => a.questionId === question.id && a.model === model.id ); const successfulAnswers = modelAnswers.filter((a) => !a.failed); const failedCount = modelAnswers.filter((a) => a.failed).length; const visibleCount = successfulAnswers.filter((a) => a.mentioned).length; const totalRuns = modelAnswers.length; const answersWithPosition = successfulAnswers.filter( (a) => a.mentioned && a.position !== null ); const avgPosition = answersWithPosition.length > 0 ? Math.round( answersWithPosition.reduce( (sum, a) => sum + (a.position || 0), 0 ) / answersWithPosition.length ) : null; results.push({ model: model.name, question: question.question, visible: visibleCount > 0, position: avgPosition, runs: `${visibleCount}/${totalRuns}`, answers: successfulAnswers.map((a) => a.answer), failedCount, }); } } return results; } [V0_FILE]typescript:file="lib/upstash.ts" import { Redis } from "@upstash/redis" export const redis = Redis.fromEnv() export type BrandContext = { brand: string context: string timestamp: number } export type Question = { id: string question: string } export type VisibilityAnswer = { questionId: string model: string run: number answer: string mentioned: boolean position: number | null timestamp: number failed?: boolean // Add optional failed flag error?: string // Add optional error message } export type RunStatus = { runId: string brand: string context: BrandContext | null questions: Question[] | null answers: VisibilityAnswer[] totalAnswers: number completedAnswers: number status: "pending" | "context" | "questions" | "checking" | "complete" | "failed" } [V0_FILE]typescript:file="lib/use-interval-polling-results.ts" import { useEffect, useRef } from "react"; import type { RunStatus } from "@/lib/upstash"; const MAX_POLLING_TIME = 5 * 60 * 1000; // 5 minutes interface UseIntervalPollingResultsProps { runId: string | null; isRunning: boolean; setStatus: (status: RunStatus) => void; setError: (error: string | null) => void; setIsRunning: (isRunning: boolean) => void; } export function useIntervalPollingResults({ runId, isRunning, setStatus, setError, setIsRunning, }: UseIntervalPollingResultsProps) { const pollingIntervalRef = useRef(null); const startTimeRef = useRef(null); const stopPolling = () => { setIsRunning(false); if (pollingIntervalRef.current) { clearInterval(pollingIntervalRef.current); pollingIntervalRef.current = null; } }; useEffect(() => { if (!runId || !isRunning) return; // Set start time when polling begins if (!startTimeRef.current) { startTimeRef.current = Date.now(); } const pollStatus = async () => { try { // Check if 5 minutes have passed if ( startTimeRef.current && Date.now() - startTimeRef.current > MAX_POLLING_TIME ) { console.log("[v0] Max polling time reached, stopping"); stopPolling(); setError("Timeout: Process took longer than 5 minutes"); return; } const response = await fetch(`/api/check-status?runId=${runId}`); if (!response.ok) throw new Error("Failed to fetch status"); const data: RunStatus = await response.json(); setStatus(data); // Stop polling if complete or failed if (data.status === "complete" || data.completedAnswers === 27) { console.log("[v0] All answers complete, stopping polling"); stopPolling(); } } catch (err) { console.log("[v0] Error polling status:", err); setError("Failed to check status"); } }; // Poll immediately on start to show initial results faster pollStatus(); // Set up interval for subsequent polls pollingIntervalRef.current = setInterval(pollStatus, 2000); return () => { if (pollingIntervalRef.current) { clearInterval(pollingIntervalRef.current); } }; }, [runId, isRunning]); // Reset start time when not running useEffect(() => { if (!isRunning) { startTimeRef.current = null; } }, [isRunning]); return { stopPolling }; } [V0_FILE]typescript:file="lib/utils.ts" import { clsx, type ClassValue } from 'clsx' import { twMerge } from 'tailwind-merge' export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)) } [V0_FILE]javascript:file="next.config.mjs" /** @type {import('next').NextConfig} */ const nextConfig = { eslint: { ignoreDuringBuilds: true, }, typescript: { ignoreBuildErrors: true, }, images: { unoptimized: true, }, } export default nextConfig [V0_FILE]json:file="package.json" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "build": "next build", "dev": "next dev", "lint": "next lint", "start": "next start" }, "dependencies": { "@hookform/resolvers": "^3.10.0", "@radix-ui/react-accordion": "1.2.2", "@radix-ui/react-alert-dialog": "1.1.4", "@radix-ui/react-aspect-ratio": "1.1.1", "@radix-ui/react-avatar": "1.1.2", "@radix-ui/react-checkbox": "1.1.3", "@radix-ui/react-collapsible": "latest", "@radix-ui/react-context-menu": "2.2.4", "@radix-ui/react-dialog": "1.1.4", "@radix-ui/react-dropdown-menu": "latest", "@radix-ui/react-hover-card": "1.1.4", "@radix-ui/react-label": "latest", "@radix-ui/react-menubar": "1.1.4", "@radix-ui/react-navigation-menu": "1.2.3", "@radix-ui/react-popover": "1.1.4", "@radix-ui/react-progress": "1.1.1", "@radix-ui/react-radio-group": "1.2.2", "@radix-ui/react-scroll-area": "latest", "@radix-ui/react-select": "2.1.4", "@radix-ui/react-separator": "1.1.1", "@radix-ui/react-slider": "1.2.2", "@radix-ui/react-slot": "latest", "@radix-ui/react-switch": "1.1.2", "@radix-ui/react-tabs": "1.1.2", "@radix-ui/react-toast": "1.2.4", "@radix-ui/react-toggle": "1.1.1", "@radix-ui/react-toggle-group": "1.1.1", "@radix-ui/react-tooltip": "1.1.6", "@radix-ui/react-use-controllable-state": "latest", "@upstash/redis": "latest", "@vercel/analytics": "latest", "ai": "latest", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "lucide-react": "^0.454.0", "next": "15.2.4", "next-themes": "latest", "react": "^19", "react-dom": "^19", "streamdown": "latest", "tailwind-merge": "^2.5.5", "tailwindcss-animate": "^1.0.7", "zod": "3.25.76" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^19", "@types/react-dom": "^19", "@types/react-syntax-highlighter": "^15.5.13", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } } [V0_FILE]javascript:file="postcss.config.mjs" /** @type {import('postcss-load-config').Config} */ const config = { plugins: { '@tailwindcss/postcss': {}, }, } export default config [V0_FILE]markdown:file="prompts/prompt-add-stripe.md" Add payment button for user to pay for the AI Visibility Checks. Make sure that this is the first step in the flow so I will not make any AI calls before payment is done. I want to charge 2.99 dollars for one-time run. After the payment is done, show success and a button to start the flow. Add button "pay for one-time run" to the flow. [V0_FILE]markdown:file="prompts/zero-shot-prompt-create-app-in-v0.md" Build a minimal SaaS app called “AI Visibility Checker” using Next.js (App Router), Vercel AI SDK, AI Gateway, AI Elements. UX Super simple layout in the style of Vercel UX. Black and white only. No color accents. Responsive across mobile, tablet, desktop. Theme toggle with light / dark / system. Single-page flow with a centered card and generous spacing. Use Tailwind and shadcn/ui. Data schemas: MasterContext: - runId - context: just JSON object. No need to be more specific Questions: - runId - questions: array of strings Postions: - id - runId - modelName - Question - Answer - IsVisible - position - numberOfResults - Competition - createdAt Flow Input A heading: “Check your brand’s visibility in LLMs”. A textarea labeled “Brand or product description” that accepts a brand name, product, or short description. Button: “Generate Context”. show Thinking form AI Elements -> build Context After click, show AI Elements: grey out the button and show Loader while the request runs. Task list with steps from AI Elements. Chain of Thought component to show the step names and safe summaries for from AI Elements: “Create master context” → “Show context JSON”. Call POST /api/create-brand-context and render the returned masterContext JSON in a collapsible code block from AI Elements. If sources are present, show a “Sources” from AI Elements section with links. masterContext should be few properties max 2 level depth and should be only the most important properties. It should be small to medium size and concise. In UI show the masterContext JSON in a collapsible code block from AI Elements. next step show Thinking from AI Elements -> build suggested Questions Automatically trigger question generation with AI Elements: Loader and Task steps. Chain of Thought step labels: “Generate questions” → “Review questions”. Call POST /api/generate-questions with number = 5. Render the 10 questions with inline edit and delete controls. Parallel Visibility Checks Button: “Check Visibility Across Models”. On click, show AI Elements: Loader and Task or Tool steps per model. Chain of Thought step labels: “Send queries” → “Aggregate positions” → “Plot results”. Call POST /api/check-visibility in parallel across models: OpenAI GPT-5, OpenAI Mini, Google Gemini, Anthropic Claude via AI Gateway. For each model: Ask all questions in parallel. For each answer, detect if the brand is present. If multiple brands are listed, make a lightweight follow-up LLM call (e.g., OpenAI Mini) to return a position 1–10 for the target brand based on the answer text. Repeat each model’s measurement 5 times. Aggregate with median position and visibility rate (percentage of runs where brand was found). Visualization Show a table : Model, Question, Median Position, Visibility Rate. Make sure it's responsive and mobile friendly. AI Elements usage Chain of Thought: show step labels and short safe summaries for each phase: context creation, question generation, visibility checks, aggregation, plotting. Loader: show during network calls and parallel runs. Task or Tool: display progress per step and per model. API design Create exactly 3 API routes and use them throughout: 1. POST /api/create-brand-context → create-brand-context(brand: string) Input: brand: string Uses AI SDK via AI Gateway to generate a masterContext JSON summarizing the brand or product. Return: { masterContext: object}. 2. POST /api/generate-questions → generate-questions(number: number, masterContext: object) Input: { number: number, masterContext: object } Uses AI SDK to produce 5 concise, diverse, brand-relevant questions. Return: { questions: string[] }. Here is example prompt: "Generate AEO-optimized questions for AI search engines like ChatGPT, Claude, and Gemini using only the provided master context JSON. Create natural questions real users would ask AI assistants. Users don’t know the brand yet and are asking to discover solutions, prices, or providers. Output only the questions" In UI and add information (info box or warning) to review and manually reduce to 3 for demo purpose to save on tokens. Add info to check on vercel AI Gateway how many tokens it's using. 3. POST /api/check-visibility → check-visibility(model: string, questions: string[], brandName: string, masterContext: object) Input: model: string, questions: string[], brandName: string, masterContext: object For each question, call the specified model via AI Gateway. Then detect presence of the brand or product in the master context using lightweight LLM call to populate position object with IsVisible, position, and numberOfResults, competition. add meta data to the position object. IsVisible will be set to true if the brand or product is found in the answer. Repeat the above 3 times for stability. Later in UI those 3 runs will be aggregated with median position and visibility percentage. Those 3 runs should be shown in UI for each question and model one after another in the progress bar. Make sure to show the progress bar for each question and model. So each question check will be called from the frontend to give user the feeling that the check is running. Return: {positions: object[]} Orchestration Use AI Gateway for all model calls with provider routing and sensible timeouts (5 minutes) Implement parallelism with Promise.allSettled. Add a small concurrency cap for stability. Model list constants with Gateway IDs, e.g.: MODELS = [ { id: "openai/gpt-oss-20b", name: "OpenAI GPT-OSS" }, { id: "google/gemini-2.0-flash-lite", name: "Google Gemini 2.5 Flash Lite" }, { id: "anthropic/claude-3-haiku", name: "Anthropic Claude 3 Haiku" } ] info: It's importnat that in model list definitions DO NOT use GPT-5 and for API routes use GPT-5-mini. Final results Create a table of all results for each question for each model. When clicked on a question it will show all the results for that question for that model. Misc Use Zod for input validation on all API routes. DO NOT use database or any storage. All data is in broweser memory and will be passed what is needed to the API routes. Do not hide steps after each step. I want to see all the steps how agent is working. Minimal error toasts using shadcn/ui. Make sure to zod validate all input and output for all API routes. Add error handling for all API routes and report on which model failed and why. Surface all errors to the user. Use AI SDK version 5! Make sure to use AI Elemenents (UI components from https://ai-sdk.dev/elements/overview), especially: - "Chain of Thought" for whole steps - "Loader" with greying out the buttons - "Branch" for showing different Questions and Answers details for each question runs - "Code Block" for showing the JSON data - "Prompt Input" without plus icon, greayed out search and removed model selection - "Response" for showing the answer when clicked on the question details. - "Suggestion" for preselected brand check like "Vercel", or "Tesla cars" just below the input field. - "Task" for showing the information in a "Chain of Thought" to describe the step. - "Tool" for showing the information in a "Chain of Thought" like master context or progress bar for parallel runs For the calls use Next.js Server Actions for buttons and API routes for the question checks. Make sure the project will be very simple and easy to understand and maintain. This project will be used as a template and a workshop for AI Agents and AI SDK. [V0_FILE]css:file="styles/globals.css" @import 'tailwindcss'; @import 'tw-animate-css'; @custom-variant dark (&:is(.dark *)); :root { --background: oklch(1 0 0); --foreground: oklch(0.145 0 0); --card: oklch(1 0 0); --card-foreground: oklch(0.145 0 0); --popover: oklch(1 0 0); --popover-foreground: oklch(0.145 0 0); --primary: oklch(0.205 0 0); --primary-foreground: oklch(0.985 0 0); --secondary: oklch(0.97 0 0); --secondary-foreground: oklch(0.205 0 0); --muted: oklch(0.97 0 0); --muted-foreground: oklch(0.556 0 0); --accent: oklch(0.97 0 0); --accent-foreground: oklch(0.205 0 0); --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(0.577 0.245 27.325); --border: oklch(0.922 0 0); --input: oklch(0.922 0 0); --ring: oklch(0.708 0 0); --chart-1: oklch(0.646 0.222 41.116); --chart-2: oklch(0.6 0.118 184.704); --chart-3: oklch(0.398 0.07 227.392); --chart-4: oklch(0.828 0.189 84.429); --chart-5: oklch(0.769 0.188 70.08); --radius: 0.625rem; --sidebar: oklch(0.985 0 0); --sidebar-foreground: oklch(0.145 0 0); --sidebar-primary: oklch(0.205 0 0); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.97 0 0); --sidebar-accent-foreground: oklch(0.205 0 0); --sidebar-border: oklch(0.922 0 0); --sidebar-ring: oklch(0.708 0 0); } .dark { --background: oklch(0.145 0 0); --foreground: oklch(0.985 0 0); --card: oklch(0.145 0 0); --card-foreground: oklch(0.985 0 0); --popover: oklch(0.145 0 0); --popover-foreground: oklch(0.985 0 0); --primary: oklch(0.985 0 0); --primary-foreground: oklch(0.205 0 0); --secondary: oklch(0.269 0 0); --secondary-foreground: oklch(0.985 0 0); --muted: oklch(0.269 0 0); --muted-foreground: oklch(0.708 0 0); --accent: oklch(0.269 0 0); --accent-foreground: oklch(0.985 0 0); --destructive: oklch(0.396 0.141 25.723); --destructive-foreground: oklch(0.637 0.237 25.331); --border: oklch(0.269 0 0); --input: oklch(0.269 0 0); --ring: oklch(0.439 0 0); --chart-1: oklch(0.488 0.243 264.376); --chart-2: oklch(0.696 0.17 162.48); --chart-3: oklch(0.769 0.188 70.08); --chart-4: oklch(0.627 0.265 303.9); --chart-5: oklch(0.645 0.246 16.439); --sidebar: oklch(0.205 0 0); --sidebar-foreground: oklch(0.985 0 0); --sidebar-primary: oklch(0.488 0.243 264.376); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.269 0 0); --sidebar-accent-foreground: oklch(0.985 0 0); --sidebar-border: oklch(0.269 0 0); --sidebar-ring: oklch(0.439 0 0); } @theme inline { --font-sans: var(--font-geist-sans); --font-mono: var(--font-geist-mono); --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; } } [V0_FILE]json:file="tsconfig.json" { "compilerOptions": { "lib": ["dom", "dom.iterable", "esnext"], "allowJs": true, "target": "ES6", "skipLibCheck": true, "strict": true, "noEmit": true, "esModuleInterop": true, "module": "esnext", "moduleResolution": "bundler", "resolveJsonModule": true, "isolatedModules": true, "jsx": "preserve", "incremental": true, "plugins": [ { "name": "next" } ], "paths": { "@/*": ["./*"] } }, "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"], "exclude": ["node_modules"] } [V0_FILE]png:file="public/placeholder-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_otjM5Ad5NSwTg8Bvtz1xOCkfeeTU/1uv3SMJqY6_jxcFCTgTEak/public/placeholder-logo.png" [V0_FILE]xml:file="public/placeholder-logo.svg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_otjM5Ad5NSwTg8Bvtz1xOCkfeeTU/XB_XF8ESrwbAjotfOd5Wmb/public/placeholder-logo.svg" [V0_FILE]jpg:file="public/placeholder-user.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_otjM5Ad5NSwTg8Bvtz1xOCkfeeTU/ONejAluG3EJATcwwA61bXn/public/placeholder-user.jpg" [V0_FILE]jpg:file="public/placeholder.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_otjM5Ad5NSwTg8Bvtz1xOCkfeeTU/BlrBc_c6JuPtjsBHFMcNJn/public/placeholder.jpg" [V0_FILE]xml:file="public/placeholder.svg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_otjM5Ad5NSwTg8Bvtz1xOCkfeeTU/J0QvC3Vjlpi92ZtRdLC4Mx/public/placeholder.svg"
[role=checkbox]]:translate-y-[2px]', className, )} {...props} /> ) } function TableCell({ className, ...props }: React.ComponentProps<'td'>) { return (	[role=checkbox]]:translate-y-[2px]', className, )} {...props} /> ) } function TableCaption({ className, ...props }: React.ComponentProps<'caption'>) { return (

About

Tags

Share

About

Tags

Share

About

Tags

Share

About

Tags

Share