63:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 64:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 65:T3827,"use client" import { useState } from "react" import Image from "next/image" import { ArrowLeft, BookOpen, Building, Building2, CircleDashed, Code2, Download, Megaphone, Palette, Rocket, TrendingUp, } from "lucide-react" import { cn } from "@/lib/utils" import { Button } from "@/components/ui/button" import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, } from "@/components/ui/dialog" import { ChoiceGroup, FeatureCarousel, Onboarding, TipsList, useOnboarding, } from "../ui/onboarding" const STEP_CONFIG = [ { title: "Welcome to AI SDK Agents", description: "Start shipping ai agents that actually work.", }, { title: "Personalize your experience", description: "Tell us about yourself so we can tailor the experience", }, { title: "You're ready to go!", description: "A few tips to get the most out of AI SDK Agents", }, ] export const FEATURES = [ { id: "source-code", icon: Code2, // swap Sparkles → Code2 title: "Full Stack Source Code", description: "Browse and copy the complete source code for every pattern directly from the Source Code tab.", image: "/component-images/onboarding/onboarding-source-code.png", }, { id: "skills", icon: BookOpen, // swap ImagePlus → BookOpen (or similar) title: "Copy Skills & Critical Files", description: "Copy agent skills and critical files to supercharge your AI-powered workflows.", image: "/component-images/onboarding/onboarding-skills.png", }, { id: "download", icon: Download, // swap Lightbulb → Download title: "Download as Next.js App", description: "Download any pattern as a fully working Next.js application, ready to run locally.", image: "/component-images/onboarding/onboarding-nextjs.png", }, ] as const export const ROLES = [ { id: "designer", label: "Designer", icon: Palette }, { id: "founder", label: "Founder", icon: Rocket }, { id: "sales", label: "Sales", icon: TrendingUp }, { id: "freelancer", label: "Freelancer", icon: Building2 }, { id: "marketing", label: "Marketing", icon: Megaphone }, { id: "developer", label: "Developer", icon: Code2 }, { id: "agency", label: "Agency", icon: Building }, { id: "other", label: "Other", icon: CircleDashed }, ] as const export const GOALS = [ { id: "ai-agents", label: "Building AI agents" }, { id: "chatbots", label: "Chatbots & assistants" }, { id: "automation", label: "Workflow automation" }, { id: "rag", label: "RAG & search" }, { id: "prototyping", label: "Rapid prototyping" }, { id: "other", label: "Something else" }, ] as const export const TIPS = [ { number: 1, text: "Browse patterns by use case to find the right agent architecture for your project.", }, { number: 2, text: "Use the Download as Next.js App button to get a fully working local project in seconds.", }, { number: 3, text: "Copy skills and critical files to quickly skill up claude code and cursor.", }, ] as const export const TOTAL_STEPS = 3 export const MAX_STEP_VALUE = FEATURES.length - 1 // ============================================================================ // Headless Primitives Demo (composable, uses shadcn tokens) // ============================================================================ export default function OnboardingDemo() { return } export function HeadlessOnboardingDemo() { const [open, setOpen] = useState(false) const [selectedRole, setSelectedRole] = useState(null) const [selectedGoal, setSelectedGoal] = useState(null) return (

) } function HeadlessOnboardingHeader() { const { currentStep } = useOnboarding() const config = STEP_CONFIG[currentStep - 1] return ( {/* */} {config.title} {config.description}

) } function HeadlessFeatureStep() { const { stepValue, setStepValue } = useOnboarding() return (

{FEATURES.map((feature, index) => { const Icon = feature.icon const isActive = stepValue === index return (

{feature.title}

{isActive && (

{feature.description}

)}

) })}

) } function HeadlessRoleStep({ selectedRole, onRoleSelect, selectedGoal, onGoalSelect, }: { selectedRole: string | null onRoleSelect: (v: string) => void selectedGoal: string | null onGoalSelect: (v: string) => void }) { const { handleNext } = useOnboarding() const [question, setQuestion] = useState(selectedGoal ? 2 : 1) return (

{question === 1 ? (

1 What best describes you?

{ onRoleSelect(v) setTimeout(() => setQuestion(2), 300) }} orientation="grid" value={selectedRole} > {ROLES.map((role) => { const Icon = role.icon const isSelected = selectedRole === role.id return ( {role.label} ) })}

Question 1 of 2

) : (

2 What do you want to create?

{ onGoalSelect(v) setTimeout(() => handleNext(), 300) }} orientation="grid" value={selectedGoal} > {GOALS.map((goal) => { const isSelected = selectedGoal === goal.id return ( {goal.label} ) })}

Question 2 of 2

)}

) } function HeadlessTipsStep() { return (

{TIPS.map((tip) => (

{tip.text}

))}

) } 62:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[null,["$","$L63",null,{"namespace":"@registrydirectory","registryDependencies":["onboarding"]}]]}],null]}],["$","$L64",null,{"files":[{"path":"registry/default/example/onboarding-demo.tsx","content":"$65","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]