@tanstack/create 0.49.1

package/src/frameworks/react/examples/events/assets/src/components/RemyButton.tsx

@@ -0,0 +1,18 @@
+import { ChefHat, ChevronRight } from "lucide-react";
+import { showRemyAssistant } from "./RemyAssistant";
+
+export default function RemyButton() {
+  return (
+    <button
+      onClick={() => showRemyAssistant.setState(true)}
+      className="w-full flex items-center justify-between px-4 py-2.5 rounded-lg bg-linear-to-r from-orange-500 to-red-600 text-white hover:opacity-90 transition-opacity"
+      aria-label="Open Remy Assistant"
+    >
+      <div className="flex items-center gap-2">
+        <ChefHat size={24} />
+        <span className="text-sm">Remy</span>
+      </div>
+      <ChevronRight className="w-4 h-4" />
+    </button>
+  );
+}

package/src/frameworks/react/examples/events/assets/src/components/SpeakerCard.tsx

@@ -0,0 +1,67 @@
+import { Link } from '@tanstack/react-router'
+import { MapPin } from 'lucide-react'
+
+import { type Speaker } from 'content-collections'
+
+import { Card, CardContent } from '@/components/ui/card'
+
+interface SpeakerCardProps {
+  speaker: Speaker
+  featured?: boolean
+}
+
+export default function SpeakerCard({ speaker, featured = false }: SpeakerCardProps) {
+  return (
+    <Link
+      to={`/speakers/${speaker.slug}`}
+      className="group relative block"
+    >
+      <Card
+        className={`relative overflow-hidden bg-card border-border/50 card-hover
+          ${featured ? 'aspect-square' : 'aspect-square'}
+          hover:border-copper/50`}
+      >
+        {/* Headshot */}
+        <div className="absolute inset-0">
+          <img 
+            src={`/${speaker.headshot}`} 
+            alt={speaker.name}
+            className="w-full h-full object-cover"
+          />
+          <div className="absolute inset-0 bg-gradient-to-t from-charcoal via-charcoal/50 to-transparent" />
+        </div>
+
+        {/* Content overlay */}
+        <CardContent className="absolute bottom-0 left-0 right-0 p-6 z-10">
+          <div className="space-y-2">
+            {/* Specialty tag */}
+            <span className="inline-block px-3 py-1 text-xs font-medium tracking-wider uppercase bg-copper/20 text-copper-light rounded-full border border-copper/30">
+              {speaker.specialty}
+            </span>
+            
+            {/* Name */}
+            <h3 className="font-display text-2xl font-semibold text-cream group-hover:text-gold transition-colors">
+              {speaker.name}
+            </h3>
+            
+            {/* Title & Restaurant */}
+            <p className="text-cream/70 font-body text-lg">
+              {speaker.title}
+            </p>
+            
+            {/* Location */}
+            <div className="flex items-center gap-2 text-cream/50 text-sm">
+              <MapPin className="w-3.5 h-3.5" />
+              <span>{speaker.restaurant}, {speaker.location}</span>
+            </div>
+          </div>
+        </CardContent>
+
+        {/* Decorative corner accent */}
+        <div className="absolute top-0 right-0 w-20 h-20 overflow-hidden">
+          <div className="absolute top-0 right-0 w-28 h-28 bg-gradient-to-bl from-copper/20 to-transparent transform rotate-45 translate-x-14 -translate-y-14" />
+        </div>
+      </Card>
+    </Link>
+  )
+}

package/src/frameworks/react/examples/events/assets/src/components/TalkCard.tsx

@@ -0,0 +1,77 @@
+import { Link } from '@tanstack/react-router'
+import { Clock, User } from 'lucide-react'
+
+import { type Talk } from 'content-collections'
+
+import { Card, CardContent } from '@/components/ui/card'
+
+interface TalkCardProps {
+  talk: Talk
+  featured?: boolean
+}
+
+export default function TalkCard({ talk, featured = false }: TalkCardProps) {
+  return (
+    <Link
+      to={`/talks/${talk.slug}`}
+      className="group relative block"
+    >
+      <Card
+        className={`relative overflow-hidden bg-card border-border/50 card-hover
+          ${featured ? 'aspect-[16/10]' : 'aspect-[16/9]'}
+          hover:border-gold/50`}
+      >
+        {/* Image */}
+        <div className="absolute inset-0">
+          <img 
+            src={`/${talk.image}`} 
+            alt={talk.title}
+            className="w-full h-full object-cover"
+          />
+          <div className="absolute inset-0 bg-gradient-to-t from-charcoal via-charcoal/60 to-transparent" />
+        </div>
+
+        {/* Content overlay */}
+        <CardContent className="absolute bottom-0 left-0 right-0 p-6 z-10">
+          <div className="space-y-3">
+            {/* Topics */}
+            <div className="flex flex-wrap gap-2">
+              {talk.topics.slice(0, 2).map((topic) => (
+                <span 
+                  key={topic}
+                  className="px-2.5 py-0.5 text-xs font-medium tracking-wide uppercase bg-gold/15 text-gold border border-gold/30 rounded-full"
+                >
+                  {topic}
+                </span>
+              ))}
+            </div>
+            
+            {/* Title */}
+            <h3 className="font-display text-xl font-semibold text-cream group-hover:text-gold transition-colors leading-tight">
+              {talk.title}
+            </h3>
+            
+            {/* Speaker & Duration */}
+            <div className="flex items-center gap-4 text-cream/60 text-sm">
+              <div className="flex items-center gap-1.5">
+                <User className="w-3.5 h-3.5" />
+                <span>{talk.speaker}</span>
+              </div>
+              <div className="flex items-center gap-1.5">
+                <Clock className="w-3.5 h-3.5" />
+                <span>{talk.duration}</span>
+              </div>
+            </div>
+          </div>
+        </CardContent>
+
+        {/* Decorative accent */}
+        <div className="absolute top-4 right-4">
+          <div className="w-8 h-8 rounded-full bg-gold/10 border border-gold/20 flex items-center justify-center">
+            <span className="text-gold/60 text-xs font-display">✦</span>
+          </div>
+        </div>
+      </Card>
+    </Link>
+  )
+}

package/src/frameworks/react/examples/events/assets/src/components/ui/card.tsx

@@ -0,0 +1,92 @@
+import * as React from 'react'
+
+import { cn } from '@/lib/utils'
+
+function Card({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="card"
+      className={cn(
+        'bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="card-header"
+      className={cn(
+        '@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="card-title"
+      className={cn('leading-none font-semibold', className)}
+      {...props}
+    />
+  )
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="card-description"
+      className={cn('text-muted-foreground text-sm', className)}
+      {...props}
+    />
+  )
+}
+
+function CardAction({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="card-action"
+      className={cn(
+        'col-start-2 row-span-2 row-start-1 self-start justify-self-end',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="card-content"
+      className={cn('px-6', className)}
+      {...props}
+    />
+  )
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="card-footer"
+      className={cn('flex items-center px-6 [.border-t]:pt-6', className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardAction,
+  CardDescription,
+  CardContent,
+}

package/src/frameworks/react/examples/events/assets/src/lib/conference-ai-hook.ts

@@ -0,0 +1,26 @@
+import {
+  fetchServerSentEvents,
+  useChat,
+  createChatClientOptions,
+} from '@tanstack/ai-react'
+import type { InferChatMessages } from '@tanstack/ai-react'
+
+// Default chat options for type inference
+const defaultChatOptions = createChatClientOptions({
+  connection: fetchServerSentEvents('/api/remy-chat'),
+})
+
+export type ConferenceChatMessages = InferChatMessages<typeof defaultChatOptions>
+
+export const useConferenceChat = (speakerSlug?: string, talkSlug?: string) => {
+  const chatOptions = createChatClientOptions({
+    connection: fetchServerSentEvents('/api/remy-chat', {
+      body: {
+        speakerSlug,
+        talkSlug,
+      },
+    }),
+  })
+
+  return useChat(chatOptions)
+}

package/src/frameworks/react/examples/events/assets/src/lib/conference-tools.ts

@@ -0,0 +1,210 @@
+import { toolDefinition } from '@tanstack/ai'
+import { z } from 'zod'
+
+import { allSpeakers, allTalks } from 'content-collections'
+
+// Tool definition for getting a speaker by slug
+export const getSpeakerBySlugToolDef = toolDefinition({
+  name: 'getSpeakerBySlug',
+  description:
+    'Get the full profile and bio of a specific speaker. Use this when asked about a particular speaker.',
+  inputSchema: z.object({
+    slug: z.string().describe('The slug of the speaker'),
+  }),
+  outputSchema: z.object({
+    name: z.string(),
+    title: z.string(),
+    specialty: z.string(),
+    restaurant: z.string(),
+    location: z.string(),
+    bio: z.string(),
+    awards: z.array(z.string()),
+  }),
+})
+
+// Server implementation
+export const getSpeakerBySlug = getSpeakerBySlugToolDef.server(({ slug }) => {
+  const speaker = allSpeakers.find((s) => s.slug === slug)
+  if (!speaker) {
+    return {
+      name: 'Speaker not found',
+      title: '',
+      specialty: '',
+      restaurant: '',
+      location: '',
+      bio: 'The requested speaker was not found.',
+      awards: [],
+    }
+  }
+  return {
+    name: speaker.name,
+    title: speaker.title,
+    specialty: speaker.specialty,
+    restaurant: speaker.restaurant,
+    location: speaker.location,
+    bio: speaker.content,
+    awards: speaker.awards || [],
+  }
+})
+
+// Tool definition for getting a talk by slug
+export const getTalkBySlugToolDef = toolDefinition({
+  name: 'getTalkBySlug',
+  description:
+    'Get the full details of a specific session/talk. Use this when asked about a particular session.',
+  inputSchema: z.object({
+    slug: z.string().describe('The slug of the talk'),
+  }),
+  outputSchema: z.object({
+    title: z.string(),
+    speaker: z.string(),
+    duration: z.string(),
+    topics: z.array(z.string()),
+    description: z.string(),
+  }),
+})
+
+// Server implementation
+export const getTalkBySlug = getTalkBySlugToolDef.server(({ slug }) => {
+  const talk = allTalks.find((t) => t.slug === slug)
+  if (!talk) {
+    return {
+      title: 'Session not found',
+      speaker: '',
+      duration: '',
+      topics: [],
+      description: 'The requested session was not found.',
+    }
+  }
+  return {
+    title: talk.title,
+    speaker: talk.speaker,
+    duration: talk.duration,
+    topics: talk.topics,
+    description: talk.content,
+  }
+})
+
+// Tool definition for listing all speakers
+export const getAllSpeakersToolDef = toolDefinition({
+  name: 'getAllSpeakers',
+  description:
+    'Get a list of all speakers at the conference with their names, specialties, and restaurants.',
+  inputSchema: z.object({}),
+  outputSchema: z.array(
+    z.object({
+      slug: z.string(),
+      name: z.string(),
+      specialty: z.string(),
+      restaurant: z.string(),
+      location: z.string(),
+    }),
+  ),
+})
+
+// Server implementation
+export const getAllSpeakers = getAllSpeakersToolDef.server(() => {
+  return allSpeakers.map((speaker) => ({
+    slug: speaker.slug,
+    name: speaker.name,
+    specialty: speaker.specialty,
+    restaurant: speaker.restaurant,
+    location: speaker.location,
+  }))
+})
+
+// Tool definition for listing all talks
+export const getAllTalksToolDef = toolDefinition({
+  name: 'getAllTalks',
+  description:
+    'Get a list of all sessions/talks at the conference with their titles, speakers, and topics.',
+  inputSchema: z.object({}),
+  outputSchema: z.array(
+    z.object({
+      slug: z.string(),
+      title: z.string(),
+      speaker: z.string(),
+      duration: z.string(),
+      topics: z.array(z.string()),
+    }),
+  ),
+})
+
+// Server implementation
+export const getAllTalks = getAllTalksToolDef.server(() => {
+  return allTalks.map((talk) => ({
+    slug: talk.slug,
+    title: talk.title,
+    speaker: talk.speaker,
+    duration: talk.duration,
+    topics: talk.topics,
+  }))
+})
+
+// Tool definition for searching conference content
+export const searchConferenceToolDef = toolDefinition({
+  name: 'searchConference',
+  description:
+    'Search for speakers or sessions by keyword. Use this to find content matching user queries about topics, techniques, or names.',
+  inputSchema: z.object({
+    query: z.string().describe('The search query'),
+  }),
+  outputSchema: z.object({
+    speakers: z.array(
+      z.object({
+        slug: z.string(),
+        name: z.string(),
+        specialty: z.string(),
+        restaurant: z.string(),
+      }),
+    ),
+    talks: z.array(
+      z.object({
+        slug: z.string(),
+        title: z.string(),
+        speaker: z.string(),
+        topics: z.array(z.string()),
+      }),
+    ),
+  }),
+})
+
+// Server implementation
+export const searchConference = searchConferenceToolDef.server(({ query }) => {
+  const queryLower = query.toLowerCase()
+  
+  const matchingSpeakers = allSpeakers
+    .filter(
+      (speaker) =>
+        speaker.name.toLowerCase().includes(queryLower) ||
+        speaker.specialty.toLowerCase().includes(queryLower) ||
+        speaker.restaurant.toLowerCase().includes(queryLower) ||
+        speaker.content.toLowerCase().includes(queryLower),
+    )
+    .map((speaker) => ({
+      slug: speaker.slug,
+      name: speaker.name,
+      specialty: speaker.specialty,
+      restaurant: speaker.restaurant,
+    }))
+
+  const matchingTalks = allTalks
+    .filter(
+      (talk) =>
+        talk.title.toLowerCase().includes(queryLower) ||
+        talk.speaker.toLowerCase().includes(queryLower) ||
+        talk.topics.some((topic) => topic.toLowerCase().includes(queryLower)) ||
+        talk.content.toLowerCase().includes(queryLower),
+    )
+    .map((talk) => ({
+      slug: talk.slug,
+      title: talk.title,
+      speaker: talk.speaker,
+      topics: talk.topics,
+    }))
+
+  return {
+    speakers: matchingSpeakers,
+    talks: matchingTalks,
+  }
+})

package/src/frameworks/react/examples/events/assets/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}

package/src/frameworks/react/examples/events/assets/src/routes/api.remy-chat.ts

@@ -0,0 +1,121 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { chat, maxIterations, toServerSentEventsResponse } from '@tanstack/ai'
+import { anthropicText } from '@tanstack/ai-anthropic'
+import { openaiText } from '@tanstack/ai-openai'
+import { geminiText } from '@tanstack/ai-gemini'
+import { ollamaText } from '@tanstack/ai-ollama'
+
+import {
+  getSpeakerBySlug,
+  getTalkBySlug,
+  getAllSpeakers,
+  getAllTalks,
+  searchConference,
+} from '@/lib/conference-tools'
+
+export const Route = createFileRoute('/api/remy-chat')({
+  server: {
+    handlers: {
+      POST: async ({ request }) => {
+        const requestSignal = request.signal
+
+        if (requestSignal.aborted) {
+          return new Response(null, { status: 499 })
+        }
+
+        const abortController = new AbortController()
+
+        try {
+          const body = await request.json()
+          const { messages, speakerSlug, talkSlug } = body
+          const data = body.data || {}
+
+          const SYSTEM_PROMPT = `You are Remy, a charming and knowledgeable culinary assistant for the Haute Pâtisserie 2026 conference in Paris. You have a warm, enthusiastic personality and deep appreciation for the art of pastry and baking.
+
+PERSONALITY:
+- Speak with warmth and a touch of French flair (occasional "magnifique!", "c'est parfait!", etc.)
+- Be genuinely passionate about pastry, bread, and culinary arts
+- Knowledgeable about techniques, ingredients, and the history of baking
+- Helpful and encouraging to both novices and professionals
+
+CAPABILITIES:
+1. Use getSpeakerBySlug to get detailed information about a specific speaker
+2. Use getTalkBySlug to get detailed information about a specific session
+3. Use getAllSpeakers to see the complete speaker lineup
+4. Use getAllTalks to see all available sessions
+5. Use searchConference to find speakers or sessions matching a topic or keyword
+
+INSTRUCTIONS:
+- When asked about the conference, speakers, or sessions, use your tools to provide accurate information
+- Help attendees find sessions that match their interests
+- Share enthusiasm about the speakers and their expertise
+- If asked about pastry techniques, you can provide general knowledge while recommending relevant sessions
+- Keep responses conversational but informative
+- When recommending sessions, explain why they might be interesting based on the user's query
+
+${speakerSlug ? `CONTEXT: The user is viewing the profile of the speaker with slug "${speakerSlug}".` : ''}
+${talkSlug ? `CONTEXT: The user is viewing the session with slug "${talkSlug}".` : ''}
+
+Remember: You are the friendly face of Haute Pâtisserie 2026. Make every attendee feel welcome and excited about the culinary journey ahead!`
+
+          // Determine the best available provider
+          let provider: string = 'ollama'
+          let model: string = 'mistral:7b'
+          if (process.env.ANTHROPIC_API_KEY) {
+            provider = 'anthropic'
+            model = 'claude-haiku-4-5'
+          } else if (process.env.OPENAI_API_KEY) {
+            provider = 'openai'
+            model = 'gpt-4o'
+          } else if (process.env.GEMINI_API_KEY) {
+            provider = 'gemini'
+            model = 'gemini-2.0-flash-exp'
+          }
+
+          // Adapter factory pattern for multi-vendor support
+          const adapterConfig = {
+            anthropic: () =>
+              anthropicText((model || 'claude-haiku-4-5') as any),
+            openai: () => openaiText((model || 'gpt-4o') as any),
+            gemini: () => geminiText((model || 'gemini-2.0-flash-exp') as any),
+            ollama: () => ollamaText((model || 'mistral:7b') as any),
+          }
+
+          const adapter = adapterConfig[provider]()
+
+          const stream = chat({
+            adapter,
+            tools: [
+              getSpeakerBySlug,
+              getTalkBySlug,
+              getAllSpeakers,
+              getAllTalks,
+              searchConference,
+            ],
+            systemPrompts: [SYSTEM_PROMPT],
+            agentLoopStrategy: maxIterations(5),
+            messages,
+            abortController,
+          })
+
+          return toServerSentEventsResponse(stream, { abortController })
+        } catch (error: any) {
+          console.error('Remy chat error:', error)
+          if (error.name === 'AbortError' || abortController.signal.aborted) {
+            return new Response(null, { status: 499 })
+          }
+          return new Response(
+            JSON.stringify({
+              error: 'Failed to process chat request',
+              message: error.message,
+            }),
+            {
+              status: 500,
+              headers: { 'Content-Type': 'application/json' },
+            },
+          )
+        }
+      },
+    },
+  },
+})