PageSourceSearch

https://baml-examples.vercel.app/

html baml-examples.vercel.app collected 2026-10-03 06:09:44 UTC 36,227 bytes, 1 lines download raw bytes

1<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="/_next/static/css/15d2c895a69a97d9.css" data-precedence="next"/><link rel="stylesheet" href="/_next/static/css/1519ddf60b2ae011.css" data-precedence="next"/><link rel="preload" as="script" fetchPriority="low" href="/_next/static/chunks/webpack-855fd08b67604560.js"/>
1<script src="/_next/static/chunks/0654f8eb-7d9801b6ab3d13d7.js" async=""></script>
1<script src="/_next/static/chunks/120-7ab1e346b715fc93.js" async=""></script>
1<script src="/_next/static/chunks/main-app-2b59bd480d83691c.js" async=""></script>
1<script src="/_next/static/chunks/568-d82cebc65046f439.js" async=""></script>
1<script src="/_next/static/chunks/100-ba93c8a2cafbb640.js" async=""></script>
1<script src="/_next/static/chunks/806-9cf45983f2574f45.js" async=""></script>
1<script src="/_next/static/chunks/445-8f0ae43e6bf95aac.js" async=""></script>
1<script src="/_next/static/chunks/688-a27696ead9c48ecd.js" async=""></script>
1<script src="/_next/static/chunks/app/layout-732a9bec52873599.js" async=""></script>
1<script src="/_next/static/chunks/app/page-1e7d5a6f45885bca.js" async=""></script>
1<meta name="next-size-adjust" content=""/><title>BAML Examples</title><meta name="description" content="Examples using the BAML structured prompting language"/><link rel="icon" href="/favicon.ico" type="image/x-icon" sizes="16x16"/>
1<script>document.querySelectorAll('body link[rel="icon"], body link[rel="apple-touch-icon"]').forEach(el => document.head.appendChild(el))</script>
1<script src="/_next/static/chunks/polyfills-42372ed130431b0a.js" noModule=""></script>
1</head><body><div style="--sidebar-width:16rem;--sidebar-width-icon:3rem" class="group/sidebar-wrapper flex min-h-svh w-full has-[[data-variant=inset]]:bg-sidebar"><div class="group peer hidden md:block text-sidebar-foreground" data-state="expanded" data-collapsible="" data-variant="sidebar" data-side="left"><div class="duration-200 relative h-svh w-[--sidebar-width] bg-transparent transition-[width] ease-linear group-data-[collapsible=offcanvas]:w-0 group-data-[side=right]:rotate-180 group-data-[collapsible=icon]:w-[--sidebar-width-icon]"></div><div class="duration-200 fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] ease-linear md:flex left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)] group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l"><div data-sidebar="sidebar" class="flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow"><div data-sidebar="content" class="flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden bg-primary-foreground"><div data-sidebar="header" class="flex flex-col gap-2 p-4"><div class="flex items-center space-x-2"><img alt="baml-logo" loading="lazy" width="32" height="32" decoding="async" data-nimg="1" style="color:transparent" srcSet="/_next/image?url=%2Fbaml.png&amp;w=32&amp;q=75 1x, /_next/image?url=%2Fbaml.png&amp;w=64&amp;q=75 2x" src="/_next/image?url=%2Fbaml.png&amp;w=64&amp;q=75"/><span class="text-lg font-bold">BAML Examples</span></div></div><div data-sidebar="header" class="flex flex-col gap-2 p-2"><a target="_blank" rel="noopener noreferrer" class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-input bg-background hover:bg-accent hover:text-accent-foreground h-10 px-4 py-2" href="https://docs.boundaryml.com"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-external-link mr-2 h-4 w-4"><path d="M15 3h6v6"></path><path d="M10 14 21 3"></path><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path></svg>BAML Documentation</a></div><div data-sidebar="group" class="relative flex w-full min-w-0 flex-col p-2"><div data-sidebar="group-label" class="duration-200 flex h-8 shrink-0 items-center rounded-md text-xs font-medium text-sidebar-foreground/70 outline-none ring-sidebar-ring transition-[margin,opa] ease-linear focus-visible:ring-2 [&amp;&gt;svg]:size-4 [&amp;&gt;svg]:shrink-0 group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0 px-4 py-2">What is BAML?</div><div data-sidebar="group-content" class="w-full text-sm"><div class="px-4 py-2 text-sm text-muted-foreground"><p class="mb-2"><strong>BAML</strong> is a prompting language that prioritizes <strong>type-safety</strong> and an exceptional<!-- --> <strong>developer experience</strong>.</p><p>It simplifies making great UX (e.g. streaming) by reducing<!-- --> <strong>boilerplate</strong> code, while ensuring high<!-- --> <strong>accuracy</strong> and <strong>consistency</strong> <!-- -->with LLMs.</p></div></div></div><div data-sidebar="group" class="relative flex w-full min-w-0 flex-col p-2"><div data-sidebar="group-label" class="duration-200 flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 outline-none ring-sidebar-ring transition-[margin,opa] ease-linear focus-visible:ring-2 [&amp;&gt;svg]:size-4 [&amp;&gt;svg]:shrink-0 group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0">NextJS Demos</div><div data-sidebar="group-content" class="w-full text-sm"><ul data-sidebar="menu" class="flex w-full min-w-0 flex-col gap-4"><li data-sidebar="menu-item" class="group/menu-item relative" data-state="closed"><a class="peer/menu-button w-full gap-2 overflow-hidden p-2 text-left outline-none ring-sidebar-ring transition-[width,height,padding] focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu
1-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&amp;&gt;span:last-child]:truncate [&amp;&gt;svg]:size-4 [&amp;&gt;svg]:shrink-0 hover:text-sidebar-accent-foreground h-8 text-sm flex items-start space-x-4 rounded-lg px-4 py-2 hover:bg-muted group flex flex-col w-full items-start h-full" data-sidebar="menu-button" data-size="default" data-active="false" href="/examples/resume-parser"><div class="flex flex-row items-center"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-file-text h-5 w-5"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"></path><path d="M14 2v4a2 2 0 0 0 2 2h4"></path><path d="M10 9H8"></path><path d="M16 13H8"></path><path d="M16 17H8"></path></svg><span class="ml-3">Resume Parser</span></div><div class="flex flex-wrap gap-2 gap-y-1"><div class="inline-flex items-center rounded-full border px-2.5 transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80 text-xs font-medium capitalize py-0.5" style="background-color:hsl(2, 70%, 90%);opacity:0.5">streaming</div><div class="inline-flex items-center rounded-full border px-2.5 transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80 text-xs font-medium capitalize py-0.5" style="background-color:hsl(-189, 70%, 90%);opacity:0.5">structured outputs</div></div></a></li><li data-sidebar="menu-item" class="group/menu-item relative" data-state="closed"><a class="peer/menu-button w-full gap-2 overflow-hidden p-2 text-left outline-none ring-sidebar-ring transition-[width,height,padding] focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&amp;&gt;span:last-child]:truncate [&amp;&gt;svg]:size-4 [&amp;&gt;svg]:shrink-0 hover:text-sidebar-accent-foreground h-8 text-sm flex items-start space-x-4 rounded-lg px-4 py-2 hover:bg-muted group flex flex-col w-full items-start h-full" data-sidebar="menu-button" data-size="default" data-active="false" href="/examples/rag"><div class="flex flex-row items-center"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-message-circle h-5 w-5"><path d="M7.9 20A9 9 0 1 0 4 16.1L2 22Z"></path></svg><span class="ml-3">Q&amp;A Engine</span></div><div class="flex flex-wrap gap-2 gap-y-1"><div class="inline-flex items-center rounded-full border px-2.5 transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80 text-xs font-medium capitalize py-0.5" style="background-color:hsl(2, 70%, 90%);opacity:0.5">streaming</div><div class="inline-flex items-center rounded-full border px-2.5 transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80 text-xs font-medium capitalize py-0.5" style="background-color:hsl(248, 70%, 90%);opacity:0.5">RAG</div><div class="inline-flex items-center rounded-full border px-2.5 transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80 text-xs font-medium capitalize py-0.5" style="background-color:hsl(-42, 70%, 90%);opacity:0.5">hallucination detection</div></div></a></li><li data-sidebar="menu-item" class="group/menu-item relative" data-state="closed"><a class="peer/menu-button w-full gap-2 overflow-hidden p-2 text-left outline-none ring-sidebar-ring transition-[width,height,padding] focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu
1-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&amp;&gt;span:last-child]:truncate [&amp;&gt;svg]:size-4 [&amp;&gt;svg]:shrink-0 hover:text-sidebar-accent-foreground h-8 text-sm flex items-start space-x-4 rounded-lg px-4 py-2 hover:bg-muted group flex flex-col w-full items-start h-full" data-sidebar="menu-button" data-size="default" data-active="false" href="/examples/book-analyzer"><div class="flex flex-row items-center"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chart-no-axes-column-increasing h-5 w-5"><line x1="12" x2="12" y1="20" y2="10"></line><line x1="18" x2="18" y1="20" y2="4"></line><line x1="6" x2="6" y1="20" y2="16"></line></svg><span class="ml-3">Book Analyzer</span></div><div class="flex flex-wrap gap-2 gap-y-1"><div class="inline-flex items-center rounded-full border px-2.5 transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80 text-xs font-medium capitalize py-0.5" style="background-color:hsl(2, 70%, 90%);opacity:0.5">streaming</div><div class="inline-flex items-center rounded-full border px-2.5 transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80 text-xs font-medium capitalize py-0.5" style="background-color:hsl(-331, 70%, 90%);opacity:0.5">graphs</div></div></a></li><li data-sidebar="menu-item" class="group/menu-item relative" data-state="closed"><a class="peer/menu-button w-full gap-2 overflow-hidden p-2 text-left outline-none ring-sidebar-ring transition-[width,height,padding] focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&amp;&gt;span:last-child]:truncate [&amp;&gt;svg]:size-4 [&amp;&gt;svg]:shrink-0 hover:text-sidebar-accent-foreground h-8 text-sm flex items-start space-x-4 rounded-lg px-4 py-2 hover:bg-muted group flex flex-col w-full items-start h-full" data-sidebar="menu-button" data-size="default" data-active="false" href="/examples/get-recipe"><div class="flex flex-row items-center"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-utensils h-5 w-5"><path d="M3 2v7c0 1.1.9 2 2 2h4a2 2 0 0 0 2-2V2"></path><path d="M7 2v20"></path><path d="M21 15V2a5 5 0 0 0-5 5v6c0 1.1.9 2 2 2h3Zm0 0v7"></path></svg><span class="ml-3">Recipe Generator</span></div><div class="flex flex-wrap gap-2 gap-y-1"><div class="inline-flex items-center rounded-full border px-2.5 transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80 text-xs font-medium capitalize py-0.5" style="background-color:hsl(2, 70%, 90%);opacity:0.5">streaming</div><div class="inline-flex items-center rounded-full border px-2.5 transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80 text-xs font-medium capitalize py-0.5" style="background-color:hsl(-49, 70%, 90%);opacity:0.5">generative UIs</div></div></a></li><li data-sidebar="menu-item" class="group/menu-item relative" data-state="closed"><a class="peer/menu-button w-full gap-2 overflow-hidden p-2 text-left outline-none ring-sidebar-ring transition-[width,height,padding] focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu
1-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&amp;&gt;span:last-child]:truncate [&amp;&gt;svg]:size-4 [&amp;&gt;svg]:shrink-0 hover:text-sidebar-accent-foreground h-8 text-sm flex items-start space-x-4 rounded-lg px-4 py-2 hover:bg-muted group flex flex-col w-full items-start h-full" data-sidebar="menu-button" data-size="default" data-active="false" href="/examples/todo-llm"><div class="flex flex-row items-center"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check-check h-5 w-5"><path d="M18 6 7 17l-5-5"></path><path d="m22 10-7.5 7.5L13 16"></path></svg><span class="ml-3">Todo List</span></div><div class="flex flex-wrap gap-2 gap-y-1"><div class="inline-flex items-center rounded-full border px-2.5 transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80 text-xs font-medium capitalize py-0.5" style="background-color:hsl(2, 70%, 90%);opacity:0.5">streaming</div><div class="inline-flex items-center rounded-full border px-2.5 transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80 text-xs font-medium capitalize py-0.5" style="background-color:hsl(-193, 70%, 90%);opacity:0.5">Generative UIs</div></div></a></li></ul></div></div></div></div></div></div><main class="flex flex-col w-full h-full overflow-x-clip overflow-y-auto"><div class="flex flex-row p-2 gap-2"><button class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 hover:bg-accent hover:text-accent-foreground h-7 w-7" data-sidebar="trigger"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-panel-left"><rect width="18" height="18" x="3" y="3" rx="2"></rect><path d="M9 3v18"></path></svg><span class="sr-only">Toggle Sidebar</span></button><div class="text-muted-foreground flex items-center justify-center  text-center whitespace-nowrap">These examples are built with<!-- --> <a class="px-1 underline text-blue-600" target="_blank" href="https://docs.boundaryml.com"> <!-- -->BAML</a> </div></div><div class="flex h-full flex-col items-center p-8 gap-y-8 overflow-y-auto"><div class="w-full max-w-4xl"><div class="flex items-center gap-4 mb-8"><img alt="baml-logo" loading="lazy" width="64" height="64" decoding="async" data-nimg="1" style="color:transparent" srcSet="/_next/image?url=%2Fbaml.png&amp;w=64&amp;q=75 1x, /_next/image?url=%2Fbaml.png&amp;w=128&amp;q=75 2x" src="/_next/image?url=%2Fbaml.png&amp;w=128&amp;q=75"/><h1 class="font-bold text-4xl">BAML Examples</h1></div><div class="rounded-lg border bg-card text-card-foreground shadow-sm mb-8"><div class="flex flex-col space-y-1.5 p-6"><h3 class="text-2xl font-semibold leading-none tracking-tight">What is BAML?</h3><p class="text-sm text-muted-foreground">BAML is a structured prompting language that enables you to create dynamic and interactive prompts for your applications with type safety and real-time streaming capabilities.</p></div><div class="p-6 pt-0"><p class="text-sm text-muted-foreground mb-4">Explore the power of BAML through our interactive demos below. Each example showcases different aspects of BAML&#x27;s capabilities in building AI-powered applications.</p><a target="_blank" rel="noopener noreferrer" class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-input bg-background hover:bg-accent hover:text-accent-foreground h-10 px-4 py-2" href="https://docs.boundaryml.com"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-external-link mr-2 h-4 w-4"><path d="M15 3h6v6"></path><path d="M10 14 21 3"></path><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path></svg>BAML Documentation</a></div></div><h2 class="text-2xl font-semibold mb-4">Interactive Demos</h2><div class="grid gap-4 md:grid-cols-2"><div class="rounded-lg border bg-card text-card-foreground shadow-sm"><div class="flex flex-col space-y-1.5 p-6"><h3 class="text-2xl font-semibold leading-none tracking-tight flex items-center gap-2"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-file-text h-5 w-5"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"></path><path d="M14 2v4a2 2 0 0 0 2 2h4"></path><path d="M10 9H8"></path><path d="M16 13H8"></path><path d="M16 17H8"></path></svg>Resume Parser</h3><p class="text-sm text-muted-foreground">Efficiently parse and analyze resumes</p></div><div class="p-6 pt-0"><a class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-primary text-primary-foreground hover:bg-primary/90 h-10 px-4 py-2" href="/examples/resume-parser">Try Demo</a></div><div class="flex items-center p-6 pt-0"><div class="flex flex-wrap gap-2"><div class="inline-flex items-center rounded-full border px-2.5 py-0.5 transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80 text-xs font-medium capitalize" style="background-color:hsl(2, 70%, 90%)">streaming</div><div class="inline-flex items-center rounded-full border px-2.5 py-0.5 transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80 text-xs font-medium capitalize" style="background-color:hsl(-189, 70%, 90%)">structured outputs</div></div></div></div><div class="rounded-lg border bg-card text-card-foreground shadow-sm"><div class="flex flex-col space-y-1.5 p-6"><h3 class="text-2xl font-semibold leading-none tracking-tight flex items-center gap-2"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-message-circle h-5 w-5"><path d="M7.9 20A9 9 0 1 0 4 16.1L2 22Z"></path></svg>Q&amp;A Engine</h3><p class="text-sm text-muted-foreground">Intelligent Q&amp;A system with RAG</p></div><div class="p-6 pt-0"><a class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-primary text-primary-foreground hover:bg-primary/90 h-10 px-4 py-2" href="/examples/rag">Try Demo</a></div><div class="flex items-center p-6 pt-0"><div class="flex flex-wrap gap-2"><div class="inline-flex items-center rounded-full border px-2.5 py-0.5 transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80 text-xs font-medium capitalize" style="background-color:hsl(2, 70%, 90%)">streaming</div><div class="inline-flex items-center rounded-full border px-2.5 py-0.5 transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80 text-xs font-medium capitalize" style="background-color:hsl(248, 70%, 90%)">RAG</div><div class="inline-flex items-center rounded-full border px-2.5 py-0.5 transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80 text-xs font-medium capitalize" style="background-color:hsl(-42, 70%, 90%)">hallucination detection</div></div></div></div><div class="rounded-lg border bg-card text-card-foreground shadow-sm"><div class="flex flex-col space-y-1.5 p-6"><h3 class="text-2xl font-semibold leading-none tracking-tight flex items-center gap-2"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chart-no-axes-column-increasing h-5 w-5"><line x1="12" x2="12" y1="20" y2="10"></line><line x1="18" x2="18" y1="20" y2="4"></line><line x1="6" x2="6" y1="20" y2="16"></line></svg>Book Analyzer</h3><p class="text-sm text-muted-foreground">Analyze books with real-time streaming charts</p></div><div class="p-6 pt-0"><a class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-primary text-primary-foreground hover:bg-primary/90 h-10 px-4 py-2" href="/examples/book-analyzer">Try Demo</a></div><div class="flex items-center p-6 pt-0"><div class="flex flex-wrap gap-2"><div class="inline-flex items-center rounded-full border px-2.5 py-0.5 transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80 text-xs font-medium capitalize" style="background-color:hsl(2, 70%, 90%)">streaming</div><div class="inline-flex items-center rounded-full border px-2.5 py-0.5 transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80 text-xs font-medium capitalize" style="background-color:hsl(-331, 70%, 90%)">graphs</div></div></div></div><div class="rounded-lg border bg-card text-card-foreground shadow-sm"><div class="flex flex-col space-y-1.5 p-6"><h3 class="text-2xl font-semibold leading-none tracking-tight flex items-center gap-2"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-utensils h-5 w-5"><path d="M3 2v7c0 1.1.9 2 2 2h4a2 2 0 0 0 2-2V2"></path><path d="M7 2v20"></path>
1<path d="M21 15V2a5 5 0 0 0-5 5v6c0 1.1.9 2 2 2h3Zm0 0v7"></path></svg>Recipe Generator</h3><p class="text-sm text-muted-foreground"></p></div><div class="p-6 pt-0"><a class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-primary text-primary-foreground hover:bg-primary/90 h-10 px-4 py-2" href="/examples/get-recipe">Try Demo</a></div><div class="flex items-center p-6 pt-0"><div class="flex flex-wrap gap-2"><div class="inline-flex items-center rounded-full border px-2.5 py-0.5 transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80 text-xs font-medium capitalize" style="background-color:hsl(2, 70%, 90%)">streaming</div><div class="inline-flex items-center rounded-full border px-2.5 py-0.5 transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80 text-xs font-medium capitalize" style="background-color:hsl(-49, 70%, 90%)">generative UIs</div></div></div></div><div class="rounded-lg border bg-card text-card-foreground shadow-sm"><div class="flex flex-col space-y-1.5 p-6"><h3 class="text-2xl font-semibold leading-none tracking-tight flex items-center gap-2"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check-check h-5 w-5"><path d="M18 6 7 17l-5-5"></path><path d="m22 10-7.5 7.5L13 16"></path></svg>Todo List</h3><p class="text-sm text-muted-foreground">Collaborate on Todo Items with an LLM</p></div><div class="p-6 pt-0"><a class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-primary text-primary-foreground hover:bg-primary/90 h-10 px-4 py-2" href="/examples/todo-llm">Try Demo</a></div><div class="flex items-center p-6 pt-0"><div class="flex flex-wrap gap-2"><div class="inline-flex items-center rounded-full border px-2.5 py-0.5 transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80 text-xs font-medium capitalize" style="background-color:hsl(2, 70%, 90%)">streaming</div><div class="inline-flex items-center rounded-full border px-2.5 py-0.5 transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80 text-xs font-medium capitalize" style="background-color:hsl(-193, 70%, 90%)">Generative UIs</div></div></div></div></div></div></div><!--$--><!--/$--><!--$--><!--/$--></main></div>
1<script src="/_next/static/chunks/webpack-855fd08b67604560.js" async=""></script>
1<script>(self.__next_f=self.__next_f||[]).push([0])</script>
1<script>self.__next_f.push([1,"1:\"$Sreact.fragment\"\n2:I[69015,[\"568\",\"static/chunks/568-d82cebc65046f439.js\",\"100\",\"static/chunks/100-ba93c8a2cafbb640.js\",\"806\",\"static/chunks/806-9cf45983f2574f45.js\",\"445\",\"static/chunks/445-8f0ae43e6bf95aac.js\",\"688\",\"static/chunks/688-a27696ead9c48ecd.js\",\"177\",\"static/chunks/app/layout-732a9bec52873599.js\"],\"SidebarProvider\"]\n3:I[34688,[\"568\",\"static/chunks/568-d82cebc65046f439.js\",\"100\",\"static/chunks/100-ba93c8a2cafbb640.js\",\"806\",\"static/chunks/806-9cf45983f2574f45.js\",\"445\",\"static/chunks/445-8f0ae43e6bf95aac.js\",\"688\",\"static/chunks/688-a27696ead9c48ecd.js\",\"177\",\"static/chunks/app/layout-732a9bec52873599.js\"],\"AppSidebar\"]\n4:I[57124,[\"568\",\"static/chunks/568-d82cebc65046f439.js\",\"100\",\"static/chunks/100-ba93c8a2cafbb640.js\",\"806\",\"static/chunks/806-9cf45983f2574f45.js\",\"445\",\"static/chunks/445-8f0ae43e6bf95aac.js\",\"688\",\"static/chunks/688-a27696ead9c48ecd.js\",\"177\",\"static/chunks/app/layout-732a9bec52873599.js\"],\"default\"]\n5:I[80207,[],\"\"]\n6:I[73779,[],\"\"]\n7:I[71562,[],\"ClientPageRoot\"]\n8:I[14521,[\"568\",\"static/chunks/568-d82cebc65046f439.js\",\"100\",\"static/chunks/100-ba93c8a2cafbb640.js\",\"806\",\"static/chunks/806-9cf45983f2574f45.js\",\"445\",\"static/chunks/445-8f0ae43e6bf95aac.js\",\"688\",\"static/chunks/688-a27696ead9c48ecd.js\",\"974\",\"static/chunks/app/page-1e7d5a6f45885bca.js\"],\"default\"]\n9:I[94541,[],\"MetadataBoundary\"]\nb:I[94541,[],\"OutletBoundary\"]\ne:I[73595,[],\"AsyncMetadataOutlet\"]\n10:I[94541,[],\"ViewportBoundary\"]\n12:I[14826,[],\"\"]\n13:\"$Sreact.suspense\"\n14:I[73595,[],\"AsyncMetadata\"]\n:HL[\"/_next/static/media/e4af272ccee01ff0-s.p.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/css/15d2c895a69a97d9.css\",\"style\"]\n:HL[\"/_next/static/css/1519ddf60b2ae011.css\",\"style\"]\n"])</script>
1<script>self.__next_f.push([1,"0:{\"P\":null,\"b\":\"OCyi6h-x7CzdJuooiLIBy\",\"p\":\"\",\"c\":[\"\",\"\"],\"i\":false,\"f\":[[[\"\",{\"children\":[\"__PAGE__\",{}]},\"$undefined\",\"$undefined\",true],[\"\",[\"$\",\"$1\",\"c\",{\"children\":[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/15d2c895a69a97d9.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/1519ddf60b2ae011.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}]],[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"children\":[\"$\",\"$L2\",null,{\"children\":[[\"$\",\"$L3\",null,{}],[\"$\",\"main\",null,{\"className\":\"flex flex-col w-full h-full overflow-x-clip overflow-y-auto\",\"children\":[[\"$\",\"$L4\",null,{}],[\"$\",\"$L5\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L6\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":{\"fontFamily\":\"system-ui,\\\"Segoe UI\\\",Roboto,Helvetica,Arial,sans-serif,\\\"Apple Color Emoji\\\",\\\"Segoe UI Emoji\\\"\",\"height\":\"100vh\",\"textAlign\":\"center\",\"display\":\"flex\",\"flexDirection\":\"column\",\"alignItems\":\"center\",\"justifyContent\":\"center\"},\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"style\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\"}}],[\"$\",\"h1\",null,{\"className\":\"next-error-h1\",\"style\":{\"display\":\"inline-block\",\"margin\":\"0 20px 0 0\",\"padding\":\"0 23px 0 0\",\"fontSize\":24,\"fontWeight\":500,\"verticalAlign\":\"top\",\"lineHeight\":\"49px\"},\"children\":404}],[\"$\",\"div\",null,{\"style\":{\"display\":\"inline-block\"},\"children\":[\"$\",\"h2\",null,{\"style\":{\"fontSize\":14,\"fontWeight\":400,\"lineHeight\":\"49px\",\"margin\":0},\"children\":\"This page could not be found.\"}]}]]}]}]],[]],\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}]]}]}]}]]}],{\"children\":[\"__PAGE__\",[\"$\",\"$1\",\"c\",{\"children\":[[\"$\",\"$L7\",null,{\"Component\":\"$8\",\"searchParams\":{},\"params\":{}}],[\"$\",\"$L9\",null,{\"children\":\"$La\"}],null,[\"$\",\"$Lb\",null,{\"children\":[\"$Lc\",\"$Ld\",[\"$\",\"$Le\",null,{\"promise\":\"$@f\"}]]}]]}],{},null,false]},null,false],[\"$\",\"$1\",\"h\",{\"children\":[null,[\"$\",\"$1\",\"Jvlv4MuzrMonpvmUnGwKb\",{\"children\":[[\"$\",\"$L10\",null,{\"children\":\"$L11\"}],[\"$\",\"meta\",null,{\"name\":\"next-size-adjust\",\"content\":\"\"}]]}],null]}],false]],\"m\":\"$undefined\",\"G\":[\"$12\",\"$undefined\"],\"s\":false,\"S\":false}\n"])</script>
1<script>self.__next_f.push([1,"a:[\"$\",\"$13\",null,{\"fallback\":null,\"children\":[\"$\",\"$L14\",null,{\"promise\":\"$@15\"}]}]\nd:null\n11:[[\"$\",\"meta\",\"0\",{\"charSet\":\"utf-8\"}],[\"$\",\"meta\",\"1\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}]]\nc:null\n15:{\"metadata\":[[\"$\",\"title\",\"0\",{\"children\":\"BAML Examples\"}],[\"$\",\"meta\",\"1\",{\"name\":\"description\",\"content\":\"Examples using the BAML structured prompting language\"}],[\"$\",\"link\",\"2\",{\"rel\":\"icon\",\"href\":\"/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"16x16\"}]],\"error\":null,\"digest\":\"$undefined\"}\nf:{\"metadata\":\"$15:metadata\",\"error\":null,\"digest\":\"$undefined\"}\n"])</script>
1</body></html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.